数据库项目前端vue总结（1）

关于登录信息、权限显示

这里利用sessionStorage将用户的信息跟权限（理论上应该一起作为user信息返回的，这里分开存储。后续页面左侧Aside的访问也可以根据存储的sessionStorage解决。

*sessionStorage 属性允许你访问一个 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。**在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话，*这点和 session cookies 的运行方式不同。

request.post("/api/login", this.form).then(res => {
console.log(res)
  if (res.code === 0) {
console.log(3333)
    this.$message({
      type: "success",
      message: "登录成功"
    })
sessionStorage.setItem("user",JSON.stringify(res.data))  // 缓存用户信息
request.post("/api/permission?user_id=" + res.data.user_id).then(res1 => {
console.log(res1)
console.log("permission Get")
sessionStorage.setItem("userPermission",JSON.stringify(res1))  // 缓存用户信息
      let userStrr =sessionStorage.getItem("userPermission") || "{}"
      this.permissionList =JSON.parse(userStrr)
      activeRouter()
      this.$router.push("/")  //登录成功之后进行页面的跳转，跳转到主页
    })

    // 登录成功的时候更新当前路由
    //activeRouter()

  } else  {
    this.$message({
      type: "error",
      message: res.msg
    })
  }
})

关于路由配置

需要避免任何用户都能通过改url的方式访问对应页面，因此考虑如果此用户没有访问该页面的权限，便不进行路由加载。采取循环的方式进行路由注册。（addRoute）

同时采用foreach的方式进行权限控制。

非常简洁的写法

function activeRouter() {
    const userStr =sessionStorage.getItem("userPermission")
    if (userStr) {
        const userPermission =JSON.parse(userStr)
        let root = {
            path: '/',
            name: 'Layout',
						component:Layout,
            redirect: "/home",
            children: []
        }
        userPermission.forEach(p => {
            let obj = {
                path: p.path,
                name: p.name,
                component: () => import("@/views/" + p.name)
            };
            root.children.push(obj)
        })
        if (router) {
					router.addRoute(root)
        }
    }
}

router.beforeEach((to, from, next) => {
    if (to.path === '/login' || to.path === '/register') {
        next()
        return
    }
    let userPermission = sessionStorage.getItem("userPermission") ? JSON.parse(sessionStorage.getItem("userPermission")) : {}
    if (!userPermission || !userPermission.length) {
        next('/login')
    } else if (!userPermission.find(p => p.path === to.path)) {
        next('/login')
    } else {
        next()
    }
})

关于前端分页

这里利用了elementUi，因此分页操作非常简洁，只需要修改：data取值，利用js的slice函数。（之前傻乎乎写了一堆..)。

（不建议前端分页。没有意义。）

<el-table
    v-loading="loading"
    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    border
    stripe
    style="width: 100%">
  <el-table-column
      prop="user_id"
      label="ID"
      sortable
  >

关于清空表单

简便写法，清空this.form

this.form={brand_right:0}

关于评论加载

在评论后按发表回复时需要页面实时刷新，但是又不能采用直接刷新整个页面的方式，找到了这样一种很巧妙的写法

首先在app.vue里注册reload方法

<template>
  <div id="app" class = "body"></div>
  <el-config-provider :locale="locale">
    <router-view v-if="isRouterAlive"></router-view>
  </el-config-provider>
</template>

export default {
  name: "App",
  provide(){
    return {
      reload: this.reload
    }
  },
  components: {
    [ElConfigProvider.name]:ElConfigProvider,
  },
  data() {
    return {
      isRouterAlive:true,
locale:zhCn,
    }
  },
  methods:{
    reload(){
      this.isRouterAlive = false
      this.$nextTick(function (){
        this.isRouterAlive = true
      })
    }
  }
}

在需要用到的地方引入inject：

export default {
  name:'Comment',
  props:{
    paperid: Number
  },
  inject:['reload']
}