路由配置侧边栏

2019-10-11  本文已影响0人  稻草人_9ac7

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

目录

  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;
  1. 发送请求只需要这样写
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>
上一篇下一篇

猜你喜欢

热点阅读