前言
上星期将wedo的手机端写出来了之后，带哥挂念的管理端也被我搞出来了。由于是笔记本开发的，连接上显示器之后样式就可能乱了（可能是不同的显示屏大小不一样，也可能是我比较菜）。先写点总结吧，就当是复习vue了。(我用的是element ui)
开搞
1.在写之前一定要把结构给捋清楚，vue项目就像是一个树，App.vue就是一个根，当然可以根上再写个根，便于扩展。我在做wedo的时候又增加了个index.vue作为其他的根并将它引进App.vue。
例图
2.创建了一个Login.vue，作为登录页面，然后在router中配置他做为Index.vue的孩子，然后在Index.vue中写上<router-view/>,这个<router-view/>很重要，没他页面就出不来。就像这样
index和login的关系
例图
3.创建Main.vue作为主页面，当登录成功之后就进入的页面，他是和Login.vue同级的
例图
4.在Main.vue中使用elementui的导航菜单，在这些导航中用他自带按照路由跳转的方式跳转，他按照<el-menu-item index="/index/mains/comment">管理评论信息</el-menu-item>这个index的路径跳转，要把之后里面跳转的路由全部写到Main.vue的子路由下，并且在Main.vue里面也要有<router-view/>不然子路由下的东西不出来。
例图
默认跳转页面
5.通过路由传递对象，和uniapp封装数据的方式一样，只是跳转的方式不一样，
跳转路由+参数
拿到参数
6.我之前在uniapp中数组内容的交换是用的forEarch，带哥说太low了，他还想用ES6，可就是报错，我不太会ES6的语法，因此就用了concat()方法，这个应该是js里面的，他是用于连接两个或多个数组，属于浅拷贝吧！
例图
7.添加和修改使用同一个模态框
子组件的模态框
父组件设置并传递值
子组件通过判断传过来是否有值，没值就变为添加，有值就变为修改
8.面包屑传值
在跳转后的页面用生命周期函数拿一下值就行
9.路由拦截
在要跳转的所有路由上都添上
meta: {
requireAuth: true//拦截
},
在登录页面判断死数据，如果不为空就在sessionStorage中设置一个变量
sessionStorage.setItem("token", 'true');
就像这样
在main.js中判断要跳转的页面
router.beforeEach((to, from, next) => {//到哪去,从哪来,然后干嘛
if (to.meta.requireAuth) {//判断哪个要拦截
if (sessionStorage.getItem("token") === 'true') {//判断存的变量
next()//如果是就继续跳转
} else {//如果不是那就跳转到登录页面
next({
path: '/index/login',
/*query: {redirect: to.fullPath}*/
})
}
} else {//如果不拦截直接跳转
if (sessionStorage.getItem("token") === 'true') {
next('/index/mains');
} else {
next();
}
}
}
);
当退出的时候可以设置sessionStorage.removeItem("token");，然后再跳转到登录页面
10.使用vuex存储变量，在登录的时候将账号和密码存进vuex中，之后再在主页面中取出来
存进actions
存进statue
取出
11.vue-quill-editor的使用（这是我找的一个大神的博客看着搞的，但是他的地址我给搞没了，找不到了，希望大神看到我的博客内容请勿责怪）
npm install vue-quill-editor --save//安装
//main.js使用
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);
//在一个,vue文件中使用
<quill-editor class="editor" ref="myTextEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" @change="onEditorChange($event)"/>
data() {
return {
content: '',
item: {},
input: "",
editorOption: {
modules: {
toolbar: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{header: 1}, {header: 2}], // 1、2 级标题
[{list: "ordered"}, {list: "bullet"}], // 有序、无序列表
[{script: "sub"}, {script: "super"}], // 上标/下标
[{indent: "-1"}, {indent: "+1"}], // 缩进
// [{'direction': 'rtl'}], // 文本方向
[{size: ["small", false, "large", "huge"]}], // 字体大小
[{header: [1, 2, 3, 4, 5, 6, false]}], // 标题
[{color: []}, {background: []}], // 字体颜色、字体背景颜色
[{font: []}], // 字体种类
[{align: []}], // 对齐方式
['clean'], // 清除文本格式
["link", "image", "video"], // 链接、图片、视频
], //工具菜单栏配置
},
placeholder: '章节内容', //提示
readyOnly: false, //是否只读
theme: 'snow', //主题 snow/bubble
syntax: true, //语法检测
}
}
},
methods: {
// 失去焦点
onEditorBlur(editor) {},
// 获得焦点
onEditorFocus(editor) {},
// 开始
onEditorReady(editor) {},
// 值发生变化
onEditorChange(editor) {
this.content = editor.html;
console.log(editor);
},
},
<style scoped>
.editor {
line-height: normal !important;
height: 400px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0;
content: '保存';
padding-right: 0;
}
.ql-snow .ql-tooltip[data-mode=video]::before {
content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
content: '32px';
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: '标题6';
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
content: '等宽字体';
}
</style>
在此我贴上另一个大神的地址地址
写在最后
1.终于把基本的页面给写完了，剩下的就是开始对接口和提高用户友好度了，不过这都是可以解决的。如果想要了解具体的页面写法可以私聊我哦!
2.最近的后端，带哥还是比较愁的，之前接口和表结构都想的比较复杂，导致现在要改接口和表，真是一大失误啊！不过这只是我们第一次前后端完全分离，毕竟万事开头难嘛！
3.最后我还是贴上带哥，这个小哥哥可是年轻有为，长得帅还有钱，这些都不是关键，关键还是技术好！嗯！编码技术！可以私聊他后端技术哦！想要聊骚的就出门左拐吧！地址
网友评论