简介: Vue3-admin-template 框架修改登录页面 一. 修改views/login/comp/LoginForm.vue文件里面的内容 const state = reactive({ ruleForm: { account: 'admin', password: '123456', }, loading: false, checkedPwd: false, redirect: undefined, rules: { account: [{ required: true, message: t('...
1、先建立后台接口地址,我先采用的是PHP接口,架设web服务器,这个随意,我是使用phpstudy,端口为8082,在www下建立apinew文件夹,新建token.php和userinfo.php,模拟返回的json数据,我这里两个文件返回的都是一样的。 <?php$arr=array('code' => 20000, 'data'=>array('roles' =>array('admin'), 'introduction...
1.下载并解压vue-admin-template-master 修改成自己项目的名字 2.修改名字后导入到WebStrom 打开下方Terminal输入npm install 等待下载完成 看到这个界面说明下载完成 3.继续从命令行输入npm run dev 4.直接跳转默认浏览器 5.改造登录&退出功能 5.1、vue.config.js 注释掉mock接口配置 配置代理转发请求到目标接口 //...
这两个方法,在登录接口都要调用,第一个是登录传参判断获取token,如下图, 第二个是根据获取的token,获取登录信息,如下图 这个的话,作者前端封装在request.js的请求中,如下图, 这样基本上把后端接口类型写完,然后还需要做一些配置修改,如下图 将接口改成自己的就可以实现,然后记住修改全局的配置,需要重启前端项目。
⑥找到src/store/modules/user.js,和之前修改登陆接口的账户密码一样 因为没有获取登陆信息和退出接口,就自己写了,有接口的调用对应接口就行 3.注意事项 ①这部分修改是在vue-admin-template的master分支上改的,如果要在permission-control上改,这样操作会卡死,目前不清楚为啥。
理解vue-admin-template模板,连接后端改造登陆功能 首先修改统一请求路径为我们自己的登陆接口,在.env.development文件中 # base api VUE_APP_BASE_API = 'http://localhost:8081/api/dsxs/company' 打开登陆页面,src/views/login/index.vue <template>
1.登录 登录界面如果不需要自定义的话,不需要过多的修改,从 界面 至 modules,再到 api 都已经设计好了; 此处 是表单验证成功后,调用 store/modules 中的 user.js 里边的login方法 handleLogin(){this.$refs.loginForm.validate(valid=>{if(valid){this.loading=truethis.$store.dispatch('user/login',this...
如果後端的接口是要請求到合作的小夥伴那裡呢 dev環境呢 在.env.development 將 VUE_APP_BASE_API 改成可以請求的網址 'http://xxx.xxxx.local:86/api' 然後就可以和合作的小夥伴 愉快的調試接口了啊(可…
【vue2】使用vue-admin-template动态添加路由的思路/addRoutes的使用,使用vue-admin-template实现动态路由的一个添加的思路,addRoutes讲解
# 克隆项目gitclonehttps://github.com/PanJiaChen/vue-admin-template.git# 进入项目目录cdvue-admin-template# 安装依赖npm install# 建议不要直接使用 cnpm 安装以来,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题npm install --registry=https://registry.npm.taobao.org# 启动服务npm run de...