中后台开发 小慕读书

视频地址

$on
push方法 一个事件绑定多个方法
$emit

npm install @vue/cli -g

npm install @vue/cli -g
cnpm i element-ui -s

使用element-ui

import App from './App.vue'  
import ElementUI from 'element-ui';
Vue.use(ElementUI);

按需加载
cnpm install babel-plugin-component -D

module.exports = {  
  presets: [[  
    '@vue/cli-plugin-babel/preset'  
 ],  
 plugins: [  
      "component",  
 {  
      "libraryName": "element-ui",  
 "styleLibraryName": "theme-chalk"  
 }  
  ] ]
}

插件引用
vue add element
`<el-form inline :model="data" :rules="rules" ref="form">
<el-form-item label="审批人" prop="user">
<el-input v-model="data.user" placeholder="审批人"></el-input>
</el-form-item>
`
使用 rules进行校验

data(){  
  const userValidator = (rule,value,callback)=>{  
    if (value.length >3){  
      callback()  
    }else {  
      callback(new Error('用户长度必须大于3'))  
    }  
  
  }  
  return {  
    data:{  
      user:"sam",  
 region:"区域二"  
 },  
 rules:{  
      user:[  
        {require:true,trigger:'change',message:'用户名必须录入'},{validator:userValidator,trigger:'change'}  
      ]  
  
  
    }  
  }  
},

使用form进行校验

onSubmit(){  
  console.log(this.data)  
  this.$ref.form.validate((isValid,errors)=>{  
    console.log(isValid,errors)  
  })  
}

使用:validate-status="status"控制

showSuccess() {  
 this.status = 'success'  
 this.error = ''  
},  
showError() {  
  this.status = 'success'  
 this.error = ""  
  
}, showValidating() {  
    this.status = ""  
this.error = 'validating'  
},

size
vuex 是一个vue对象 响应式Dep对象
vue-router hashHistory push 局部路由守卫
路由元信息
{path:'/a',component:HelloWorld,meta:{title:'A'}}
全局路由守卫更改标题（建议）

router.beforeEach((to, from, next) => {  
    if (this.$route.meta.title) {  
        document.title = this.$route.meta.title  
 } else {  
        document.title = 'ch6-2'  
 }  
    next()  
})

vue mixin

Vue.mixin({  
    beforeCreate() {  
        if (this.$route.meta.title) {  
            document.title = this.$route.meta.title  
 } else {  
            document.title = 'ch6-2'  
 }  
    }  
})

路由API 动态添加路由

addRouter(){  
  this.$router.addRoutes([  
      {path:'/hello',component:HelloWorld}  
  ])  
},

安装ngnix

安装homebrew 国内脚本

`/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"`  
`/bin/zsh -c "$(curl -fsSL https://raw.githubusercontent.com/Jefsky/CNHomebrew/master/CNHomebrew.sh)"`

ruby -e "$(curl -fsSL https://raw.githubusercontent...)"

brew install nginx

修改 /usr/local/etc/nginx/nginx.conf

#user mac owner;
 include /Users/mac/upload/upload.conf;

upload.conf
server {
charset utf-8;
listen 8089;
server_name http_host;
root /Users/mac/upload/;
autoindex on;
add_header Cache-Control "no-cache, must-revalidate";
location / {
add_header Access-Control-Allow-Origin *;
}
}

执行sql脚本
source book.sql;
阿里云免费https证书

用户登录

源码分析
访问未知路径返回404

访问 /xx 从cookies中获取token
token不存在 看路由是否在白名单中 存在就访问地址
如果不在白名单跳转登录并拼接地址

如果token存在
如果访问login页面直接重定向到主页面
如果不是login 就访问用户角色 动态生成路由 并用replace模式访问路由 如果出现异常就清除token 并访问login并添加路由地址

生成动态路由

从router中读取用户角色
如果为admin 直接合并asyncrouter
如果为用户 遍历routes 有权限 遍历children并过滤 更新临时的children存入结果 然后合并过滤后的数据

侧边栏

重定向

login重定向 通过watch $route 监听参数变化
对参数进行提取 并跳转重定向
动态路由
redirect/*path*
获取

const { params,query} = this.$route
const { path} = params
this.$router.replace({ path:'/' + path,query})

面包屑导航

el-breadcrumb
axios
axios.create 返回request函数发送
request 请求拦截 响应拦截器进行code判断请求进行异常处理
reduce 叠加

POST格式校验

npm i -S express-validator

JWT token检验 SHA256算法加密
session 保存在服务端 cookie