Ant design Pro of VUE 3笔记

Ant design Pro of VUE 3笔记,第1张

登陆:

src\views\user\Login.vue 页面中点击、验证账号密码访问src\store\modules\user.js/Login访问src\api\login.js/login并记录token访问src\mock\services\auth.js/login,返回用户信息
mock是伪后台,现在改成了自己的后台src\views\user\Login.vue跳转push /src\mock\services\user.js:475 相当于访问/api/user/nav获取路由

用户定义:src\store\modules\user.js

登录页外层布局:src\layouts\UserLayout.vue

个人信息:
src\permission.js调用GetInfo
src\store\modules\user.js调用getInfo
src\api\login.js调用UserInfo 其中:token: storage.get(ACCESS_TOKEN)
src\mock\services\user.js返回用户信息,包括权限

动态路由:
src\router\generator-routers.js调用getCurrentUserNav
src\mock\services\user.js根据token返回路由表

主路由:
src\config\router.config.js 不是
src\router\generator-routers.js
默认首页:src\router\generator-routers.js L76

右上角的用户菜单
src\components\GlobalHeader\RightContent.vue

增加浏览器本地变量
src\store\mutation-types.js
import storage from ‘store’
import { NAME } from ‘@/store/mutation-types’
storage.set(NAME, result.name)
storage.get(NAME)
storage.remove(NAME)

左上角的大logo
src\layouts\BasicLayout.vue 25 65

加载页面:
public\index.html

mock设置(proxy)
vue.config.js
src\main.js

d窗
this.$message.success(‘复制完毕’)

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/925515.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-16
下一篇 2022-05-16

发表评论

登录后才能评论

评论列表(0条)

保存