spring boot+iview 前后端分离架构之前后端交互的实现（六）

雨点打透心脏的1/2处 2022-01-31 03:06 227阅读 0赞

### spring boot 与 iview 前后端分离架构之前后端交互的实现（六） ###

*  axios的跨域访问工具的封装实现
 *  实现前后端交互-后端的实现
 *  实现前后端交互-前端的实现
 *  bug修复
 *   *  mysql的maven依赖的版本问题导致启动报错

# axios的跨域访问工具的封装实现 #

基于第五章的工程，在bg-admin-web的src目录底下创建一个lib目录，该目录主要用于存放我们的axios的封装的实现，以下是axios.js封装的代码：

import Axios from 'axios';
    import {Message} from 'iview';
    
    class httpRequest {
    
      constructor() {
        this.options = {
          method: '',
          url: ''
        };
        // 存储请求队列
        this.queue = {};
      }
    
      // 销毁请求实例
      destroy(url) {
        delete this.queue[url];
        const queue = Object.keys(this.queue);
        return queue.length;
      }
    
      // 请求拦截
      interceptors(instance, url) {
        // 添加请求拦截器
        instance.interceptors.request.use(config => {
          // 在往后端发送请求的时候，还没有发送之前的处理，
          // 比如我们需要往我们的请求的header里面添加一些token或者其他信息的时候可以在此处进行相应的操作处理
          console.log('请求拦截')
          return config
        }, error => {
          // 对请求错误做些什么
          return Promise.reject(error);
        })
    
        // 添加响应拦截器
        instance.interceptors.response.use((res) => {
          // 已经完成了和后端的交互，此处已经获取到了后端返回的请求了，
          // 可以在此处做权限的验证拦截，比如用户非法登录的时候可以在此处重定向到登录页面
          let {data} = res;
          console.log('响应拦截'+res)
          return data;
        }, (error) => {
          Message.error('服务内部错误');
          // 对响应错误做点什么
          return Promise.reject(error);
        })
      }
    
      // 创建实例
      create() {
        let conf = {
          // 远程请求的服务的地址
          baseURL: "http://127.0.0.1:8288",
          // 超时时间
          timeout: 5000,
          headers: {
            // 设置前端的跨域
            'Access-Control-Allow-Origin': '*',
            // 数据的提交方式为form的方式提交，若需要使用json的模式提交则将Content-Type值改为如下
            // application/json; charset=utf-8
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
            'X-URL-PATH': location.pathname
          }
        };
        return Axios.create(conf);
      }
    
      // 请求实例
      request(options) {
        let instance = this.create();
        this.interceptors(instance, options.url);
        options = Object.assign({}, options);
        this.queue[options.url] = instance;
        return instance(options);
      }
    }
    export default httpRequest;

接着是api.request.js的封装的代码如下：

import HttpRequest from './axios';
    const axios = new HttpRequest();
    export default axios;

# 实现前后端交互-后端的实现 #

首先打开我们的后端工程bg-admin-web-core，首先在entity包底下先创建一个前后端交互统一返回的实体类ReturnInfo.java，代码内容如下：

package com.github.bg.admin.core.entity;
    
    /**
     * @author linzf
     * @since 2019/4/25
     * 类描述： 统一的返回处理的实体对象
     */
    public class ReturnInfo {
    
        public ReturnInfo() {
            super();
        }
    
        public ReturnInfo(Integer code, String msg) {
            this.msg = msg;
            this.code = code;
        }
    
        public ReturnInfo(Integer code, String msg, Object obj) {
            this.msg = msg;
            this.code = code;
            this.obj = obj;
        }
    
        /**
         * 返回的错误码
         */
        private Integer code;
    
        /**
         * 返回的错误信息
         */
        private String msg;
    
        /**
         * 返回的json数据
         */
        private Object obj;
    
        public Integer getCode() {
            return code;
        }
    
        public void setCode(Integer code) {
            this.code = code;
        }
    
        public String getMsg() {
            return msg;
        }
    
        public void setMsg(String msg) {
            this.msg = msg;
        }
    
        public Object getObj() {
            return obj;
        }
    
        public void setObj(Object obj) {
            this.obj = obj;
        }
    
    }

接着在controller同级目录底下创建一个constant目录，该目录主要用于存放实体变量，同时在该目录底下创建SystemStaticConst.java类，用于存放系统常量，代码如下：

package com.github.bg.admin.core.constant;
    
    /**
     * @author linzf
     * @since 2019/4/25
     * 类描述：系统静态实体类
     */
    public class SystemStaticConst {
    
        /**
         * 系统返回的编码的key
         */
        public static final String RESULT = "code";
    
        /**
         * 系统返回的消息的key
         */
        public static final String MSG = "msg";
    
        /**
         * 请求操作成功的标志
         */
        public static final int SUCCESS = 200;
    
        /**
         * 请求操作失败的标志
         */
        public static final int FAIL = 400;
    
    
        /**
         * 当前用户没有权限
         */
        public static final int AUTH_FAIL = 300;
    
    
    }

接着在controller包底下创建一个UserController.java，代码如下：

package com.github.bg.admin.core.controller;
    
    import com.github.bg.admin.core.constant.SystemStaticConst;
    import com.github.bg.admin.core.entity.ReturnInfo;
    import io.swagger.annotations.ApiOperation;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.util.HashMap;
    import java.util.Map;
    
    /**
     * @author linzf
     * @since 2019/5/15
     * 类描述：用户的controller
     */
    @RestController
    @RequestMapping("/user")
    public class UserController {
    
        /**
         * 功能描述：模拟实现用户登录
         * @param loginAccount 用户账号
         * @param loginPassword 用户密码
         * @return 返回登录结果
         */
        @ApiOperation(value = "实现用户登陆")
        @PostMapping("login")
        public ReturnInfo login(@RequestParam(name = "loginAccount") String loginAccount, @RequestParam(name = "loginPassword") String loginPassword){
            Map<String,Object> result = new HashMap<>(1);
            result.put("token","token123");
            return new ReturnInfo(SystemStaticConst.SUCCESS, "登陆成功",result);
        }
    
    }

最后设置允许跨域访问，若不设置则会导致跨域的问题，因此在controller目录的同级目录创建一个config目录，同时在该目录底下创建一个CorsConfig.java文件，编码如下：

package com.github.bg.admin.core.config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    /**
     * @author linzf
     * @since 2019/4/25
     * 类描述：
     */
    @Configuration
    public class CorsConfig {
    
        @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurer() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/**")
                            .allowedHeaders("*")
                            .allowedMethods("*")
                            .allowedOrigins("*");
                }
            };
        }
    
    }

# 实现前后端交互-前端的实现 #

接着在前端工程的src目录底下创建一个api目录，该目录主要是用于存放于后端交互的api，接着我们在该目录底下编写一个通用的远程服务调用的类base.js，代码如下：

import axios from '../libs/api.request';
    import qs from 'qs';
    
    // 通用的远程访问的方法
    export function fetch(url, params = {}) {
        return axios.request({
            // 响应的后端的接口的地址，不包含http://127.0.0.1:8288这一部分，因此这一部分我们已经在axios.js中配置了
            url: url,
            // 由于我们的数据的提交方式是form的方式提交，因此需要对入参建转换
            data:qs.stringify(params),
            // 数据请求的方式为post
            method: 'post'
        });
    }

接着我们编写我们第一个与后端交互的实现，此处我们直接将登陆页的登录与后端进行交互，那么我们就在api目录底下创建一个sys目录，同时在sys目录底下创建一个user目录，同时在该目录底下创建一个user.api.js文件，代码如下：

import {fetch} from '../../base';
    
    // 实现用户登录
    export const login = params => {
      // /user/login这个就是后台的controller方法里的响应的地址，params就是我们的入参
      return fetch('/user/login',params);
    };

接着我们改造我们的login.vue页面，改造好以后的代码如下：

<template>
      <div class="layout">
        <Layout>
          <Header class="layout-header" id="layout-header-scroll">
            <Menu mode="horizontal" theme="dark" active-name="1">
              <div class="layout-logo">
                <img height="50px" width="50px" src="../../assets/logo.png"/>
              </div>
              <div class="layout-nav">
                <language @on-lang-change="setLanguage" style="margin-right: 10px;" :lang="local"/>
              </div>
              <div class="layout-nav">
                <MenuItem name="1" style="font-size: 30px;">
                  欢迎使用xxx系统
                </MenuItem>
              </div>
            </Menu>
          </Header>
          <Content :style="{ background: '#fff', minHeight: '500px'}">
            <div style="float: right;margin: 100px 100px 0">
              <Card title="欢迎登录XX系统">
                <Form ref="loginForm" :model="loginForm" :rules="loginFormRule">
                  <div>
                    <FormItem prop="loginAccount">
                      账号：<Input v-model="loginForm.loginAccount" prefix="ios-contact"
                                :placeholder="$t('login.loginAccount')"
                                style="width: 200px;"/>
                    </FormItem>
                    <FormItem prop="loginPassword">
                      密码：<Input v-model="loginForm.loginPassword" prefix="ios-compass" type="password"
                                :placeholder="$t('login.loginPassword')" style="width: 200px;"/>
                    </FormItem>
                  </div>
                </Form>
                <div style="margin-top: 20px;">
                  <Button type="primary" @click="loginSystem" :long=true>登录</Button>
                </div>
              </Card>
            </div>
          </Content>
        </Layout>
      </div>
    </template>
    <script>
      import Language from '../../components/language';
      import { login } from '../../api/sys/user/user.api';
    
      export default {
        components: {
          Language
        },
        data() {
          return {
            local: localStorage.getItem("lang"),
            loginForm: {
              loginAccount: '',
              loginPassword: ''
            },
            loginFormRule: {
              loginAccount: [
                {required: true, message: '请输入账号', trigger: 'blur'},
                {type: 'string', max: 30, message: '账号允许输入最大长度为30个字符', trigger: 'blur'}
              ],
              loginPassword: [
                {required: true, message: '请输入密码', trigger: 'blur'},
                {type: 'string', max: 50, message: '密码允许输入最大长度为50个字符', trigger: 'blur'}
              ]
            }
          }
        },
        methods: {
          loginSystem() {
            this.$refs['loginForm'].validate((valid) => {
              if (valid) {
                login(this.loginForm).then(res=>{
                  if(res.code==200){
                    this.$router.push({
                      name: 'main'
                    })
                  }else{
                    this.$Message.error('账号密码错误！');
                  }
                })
    
              }
            })
          },
          setLanguage(lang) {
            this.local = lang
            localStorage.setItem('lang', lang)
          }
        },
        mounted() {
        }
      }
    </script>
    <style scoped>
    
      .layout-header {
        position: relative;
        z-index: 999;
        height: 60px;
      }
    
      .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
      }
    
      .layout-nav {
        width: auto;
        float: right;
        margin: 0 auto;
        margin-right: 20px;
      }
    
      .layout-logo {
        width: 100px;
        height: 30px;
        border-radius: 10px;
        float: left;
        position: relative;
        left: 20px;
        top: 5px;
      }
    </style>

然后我们启动我们的前端工程和我们的后端工程，然后访问我们的http://127.0.0.1:8080/\#/login页面，然后我们F12打开调试页面如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
接着我们点击登录按钮会看到如下的信息则说明我们已经完成了前后端交互的实现。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
到此处我们就完成了本章节的内容了，此博文的配套代码为:[https://github.com/lazyboyl/bg-admin/tree/chapter-6][https_github.com_lazyboyl_bg-admin_tree_chapter-6]

# bug修复 #

## mysql的maven依赖的版本问题导致启动报错 ##

在启动的时候会报一下的错误：

java.sql.SQLException: java.lang.ClassCastException: java.math.BigInteger cannot be cast to java.lang.Long

此错误的原因是由于版本引起的参考该博客：[https://blog.csdn.net/xuforeverlove/article/details/83625041][https_blog.csdn.net_xuforeverlove_article_details_83625041]  
直接删除pom.xml里的mysql的version，使用默认的版本即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20220131/391677493f0a4a03bb43270f8fd887a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20220131/47d31f211bd044ceb6a6f0184f92da9d.png
[https_github.com_lazyboyl_bg-admin_tree_chapter-6]: https://github.com/lazyboyl/bg-admin/tree/chapter-6
[https_blog.csdn.net_xuforeverlove_article_details_83625041]: https://blog.csdn.net/xuforeverlove/article/details/83625041