10、幽络源微服务项目实战：对接权限增删改接口+vue2局部重载刷新法+中文字符错乱解决

前言

在前面的教程，幽络源完成了项目中的登录、认证、鉴权功能，这节教程继续完善前端对接后端权限管理的增删改接口，并利用局部重载刷新法解决权限信息表格不刷新的问题。

封装权限信息相关请求

权限信息的后端接口之前讲过，源码中已包含，这里不再赘述，直接在前端项目中的 permission.js 继续封装权限的 增、删、改 请求，对接后端接口，代码与图如下

//新增权限
export function addPermission(data){
    return request({
        url: '/permission/add',
        method: 'post',
        data: data
    })
}

//更新权限
export function updatePermission(data){
    return request({
        url: '/permission/update',
        method: 'post',
        data: data
    })
}

//删除权限
export function deletePermission(id){
    return request({
        url: '/permission/delete?id='+id,
        method: 'get'
    })
}

处理页面逻辑

封装完成后，来到权限管理的页面 PermissionView.vue ，引入请求，代码与图如下

import {selectPermission,addPermission,updatePermission,deletePermission} from "@/api/tenant/permission"

然后在提交表单和删除按钮的方法中使用请求，这里的表单即为新增用又为编辑用，因此提交表单的方法需判断是新增还是编辑，代码与图如下

//点击表单确认
subForm(){
  this.dialogFormVisible = false
  //判断是新增还是更新操作
  if (this.dialogTitle==='新增权限'){
    addPermission(this.temp).then(res=>{
      console.log(res)
    })
  }else{
    updatePermission(this.temp).then(res=>{
      console.log(res)
    })
  }
},

//删除权限
    handleDelete(row) {
      this.$confirm(`确定要删除权限 ${row.name} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePermission(row.id).then(res=>{
          console.log(res)
        })
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    },

测试功能

启动前后端，先测试权限的新增，比如说”基础管理”，如图

但是点击后，表格上却没有显示我们新增的权限菜单，而查看数据表或者说通过浏览器的网络工具可以看到是新增成功了的，如图

现在我们只需要手动刷新界面，就能发现确实是新增成功了，只是表格没有更新，如图，但是这里可以看到我们新增的权限到数据库后却变成了“问号”

我们再来测试删除，对刚才新增的权限点击删除即可，如图

同样的，可以发现我们的删除操作也是需要手动刷新界面才会更新表格，这显然是不合理的，下面幽络源来解决中文文字变问号的问题以及刷新问题。

中文字符变问号的解决

中文乱码是一个常见的问题，幽络源这里提供的SQL脚本已经是utf8mb4的字符集设置了，因此问题不是出现在数据库的字符集上面，但是前端传参没问题，存放到数据库后却变成了问号，那就可能是与数据库连接时的问题，查看yaml文件，幽络源这里的数据库连接配置少了 characterEncoding 的配置，只需为数据库连接url拼接如下即可

&characterEncoding=UTF-8

Vue2页面不刷新的解决

vue2刷新有很多种方式，这里幽络源推荐使用“局部重载刷新”，也叫做 v-if 刷新，将vue2项目中的App.vue修改为如下

<template>
  <div>
    <!-- 通过v-if控制router-view的销毁与重建 -->
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
export default {
  // 使用provide向所有子组件暴露reload方法
  provide(){
    return {
      reload: this.reload
    }
  },
  data(){
    return {
      isRouterAlive: true // 控制渲染的开关
    }
  },
  methods: {
    reload(){
      // 第一步：关闭渲染
      this.isRouterAlive = false

      // 第二步：在下一个DOM更新周期重新开启
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

后续在需要刷新的位置，我们只需注入 “reload” 方法，然后在具体要刷新的地方使用 this.reload()即可

<script>
export default {
  // 注入App.vue提供的reload方法
  inject: ['reload'],
  
  methods: {
    refreshData(){
      // 业务逻辑...
      
      // 调用刷新
      this.reload()
    }
  }
}
</script>

比如，幽络源这里为权限管理界面表单提交和权限删除出加上刷新，如图

现在我们再次测试权限的新增和删除，就能正常显示中文以及实时刷新了，如图

本章源码

https://pan.quark.cn/s/3410c7bbec0b

结语

如上为幽络源的10、幽络源微服务项目实战：对接权限增删改接口+vue2局部重载刷新法+中文字符错乱解决教程，如有疑问或对微服务感兴趣可加入我们的QQ群询问与交流：307531422