官网地址:https://panjiachen.gitee.io/vue-element-admin-site/zh/ github地址:https://github.com/PanJiaChen/vue-element-admin 由于该框架默认使用mock js模拟数据,在结合后台实际运用中我们需要访问后台api,所以第一步就是配置后台api地址。 1、编辑.env.development文件 2、修改vue.config.js 如图在devServer对...
3)将baseURL改成【''】 4)修改接口(我这里是为了访问登录接口) 对应的接口字段记得根据需要自行修改 访问:
proxy: {//代理'/admin': { target:'http://192.168.1.100:8080',//后台端口地址changeOrigin:true,//将基于名称的虚拟托管网站的选项,如果不配置,请求会报404 如果接口跨域,需要进行这个参数配置ws:true,//true / false,是否代理websocketssecure:false,//如果是https接口,需要配置这个参数pathRewrite: {'^/ad...
6.进入登录页面: 7.后端编写登录接口(这里以java为列): 验证码根据需求来进行设置; 8.如需验证码,对登录页面进行改造: 9.(重点)进行登录请求: 出现this.$store,看到这个东西就去store目录下面找东西 根据给的地址前面的一段来找,user,就找user 根据后面的找到对应的函数名 说到这里应该对项目结构应该比较清晰...
第一步,配置环境变量 .env.development 在.env.development有默认VUE_APP_BASE_API,我们现在为请求腾讯地址API再声明一个全局变量VUE_APP_BASE_API_TX # 请求后台专用接口全局变量 VUE_APP_BASE_API = '/dev-api' # 请求腾讯地址全局变量 VUE_APP_BASE_API_TX = '/iotfrontapi' ...
接口二:获取用户信息 http://localhost:9999/youlai-admin/users/current 以上就是按照mock数据制作的后台接口。 3.移除mock 1. vue.config.js http://localhost:9999为后台地址 为什么添加配置devServer.proxy进行代理转发? 因为前后端分离,就算是本地开发调试,也会因为端口不同而满足跨域请求条件,而浏览器禁止跨域...
本地开发环境中替换成我们自己后端服务地址(修改配置文件后需要npm run dev 重启服务,不然不会生效!!) 然后可以回到登入页面,发起请求。 我们可以右键-审查元素,查看自己发送的请求情况 如上图,可以看到自己发送请求的路由与接口返回的信息(具体详细的自己百度一下哈) ...
接口二: 获取用户信息 http://localhost:9999/youlai-admin/users/current 以上就是按照mock数据制作的后台接口。 3. 移除mock 1. vue.config.js http://localhost:9999为后台地址 为什么添加配置devServer.proxy进行代理转发? 因为前后端分离,就算是本地开发,也会因为端口不同而满足 跨域请求条件的。
4.Vue-Cl.i配置跨域代理 4.1 为什么会出现跨域?当下,最流行的就是前后分离项目,也就是前端项目和后端接口并不在一个域名之下,那么前端项目访问后端接口必然存在跨域的行为.4.2 解决开发环境的跨域问题 开发环境的跨域,也就是在vue-cli脚手架环境下开发启动服务时,我们访问接口所遇到的跨域问题,vue-cli为我们在...
手把手教你用vue-clic3搭建vue-element-admin项目 ⼿把⼿教你⽤vue-clic3搭建vue-element-admin项⽬1. 下载element-admin框架 点击该地址：⽤git clone 或者直接下载压缩包都可以