vue-element-admin 连接 springboot 项目的 login接口,完成登录验证

一、前端

1.设置前端指向的接口通信的地址。

   这里面.env.development=>开发环境(这里的设置入口是:开发环境

           .env.production=>生产环境

           BASE_API和具体的路径进行拼接

2.解决跨域问题

在vue.config.js文件中

1. 设置跨域配置 proxy属性

2. 设置 target属性:跨域的地址

3. 是否容许跨域

4. 注释模拟数据 mock就是给" before: require('./mock/mock-server.js') " 给注释掉

3.进行接口通信 

在user.js在src下的api文件夹中,把这个user.js文件中的的端口与你后端中的测试端口保持一致

 4.向后端发起请求

找到request.js文件进行设置请求头和使用拦截器

二、后端

springboot

一定要先添加maven依赖项,用代码生成器生成这些包文件,修改数据库等一些配置,写/user/login接口和info接口。

可以用QueryWrapper获取当前用户登录的身份编号

这里是/user/login接口,这里面的ResponseUtil是自己建的方法文件,里面有很多方法,也可以添加自己需要的方法,这里进行直接引用

这里面的第一个红框里的内容,这里的IUser1Service最好是代码生成器生成的,不然容易报错。这个名字是根据你的表名而定的

 这个是info接口,如果需要其他的接口也可以自行添加

注意:在Preview中,这里面的格式要写对

 

 三、报错情况

这种情况,先检查你的maven依赖项

 这个是info接口没写,或者写错了,检查你后端的info接口

 

 还有一些控制台的错误可以查查百度

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue-element-admin中,注册和登录功能是通过/mock/user.js文件中的rest请求进行模拟的。具体来说,该文件定义了一个名为"/vue-element-admin/user/login"的post请求,参数为"loginname",返回一个包含"code"和"tokens"信息的嵌套JSON对象作为响应。"code"是请求的响应码,而"tokens"是用户的单一状态信息,以全局维护的方式存储。 在该文件中,还定义了两个角色和相应的token内容,分别为"admin"和"editor"。每个角色对应的token会在登录时返回给用户。同时,根据token参数,可以通过"user/getInfo"方法获取用户和角色的相关信息。后端需要提供相应的接口来支持这些功能。 注册和登录页面位于/views/login目录中,其中index.vue登录界面,SocialSignin.vue是第三方登录页面。至于auth-redirect.vue文件的具体作用尚未明确。 在使用vue-element-admin开发时,使用mock.js模拟数据进行用户和权限验证是一项重要的工作。首先需要完成用户集成改造,使用本地测试环境中的用户和角色信息进行登录验证。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [VueVue-Element-Admin(四):vue-element-admin的用户登录集成](https://blog.csdn.net/yezonggang/article/details/109850163)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值