教育项目--登录【22】

小咪咪 2023-10-05 18:19 25阅读 0赞

#### 登录 ####

*  一、修改登录页
 *  二、分析登录接口
 *  三、编写登录接口
 *  四、前端路径的修改
 *  五、启动前后端进行测试
 *  六、跨域问题解决方式
 *   *  1.后端(常用)
     *  2.网关(GetWay)
 *  七、测试

*  记录一下，下周开始会快速的进行更新，因为CSDN每天的发布会有限制，所以还是会及时更新新的内容。
 *  这章呢主要是为了前端框架的主题的模板而进行的后台登录模块的编写，为了前端启动的时候进入页面时，**调用**的是我们**后台写好的接口**方法。
 *  话不多说，开始吧

## 一、修改登录页 ##

将config目录中的`dev.env.js`文件中进行修改（可以直接复制）

'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
        
      NODE_ENV: '"development"',
      // BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
      // 修改的时候的Http和Https
      BASE_API: '"http://localhost:8001"',
    })

## 二、分析登录接口 ##

因为在登录的时候前端框架启动的时候会执行`login.js`文件的中`login(username, password)`和`getInfo(token)`方法，登录和登录之后获取用户信息的方法。所以创建两个接口进行替换该方法

先看一下原先的模板中的方法内容

actions: {
        
        // 登录
        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)
            })
          })
        },
    
        // 获取用户信息
        GetInfo({
         commit, state }) {
        
          return new Promise((resolve, reject) => {
        
            getInfo(state.token).then(response => {
        
              const data = response.data
              if (data.roles && data.roles.length > 0) {
         // 验证返回的roles是否是一个非空数组
                commit('SET_ROLES', data.roles)
              } else {
        
                reject('getInfo: roles must be a non-null array !')
              }
              commit('SET_NAME', data.name)
              commit('SET_AVATAR', data.avatar)
              resolve(response)
            }).catch(error => {
        
              reject(error)
            })
          })
        },
    
        // 登出
        LogOut({
         commit, state }) {
        
          return new Promise((resolve, reject) => {
        
            logout(state.token).then(() => {
        
              commit('SET_TOKEN', '')
              commit('SET_ROLES', [])
              removeToken()
              resolve()
            }).catch(error => {
        
              reject(error)
            })
          })
        },
    
        // 前端 登出
        FedLogOut({
         commit }) {
        
          return new Promise(resolve => {
        
            commit('SET_TOKEN', '')
            removeToken()
            resolve()
          })
        }
      }
    }

可以看出共有三个方法：

> 登录 返回token  
> 获取用户信息 返回用户信息  
> 登出 返回状态

## 三、编写登录接口 ##

package com.djr.eduservice.controller;
    
    import com.djr.commonutils.R;
    import io.swagger.annotations.Api;
    import io.swagger.annotations.ApiOperation;
    import io.swagger.annotations.ApiParam;
    import org.springframework.web.bind.annotation.*;
    
    /**
     * @Program: 前端框架使用的登录接口
     * @Description
     * @Author: 涛涛 * ^ *
     * @Create: 2021-01-23 22:18
     **/
    @Api(description="登录模块")
    @RestController
    @RequestMapping("/eduService/login")
    public class EduLoginController {
        
        /**
         * 模拟登录
         * @return
         */
        @ApiOperation(value = "用户登录")
        @PostMapping("/login")
        public R login() {
        
    
    
            return R.ok().data("token", "admin");
        }
    
        /**
         * 模拟获取用户信息
         * @return
         */
        @ApiOperation(value = "获取用户信息")
        @GetMapping("/info")
        public R info() {
        
    
    
            return R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
        }
    
    
    }

这个也可以直接复制的。

进行swagger测试：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]

--------------------

## 四、前端路径的修改 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 1]

**将前端中的路径进行修改，注意请求方式的一致**

## 五、启动前后端进行测试 ##

![在这里插入图片描述][2021012322412635.png]  
出现了以上的问题：跨域问题

跨域问题：

> 通过一个路径进行访问另一个地址，这个过程中，如果有三个问题某一个不一致产生  
> 访问协议 HTTP/HTTPS  
> IP地址 196.\*\*\*\*\*/127.0.0.1  
> 端口号 9528/8001

上述问题中，发现这两边的端口号是不一样的，所以是有网络异常的一个跨域问题

## 六、跨域问题解决方式 ##

### 1.后端(常用) ###

@CrossOrigin

将这个注解添加到controller上

### 2.网关(GetWay) ###

Spring Cloud

## 七、测试 ##

这里小编出现了一个问题：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 2]

后端中使用的是post方式，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 3]  
前端中使用的也是post方式  
可是最后在页面中访问的时候，报错信息为：`Request method ‘GET‘ not supported`  
原因：

> 小编在编写后端代码的时候使用PostMapping注解的时候`value`中的值login没有添加`/`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 4]  
**出现现在的页面的话就是登录的路径已经是修改完成了**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210123223242928.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210123223525684.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70
[2021012322412635.png]: https://img-blog.csdnimg.cn/2021012322412635.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021012411360768.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210123231342804.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210124165348202.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70