前端利用vueelementadmin搭建流程总结

目录

• 参考链接：
• 权限：
  • 新增页面
  • 添加mock的交互连接
• 前端跨域问题：

参考链接：

https://juejin.cn/post/6844903476661583880

https://panjiachen.gitee.io/vue-element-admin-site/zh/

https://element.eleme.cn/#/zh-CN/

login登录通过调用vuex的登录方法，把一些cookie权限之类的全局变量放置到vuex里，登录之后跳转到/dashboard（会重定向到/home）页面，（登录成功后，服务端会返回一个 token（该token的是一个能唯一标示用户身份的一个key），之后我们将token存储在本地cookie之中，这样下次打开页面或者刷新页面的时候能记住用户的登录状态，不用再去登录页面重新登录了。）

在路由index.js（在vue-admin-template里是在permission.js里）里的router.beforeEach((to, from, next) => {方法中判断调用loadMenus方法实现动态路由，拉取菜单，在里边调用buildMenus方法传递到后台获取数据库的数据，buildMenus方法从/api/system/menu.js里获取，获取数据库数据之后，调用vuex里的GenerateRoutes方法添加动态路由，调用vuex里的SetSidebarRouters方法添加菜单

从后台获取的数据：

SELECT m.* FROM sys_menu m, sys_roles_menus r WHERE " +
        "m.menu_id = r.menu_id AND r.role_id IN ?1 AND type != ?2 order by m.menu_sort asc
        
SELECT m.* FROM sys_menu m, sys_roles_menus r WHERE m.menu_id = r.menu_id AND r.role_id IN (1) AND type != 2 order by m.menu_sort asc

在buildTree方法里把从数据库获取的原始菜单数据改造成按照父子关系构成的树形菜单

页面布局在layout文件夹的index.vue里，总体布局如下：

左边是sidebar组件，里边获取动态菜单；右边包括上中结构：上边是navbar（包括项目文档，全屏缩放，布局设置等按钮）和TagsView（不同页面的tab标签），中间是AppMain,该组件配置router-view不同页面都是跳转到这里的，下边提供footer页面；

在 app-main 外部包了一层 keep-alive 主要是为了缓存 <router-view> 的，配合页面的 tabs-view 标签导航使用，如不需要可自行去除。

权限：

这里的代码说白了就是干了一件事，通过用户的权限和之前在router.js里面asyncRouterMap的每一个页面所需要的权限做匹配，最后返回一个该用户能够访问路由有哪些。

问为什么自己的侧边栏不能跟着自己的路由高亮，其实很简单，element-ui官方已经给了default-active所以我们只要

:default-active="$route.path" 将default-active一直指向当前路由就可以了，就是这么简单

如果你不想使用mock-server的话只要在vue.config.js中移除webpack-dev-server中proxy和after这个Middleware就可以了。

现在默认情况下本地的请求会代理到http://localhost:${port}/mock下，如果你想调整为自己的 mock 地址可以修改 proxy

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // before: require('./mock/mock-server.js'),
    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': 'api'
        }
      },
      '/auth': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/auth': 'auth'
        }
      }
    }，
    after: require('./mock/mock-server.js')
  },

在.env.development中更改VUE_APP_BASE_API：

# just a flag

ENV = 'development'

# base api

VUE_APP_BASE_API = 'http://localhost:8000'

标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件

比如在dashboard里的代码：

新增页面

在router文件夹下的index.js里添加路由

添加mock的交互连接

• 在src/api/下添加文件testPage.js

  

• 在mock下添加文件testPage.js

  

• 在mock/index.js里引入新添加的mock下的文件testPage.js

  

  

  不添加的话是不会拦截到新添加的交互链接的，报错404

前端跨域问题：

在vue.config.js文件里把上边的before: require('./mock/mock-server.js'),注释掉，并添加下边的代码

更改.dev.development文件里的VUE_APP_BASE_API

把utils文件夹里的request.js文件里的下边的code!=20000改为code!=200(这个看不同前端项目而定，如果这里不改，即使获取到了后台的代码，后台默认是200为正确的，这里前台判定是20000，前台就会报错，而不是返回后台的数据显示)