1、接口 因为是通过mock模拟的网络请求,所以需要添加一个获取用户菜单列表的接口(可以把vue-element-admin中的mock文件夹下的role文件夹直接copy到项目中,然后改造) mock目录下建role文件夹、index.js文件 constMock=require('mockjs')const{asyncRoutes}=require('./routes.js')constroutes=asyncRoutes module.exports...
我们按照vue-admin-template官网运行代码会看到以下页面 由于没有写后端接口,我们全权用项目中的mock,模拟后端接口请求,我们在mock文件夹下的user.js会看到系统设置了两个登陆人,一个admin,一个editor,我们模拟添加一个新的用户limm 添加完用户之后,我们就要想,动态权限分配,就是我们用不同的角色登陆,会有不同的菜单。
}, before: require('./mock/mock-server.js') }, main.js中设置了如下: import axios from 'axios'Vue.prototype.$axios=axios//配置请求的跟路径axios.defaults.baseURL='/api' 接下来就是vue组件中,编辑点击提交按钮axios: methods: { onSubmit() { let formData=newFormData();for(varkeyinthis.form)...
本管理模板采用vue3开发,使用vue-router来作为路由跳转,将登录成功后产生的菜单,token放入到vuex中存储,通过axios来进行交互,来获取服务端内容,由于没有后端接口api,本管理模板将采用mock来模拟后端接口数据 网页展示 登录页面 采用mock模拟后端接口数据,当用户名与密码都为admin时才跳转到首页,这里用了路由导航守卫进行...
├── build# 构建相关├── mock# 项目mock 模拟数据├── public# 静态资源│ │── favicon.ico# favicon图标│ └── index.html# html模板├── src# 源代码│ ├── api# 所有请求│ ├── assets# 主题 字体等静态资源│ ├── components# 全局公用组件│ ├── directive# 全局指令...
}else{ console.log('error submit!!')returnfalse} }) } 先测试一下访问基址对不对 发现基址对了,也把api去掉了,但中间多了/vue-admin-template,去下图mock目录中的user.js修改为真实存在的接口 访问地址对了,开始进入登陆方法,把下图路径的原来登陆方法修改下边的登录方法,之前登录方法用的Json传输,我们需要...
// before: require('./mock/mock-server.js') 注释mock-server生成的模拟数据 proxy: { '/dev-api': { target: `http://localhost:8080`, // 后台服务地址 changeOrigin: true, pathRewrite: { '^/dev-api': '/dev-api' // 路径重写
当前项目设置为请求本地后端项目的API,具体设置跳转到前后端联调,需要MockServer只需逆操作即可 快速上手文档: vue-element-admin (gitee.io) 组件| Element Mock.js (mockjs.com) 安装— Vue.js (vuejs.org) 开发路线: V1.0 完成项目的全部功能
其实看起来和第一篇的初始化效果差不多,唯一的区别是,第一篇初始化接口还是用的Mock接口, 而这一篇是对接的后台FastAPI接口。 接口文档 首先看看,一共对接了几个接口, 接口格式等。 修改Vue后台模版代码 很多地方文档和代码结合着看,基本都能解决问题。
{ NODE_ENV: '"production"', BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"', diff --git a/index.html b/index.html index 4c02b395c6..8be7f4b9e0 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + diff --git a/package.json b...