数据库实践课程总结---Vue全家桶+Element-ui+express

写在前

为数据库课程实践课程设计总结，因都是现学现用，因而再次总结，以后备用

---

Vuex

导航栏直接输入路径跳转失败

问题描述：在登陆成功使用state去绑定身份，例如我这里是使用的user


然后在router.beforeEach方法中每次路由都判断登录态，也就是state.user，但是问题就是，在我登陆后，已经获取登陆凭证了，在导航栏直接输入一个可以访问的地址，却直接跳转到登陆页面
这是因为vuex是响应式的数据驱动源。在第一次打开页面，进行页面属性或者操作BOM去进行页面的跳转等都会进行初始化。而在页面中进行使用vue-router进行跳转到子页面就不会使得vuex进行初始化。所以这里解决的方法有一个，就是使用的sessionStorage进行存储

Vue-Router

路由报错

问题描述： Error: Redirected from “/login” to “/index” via a navigation guard.

先卸载vue-router，再安装3.0.7版本

npm uninstall vue-router
npm install vue-router@3.0.7

beforEach的使用实例

问题描述：beforEach做路由拦截，判断登录态进行路由跳转。关于beforeEach的官网介绍在这里：全局前置守卫

// 路由拦截器
router.beforeEach((to, from, next) => {
    // 登录成功
  // 判断登录态
  if (JSON.parse(sessionStorage.getItem('user'))) {
 	// 匹配到路由
    if (to.matched.length != 0) { 
    	// 登陆态下访问登陆页面跳转到首页
        if(to.path == '/login' || to.path=='/'){
            next({
            	// 跳转的首页
                path: '/business/tasks'
            })
        }else{
        	// 非登陆等页面正常跳转
            next();  
        }
 

    } else {
		// 无权限路由。触发action。这里实现方法多种，主要的功能是动态获取权限，也就是不同用户的权限不同的，能访问菜单也是不同的
        store.dispatch('FETCH_PERMISSION', 
        {
            permissionList:JSON.parse(sessionStorage.getItem('permissionList')),
            user: true,
            username: sessionStorage.getItem('username')
          }
        ).then(()=>{
            router.replace({
                path: to.path
            })
        })

    }
      
  } else {
    // 无登陆态
	// 需要进行单独判断，如果直接next登陆路由会进入死循环
      if(to.path == '/login'){
          next() ;
      }else{
        // 正常跳转到登陆页面并记录原本想跳转的页面
        next({
            path: '/login',
            query: {redirect: to.fullPath}
        })
      }

  }
})

Element-ui

el-table分页的解决

问题描述：在使用el-table时发现这个东西在el-table上绑定的数据就是实际上显示的数据，也就是你绑定多少数据数据就显示多少，所以分页得自己来解决

设置页面参数

      pageparm: {
        currentPage: 1, // 当前的页数
        pageSize: 10, // 当前页面的尺寸
        total: 0, // 要显示的总数目
        pageSizes: [1, 2, 3, 10, 15, 20] // 可选页面尺寸
      }

绑定页面变化方法

官网描述

    handleCurrentChange(cSize) {
      this.pageparm.currentPage = cSize ; // 设置当前页面
      this.$emit('callFather', this.pageparm) ; // 这里是因为分页组件是被我单独写的，跟实际显示数据的页面是两个不同的，所以通过该方法触发 callFather方法去改变父组件的参数
    }

setPageData

setPageData(parm){

    // 重置分页参数 
    this.pageparm = parm ;
    let pre = (parm.currentPage-1)*parm.pageSize ; //获取前一页的数据条数，用来跳跃
    let next = parm.currentPage*parm.pageSize>=parm.total?parm.total:parm.pageSize*parm.currentPage  // 下一页的条数
    this.listData = this.totalData.slice(pre,next) ; // listData为绑定到table的数据，而totalData是获取的全部数据
    }

el-table排序问题

问题描述：el-table中排序只是对现有绑定的数据有用，也就是绑定多少东西他就给你排多少，实际上在数据库中有可能不是现有的情况，所以这里得自己去处理
这里看下官网


当设置sortable=custom的时候使用远程的方法，然后绑定一个sort-change方法
在el-table中进行绑定sort-change方法

tableSortChange方法如下

    // 列表的整体排序
    tableSortChange:function({column,order,prop}){

      this.totalData.sort(function(a,b){

        if(order == 'ascending'){
          return a[prop] - b[prop] ;
        }else{
          return b[prop] - a[prop] ;
        }
      })

      this.setPageData(this.pageparm) ;
    }

如上tableData就是总数据，我这里是因为一次获取了，所以就直接通过sort方法进行筛选了
从官网的介绍可以看到sort-change方法有三个参数

• column 列信息
• order 排序的方式,字符串类型有ascending和descending，分别是升序和降序

然后通过设置页面参数的方法重新设置页面就可以了

el-table的筛选问题

问题描述：问题如上述描述，筛选只是对现有的数据的，所以需要手动设置
先看下官网的信息
思想就是很简单了，就是在el-table绑定filter-change方法，然后再具体要排序的列在配置好filters的同时还有配置column-key去标识，具体使用如下：

我这里按我的需求加了在筛选的时候不进行多选

filterChange方法如下

    // 过滤方法，用于过滤选项
    filterChange(filters){
      /**
       * filters:{sex: ['男']}
       * sex：就是你设置的column-key
       * 数据中的数据就是你选择的，如果设置了都选的话就会有多个
       */
      let key = Object.keys(filters)[0] ;
      let obj = filters[key] ;

      // 这里看个人，具体意思是获取整体数据还有页面的配置参数
      let tasks = JSON.parse(sessionStorage.getItem('tasks')) ; 
      let totalData = [...tasks.totalData] ;// 要筛选的总体
      let pageparm = {...tasks.pageparm} ;// 初始页面参数

      // 有选中筛选筛选条件的
      if(obj.length != 0){

        let value = obj[0] ;
        // 过滤剩下对应的对象
        totalData = totalData.filter((data)=>{
          return data[key] == value
        })
      }

      // 重新设置分页参数
      pageparm.total = totalData.length ;
      this.totalData = totalData ;
      // 设置页面数据
      this.setPageData(pageparm) ;

    },

el-table的多选问题

问题描述：el-table在设置了type=selection的时候可以实现列的选择，但是如果进行分页了，在选择了之前的内容，在跳到该页的时候，也应该是一个选择的状态，上边解决的分页的问题的时候就知道，这每一页的都不同的，所以需要自行制定策略去解决

官网的方法
在进行勾选的时候，就会进行触发，这里就很容易解决了，因为是跟页数关联的，那么就可以使用一个对象去保存那一页勾选的数据，等显示的时候进行设置即可具体实现：

el-table绑定方法

    // 选择行的时候触发
    selectRow: function(selection, row){
      // this.selectObj是一个初始化的空对象即 {}
      this.selectedObj[this.pageparm.currentPage] = [...selection] ;
    },

• selection：表示选择的行的集合，你选择了多少个就会添加到这个数据中
• row ：当前点击选中的行的信息，selection就是多个row的组合

现在是成功获取了选中的行，那接下来就好办了，具体就是在设置页面信息的时候判断该对象时候有被选中的，有选中的添加选中即可。我这里添加选中的方法是setPageData(parm)，设置选中的判断如下：

// parm为页面参数，currentPage为当前的页面
  if(this.selectedObj[parm.currentPage] != undefined && this.selectedObj[parm.currentPage].length != 0){
    this.recoverSelect([...this.selectedObj[parm.currentPage]])

recoverSelect方法如下

// 设置选中
    recoverSelect: function(rows){
      this.$nextTick(()=>{
        rows.forEach(row => {
          this.$refs['table'].toggleRowSelection(row);
        });
      })

    }

这里加了个this.$nextTick方法，是vue的内置方法，如下
为啥使用这玩意呢？因为element-ui绑定数据后页面更更新和代码的运行是异步的。上边的toggleRowSelection是设置现有的列的选中，如果我在使用该方法的时候，页面还没渲染出来，这样就不会出现选中的状态，所以使用this.$nextTick保证DOM渲染成功后再进行设置选中状态

项目地址

数据库课程实践项目，包含基本功能，包含数据库表相关的创建，但有些功能有所欠缺，觉得好玩就补全一下吧，课程有需要的也可以拿去。github地址如下：
送水管理系统