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

r囧r小猫 2021-09-25 07:30 1174阅读 0赞

### 1.vue-admin-template简介 ###

> 官网[https://panjiachen.github.io/vue-element-admin-site/zh/][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进行的封装

挑重点的说

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70][]

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

## ##

[https_panjiachen.github.io_vue-element-admin-site_zh]: https://panjiachen.github.io/vue-element-admin-site/zh/
[vue-element-admin]: http://panjiachen.github.io/vue-element-admin
[vue]: https://github.com/vuejs/vue
[element-ui]: https://github.com/ElemeFE/element
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTUwNDQ3_size_16_color_FFFFFF_t_70]: /images/20210923/d6b7ba430f1d48759ca84c75f79c9207.png