关于javascript:中后台开发-小慕读书

$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存入后果 而后合并过滤后的数据

侧边栏