Springboot+Vue实现简单的前端后分离数据交互

Bertha 。 2023-10-04 19:22 3阅读 0赞

**目录**

一，前后端分离介绍

二，与传统单体结构的比较

2.1，传统单体结构开发

2.2，前后端分离结构开发

三，简单实现前后端数据交互

1，准备的环境及工具

2，开发步骤

2.1，后端部分

2.2，前端部分

2.3，项目运行及实现结果

编辑

四，简单总结

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

## 一，前后端分离介绍 ##

所谓的前后端分离，就是将一个应用开发的前后端编码分开来写。后端负责处理，存储数据，而前端，则主要通过后端提供的数据接口，对数据进行渲染展示。通过这样前后端分工合作，使得项目的分工更加明确，大大降低了前后端代码的之间的耦合度，提高了开发效率。

## 二，与传统单体结构的比较 ##

### 2.1，传统单体结构开发 ###

传统的开发主要是，前端通过编写HTML静态界面，然后通过将界面内嵌到JSP中，或者使用Thymeleaf模板解析HTML静态界面。后端通过MVC架构中的DispatcherServlet将处理请求中的数据渲染ModelAndView或者Model到指定的静态界面中，从而达到前后端的整合。

整体的结构如图所示：

![f388f802be8d4bfda926f8571ad658b9.png][]

在这样一体化的构造中，如果后端业务逻辑需要更改或者数据获取出现问题，前端就要跟后端协调沟通，或者业务功能更加复杂时，这样一体化的弊端就会愈发明显。耦合度高，开发麻烦，严重影响开发效率。

### 2.2，前后端分离结构开发 ###

采用前后端分离的方式进行开发时，前端只需要独立去编写客户端代码，后端专心于编写服务端代码，然后提供数据接口即可。前端开发人员与后端人员通过约定好接口文档(URL，数据类型，参数)就可以分别进行独立开发，并且，前端还可以进行伪数据构造进行数据展示测试。不需要完全依赖于后端，最后集成一下就能实现相应的业务功能了，从而达到前后端的解耦，大大提高开发效率。

整体结构如图所示：

![44bcd98340714a8caf5436c3dcc6189a.png][]

这样开发以后，前后端开发人员可以更专注于自己擅长的领域，实现职责分离。

*  前后端仅仅通过异步接口(AJAX/JSONP)来编程
 *  前后端都各自有自己的开发流程，构建工具，测试集合
 *  关注点分离，前后端变得相对独立并解耦合

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>前端</td> 
   <td>后端</td> 
  </tr> 
  <tr> 
   <td>接受，展示数据</td> 
   <td>提供数据</td> 
  </tr> 
  <tr> 
   <td>处理渲染逻辑</td> 
   <td>处理业务逻辑</td> 
  </tr> 
  <tr> 
   <td>MVVM架构</td> 
   <td>MVC架构</td> 
  </tr> 
  <tr> 
   <td>专注于客户端代码构造</td> 
   <td>专注于服务器代码构造</td> 
  </tr> 
 </tbody> 
</table>

## 三，简单实现前后端数据交互 ##

### 1，准备的环境及工具 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>开发准备</td> 
   <td>前端</td> 
   <td>后端</td> 
  </tr> 
  <tr> 
   <td>环境</td> 
   <td>node.js</td> 
   <td>&nbsp;jdk1.8，tomcat9，mysql8</td> 
  </tr> 
  <tr> 
   <td>技术集成</td> 
   <td>vue，axios，element-plus</td> 
   <td>Springboot，MyBatis-plus</td> 
  </tr> 
  <tr> 
   <td>开发工具</td> 
   <td>Visual Studio Code</td> 
   <td>IntelliJ IDEA 2022.1,Navicat Premium ,(ApiPost6)</td> 
  </tr> 
 </tbody> 
</table>

### 2，开发步骤 ###

#### 2.1，后端部分 ####

2.1.1，构造一个数据库，准备一张用于数据展示的数据表

create table test_user
    (
        id         int(20) auto_increment comment '用户id'
            primary key,
        name       varchar(30) null comment '用户姓名',
        sex        tinyint(1)  null comment '性别（1为男，0为女）',
        address    varchar(45) null comment '用户地址',
        createTime datetime    null,
        constraint id_index
            unique (id) comment 'id为唯一索引'
    );

构建存储过程快速插入100条数据，详情方法查看[如何使用存储过程快速插入数据][Link 1]

![f3173f305bde482bb7c23dc4d429bd5f.png][]

2.1.2，在IDEA里创建一个SpringBoot项目，并导入相关依赖

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>3.5.1</version>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-jdbc</artifactId>
            </dependency>
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
            </dependency>
    <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <optional>true</optional>
            </dependency>
            
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-generator</artifactId>
                <version>3.5.1</version>
            </dependency>
            
            <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-boot-starter</artifactId>
                <version>3.0.0</version>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
                <exclusions>
                    <exclusion>
                        <groupId>org.junit.vintage</groupId>
                        <artifactId>junit-vintage-engine</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
            <dependency>
                <groupId>junit</groupId>
                <artifactId>junit</artifactId>
                <scope>test</scope>
            </dependency>
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.83</version>
            </dependency>
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>easyexcel</artifactId>
                <version>2.2.5</version>
            </dependency>

2.1.3，配置yml文件里面的数据库配置

server:
      port: 8090
    spring:
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        password: 123456
        username: root
        url: jdbc:mysql://localhost:3306/db_user?&useSSL=true&useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
      mvc:
        format:
          date-time: yyyy-MM-dd HH:mm
    
    
    
    mybatis-plus:
      mapper-locations: classPath*:/mapper/*.xml
      configuration:
        map-underscore-to-camel-case: false # 禁止大写变小写时自动添加下划线
        log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

2.1.4，通过MyBatis-plus代码生成器，直接构建基础的项目结构(pojo，service，dao，serviceImpl，controller)，通过MyBatis-Plus自动生成代码后，我们基本的一些代码全部省去了，包括业务需要的简单增删改查也全部轻松自动搞定。需要注意的是，**自动生成的代码并不能完全适用于我们所有业务**，如果业务需求有变，还是需要我们自己手动编写动态SQL，不要过于依赖框架哦~~~~这样后端基本的框架就搭建成功了

![bb54734cceaa42f0a0a535cb923c7d01.png][]

2.1.5， 考虑到在前后端数据对介绍会涉及到跨域问题，接口文档对接问题，因此需要简单编写一下跨域，Swagger的配置类。

package com.yy.Config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    
    /**
     * @author young
     * @date 2022/8/23 17:33
     * @description: 跨域配置
     */
    @Configuration
    public class CorsConfig {
        /**
         * 最大有效时长
         */
        private static final  long MAX_TIMEOUT=24*60*60;
        @Bean
        public CorsConfiguration corsConfiguration(){
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            corsConfiguration.setMaxAge(MAX_TIMEOUT);
            //设置访问源请求头
            corsConfiguration.addAllowedHeader("*");
            //设置访问源地址
            corsConfiguration.addAllowedOrigin("*");
            //设置访问源请求方法
            corsConfiguration.addAllowedMethod("*");
            return corsConfiguration;
        }
    
        /**
         * 设置跨域配置
         * @return
         */
        @Bean
        public CorsFilter corsFilter(){
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**",corsConfiguration());
            return new CorsFilter(source);
        }
    }

package com.yy.Config;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.core.env.Environment;
    import org.springframework.core.env.Profiles;
    import springfox.documentation.builders.RequestHandlerSelectors;
    import springfox.documentation.service.ApiInfo;
    import springfox.documentation.service.Contact;
    import springfox.documentation.spi.DocumentationType;
    import springfox.documentation.spring.web.plugins.Docket;
    import springfox.documentation.swagger2.annotations.EnableSwagger2;
    
    import java.util.ArrayList;
    
    @Configuration
    @EnableSwagger2//开启Swagger2
    public class SwaggerConfig {
    
        //添加分组
        @Bean
        public Docket docket1(){
            return new Docket(DocumentationType.SWAGGER_2).groupName("黎治跃");
        }
    
        //配置Swagger的Docket的bean实例
        @Bean
        public Docket docket(Environment environment){
    
            //设置要显示的Swagger环境
            Profiles profiles = Profiles.of("dev", "test");
            //获取项目环境
            boolean b = environment.acceptsProfiles(profiles);
            System.out.println(b);
    
            return new Docket(DocumentationType.SWAGGER_2).groupName("YY")
                .apiInfo(apiInfo())
                .enable(b)  //是否启动Swagger，false，则浏览器无法访问Swagger
                .select()
                //RequestHandlerSelectors,配置要扫描的接口方式
                //basePackage指定要扫描的包
                //any : 扫描全部
                //none :不扫描
                //withClassAnnotation : 扫描类上的注解
                .apis(RequestHandlerSelectors.basePackage("com.yy.controller"))
                //path :过滤路径
                //.paths(PathSelectors.ant("/yy/**"))
                .build();
    }
    
    //配置Swagger信息=apiinfo
    
        private ApiInfo apiInfo(){
            Contact contact = new Contact("YY", "https://www.4399.com", "2463252763@qq.com");
            return new ApiInfo("YY的SwaggerAPI文档", 
                "黎治跃失恋了，2022/8/19",
                "1.0v",
                "urn:tos",
                 contact, 
                "Apache 2.0", 
                "http://www.apache.org/licenses/LICENSE-2.0",
                new ArrayList<>());
        }
    }

为了更好地清晰的让我们获取的信息与前端统一，也可以编写一个统一返回值的类，让返回结果以自定义的JSON格式展示出来，方便我们阅读。

定义一个方便获取常量的枚举类

/**
     * @author young
     * @date 2022/8/19 21:36
     * @description: 响应结果枚举类
     */
    
    @AllArgsConstructor
    @Getter
    public enum ResponseEnum {
       /**响应成功**/
       SUCCESS(200, "操作成功"),
       /**操作失败*/
       FAIL(201,"获取数据失败"),
       /**错误请求**/
       ERROR(400,"错误请求"),
       /**页面未找到**/
       NOT_FOUND(404,"页面未找到"),
       /**系统异常**/
       SYS_ERROR(-1,"系统异常"),
      /*信息已存在*/
      MSG_ERROR(409,"信息已存在");
       /**响应码**/
       private final Integer code;
       
       /** 结果 **/
       private  final String  resultMessage;
       
       public static ResponseEnum getResultCode(Integer code){
          for (ResponseEnum value : ResponseEnum.values()) {
             if (code.equals(value.getCode())){
                return value;
             }
          }
          return ResponseEnum.ERROR;
       }
    /*
    简单测试一下
     */
       public static void main(String[] args) {
          ResponseEnum resultCode = ResponseEnum.getResultCode(100);
          System.out.println(resultCode);
       }
    }

定义统一返回值的类

package com.yy.utils;
    import com.yy.enums.ResponseEnum;
    import lombok.Data;
    
    import java.io.Serializable;
    import java.util.HashMap;
    import java.util.Map;
    
    /**
     * @author young
     * @date 2022/8/19 21:52
     * @description: 统一返回结果的类
     */
    
    @Data
    public class  R<T> implements Serializable {
        
        private static final long serialVersionUID = 56665257248936049L;
        /**响应码**/
        private Integer code;
    
        /**返回消息**/
        private String message;
    
        /**返回数据**/
        private T data;
    
       private R(){}
        /**
         * 操作成功ok方法
         */
        public static <T> R<T> ok(T data) {
    
            R<T> response = new R<>();
            response.setCode(ResponseEnum.SUCCESS.getCode());
            response.setMessage(ResponseEnum.SUCCESS.getResultMessage());
            response.setData(data);
            return response;
        }
    
        /**
         * 编译失败方法
         */
        public static <T> R<T> buildFailure(Integer errCode, String errMessage){
    
            R<T> response = new R<>();
            response.setCode(errCode);
            response.setMessage(errMessage);
            return response;
        }
    
    }

如果需要在后端对获取的响应数据用mybatis-plus进行分页呢。还需要配置一下mybatis-plus的配置类

/**
     * @author young
     * @date 2022/8/29 21:27
     * @description: MyBatis-Plus分页配置
     */
    @Configuration
    @MapperScan("com.yy.dao")
    public class MyBatisPlusConfig {
        @Bean
        public MybatisPlusInterceptor mybatisPlusInterceptor(){
    
            MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
            PaginationInnerInterceptor paginationInnerInterceptor = new PaginationInnerInterceptor(DbType.MYSQL);
            // 设置请求的页面大于最大页后操作， true调回到首页，false 继续请求  默认false
            // paginationInnerInterceptor.setOverflow(false);
            // 设置最大单页限制数量，默认 500 条，-1 不受限制
            // paginationInnerInterceptor.setMaxLimit(500L);
            interceptor.addInnerInterceptor(paginationInnerInterceptor);
            return interceptor;
    
        }
    }

当然，这个并不是必须的，后面在前端通过element-plus也能对数据自动进行分页展示，个人认为更加方便，没有必要在后端进行分页。如果是为了更好的按条件查询或其他之用，也可以考虑 。

2.1.6，编写controller去提取前端页面需要的数据

/**
     * @author young
     * @date 2022/8/26 9:36
     * @description:
     */
    @Slf4j
    @RestController
    @RequestMapping("/mysql")
    public class TestUserController {
        private static final DateFormat dataFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        @Resource
        private TestUserServiceImpl testUserService;
    /*                            前后端分离测试                    */
    
        /**
         * 添加用户
         *
         * @param request
         * @return
         */
        @PostMapping("/addUserTo")
        public R<Object> addUser(HttpServletRequest request) {
            JSONObject object = new JSONObject();
            String name = request.getParameter("name").trim();
            String sex = request.getParameter("sex").trim();
            String address = request.getParameter("address").trim();
            String createTime = request.getParameter("createTime").trim();
            if ("".equals(name)) {
                object.put("code", 0);
                object.put("msg", "用户不能为空");
                return R.ok(object);
            }
            TestUser user = new TestUser();
            Date date = new Date();
            try {
                date = dataFormat.parse(createTime);
            } catch (Exception e) {
                e.printStackTrace();
            }
            user.setName(name);
            user.setSex(Boolean.valueOf(sex));
            user.setAddress(address);
            user.setCreateTime(date);
            try {
                boolean add = testUserService.save(user);
               
                if (add) {
                    object.put("code", 1);
                    object.put("success", true);
                    object.put("msg", "添加成功");
                    object.put("type", "success");
                    return R.ok(object);
                } else {
                    object.put("code", 0);
                    object.put("success", false);
                    object.put("msg", "添加失败");
                    object.put("type", "error");
                    return R.buildFailure(ResponseEnum.FAIL.getCode(), ResponseEnum.FAIL.getResultMessage());
                }
            } catch (DuplicateKeyException e) {
                object.put("code", 2);
                object.put("success", false);
                object.put("msg", "用户已存在");
                object.put("type", "error");
                return R.buildFailure(ResponseEnum.MSG_ERROR.getCode(), ResponseEnum.MSG_ERROR.getResultMessage());
            }
        }
    
        /**
         * 前端获取所有数据
         *
         * @return
         */
        @GetMapping("/getAllTo")
        public R<List<TestUser>> allUser() {
            return R.ok(testUserService.list());
        }
    
        /**
         * 返回指定id的用户
         *
         * @param request
         * @return
         */
        @GetMapping("/getById")
        public R<TestUser> getById(HttpServletRequest request) {
            String id = request.getParameter("id");
            TestUser user = testUserService.getById(id);
            return R.ok(user);
        }
    
        /**
         * 删除用户
         *
         * @param request
         * @return
         */
        @DeleteMapping("deleteUserTo")
        public R<Boolean> deleteUserTo(HttpServletRequest request) {
            String id = request.getParameter("id");
            return R.ok(testUserService.removeById(id));
        }
    
        /**
         * 更新用户信息
         *
         * @param request
         * @return
         */
        @PostMapping("/updateUserTo")
        public R<Object> updateUserTo(HttpServletRequest request) {
            JSONObject jsonObject = new JSONObject();
            String id = request.getParameter("id").trim();
            String name = request.getParameter("name").trim();
            String sex = request.getParameter("sex").trim();
            String address = request.getParameter("address").trim();
            String createTime = request.getParameter("createTime").trim();
            TestUser testUser = new TestUser();
            Date date = new Date();
            try {
                date = dataFormat.parse(createTime);
            } catch (Exception e) {
                e.printStackTrace();
            }
            testUser.setId(Integer.parseInt(id));
            testUser.setName(name);
            testUser.setSex(Boolean.valueOf(sex));
            testUser.setAddress(address);
            testUser.setCreateTime(date);
            boolean res = testUserService.updateById(testUser);
            if (res) {
                jsonObject.put("code", 1);
                jsonObject.put("msg", "修改成功！");
                 R.ok(jsonObject).toString();
                return R.ok(jsonObject);
            } else {
                jsonObject.put("code", 0);
                jsonObject.put("msg", "修改失败");
                return R.buildFailure(ResponseEnum.FAIL.getCode(), ResponseEnum.FAIL.getResultMessage());
            }
        }
    }

最后，通过接口测试工具(Swagger，ApiPost，Postman都可)对我们写的数据接口测试一下，数据返回值符合预期的话，那么后端代码就该一段落了！

![a7fb7667dc7b4edc9300ce5db178c290.png][]![616dd9874ade4a8583666b42de0958ef.png][]

#### 2.2，前端部分 ####

前端主要通Vue框架构建项目，主要是对客户端界面进行构造。由于笔者对于前端基础不怎么好，因此主要用Element-Plus进行界面构造，axios解决前后端交互。vue使用的是vue3，但是函数方法上仍旧采用的vue2的形式，主要实现过程如下：

2.2.1，在main.js上全局配置需要使用到的插件

import { createApp } from 'vue'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import App from './App.vue'
    import * as ELIcons from '@element-plus/icons-vue'
    // 配置路由器
    import router from './router'
    
    import './assets/global.css'
    createApp(App).use(router).use(ELIcons).use(ElementPlus,{size:'small'}).mount('#app')

2.2.2，封装aixos请求后端的请求方式request.js

import axios from 'axios'
    import {BASE_URL} from '../util/name'
    
    axios.defaults.timeout = 5000 // 超时时间设置
    axios.defaults.baseURL = BASE_URL
    // Content-Type 响应头
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
    
    // response 拦截器
    // 可以在接口响应后统一处理结果
    axios.interceptors.response.use(
        response => {
            let res = response.data;
            // 如果是返回的文件
            if (response.config.responseType === 'blob') {
                return res
            }
            // 兼容服务端返回的字符串数据
            if (typeof res === 'string') {
                res = res ? JSON.parse(res) : res
            }
            return res;
        }
        ,
        error => {
            console.log('err' + error) // for debug
            return Promise.reject(error)
        }
    )
    
    
    /**
       * 封装get方法
       * @param url
       * @param data
       * @returns {Promise}
       */
     export function get (url, params = {}, responseType = 'json') {
        return new Promise((resolve, reject) => {
          axios.get(url, {
            params: params,
            responseType
          })
            .then(response => {
              resolve(response.data)
            })
            .catch(err => {
              reject(err)
            })
        })
      }
      
      /**
         * 封装post请求
         * @param url
         * @param data
         * @returns {Promise}
         */
      export function post (url, data = {}) {
        return new Promise((resolve, reject) => {
          axios.post(url, data)
            .then(response => {
              resolve(response.data)
            }, err => {
              reject(err)
            })
        })
      }
      
      /**
         * 封装delete请求
         * @param url
         * @param data
         * @returns {Promise}
         */
      export function deletes (url, data = {}) {
        return new Promise((resolve, reject) => {
          axios.delete(url, data)
            .then(response => {
              resolve(response.data)
            }, err => {
              reject(err)
            })
        })
      }

2.2.3，封装前后端api对应的请求接口index.js

import {get,post,deletes} from '../util/request'
    const HttpManager={
    
      // 前端用到的函数            后端对应的接口
       //返回所有用户 
      getAllUser: () => get(`mysql/getAllTo`),
      // 返回指定ID的用户
      getUserOfId: (id) => get(`mysql/getById?id=${id}`),
      // 添加用户
      addUser: (params) => post(`mysql/addUserTo`, params),
      // 更新用户信息
      updateUserMsg: (params) => post(`mysql/updateUserTo`, params),
      // 删除用户
      deleteUser: (id) => deletes(`mysql/deleteUserTo?id=${id}`),
      //模糊查询
      likeSelect:(params)=>get(`mysql/likeSelect`,params)
    }
    export {HttpManager}

2.2.4，提取公共的methos，放在mixins中，这样就能将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使代码保持干净和易于维护。

export const mixin = {
      methods: {
        // 获取要删除列表的id
        handleDelete (id) {
          this.idx = id
          this.delVisible = true
        },
        // 获取批量要删除的列表
        handleSelectionChange (val) {
          this.multipleSelection = val
        },
        // 批量删除
        delAll () {
          console.log("执行该方法")
          for (let item of this.multipleSelection) {
            this.handleDelete(item.id)
            this.deleteRow(item.id)
          }
          this.multipleSelection = []
        },
        getTime (val) {
          let time = String(val).match(/[0-9-]+(?=\s)/)
          return Array.isArray(time) ? time[0] : time
        },
        changeSex (value) {
          if (value === false) {
            return '女'
          } else if (value === true) {
            return '男'
          }
        },
        toggleSex (value) {
          if (value === '女') {
            return false
          } else if (value === '男') {
            return true
          }
        },
        // 更新图片
        handleAvatarSuccess (res, file) {
          if (res.code === 1) {
            this.imageUrl = URL.createObjectURL(file.raw)
            this.getData()
            this.$notify({
              title: '上传成功',
              type: 'success'
            })
          } else {
            this.$notify({
              title: '上传失败',
              type: 'error'
            })
          }
        },
        beforeAvatarUpload (file) {
          const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
          const isLt2M = file.size / 1024 / 1024 < 2
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!')
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
          }
          return isJPG && isLt2M
        },
    
      }
    }

2.2.5，抽离出侧边栏组件AsiderBody，头部组件HeaderBody，直接从官网提取，并进行简单的样式更改

<template>
       
       <div  style="font-size: 14px;line-height: 60px; display: flex">
            <div style="flex: 1;font-size: 20px">
              <el-icon style="cursor: pointer" @click="collapse"><Fold /></el-icon>
            </div>
            <div class="toolbar" style="width: 70px">
              <el-dropdown style="cursor: pointer">
                <el-icon style="margin-right: 8px; margin-top: 24px"
                  ><ArrowDown
                /></el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <span>张三</span>
            </div>
       </div>
    </template>
    
    <script>
    import {Fold,ArrowDown} from '@element-plus/icons-vue'
    export default {
    name:'HeaderBody',
    components:{
    Fold,
    ArrowDown
    },
    props:['collapse'],
    }
    </script>
    
    <style>
    
    </style>

<template>
      <el-scrollbar style="background-color: #304156">
        <el-menu
          :default-openeds="['1', '3']"
          background-color="#304156"
          text-color="rgb(91, 119, 211)"
          active-text-color="#ffd04b"
          overflow="hidden"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
        >
          
          <div style="height: 60px; line-height: 60px; text-align: center">
            <img
              src="../assets/yp.png"
              style="width: 20px; posotion: relative; top: 5px; margin-right: 5px"
            />
            <b style="color: white" v-show="logoTestShow">后台管理系统</b>
          </div>
          <el-sub-menu index="/">
            <template #title>
              <el-icon><Menu /></el-icon><span>导航 主页</span>
            </template>
            <el-menu-item-group>
              <template #title>分组 1</template>
              <el-menu-item index="/user">用户管理 1</el-menu-item>
              <el-menu-item index="/about">关于-登录</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组 2">
              <el-menu-item index="1-3">选项 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title>选项4</template>
              <el-menu-item index="1-4-1">选项 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu insdex="2">
            <template #title>
              <el-icon><Message /></el-icon>
              <span>导航 Two</span>
            </template>
            <el-menu-item-group>
              <template #title>分组 1</template>
              <el-menu-item index="2-1">选项 1</el-menu-item>
              <el-menu-item index="2-2">选项 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="2-3">选项 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="2-4">
              <template #title>选项 4</template>
              <el-menu-item index="2-4-1">选项 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><House /></el-icon>
              <span>导航 Three</span>
            </template>
            <el-menu-item-group>
              <template #title>分组 1</template>
              <el-menu-item index="3-1">选项 1</el-menu-item>
              <el-menu-item index="3-2">选项 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="3-3">选项 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="3-4">
              <template #title>选项 4</template>
              <el-menu-item index="3-4-1">选项 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </template>
    
    <script>
    import { Menu, Message, House } from "@element-plus/icons-vue";
    export default {
      name: "AsiderBody",
      props: {
        isCollapse: Boolean,
        logoTestShow: Boolean,
      },
      components: {
        Menu,
        Message,
        House,
      },
    };
    </script>
    
    <style>
    </style>

2.2.6，构建主要的信息展示界面，这样只有el-main里面的内容会随路由的改变而切换，而侧边栏AsiderBody，头部栏HeaderBody不会改动，从而实现组件复用。

<template>
      <el-container class="layout-container-demo" style="height: 100vh">
        <el-aside :width="sideWidth + 'px'" background-color="rgb(238,241,246)">
        <asider-body :isCollapse="isCollapse" :logoTestShow="logoTestShow" :collapse="collapse"/>
        </el-aside>
    
        <el-container>
          <el-header style="border-bottom:1px solid #ccc">
           <HeaderBody :collapse="isCollapse"/>
          </el-header>
    
          <el-main style="margin-left: 40px">
           <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </template>
    
    <script>
    
    import { mixin } from "../mixins/index";
    import AsiderBody from "@/components/AsiderBody.vue"
    import HeaderBody from "@/components/HeaderBody.vue"
    export default {
      name: "HomePage",
      mixins: [mixin],
      components: {
        AsiderBody,
        HeaderBody
      },
      data() {
        return {
          isCollapse: false,
          sideWidth: 200,
          logoTestShow: true,
        }
      },
      methods:{
                // 收缩侧边栏
        collapse() {
          this.isCollapse = !this.isCollapse;
          if (this.isCollapse) {
            (this.sideWidth = 64), (this.logoTestShow = false);
          } else {
            (this.sideWidth = 200), (this.logoTestShow = true);
          }
        },
    }
    }
    </script>
    
    <style scoped>
    .layout-container-demo .el-header {
      position: relative;
      background-color: var(--el-color-primary-light-7);
      color: var(--el-text-color-primary);
    }
    .layout-container-demo .el-aside {
      color: var(--el-text-color-primary);
      background: var(--el-color-primary-light-8);
    }
    .layout-container-demo .el-menu {
      border-right: none;
    }
    .layout-container-demo .el-main {
      padding: 0;
    }
    .layout-container-demo .toolbar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      right: 20px;
    }
    
    </style>

2.2.7，用户信息展示界面构造，以及相关函数编写调用

<template>
      <div>
           <div style="margin-top: 20px; text-size: 20px">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item
                  ><a href="/user">用户信息</a></el-breadcrumb-item
                ></el-breadcrumb
              >
            </div>
            <div style="margin-top: 10px">
              <el-input
                v-model="select_word"
                placeholder="筛选相关用户"
                style="width: 200px"
              >
                <template #suffix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-button
                round
                color="#db6b2b"
                class="ml-5"
                plain
                @click="reSet"
              >
                重置</el-button
              >
            </div>
            <div style="padding: 10px 0; display: inline-flex">
              <el-button type="primary" @click="delAll"
                >批量删除
                <el-icon><DeleteFilled /></el-icon>
              </el-button>
              <el-button
                type="primary"
                class="mr-5"
                @click="centerDialogVisible = true"
              >
                添加用户<el-icon><Plus /></el-icon>
              </el-button>
              <el-upload
                ref="upload"
                action="#"
                accept=".xlsx, .xls"
                :auto-upload="false"
                :on-change="uploadFile"
                :show-file-list="false"
              >
                <el-button type="primary" class="ml-5">
                  导入数据<el-icon><Download /></el-icon>
                </el-button>
              </el-upload>
              <el-button
                type="primary"
                style="margin-left: 10px"
                @click="exportE()"
              >
                导出数据<el-icon><Upload /></el-icon>
              </el-button>
            </div>
            <el-table
              :data="datas"
              style="text-align: center"
              border
              stripe
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="40"
                align="center"
              ></el-table-column>
              <el-table-column prop="id" label="ID" width="80px" align="center" />
              <el-table-column
                prop="createTime"
                label="日期"
                width="240px"
                align="center"
              >
                
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="200px"
                align="center"
              />
              <el-table-column prop="sex" label="性别" width="200px" align="center">
                
                <template v-slot="scope">
                  <div>{
       { changeSex(scope.row.sex) }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址"
                width="200px"
                align="center"
              />
              <el-table-column label="操作" align="center">
                
                
                <template v-slot="scope">
                  <el-button
                    type="success"
                    class="mr-5"
                    @click="handleEdit(scope.row)"
                    >编辑<el-icon><Edit /></el-icon
                  ></el-button>
                  <el-button
                    type="danger"
                    class="mr-5"
                    @click="handleDelete(scope.row.id)"
                    >删除<el-icon><DeleteFilled /></el-icon
                  ></el-button>
                  <el-button type="warning" class="mr-5"
                    >权限<el-icon><ElementPlus /></el-icon
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="padding: 10px 0">
              <el-pagination
                @current-change="handleCurrentChange"
                background
                layout="total, prev, pager, next"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="tableData.length"
              >
              </el-pagination>
            </div>
            
            <el-dialog
              title="添加用户"
              v-model="centerDialogVisible"
              width="400px"
              center
            >
              <el-form
                :model="registerForm"
                status-icon
                :rules="rules"
                ref="registerForm"
                label-width="70px"
                class="demo-ruleForm"
              >
                <el-form-item label="用户名" prop="name" size="small">
                  <el-input
                    v-model="registerForm.name"
                    placeholder="用户名"
                  ></el-input>
                </el-form-item>
                <el-form-item label="性别" size="small">
                  <el-radio-group v-model="registerForm.sex">
                    <el-radio :label="false">女</el-radio>
                    <el-radio :label="true">男</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="创建时间" prop="createTime" size="small">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="registerForm.createTime"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="地址" prop="address" size="small">
                  <el-input
                    v-model="registerForm.address"
                    placeholder="地址"
                  ></el-input>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button size="small" @click="centerDialogVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" size="small" @click="addPeople"
                    >确 定</el-button
                  >
                </span>
              </template>
            </el-dialog>
            
            <el-dialog title="编辑" v-model="editVisible" width="400px">
              <el-form ref="form" :model="form" label-width="60px">
                <el-form-item label="用户名" size="small">
                  <el-input v-model="form.name" :disabled="true"></el-input>
                </el-form-item>
    
                <el-form-item label="性别" size="small">
                  <el-radio-group v-model="form.sex">
                    <el-radio :label="false">女</el-radio>
                    <el-radio :label="true">男</el-radio>
                  </el-radio-group>
                </el-form-item>
    
                <el-form-item label="创建日期" prop="createTime" size="small">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="form.createTime"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="地址" size="small">
                  <el-input v-model="form.address"></el-input>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button size="small" @click="editVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" size="small" @click="saveEdit"
                    >确 定</el-button
                  >
                </span>
              </template>
              
            </el-dialog>
            <DelDialog
              :delVisible="delVisible"
              @deleteRow="deleteRow"
              @cancelRow="delVisible = $event"
            ></DelDialog>
      </div>
    </template>
    
    <script>
    import { HttpManager } from "../api/index";
    import { getDateTime } from "../util/DataUtil";
    import DelDialog from "@/components/DelDialog.vue";
    import { mixin } from "../mixins/index"; 
    import {
      Plus,
      Upload,
      Download,
      Search,
      Edit,
      DeleteFilled,
      ElementPlus,
    } from "@element-plus/icons-vue";
    export default {
    name:'UserMsg',
    mixins: [mixin],
    components:{
         Plus,
        Upload,
        Download,
        Search,
        Edit,
        DeleteFilled,
        ElementPlus,
        DelDialog,
    },
     data() {
        return {
          tableData: [],
          multipleSelection: [], // 记录要删除的用户信息
          centerDialogVisible: false,
          editVisible: false, // 显示编辑框
          delVisible: false, // 显示删除框
          select_word: "", // 记录输入框输入的内容
          pageSize: 10, // 页数
          currentPage: 1, // 当前页
          idx: -1, // 记录当前点中的行
          tempDate: [],
          is_Search: false,
          excelVisible: false,
          registerForm: {
            // 添加用户
            name: "",
            sex: "",
            createTime: "",
            address: "",
          },
          form: {
            // 记录编辑的信息
            id: "",
            name: "",
            sex: "",
            createTime: "",
            address: "",
            //updateTime: ''
          },
        };
      },
      computed: {
        // 计算当前表格中的数据
        datas() {
          return this.tableData.slice(
            (this.currentPage - 1) * this.pageSize,
            this.currentPage * this.pageSize
          );
        },
      },
      //模糊查询
      watch: {
        select_word() {
          if (this.select_word === "") {
            this.tableData = this.tempDate;
          } else {
            this.tableData = [];
            for (let item of this.tempDate) {
              if (item.name.includes(this.select_word) ) 
                {
                this.tableData.push(item);
              }
            }
          }
        },
      },
      created() {
        //获取分页数据信息
        this.getData();
      },
      methods: {
        // 获取用户信息
        getData() {
          this.tableData = [];
          this.tempDate = [];
          HttpManager.getAllUser().then((res) => {
            this.tableData = res;
            this.tempDate = res;
            this.currentPage = 1;
            console.log(this.tempDate)
          });
        },
        //重置搜索信息
        reSet() {
          this.select_word = "";
          this.getData();
        },
    
        // 添加用户
        addPeople() {
          let createTime = getDateTime(this.registerForm.createTime);
          let params = new URLSearchParams();
          params.append("name", this.registerForm.name);
          params.append("sex", this.registerForm.sex);
          params.append("createTime", createTime);
          params.append("address", this.registerForm.address);
          HttpManager.addUser(params)
            .then((res) => {
              if (res.code === 1) {
                this.getData();
                this.registerForm = {};
                this.$notify({
                  title: "添加成功",
                  type: "success",
                });
              } else {
                this.$notify({
                  title: "添加失败",
                  type: "error",
                });
              }
            })
            .catch((err) => {
              console.error(err);
            });
          this.centerDialogVisible = false;
        },
        // 分页
        // handleSizeChange(pageSize) {
        //   console.log(`每页 ${pageSize} 条`);
        //   this.pageSize = pageSize;
        //  // this.getData();
        // },
        handleCurrentChange(val) {
          this.currentPage = val;
        },
    
        // 编辑
        handleEdit(row) {
          this.idx = row.id;
          this.form = {
            id: row.id,
            name: row.name,
            sex: row.sex,
            createTime: row.createTime,
            address: row.address,
          };
          this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
          let datetime = getDateTime(new Date(this.form.createTime));
          let params = new URLSearchParams();
          params.append("id", this.form.id);
          params.append("name", this.form.name);
          params.append("sex", this.form.sex);
          params.append("createTime", datetime);
          params.append("address", this.form.address);
          HttpManager.updateUserMsg(params)
            .then((res) => {
              if (res.code === 1) {
                this.getData();
                this.$notify({
                  title: "修改成功",
                  type: "success",
                });
              } else {
                this.$notify({
                  title: "修改失败",
                  type: "error",
                });
              }
            })
            .catch((err) => {
              console.error(err);
            });
          this.editVisible = false;
        },
        // 确定删除
        deleteRow() {
          HttpManager.deleteUser(this.idx)
            .then((res) => {
              if (res) {
                this.getData();
                this.$notify({
                  title: "删除成功",
                  type: "success",
                });
              } else {
                this.$notify({
                  title: "删除失败",
                  type: "error",
                });
              }
            })
            .catch((error) => {
              console.error(error);
            });
          this.delVisible = false;
        },
      },
    };
    </script>
    
    <style>
    /* 分页 */
    .demo-pagination-block + .demo-pagination-block {
      margin-top: 10px;
    }
    .demo-pagination-block .demonstration {
      margin-bottom: 16px;
    }
    </style>

2.2.8，简单配置一下router，这样运行项目后，localhst：8080访问进入到“/home”请求对应的组件界面（随便写一个即可）上，点击侧边栏上的用户管理就能跳转到对应的信息展示界面。

import { createRouter, createWebHistory } from 'vue-router'
    import HomePage from '@/view/HomePage'
    
    const routes = [
      {
        path: '/',
        name: 'HomePage',
        component: HomePage,
        redirect: '/home',
        children: [
          {
            path: 'home',
            name: 'HomeTest',
            component: () => import('../components/HomeTest.vue')
          },
          {
            path: 'user',
            name: 'UserMsg',
            component: () => import('../view/UserMsg.vue')
          },
          {
            path: 'about',
            name: 'About',
            component: () => import('../components/AboutTest.vue')
          },
        ]
      },
    ]
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    export default router

2.2.9，在vue.config.js上通过chainWebpack配置后端代理地址，这样由于后端已经配置了跨域，前端就可以通过对后端的请求访问到后端对应的接口了。

const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      transpileDependencies: true,
      chainWebpack: config => {
        config.plugin('define').tap(definitions => {
            Object.assign(definitions[0]['process.env'], {
              NODE_HOST: '"http://localhost:8090"',
            });
            return definitions;
        });
      }
    })

#### 2.3，项目运行及实现结果 ####

前端通过 npm install 安装项目所需的依赖，然后npm run serve运行项目即可得到初始的HomePage界面。因为前端学的并不扎实，页面配色布局可能一言难尽……

![2146160c02754c198db9f73bf3195412.png][]

展开导航主页，点击用户展示界面，得到相应界面，此时并没有数据展示，只有初始的一些界面 ，因为后端服务没有开启，数据获取不到。

![20006dd739134fd6bc8596fc2daf64fa.png][]

运行后端项目，重新刷新一下前端界面，数据通过element-plus中的el-pagination分页插件已经实现了分页效果。

![d08583e4f75b4d92a56a702355138f36.png][]

并且该能实现一些基本增删改查操作，后端数据库的信息也会相应进行更改！

![cb277280df444cf0be202649a81a6920.png][]

### ![8b3be2355fa6499a8b8cb3c40f72b043.png][] ###

至此，简单的数据交互就实现了。

## 四，简单总结 ##

这个测试项目还有一些小BUG正在完善中，还有一些实现的功能并没有完全放在博客中，这篇文章仅限于展示一些数据，实现前后端数据之间的交互。后期会继续完善成为一个简易的后台管理系统，供学习练习之用，项目会陆续上传到GitHub/Gitee上……有问题的地方希望大家指正交流，共同进步。

**补充：**

**[gitee项目地址][gitee]**

由于项目中涉及一些mysql以及mongodb的数据库，但是考虑比较简单，只是作为数据模拟使用的，因此没有放在项目中，前端也比较较简单没有放在gitee中，大家自行构建。

[f388f802be8d4bfda926f8571ad658b9.png]: https://img-blog.csdnimg.cn/f388f802be8d4bfda926f8571ad658b9.png
[44bcd98340714a8caf5436c3dcc6189a.png]: https://img-blog.csdnimg.cn/44bcd98340714a8caf5436c3dcc6189a.png
[Link 1]: https://blog.csdn.net/qq_42263280/article/details/126502033
[f3173f305bde482bb7c23dc4d429bd5f.png]: https://img-blog.csdnimg.cn/f3173f305bde482bb7c23dc4d429bd5f.png
[bb54734cceaa42f0a0a535cb923c7d01.png]: https://img-blog.csdnimg.cn/bb54734cceaa42f0a0a535cb923c7d01.png
[a7fb7667dc7b4edc9300ce5db178c290.png]: https://img-blog.csdnimg.cn/a7fb7667dc7b4edc9300ce5db178c290.png
[616dd9874ade4a8583666b42de0958ef.png]: https://img-blog.csdnimg.cn/616dd9874ade4a8583666b42de0958ef.png
[2146160c02754c198db9f73bf3195412.png]: https://img-blog.csdnimg.cn/2146160c02754c198db9f73bf3195412.png
[20006dd739134fd6bc8596fc2daf64fa.png]: https://img-blog.csdnimg.cn/20006dd739134fd6bc8596fc2daf64fa.png
[d08583e4f75b4d92a56a702355138f36.png]: https://img-blog.csdnimg.cn/d08583e4f75b4d92a56a702355138f36.png
[cb277280df444cf0be202649a81a6920.png]: https://img-blog.csdnimg.cn/cb277280df444cf0be202649a81a6920.png
[8b3be2355fa6499a8b8cb3c40f72b043.png]: https://img-blog.csdnimg.cn/8b3be2355fa6499a8b8cb3c40f72b043.png
[gitee]: https://gitee.com/yao-shen/spring-boot_-integretion