卖座后台管理系统知识体系

目录

1. vue-cli3创建项目(略)

2. 重置样式和公共样式(略)

3. 路由配置(略)

4. 使用饿了么ui库,请看文档(略)

5. 布局组件(已完成)

6. vue原生点击事件(已完成)

7. vuex

8. axios拦截器(完成一半)

9. 打包部署项目

10. active-class

11. 父子组件通信

12. vue-cli3脚手架配置

五、布局组件

1. 拷贝饿了么的布局容器
2. 展开侧边栏的设置 :default-openeds设置
3. 样式调整
   • layout组件设置padding-top
   • 头部调整(固定定位)
   • 侧边栏 html=>body=>#app>div>aside 高度全部设为100%

六、vue原生点击事件
在组件上添加事件的时候需要添加修饰符.native来绑定事件,比如

  <el-submenu index="2" @click.native="open('2')"></el-submenu>

八、axios拦截器

文档地址: http://huruqing.cn/docs/Vue/advance/02.axios.html

1. 在新建 /utils/request.js

2. 使用axios创建实例,配置baseUrl和超时时间

   const service = axios.create({
       // 配置基本的路径
       baseURL: 'http://132.232.87.95:3000/admin',
       timeout: 5000 // 请求超时时间(因为需要调试后台,所以设置得比较大)
   })
   

3. response 拦截器让我们在请求成功之后,统一做某些处理(完整的代码请看项目)

   // response 拦截器
   service.interceptors.response.use(res => {
           if (res.data.code == 666) {
               return res.data
           } else {
               return Promise.reject(res.data.msg);
           }
       },
       error => {
           return Promise.reject(error)
       });
   
   export default service;
   

4. 把axios挂载在Vue的原型上

import $axios from '@/utils/request';
Vue.prototype.$axios = $axios;

5. 发送请求只需要这样写

let url = "/city/getList";
this.$axios
    .get(url)
    .then(res => {
    this.list = res.cities;
    console.log(res.cities);
})
    .catch(err => {
    console.log(err);
});

九、打包部署项目（上线）

1. 全局变量process.env

   let env = process.env.NODE_ENV;
   let baseURL = '';
   // 开发环境
   if (env === 'development') {
       baseURL = 'http://jun.huruqing.cn:3000/admin';
   } else {
       // 生产环境
       baseURL = 'http://jun.huruqing.cn:3000/admin';
   }
   

   web04班因为条件限制,所以,开发和生产用同一套代码

2. 配置打包路径和资源访问路径

   • 新建 /vue.config.js,代码如下

     // 以陈灿为例
     module.exports = {
          // 资源路径
         publicPath: '/maizuo/chencan/',
         // 打包路径
         outputDir: 'chencan',
         // 关闭eslint检查
         lintOnSave: false
     }
     

3. 执行npm run build 命令,然后把生成的文件夹chencan上传到 jun.huruqing.cn/maizuo/

十、路由表和侧边栏配置

1. 导出路由数组

   export const routes = [];
   

2. 导入路由数组

   import {routes} from '@/router/index'
   

3. item.meta && item.meta.title => &&左边为false的时候,不会继续执行

4. 设置默认值

   function test(data) {
    data = data || {};
    console.log(data.aa);
   }
   

十一、路由守卫

1. 配置全局路由守卫

   let routes = [];
   let router = new Router({
       routes
   })
   
   router.beforeEach((to, from, next) => {
       // 修改网页标题
       document.title = to.meta.title;
       next();
   })
   
   export default router;
   

   • to: Route: 即将要进入的目标 路由对象
   • from: Route: 当前导航正要离开的路由
   • next

阶段总结1

成功失败提示

 this.$message.success("退出成功");
 this.$message.error("退出失败");  

在组件中添加点击事件

@click.native

侧边栏的遍历问题

         <!-- 侧边栏模块部分 -->
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)" class="mySide">
    <!-- <el-menu :default-openeds="['1', '2']"> -->
    <el-menu :default-openeds="[dataIndex]" v-for="(item,index) in routes" :key="index" v-show="!item.hidden">
      <!-- 城市部分 -->
      <el-submenu :index="String(index+1)" @click.native="open(String(index+1))" >
        <template slot="title"><i :class="item.meta && item.meta.icon"></i>{{item.meta && item.meta.title}}</template>  
        <!-- 遍历children数组 -->
         <el-menu-item 
         v-show="!itemChild.hidden"
         :index="`${index+1}-${itemChildIndex+1}`" 
         v-for="(itemChild, itemChildIndex) in item.children || []" 
         :key="itemChild.path"
         >
           <i :class="itemChild.meta && itemChild.meta.icon"></i>
           <router-link :to="`${item.path}/${itemChild.path}`" tag="span">{{itemChild.meta && itemChild.meta.title}}</router-link>
         </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>

解决路由中没有该对象的问题

<template slot="title"><i :class="item.meta && item.meta.icon"></i>{{item.meta && item.meta.title}}</template>  

通过与运算符来做出判断，当左边存在的时候，才执行右边，否则就不执行，防止报错

输入框的提示

在表单中：

<el-form :label-position="labelPosition" label-width="80px" ref="formLabelAlign" :model="formLabelAlign" :rules="rules" class="form">
  <el-form-item  class="inputCenter"  prop="name">
       <template>
      <span class="text">账号</span>
  </template>
    <el-input v-model="formLabelAlign.name" class="input" placeholder="请输入账号" autofocus></el-input>
  </el-form-item>
 
  <el-form-item   prop="region">
       <template>
      <span class="text">密码</span>
  </template>
    <el-input type="password" v-model="formLabelAlign.region" class="input" placeholder="请输入密码"></el-input>
  </el-form-item>
    <el-form-item>
    <el-button type="primary" @click="submitForm" :loading="loading">登录</el-button>
    <el-button @click="resetForm">注册</el-button>
  </el-form-item>
 
</el-form>

在data中：

 export default {
    data() {
      return {
        loading:false,
        labelPosition: 'right',
          //定义一个对象
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },
          //定义一个规则
         rules: {
          name: [
            { required: true, message: '请输入账号', trigger: 'blur' },           
          ],
          region:[
            {
              required: true, message: '请输入密码', trigger: 'blur'
            }
          ]
          }
      };
      
    },

分析：

​ 首先我们需要在data中定义一个对象，用于绑定表单

formLabelAlign: {
    name: '',
    region: '',
   type: ''
 },

其次定义一个规则

 rules: {
      name: [
      { required: true, message: '请输入账号', trigger: 'blur' },           
       ],
       region:[
       {
       required: true, message: '请输入密码', trigger: 'blur'
       }
       ]
        }

然后在表单中使用

//绑定我们定义好的对象，规则 :rules="rules"，规则的内容为我们定义的规则
<el-form :label-position="labelPosition" label-width="80px" ref="formLabelAlign" :model="formLabelAlign" :rules="rules" class="form">
    //使用prop，内容为我们必须填写的内容
  <el-form-item  class="inputCenter"  prop="name">
       <template>
      <span class="text">账号</span>
  </template>
    <el-input v-model="formLabelAlign.name" class="input" placeholder="请输入账号" autofocus></el-input>
  </el-form-item>