https://element.eleme.cn/

基本案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.         <!-- 引入样式 -->
  9.         <link
  10.         rel="stylesheet"
  11.         href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
  12.         />
  13.         <title>Document</title>
  14.     </head>
  15.     <body>
  16.     <div id="app">
  17.         <el-button @click="visible = true">Button</el-button>
  18.         <el-dialog :visible.sync="visible" title="Hello world">
  19.             <p>Try Element</p>
  20.         </el-dialog>
  22.     </div>
  24.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  25.     <!-- 引入组件库 -->
  26.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  27.     <script>
  28.         let app = new Vue({
  29.             el:'#app',
  30.             data:{
  31.                 visible:false
  32.             }
  33.         });
  34.     </script>
  35.     </body>
  36. </html>

布局

通过基础的 24 分栏，迅速简便地创建布局。通过el-row和el-col布局，总共24分栏，span表示占用的栏数，offset表示偏移量

  1. <el-row>
  2.   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
  3. </el-row>
  4. <el-row>
  5.   <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  6.   <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
  7. </el-row>
  8. <el-row>
  9.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  10.   <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  11.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  12. </el-row>

Form

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.         <!-- 引入样式 -->
  9.         <link
  10.         rel="stylesheet"
  11.         href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
  12.         />
  13.         <title>Document</title>
  14.     </head>
  15.     <body>
  16.     <div id="app">
  17.         <el-container>
  19.         <el-header>
  20.         <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
  21.             <el-menu-item index="1">处理中心</el-menu-item>
  22.             <el-submenu index="2">
  23.                 <template slot="title">我的工作台</template>
  24.                 <el-menu-item index="2-1">选项1</el-menu-item>
  25.                 <el-menu-item index="2-2">选项2</el-menu-item>
  26.                 <el-menu-item index="2-3">选项3</el-menu-item>
  27.                 <el-submenu index="2-4">
  28.                     <template slot="title">选项4</template>
  29.                     <el-menu-item index="2-4-1">选项1</el-menu-item>
  30.                     <el-menu-item index="2-4-2">选项2</el-menu-item>
  31.                     <el-menu-item index="2-4-3">选项3</el-menu-item>
  32.                 </el-submenu>
  33.             </el-submenu>
  34.             <el-menu-item index="3" disabled>消息中心</el-menu-item>
  35.             <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  36.         </el-menu>
  37.     </el-header>
  38.         <el-main>
  39.         <el-row>
  40.             <el-col :span='12' :offset="6">
  42.         <el-form ref="form" :model="form" label-width="80px">
  43.             <el-form-item label="活动名称">
  44.                 <el-input v-model="form.name"></el-input>
  45.             </el-form-item>
  46.             <el-form-item label="活动区域">
  47.                 <el-select v-model="form.region" placeholder="请选择活动区域">
  48.                     <el-option label="区域一" value="shanghai"></el-option>
  49.                     <el-option label="区域二" value="beijing"></el-option>
  50.                 </el-select>
  51.             </el-form-item>
  52.             <el-form-item label="活动时间">
  53.                 <el-col :span="11">
  54.                     <el-date-picker type="date" format='yyyy-MM-dd' value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
  55.                 </el-col>
  56.                 <el-col class="line" :span="2">-</el-col>
  57.                 <el-col :span="11">
  58.                     <el-time-picker format='HH:mm:ss' value-format='HH:mm:ss' placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
  59.                 </el-col>
  60.             </el-form-item>
  61.             <el-form-item label="即时配送">
  62.             <el-switch v-model="form.delivery"></el-switch>
  63.             </el-form-item>
  64.             <el-form-item label="活动性质">
  65.             <el-checkbox-group v-model="form.type">
  66.                 <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
  67.                 <el-checkbox label="地推活动" name="type"></el-checkbox>
  68.                 <el-checkbox label="线下主题活动" name="type"></el-checkbox>
  69.                 <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
  70.             </el-checkbox-group>
  71.             </el-form-item>
  72.             <el-form-item label="特殊资源">
  73.             <el-radio-group v-model="form.resource">
  74.                 <el-radio label="线上品牌商赞助"></el-radio>
  75.                 <el-radio label="线下场地免费"></el-radio>
  76.             </el-radio-group>
  77.             </el-form-item>
  78.             <el-form-item>
  79.                 <el-upload
  80.                     class="upload-demo"
  81.                     action="http://localhost:8080/upload"
  82.                     name='file'
  83.                     :on-preview="handlePreview"
  84.                     :on-remove="handleRemove"
  85.                     :before-remove="beforeRemove"
  86.                     multiple
  87.                     :limit="3"
  88.                     :on-success="handleSuccess"
  89.                     :on-exceed="handleExceed"
  90.                     :file-list="form.fileList">
  91.                     <el-button size="small" type="primary">点击上传</el-button>
  92.                     <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  93.                 </el-upload>
  94.             </el-form-item>
  95.             <el-form-item label="活动形式">
  96.             <el-input type="textarea" v-model="form.desc"></el-input>
  97.             </el-form-item>
  98.             <el-form-item>
  99.             <el-button type="primary" @click="onSubmit">立即创建</el-button>
  100.             <el-button>取消</el-button>
  101.             </el-form-item>
  102.         </el-form>
  104.     </el-col>
  105. </el-row>
  106. </el-main>
  107. <el-container>
  109.     </div>
  111.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  112.     <!-- 引入组件库 -->
  113.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  114.     <script>
  115.         let app = new Vue({
  116.             el:'#app',
  117.             data:{
  118.                 form:{
  119.                     name: 'defaultName',
  120.                     region: '大中国',
  121.                     date1: '',
  122.                     date2: '',
  123.                     delivery: false,
  124.                     type: [],
  125.                     resource: '',
  126.                     desc: '',
  127.                     fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
  129.                 },
  131.             },
  132.             methods:{
  133.                 onSubmit(){
  134.                     console.log(this.form);
  135.                 },
  136.                 handleRemove(file, fileList) {
  137.                     console.log(file, fileList);
  138.                 },
  139.                 handlePreview(file) {
  140.                     console.log(file);
  141.                 },
  142.                 handleExceed(files, fileList) {
  143.                     this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
  144.                 },
  145.                 beforeRemove(file, fileList) {
  146.                     return this.$confirm(`确定移除 ${ file.name }？`);
  147.                 },
  148.                 handleSuccess(response, file, fileList){
  149.                     console.log(file);
  150.                     let fileObj = {name:file.name,url:file.response.data};
  151.                     this.form.fileList.push(fileObj)
  152.                 }
  153.             }
  154.         });
  155.     </script>
  156.     </body>
  157. </html>

upload使用注意事项：

  1. name指定上传时的文件名
  2. action指定提交的目标地址

  3. 需要在成功回调on-success时手工添加到fileList中

    分页

    1.   <el-pagination
    2.                  background
    3.                  layout="prev, pager, next,sizes"
    4.                  :total="page.total"     总条数
    5.                  :current-page='page.current'  当前页
    6.                  :page-size='page.size'    页容量
    7.                  @current-change='search'  当前页码改变时间，回传改变后的页码
    8.                  >
    9. </el-pagination>
    11. search(current){
    12.                  //发请求到后端，搜索数据
    13.                  let param = this.searchForm;
    14.                  param.pageIndex=current;
    15.                  param.pageSize=this.page.size;
    17.                  axios.get('http://localhost:8000/queryTeacher',{
    18.                      params:param
    19.                  })
    20.                  .then(resp=>{
    21.                      if(resp.status=200&&resp.data.success){
    22.                          let data = resp.data.data;
    23.                          this.tableData=data.records;
    24.                          //将后端返回的数据绑定到分页条上
    25.                          this.page.total=data.total;
    26.                          this.page.current=data.current;
    27.                          this.page.size=data.size;
    28.                      }else{
    29.                          this.$message({
    30.                              message:'查询失败，'+resp.data.message,
    31.                              type:'warning'
    32.                          })
    33.                      }
    34.                  })
    35.                  .catch(error=>{
    36.                      this.$message({
    37.                              message:'查询失败，'+error.message,
    38.                              type:'error'
    39.                          })
    40.                  })
    41.              }
    42.          }

JS发展

nodejs js运行时环境 让js脱离浏览器，在电脑上运行

  • 后端代码，创建httpserver,接受http请求，并且响应；可以访问数据库；可以创建文件读取文件
    • 框架 express / sequelize
  • 桌面端应用程序
    • 框架 electron
  • 移动端应用程序
    • react-native
    • vue -> uniapp / weex

npm nodejs 自带的包管理器，功能类似于maven的依赖管理
webpack 打包工具，类似于Maven的构建流程

html => pug模板，简化html的编写
css => sass / less css拓展语言
js => typescript / coffeescript 升级

安装Node环境

  1. nodejs 自带npm

https://nodejs.org/zh-cn/
安装，下一步，下一步

  1. 测试 node -v npm -v
  2. 编写一个例子
    1. # 编写一个helloworld.js,内容如下
    2. console.log("hello world");
    3. # 通过node命令运行
    4. node helloworld.js
    1. npm init
    2. npm install mysql
    3. # 编写index.js,内容如下
    4. # 运行
    5. node index.js
    6. # 访问 localhost:8888 即可在控制台看到数据
    ```javascript var mysql = require(‘mysql’); var http = require(‘http’);

http.createServer(function (request, response) {

  1. // 发送 HTTP 头部 
  2. // HTTP 状态值: 200 : OK
  3. // 内容类型: text/plain
  4. response.writeHead(200, {'Content-Type': 'text/plain'});
  8. var connection = mysql.createConnection({
  9.     host: 'localhost',
  10.     port:3306,
  11.     user: 'root',
  12.     password: 'root123',
  13.     database: 'edu_56'
  14. });
  16. connection.connect();
  18. connection.query('SELECT * from edu_teacher', function (error, results, fields) {
  19.     if (error) throw error;
  20.     console.log('The solution is: ', results);
  21.      // 发送响应数据 "Hello World"
  22. response.end(results);
  23. });

}).listen(8888);

// 终端打印如下信息 console.log(‘Server running at http://127.0.0.1:8888/‘);

  2. 4. 安装taobao的npm源
  3. ```bash
  4. npm i -g cnpm --registry=https://registry.npm.taobao.org

vue-cli

  1. 安装

    1. cnpm install -g @vue/cli
    2. vue -V

  2. 创建项目

    1. # cmd
    2. vue create my-project
    3. # 界面
    4. vue ui

    image.png

image.png
image.png
image.png
image.png

  1. cd vue56
  2. npm run serve
  3. # 访问 IP:8080 看到界面

解析脚手架项目

node_modules node下载的依赖
public
src 源码

  • assets 图片等资源
  • components 组件
  • router 路由配置
  • views 视图，界面
  • App.vue 应用的容器
  • main.js 整个项目的入口 ```javascript //从vue依赖包当中导入Vue对象 import Vue from ‘vue’ //导入一个组件App import App from ‘./App.vue’ //导入vue-router,路由器 import router from ‘./router’

//关闭生产环境 Vue.config.productionTip = false

//实例化vue new Vue({ router, //引入路由器 render: h => h(App)//渲染App组件 }) .$mount(‘#app’)//挂载到App组件内部id为app的元素上

  1. package.json 项目管理文件
  3. 约定：<br />在文件夹下的index.js, 当引入文件夹时，默认读取index.js
  5. <a name="pAMB6"></a>
  6. ## 包
  7. js内部，封装多个方法或者类的一个工具，类似于java包<br />在包内部，导出数据和方法
  8. ```javascript
  9. function helloPlus(){
  10.     hello();
  11. }
  13. function hello(){
  14.     alert('123');
  15. }
  17. //导出的内容
  18. export default {
  19.     delta : 1.99,
  20.     sayHello: helloPlus
  21. }

需要使用时，引入

  1. import a from './a.js'
  3. a.sayHello();

单文件组件 .vue文件

before : 

  1.  Vue.component('todo-item',{
  2.         template:`<li style="list-style:none">
  3.             <input type="checkbox" name="" v-model="todo.state" id="">
  4.             <span contenteditable @keydown.esc='handleCancel' @focus="save" @blur='handleChange' >{{todo.text}}</span>
  5.             <span style='color:red;cursor:pointer' @click='del(todo)'>x</span>
  6.             </li>`,//html的内容
  7.         props:['todo'],//属性,
  8.         data:function(){
  9.             return {
  10.                 prev:this.todo.text
  11.             }
  12.         },
  13.         methods:{
  14.             del(todo){
  15.                 this.$emit("del",todo);//（1）在组件内触发一个自定义的事件，名为del，事件对象（事件内容）todo
  16.             },
  17.             handleChange(e){
  18.                 console.log("changing:"+this.prev +" canceled:"+this.canceled)
  19.                 this.todo.text=e.target.innerText;
  20.             },
  21.             handleCancel(e){
  22.                 console.log("cancel:"+this.prev)
  23.                 this.todo.text=this.prev;
  24.                 e.target.innerText=this.prev;
  25.                 e.target.blur();
  26.             },
  27.             save(){
  28.                 console.log("saving:"+this.todo.text)
  29.                 this.prev=this.todo.text
  30.             }
  31.         },
  32.         mounted(){
  34.         }
  35.     });

after:
VUE脚手架与ElementUI的使用 - 图6
现在我们获得：

一个 .vue 文件,就是一个组件

vue-router 路由器

单页面应用 Single Page Application SPA
不切换页面的情况下更新内容，极佳的用户体验，类似于App的使用体验，成为潮流
map.baidu.com
juejin.im
image.png
实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11.     <div id="app">
  13.         <!-- 使用 router-link 组件来导航. -->
  14.         <!-- 通过传入 `to` 属性指定链接. -->
  15.         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  16.         <router-link to='/idx'>首页</router-link>
  17.         <router-link to='/ctr'>个人中心</router-link>
  19.         <!-- 路由出口 -->
  20.         <!-- 路由匹配到的组件将渲染在这里 -->
  21.         <router-view></router-view>
  24.     </div>
  27.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  28.     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  29.     <script>
  30.         //1. 定义两个组件
  31.         let index = Vue.component('index',{
  32.             template:'<div><h1>首页</h1></div>'
  33.         });
  34.         let center = Vue.component('center',{
  35.             template:'<div><h1>个人中心</h1></div>'
  36.         });
  38.         //2. 定义路径与组件之间的映射关系
  39.         const routes=[
  40.             {path:'/idx',component:index},
  41.             {path:'/ctr',component:center}
  42.         ]
  44.         //3. 创建路由对象
  45.         const router =  new VueRouter({routes});
  47.         //4.将路由对象设置到Vue实例中，使之生效
  48.         new Vue({
  49.             router
  50.         }).$mount('#app');
  51.     </script>
  52. </body>
  53. </html>

动态路由

根据路径动态匹配组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11.     <div id="app">
  13.         <!-- 使用 router-link 组件来导航. -->
  14.         <!-- 通过传入 `to` 属性指定链接. -->
  15.         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  16.         <router-link to='/idx'>首页</router-link>
  17.         <router-link to='/ctr'>个人中心</router-link>
  18.         <router-link to='/product/bottle'>产品介绍</router-link>
  20.         <!-- 路由出口 -->
  21.         <!-- 路由匹配到的组件将渲染在这里 -->
  22.         <router-view></router-view>
  25.     </div>
  28.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  29.     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  30.     <script>
  31.         //1. 定义两个组件
  32.         let index = Vue.component('index',{
  33.             template:'<div><h1>首页</h1></div>'
  34.         });
  35.         let center = Vue.component('center',{
  36.             template:'<div><h1>个人中心</h1></div>'
  37.         });
  38.         let product = Vue.component('product',{
  39.             template:'<div><h1>产品介绍：{{$route.params.productName}}</h1></div>'
  40.         });
  42.         //2. 定义路径与组件之间的映射关系
  43.         const routes=[
  44.             {path:'/idx',component:index},
  45.             {path:'/ctr',component:center},
  46.             {path:'/product/:productName',component:product}
  47.         ]
  49.         //3. 创建路由对象
  50.         const router =  new VueRouter({routes});
  52.         //4.将路由对象设置到Vue实例中，使之生效
  53.         new Vue({
  54.             router
  55.         }).$mount('#app');
  56.     </script>
  57. </body>
  58. </html>

嵌套路由

在组件内部存在路由链接及路由视图
在routes路由表中使用children表示嵌套的路由关系

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11.     <div id="app">
  13.         <!-- 使用 router-link 组件来导航. -->
  14.         <!-- 通过传入 `to` 属性指定链接. -->
  15.         <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  16.         <router-link to='/idx'>首页</router-link>
  17.         <router-link to='/ctr'>个人中心</router-link>
  19.         <!-- 路由出口 -->
  20.         <!-- 路由匹配到的组件将渲染在这里 -->
  21.         <router-view></router-view>
  24.     </div>
  27.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  28.     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  29.     <script>
  30.         //1. 定义两个组件
  31.         let index = Vue.component('index',{
  32.             template:'<div><h1>首页</h1></div>'
  33.         });
  34.         let center = Vue.component('center',{
  35.             template:`<div>
  36.                 <h1>个人中心</h1>
  37.                 <!-- 嵌套路由的链接 -->
  38.                 <router-link to='/center/intro'>intro</router-link>
  39.                 <router-link to='/center/modify'>modify</router-link>
  40.                 <!-- 嵌套路由的出口 -->
  41.                 <router-view></router-view>
  42.                 </div>`
  43.         });
  45.         //嵌套路由的组件
  46.         let intro = Vue.component('intro',{
  47.             template:`<h2>个人介绍：大帅哥一个</h2>`
  48.         })
  49.         let modify = Vue.component('modify',{
  50.             template:`<h2>修改个人信息</h2>`
  51.         })
  53.         //2. 定义路径与组件之间的映射关系
  54.         const routes=[
  55.             {path:'/idx',component:index},
  56.             {
  57.                 path:'/ctr',
  58.                 component:center,
  59.                 children:[
  60.                     {path:'/center/intro', component: intro},
  61.                     {path:'/center/modify', component: modify}
  62.                 ]
  63.             },
  64.         ]
  66.         //3. 创建路由对象
  67.         const router =  new VueRouter({routes});
  69.         //4.将路由对象设置到Vue实例中，使之生效
  70.         new Vue({
  71.             router
  72.         }).$mount('#app');
  73.     </script>
  74. </body>
  75. </html>

编程式路由导航

调用this.$router.push方法进行跳转

  • 直接传链接

  • 传对象 ```html <!DOCTYPE html> 

    1.   <!-- 使用 router-link 组件来导航. -->
    2.   <!-- 通过传入 `to` 属性指定链接. -->
    3.   <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    4.   <router-link to='/login'>登录</router-link>
    5.   <router-link to='/reg'>注册</router-link>
    7.   <!-- 路由出口 -->
    8.   <!-- 路由匹配到的组件将渲染在这里 -->
    9.   <router-view></router-view>
  1. </div>
  4. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  5. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  6. <script>
  7.     //1. 定义两个组件
  8.     let reg = Vue.component('reg',{
  9.         template:`
  10.         <div>
  11.             <h1>注册</h1>
  12.             <input type="text" v-model='regForm.username' id="">
  13.             <input type="password" v-model='regForm.password' id=""> 
  14.             <button @click='doReg'>注册</button>
  15.         </div>`,
  16.         data(){
  17.             return{
  18.                 regForm:{
  19.                     username:'',
  20.                     password:''
  21.                 }
  22.             }
  23.         },
  24.         methods:{
  25.             doReg(){
  26.                 console.log(this.regForm);
  27.                 alert('注册成功');
  29.                 console.log(this.$router);
  30.                 // this.$router.push('/login'); //直接传链接
  31.                 this.$router.push({path:'/login',query:{username:'zhangsan'}});//传对象
  32.             }
  33.         }
  34.     });
  36.     let login = Vue.component('login',{
  37.         template:'<div><h1>登录 {{$route.query.username}}</h1></div>'
  38.     });
  41.     //2. 定义路径与组件之间的映射关系
  42.     const routes=[
  43.         {path:'/login',component:login},
  44.         {path:'/reg',component:reg}
  45.     ]
  47.     //3. 创建路由对象
  48.     const router =  new VueRouter({routes});
  50.     //4.将路由对象设置到Vue实例中，使之生效
  51.     new Vue({
  52.         router
  53.     }).$mount('#app');
  54. </script>

  1. <a name="AvJBr"></a>
  2. ### 路由守卫
  3. 在跳转过程中检查是否有权限跳转到目标链接<br />全局：前置守卫、解析守卫、后置钩子<br />局部：单个路由内部、组件内部<br />完整的导航流程 ： [https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AF%BC%E8%88%AA%E8%A7%A3%E6%9E%90%E6%B5%81%E7%A8%8B](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%AE%8C%E6%95%B4%E7%9A%84%E5%AF%BC%E8%88%AA%E8%A7%A3%E6%9E%90%E6%B5%81%E7%A8%8B)
  5. ```javascript
  6.  //添加全局的前置守卫
  7. router.beforeEach((to,from,next)=>{
  8.   if(to.path=='/reg'){
  9.     alert("目前尚未开放注册！")
  10.     return;
  11.   }
  13.   //放行
  14.   next();
  15. });

路由的参数：
每个守卫方法接收三个参数：

  • **to: Route**: 即将要进入的目标 路由对象
  • **from: Route**: 当前导航正要离开的路由
  • **next: Function**: 一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。
    • **next()**: 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
    • **next(false)**: 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
    • **next('/')** 或者 **next({ path: '/' })**: 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 [router-link](https://router.vuejs.org/zh/api/#to) 的 [to](https://router.vuejs.org/zh/api/#to) prop 或 [router.push](https://router.vuejs.org/zh/api/#router-push) 中的选项。
    • **next(error)**: (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 [router.onError()](https://router.vuejs.org/zh/api/#router-onerror) 注册过的回调。

代码

main.js

  • 实例化Vue
  • 挂载到App.vue
  • 导入router文件夹 引入了vue-router

App.vue

  • 页面骨架 router-link 、 router-view

router文件夹 index.js

  • 配置路由器，提供了路由表 （路径 和 组件映射）
  • 根据路由表将多个组件组织起来
  • / => Home
    • Home.vue
      • 引入了HelloWorld组件（import Helloworld ； 在 组件的实例中使用 components注册）

image.png

开发一个页面

  1. 编写页面 ```vue 
  2. 2. 在 App.vue增加链接
  3. ```vue
  4.    <router-link to="/">Home</router-link> |
  5.       <router-link to="/about">About</router-link> |
  6.   >>>>>    <router-link to="/center">个人中心</router-link>
  1. 在router/index.js中配置路径映

image.png

使用axios

  1. 在项目根目录（package.json所在目录）下 npm add axios (本质是在package.json中添加axios依赖，并执行install拉取)
  2. 在main.js中引入并绑定到vue上 ```javascript import axios from ‘axios’

//定制axios 具体可以定制的选项，参考https://www.kancloud.cn/yunye/axios/234845 请求配置一节 var instance = axios.create({ baseURL: ‘http://localhost:8000‘, timeout: 1000 }); //将axios绑定到Vue上，全局变量 Vue.prototype.$http=instance;

  2. 3. 在其他组件即可使用
  3. ```json
  4.  this.$http.get("/getPersonInfo",{
  5.             params:{
  6.                 id:1
  7.             }
  8.         }).then(resp=>{
  9.             if(resp.status==200&&resp.data.success){
  10.                 this.person=resp.data.data;
  11.             }
  12.         }).catch(error=>{
  13.             console.error("加载出错",error);
  14.         })

如果报依赖缺失,执行 cnpm install

  1. These dependencies were not found:
  3. * core-js/modules/es.object.to-string.js in ./src/router/index.js
  4. * core-js/modules/es.string.iterator.js in ./src/router/index.js
  5. * core-js/modules/web.dom-collections.iterator.js in ./src/router/index.js

使用elementUI

  1. 添加依赖 cnpm i element-ui -S
  2. 在main.js中启用element ```javascript //引入element import ElementUI from ‘element-ui’; import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

  2. 3. 使用elementUI
  3. ```vue
  4. <template>
  5.   <div class="about">
  6.     <el-container>
  8.         <el-header>
  9.         <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
  10.             <el-menu-item index="1">处理中心</el-menu-item>
  11.             <el-submenu index="2">
  12.                 <template slot="title">我的工作台</template>
  13.                 <el-menu-item index="2-1">选项1</el-menu-item>
  14.                 <el-menu-item index="2-2">选项2</el-menu-item>
  15.                 <el-menu-item index="2-3">选项3</el-menu-item>
  16.                 <el-submenu index="2-4">
  17.                     <template slot="title">选项4</template>
  18.                     <el-menu-item index="2-4-1">选项1</el-menu-item>
  19.                     <el-menu-item index="2-4-2">选项2</el-menu-item>
  20.                     <el-menu-item index="2-4-3">选项3</el-menu-item>
  21.                 </el-submenu>
  22.             </el-submenu>
  23.             <el-menu-item index="3" disabled>消息中心</el-menu-item>
  24.             <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  25.         </el-menu>
  26.     </el-header>
  27.         <el-main>
  28.             <el-form :inline="true" :model="searchForm" class="demo-form-inline">
  29.                 <el-form-item label="教师姓名">
  30.                     <el-input v-model="searchForm.teacherName" placeholder="教师姓名"></el-input>
  31.                 </el-form-item>
  32.                 <el-form-item label="审核状态">
  33.                     <el-select clearable  v-model="searchForm.state" placeholder="审核状态">
  34.                         <el-option label="待审核" value="wait"></el-option>
  35.                         <el-option label="审核通过" value="normal"></el-option>
  36.                         <el-option label="审核失败" value="fail"></el-option>
  37.                     </el-select>
  38.                 </el-form-item>
  39.                 <el-form-item>
  40.                     <el-button type="primary" @click="search">查询</el-button>
  41.                     <el-button type="success" @click="addTeacherDialogVisible=true" icon="el-icon-plus" circle></el-button>
  43.                 </el-form-item>
  44.             </el-form>
  45.             <el-row>
  46.                 <el-col >
  47.                     <el-table
  48.                     :data="tableData"
  49.                     style="width: 100%">
  50.                         <el-table-column
  51.                             prop="teacherId"
  52.                             label="教师ID"
  53.                             width="180">
  54.                         </el-table-column>
  55.                         <el-table-column
  56.                             prop="teacherName"
  57.                             label="教师姓名"
  58.                             width="180">
  59.                         </el-table-column>
  60.                         <!-- 格式化器 -->
  61.                         <el-table-column
  62.                             prop="state"
  63.                             :formatter="stateFormatter"
  64.                             label="状态">
  65.                         </el-table-column>
  66.                         <el-table-column
  67.                             prop="email"
  68.                             label="邮箱">
  69.                         </el-table-column>
  70.                         <el-table-column
  71.                             label="操作">
  72.                             <template slot-scope='scope'>
  73.                                 <el-button v-if='scope.row.state=="wait"' @click="audit(scope.row,true)" type="text" size="small">审核通过</el-button>
  74.                                 <el-button v-if='scope.row.state=="wait"' @click="audit(scope.row,false)" type="text" size="small">审核失败</el-button>
  75.                                 <el-button v-if='scope.row.state=="normal"' @click="fire(scope.row)" type="text" size="small">开除</el-button>
  76.                                 <el-button v-if='scope.row.state=="normal"' @click="modifyTeacher(scope.row)" type="text" size="small">修改</el-button>
  77.                             </template>
  78.                         </el-table-column>
  79.                     </el-table>
  81.                     <el-pagination
  82.                     background
  83.                     layout="prev, pager, next,sizes"
  84.                     :total="page.total"
  85.                     :current-page='page.current'
  86.                     :page-size='page.size'
  87.                     @current-change='search'
  88.                     >
  89.                     </el-pagination>
  91.                 </el-col>
  92.             </el-row>
  93. </el-main>
  94. </el-container>
  95.     <el-dialog title="新增讲师" :visible.sync="addTeacherDialogVisible">
  96.         <el-form :model="addTeacherForm">
  97.             <el-row>
  98.                 <el-col :span='15'>
  99.                     <el-form-item label="讲师姓名" label-width="180px">
  100.                         <el-input v-model="addTeacherForm.teacherName" autocomplete="off"></el-input>
  101.                     </el-form-item>
  102.             </el-col>
  103.             </el-row>  
  104.             <el-row>
  105.             <el-col :span='15'>
  106.                 <el-form-item label="生日" label-width="180px">
  107.                     <el-date-picker
  108.                     v-model="addTeacherForm.birthday"
  109.                     type="date"
  110.                     format="yyyy-MM-dd"
  111.                     value-format="yyyy-MM-dd HH:mm:ss"
  112.                     placeholder="选择生日">
  113.                     </el-date-picker>
  114.                 </el-form-item>
  115.             </el-col>
  116.         </el-row>  
  117.             <el-form-item label="email" label-width="180px">
  118.                 <el-input v-model="addTeacherForm.email" autocomplete="off"></el-input>
  119.             </el-form-item>
  120.             </el-form>
  121.             <div slot="footer" class="dialog-footer">
  122.             <el-button @click="addTeacherDialogVisible = false">取 消</el-button>
  123.             <el-button type="primary" @click="addTeacher">新增</el-button>
  124.             </div>
  125.     </el-dialog>
  127.     <el-dialog title="修改讲师" :visible.sync="modifyTeacherDialogVisible">
  128.         <el-form :model="modifyTeacherForm">
  129.             <el-row>
  130.                 <el-col :span='15'>
  131.                     <el-form-item label="讲师姓名" label-width="180px">
  132.                         <el-input v-model="modifyTeacherForm.teacherName" autocomplete="off"></el-input>
  133.                     </el-form-item>
  134.             </el-col>
  135.             </el-row>  
  136.             <el-row>
  137.             <el-col :span='15'>
  138.                 <el-form-item label="生日" label-width="180px">
  139.                     <el-date-picker
  140.                     v-model="modifyTeacherForm.birthday"
  141.                     type="date"
  142.                     format="yyyy-MM-dd"
  143.                     value-format="yyyy-MM-dd HH:mm:ss"
  144.                     placeholder="选择生日">
  145.                     </el-date-picker>
  146.                 </el-form-item>
  147.             </el-col>
  148.         </el-row>  
  149.             <el-form-item label="email" label-width="180px">
  150.                 <el-input v-model="modifyTeacherForm.email" autocomplete="off"></el-input>
  151.             </el-form-item>
  152.             </el-form>
  153.             <div slot="footer" class="dialog-footer">
  154.             <el-button @click="modifyTeacherDialogVisible = false">取 消</el-button>
  155.             <el-button type="primary">修改</el-button>
  156.             </div>
  157.     </el-dialog>
  158.   </div>
  159. </template>
  161. <script>
  162. export default {
  163.   name:'About',
  164.   data(){return {
  165.                 page:{
  166.                     total:0,
  167.                     current:1,
  168.                     size:10
  169.                 },
  170.                 searchForm:{
  171.                     teacherName:'',
  172.                     state:''
  173.                 },
  174.                 formLabelWidth:"80px",
  175.                 modifyTeacherDialogVisible:false,
  176.                 addTeacherForm: {
  177.                     teacherName: '',
  178.                     email:'',
  179.                     birthday:''
  180.                 },
  181.                 modifyTeacherForm: {
  182.                     teacherId:'',
  183.                     teacherName: '',
  184.                     email:'',
  185.                     birthday:''
  186.                 },
  187.                 addTeacherDialogVisible:false,
  188.                 tableData:[]
  189.                 }
  190.             },
  191.             mounted(){
  192.                 this.search(1);
  193.             },
  194.             methods:{
  195.                 modifyTeacher(row){
  196.                     this.modifyTeacherForm=row;
  197.                     this.modifyTeacherDialogVisible=true;
  198.                 },
  199.                 addTeacher(){
  200.                     console.log(this.addTeacherForm)
  201.                     this.$http.post('/addNewTeacher',this.addTeacherForm)
  202.                     .then(resp=>{
  203.                         this.$message({message:"新增成功",type:"success"});
  204.                         this.search(1);
  205.                         this.addTeacherDialogVisible=false;
  206.                     }).catch(resp=>{
  207.                         this.$message({message:"操作失败",type:"warning"});
  208.                         this.addTeacherDialogVisible=false;
  209.                     })
  210.                 },
  211.                 stateFormatter(row, column, cellValue, index){
  212.                     switch(cellValue){
  213.                         case 'wait': return '待审核';
  214.                         case 'normal': return '审核通过';
  215.                         case 'fail': return '审核失败';
  216.                         default : console.error("错误的状态"+cellValue+"，无法格式化");
  217.                     }
  218.                 },
  219.                 audit(row,pass){
  220.                     console.log(row,pass);
  221.                     this.$http.post('/audit',{"teacherId":row.teacherId,"pass":pass})
  222.                     .then(resp=>{
  223.                         this.$message({message:"审核操作完成",type:"success"});
  224.                         this.search(1);
  225.                     }).catch(resp=>{
  226.                         this.$message({message:"操作失败",type:"warning"});
  227.                     })
  228.                 },
  229.                 fire(row){
  231.                 },
  232.                 handleClick(row){
  233.                     console.log(row);
  234.                     this.dialogFormVisible=true;
  235.                     // this.$message({message:'你查看成功了',type:'warning'});
  236.                 },
  237.                 search(current){
  238.                     //发请求到后端，搜索数据
  239.                     let param = this.searchForm;
  240.                     param.pageIndex=current;
  241.                     param.pageSize=this.page.size;
  243.                     this.$http.get('/queryTeacher',{
  244.                         params:param
  245.                     })
  246.                     .then(resp=>{
  247.                         if(resp.status=200&&resp.data.success){
  248.                             let data = resp.data.data;
  249.                             this.tableData=data.records;
  250.                             //将后端返回的数据绑定到分页条上
  251.                             this.page.total=data.total;
  252.                             this.page.current=data.current;
  253.                             this.page.size=data.size;
  254.                         }else{
  255.                             this.$message({
  256.                                 message:'查询失败，'+resp.data.message,
  257.                                 type:'warning'
  258.                             })
  259.                         }
  260.                     })
  261.                     .catch(error=>{
  262.                         this.$message({
  263.                                 message:'查询失败，'+error.message,
  264.                                 type:'error'
  265.                             })
  266.                     })
  267.                 }
  268.             }
  269. }
  270. </script>

特别说明：
在el-menu上添加router属性，将激活vue-router模式,使用index作为path导航

  1.  <el-menu router default-active="1" class="el-menu-demo" mode="horizontal">
  2.             <el-menu-item index="/">主页</el-menu-item>
  3.             <el-menu-item index="/about">关于</el-menu-item>
  4.             <el-menu-item index="/center">个人中心</el-menu-item>

Vuex

问题： 前端需要存储类似是否登录这样的数据，用于判断页面能否显示？
image.png

两种方式：

简单处理方式（丐版），在浏览器中存储数据： localStorage / sessionStorage (html5)

为何不用Cookie？
页面切换时，可能不发请求；数据量比较大
localStorage和sessionStorage的API是一致的，如下：

  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

localStorage和sessionStorage的区别在于作用域范围，localStroge针对一个网站，持久存储；sessionStorage只对一个标签，关闭则消失；一般使用localStorage;

拦截登录实例

  1. 路由守卫，拦截所有请求，基于router实现守卫，代码写在/router/index.js ```javascript import {Message} from ‘element-ui’

…

router.beforeEach((to,from,next)=>{ let isLogined = localStorage.getItem(“isLogined”); console.log(“是否登录”+isLogined);

if(to.path==’/login’){ console.log(“登陆请求，放行”); next(); return; } if(isLogined){ console.log(“已登录，放行”); next(); return; }

Message({ type:”error”, message:”请您先登录” }); //this.$router 是在vue实例中使用 //跳转 router.push(“/login”);

});

  2. 2. 登录完成后，存入登录标记
  3. ```vue
  4. <template>
  5.     <el-form
  6.     :model="ruleForm"
  7.     status-icon
  8.     ref="ruleForm"
  9.     label-width="100px"
  10.     class="demo-ruleForm"
  11.     >
  12.     <el-form-item label="用户名" prop="pass">
  13.         <el-input
  14.         type="text"
  15.         v-model="ruleForm.username"
  16.         autocomplete="off"
  17.         ></el-input>
  18.     </el-form-item>
  19.     <el-form-item label="密码" prop="checkPass">
  20.         <el-input
  21.         type="password"
  22.         v-model="ruleForm.password"
  23.         autocomplete="off"
  24.         ></el-input>
  25.     </el-form-item>
  26.     <el-form-item>
  27.         <el-button type="primary" @click="submitForm">登录</el-button>
  28.     </el-form-item>
  29.     </el-form>
  30. </template>
  32. <script>
  33. export default {
  34.     name: "Login",
  35.     data() {
  36.         return {
  37.             ruleForm: {
  38.             username: "",
  39.             password: "",
  40.             }
  41.         };
  42.     },
  43.     methods: {
  44.         submitForm() {
  45.             alert("登录成功");
  46.             localStorage.setItem("isLogined","true");
  47.         }
  48.     },
  49. };
  50. </script>

可以通过开发者控制台查看localStorage所存的数据
image.png

Vuex

https://vuex.vuejs.org/zh/
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
image.png
处理中大型的vue应用程序的数据状态管理

  • state，数据存储，驱动应用的数据源；
  • view，以声明方式将 state 映射到视图；
  • actions，用来修改state的一些操作，响应在 view 上的用户输入导致的状态变化。

如果state里有一个属性叫余额，那么actions就可能存在充值或者提现这样方法

以下是一个表示“单向数据流”理念的简单示意：
VUE脚手架与ElementUI的使用 - 图14
image.png
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11.     <div id="app">
  12.         <div>{{count}}</div>
  13.         <div>
  14.             <button @click='add'>+</button>
  15.             <button @click='minus'>-</button>
  16.         </div>
  18.     </div>
  20.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  21.     <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
  23.     <script>
  25.         // public class A{
  26.         //     private int count=0;
  28.         //     public void incr(){
  29.         //         count++;
  30.         //     }
  32.         //     public void decr(){
  33.         //         count--;
  34.         //     }
  35.         // }
  37.         //创建了一个Vuex的store对象
  38.         const store = new Vuex.Store({
  39.             state:{//数据
  40.                 count:0
  41.             },
  42.             mutations:{//action，对数据的操作
  43.                 incr(state){//参数为state对象
  44.                     state.count++;
  45.                 },
  46.                 decr(state){
  47.                     state.count--;
  48.                 }
  49.             }
  50.         });
  53.         let app = new Vue({
  54.             el:"#app",
  55.             data:{
  56.                 // count:0
  57.             },
  58.             computed:{//通过计算属性将store内部的值放进到vue实例中
  59.                 count(){
  60.                     return store.state.count;
  61.                 }
  62.             },
  63.             methods:{
  64.                 add(){
  65.                     //触发store的相应的mutation更改器
  66.                     store.commit('incr');
  67.                 },
  68.                 minus(){
  69.                     store.commit('decr');
  70.                 }
  71.             }
  72.         })
  74.     </script>
  76. </body>
  77. </html>