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

侧边栏