vue-admin-template登录功能前后端交互流程及编码

最新推荐文章于 2025-03-06 13:50:55 发布

明天天明~

最新推荐文章于 2025-03-06 13:50:55 发布

阅读量5k

点赞数 3

分类专栏： # 前端vue

本文链接：https://blog.csdn.net/qq_41950447/article/details/115870228

版权

前端vue 专栏收录该内容

4 篇文章

订阅专栏

1.vue-admin-template简介

官网https://panjiachen.github.io/vue-element-admin-site/zh/

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

总的来说，是一个已经很完善得前端模板框架，直接拿来可以进行开发，只需要更改其中的小部分代码，即可实现前后端交互。并且vue已经整合了axios，babel等组件

2.vue-admin-template目录结构

前端页面环境使用的框架模板，主要基于两种技术实现的对vue和emui进行的封装

挑重点的说

1.前端框架入口
config中的 index.html
下面的 main.js
3.框架中build目录
存放项目构建的脚本文件，（不需要更改变动）
4.框架中config目录
index.js
一些想主机，端口号等基本配置
设置useEslint: false,//关掉代码检查
dev.env.js
如果是开发环境就执行这个js，因为启动的时候是npm run dev 所以是开发环境。
到后期修改里面的后端接口地址。 BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
https://easy-mock.com这个地址经常不能访问，所以后期要改为本地（临时），再后来要添加权限框架spring secutiry
prod.env.js
如果是生产环境执行这个js
5.框架中src目录（主要写方法，写路由，写页面）
(改)api---定义调用的方法
assets----存放静态资源
components----组件
icons----矢量图标
(改)router----vue路由（菜单栏）（页面中调用）
utils----公共的工具
(改) views----写页面

3.登录功能交互流程及编码

1.首先打开打开config中dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  // BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
   BASE_API: '"http://localhost:8001"',//后端接口
})

如图，将BASE_API改为自己项目的后端接口地址，

2.进行登录调用两个方法，login登录操作方法，和info登录之后获取用户信息的方法，所以，创建接口的两个方法实现登录。

这两个方法在src-api的login.jd时登录接口

export function login(username, password) {
  return request({
    url: '/eduservice/user/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

这个只写了login一个info（显示用户信息没写）

打开store->module中的user.js

import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
  Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        login(username, userInfo.password).then(response => {
          const data = response.data
          setToken(data.token)
          commit('SET_TOKEN', data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

从store->module中的user.js中，可以看出来，这个Login方法通过引用api中login.js中的login方法，将后端传过来的数据封装到token中

所以在后端controller中创建login方法与前面对应

@RestController
@RequestMapping("/eduservice/user")
@CrossOrigin//解决跨域问题
public class EduLoginController {
    //login
    @PostMapping("login")
    public UnResult login(){
        return UnResult.ok().data("token","admin");
    }
}

返回的同样是token。

再根据后端写的方法，修改前端中src-api的login.jd时登录接口，url和method请求方式要和后端对应

至此登录功能完成，可以登录但是没有连接数据库，登录条件。目前任意登录

重启前后端测试，测试的时候应注意下面跨域问题

测试，报错 No 'Access-Control-Allow-Origin
Access to XMLHttpRequest at 'http://localhost:8001/eduservice/user/login' from origin
'http://localhost:9528' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

跨域问题：
No 'Access-Control-Allow-Origin，也就是通过一个地址去访问另一个地址，这个过程中如果访问协议，IP地址，端口号任何一个不一样，则不能访问
本项目中：
前端是'http://localhost:9528
后端是'http://localhost:8001
访问协议和IP地址都相同但是端口号不同，则存在跨域问题！！！
跨域问题解决：
（1）在后端接口controller添加注解（常用）
@CrossOrigin//解决跨域问题
（2）使用网关gateway