vue + elementui +sass+axios做卖座网的后台管理系统

卖座后台管理系统

• 后台管理系统无非就是操作数据 实现数据的增删改查
• css样式的话 我用elementUI+sass
• 拿的模板是花裤衩大哥的模板
• 源码在这里
• 这是效果

所需要的知识

• 熟悉vue的父子传值

• 熟悉elementUI的使用

• axios 一个现在主流并且很好用的请求库 支持Promise

• 封装之后的axios的使用 (拓展:axios是怎么封装的,配置baseURL)

• 这里我并没有配置vuex 但是模板的登陆时用了vuex 这里不多说去看这里

• async和promise的结合使用 try catch捕获错误

• vue 的生命周期 后置钩子 拿到数据之后 展示到页面上

• vue路由的配置 vue路由传参的几种方式

准备工作

• 配置axios(这里我配置完的原型是$axios)
• 引入elementUI
• 安装sass

开始

city模块的难点与知识点

1. 通过布尔值来改变显示 动态css样式

2. <el-switch v-model="isHot" :active-text="isHot?'是':'否'"></el-switch>

3. elementUI的 里面需要用template包裹起来 不然无法显示

4.  <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button @click="deleteRow(scope.$index, list,scope.row.cityId)" 								type="text" size="small">删除</el-button>
              <router-link :to="`/city/edit/${scope.row.cityId}`">
                <el-button type="text" size="small">编辑</el-button>
              </router-link>
              <router-link :to="`/area/add/${scope.row.cityId}/${scope.row.name}`">
                <el-button type="text" size="small">添加区域</el-button>
              </router-link>
            </template>
   </el-table-column>
   

   5. 关于elementUI的scope问题 表格的操作链接

   6. 关于分页 还有单元格式化

   7. <el-pagination v-if="total>pageSize" @size-change="handleSizeChange" :page-sizes="[5, 10, 20, 40]" @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" hide-on-single-page :total="total">
       </el-pagination>
      
      

      本人在 另一篇文章写过了 可以仔细阅读

   8. 路由传参的几个方法**** 重点

      1. 动态路由传参

         1. 需要在目标页面的 路由下面写上 :参数名字 (这样路由跳转时就会将/下的 东西识别为 参数 而不是路径 这样就可以跳转了)

         2. {
                path: 'edit/:cityId',
                hidden: true,
                meta: {
                  title: '编辑城市',
                  icon: 'list'
                },
                component: () => import('@/views/city/editCity')
              }   
            

         3.  <router-link :to="`/city/edit/${scope.row.cityId}`">
                          <el-button type="text" size="small">编辑</el-button>
              </router-link>
            

   编程式导航
   1.通过路由的名字跳转

   1. 首先要在配置路由的时候写一个name的属性

   2. {
           path: 'edit/:areaId',
           hidden: true,
           name: "areaEdit",
           meta: {
             title: '编辑区域',
             icon: 'list'
           },
           component: () => import('@/views/area/editArea')
         }
      

   3. 然后通过方法toEdit()跳转,并且通过params把参数带过去

   4.     <el-table-column label="操作" width="200">
         	<template slot-scope="scope">
               <el-button @click="toEdit(scope.row.areaId)" type="text" size="small">编辑</el-button>
             </template>
          </el-table-column>
          
      

   5.     toEdit(areaId) {
            console.log(areaId)
            this.$router.push({
              name: 'areaEdit',
              params: {
                areaId
              }
            })
          },
      

   6. 另一边(比如说详情页面)通过this.$route.params接收

   	let areaId = this.$route.params.areaId
   

   2.通过路径跳转

   1. 通过path 路径来传参
   2. this.$router.push({ path:'/xxx/detail', query: { a:22, b:33 }})
   3. 详情页通过this.$route.query.a来获取参数a的值

   踩坑一般页面报错 翻译之后是超过最大调用堆栈的错 大部分是路由的问题

5. 使用sass覆盖elementUI的样式 这篇文章写得不错的

   !!!别跟老夫说 scoped!!!
   1. 建议 : 在获取到的样式里加上能限制范围的父层选择器，不然就会变成全局样式。
   2. 话不多说直接上方法: 在需要更改的组件里新增一个style标签，然后直接获取class设置样式就可以咯，class自己去浏览器里右键审查元素可得到。
   3. 4. scoped 原理 PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。