• 后端SpringBoot+前端Vue前后端分离的项目（一）

    前言：后端使用SpringBoot框架，前端使用Vue框架，做一个前后端分离的小项目，需求：实现一个表格，具备新增、删除、修改的功能。

    目录

    一、数据库表的设计

    二、后端实现

    环境配置

    数据处理-增删改查

    model层

    mapper层

    XML配置

    Service层

    controller层

    单元测试

    三、前后端交互

    配置

    vite.config.ts文件配置

    创建axios实例 

    业务请求

    四、前端实现

    环境配置

    Main.vue

    interface接口

    五、效果展示

    六、总结

    一、数据库表的设计

    设计了一个merchandise表，id是编号，唯一的，类型为int，category是一级类别，type是二级类别，name是商品的名称，sum_quantity是总数量，sold_quantity是售卖的数量。

    数据库里的字段名使用的是下划线连接，在java中变量命名一般使用驼峰式，需要在application.properties文件中进行配置

    mybatis.configuration.map-underscore-to-camel-case=true

    二、后端实现

    model层

    1. package com.mrjj.java.model;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. @Data
    8. @NoArgsConstructor
    9. @AllArgsConstructor
    10. public class merchandise {
    11.     public int id;
    12.     public String category;
    13.     public String type;
    14.     public String name;
    15.     public String sum_quantity;
    16.     public String sold_quantity;
    17. }

    环境配置

    引入需要的依赖

    1.         
    2.             org.springframework.boot
    3.             spring-boot-starter-web
    4.         
    5.  
    6.         
    7.             org.springframework.boot
    8.             spring-boot-starter-tomcat
    9.             provided
    10.         
    11.         
    12.             org.springframework.boot
    13.             spring-boot-starter-test
    14.             test
    15.         
    16.         
    17.             org.mybatis.spring.boot
    18.             mybatis-spring-boot-starter
    19.             2.2.2
    20.         
    21.         
    22.             mysql
    23.             mysql-connector-java
    24.             8.0.19
    25.         
    26.         
    27.             org.mybatis.generator
    28.             mybatis-generator-core
    29.             1.4.0
    30.         
    31.         
    32.             org.springframework.boot
    33.             spring-boot-starter-thymeleaf
    34.         
    35.         
    36.             org.projectlombok
    37.             lombok
    38.         
    39.         
    40.             com.baomidou
    41.             mybatis-plus-boot-starter
    42.             3.5.3
    43.

     完成application.properties文件的配置，连接mysql

    1. server.port=8888
    2. spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    3. spring.datasource.url=jdbc:mysql://localhost:3306/mrjj?allowMultiQueries=true&useUnicode=true&characterEncoding=utf8&serverTimezone=UTC
    4. spring.datasource.username=root
    5. spring.datasource.password=123456
    6. mybatis.mapper-locations=classpath:/mapper/*.xml
    7. mybatis.configuration.map-underscore-to-camel-case=true

    数据处理-增删改查

    model层

    映射数据库中的字段

    1. package com.mrjj.java.model;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. @Data
    8. @NoArgsConstructor
    9. @AllArgsConstructor
    10. public class Merchandise {
    11.     public int id;
    12.     public String merchandiseCategory;
    13.     public String merchandiseType;
    14.     public String merchandiseName;
    15.     public int sumQuantity;
    16.     public int soldQuantity;
    17. }

    返回结果字段

    1. package com.mrjj.java.model;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. @Data
    8. @NoArgsConstructor
    9. @AllArgsConstructor
    10. public class Result {
    11.     private Integer code;
    12.     private String msg;
    13.     private T data;
    14.  
    15.     public Result(String msg, Integer code) {
    16.         this.msg = msg;
    17.         this.code = code;
    18.     }
    19.  
    20.     public Result(T data) {
    21.         this.data = data;
    22.         this.code = 1000;
    23.     }
    24.  
    25.     public static  Result success(T data) {
    26.         Result result = new Result<>(data);
    27.         result.setCode(200);
    28.         result.setMsg("请求成功");
    29.         return result;
    30.     }
    31.  
    32.     public static  Result success(String msg, T data) {
    33.         Result result = new Result<>(data);
    34.         result.setCode(200);
    35.         result.setMsg(msg);
    36.         return result;
    37.     }
    38.  
    39.     public static  Result fail(int code, String message, T data) {
    40.         Result resultData = new Result<>();
    41.         resultData.setCode(code);
    42.         resultData.setMsg(message);
    43.         resultData.setData(data);
    44.         return resultData;
    45.     }
    46. }

    mapper层

    1. package com.mrjj.java.mapper;
    2.  
    3. import com.mrjj.java.model.Merchandise;
    4. import org.apache.ibatis.annotations.*;
    5.  
    6. import java.util.List;
    7.  
    8. @Mapper
    9. public interface MerchandiseMapper {
    10.  
    11.     @Select("select * from merchandise")
    12.     List getMerchandise();
    13.  
    14.     @Insert("insert into merchandise values(#{id},#{merchandiseCategory},#{merchandiseType},#{merchandiseName},#{sumQuantity},#{soldQuantity})")
    15.     int addMerchandise(Merchandise merchandise);
    16.  
    17.     @Delete("delete from merchandise where id=#{id}")
    18.     int deleteOneMerchandise(@Param("id") Long id);
    19.  
    20.     int updateMerchandise(List merchandise);
    21. }

    XML配置

    注意！！！

    要配置上allowMultiQueries=true，才能批量处理！！！这个问题查了蛮久的！！！

    1. "1.0" encoding="UTF-8" ?>
    2. mapper
    3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    4.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    6. <mapper namespace="com.mrjj.java.mapper.MerchandiseMapper">
    7.     
    8.  
    9.     <delete id="deleteMoreMerchandise">
    10.         delete from merchandise
    11.         <where>
    12.             <foreach collection="list" separator="," item="item" open="id in (" close=")">
    13.                 #{item}
    14.             foreach>
    15.         where>
    16.     delete>
    17.  
    18.     <update id="updateMerchandise" parameterType="java.util.List">
    19.         <foreach collection="list" item="item" separator=";">
    20.             update merchandise
    21.             <set>
    22.                 <if test="#{item.merchandiseCategory}!=null">
    23.                     merchandise_category=#{item.merchandiseCategory},
    24.                 if>
    25.                 <if test="#{item.merchandiseType}!=null">
    26.                     merchandise_type=#{item.merchandiseType},
    27.                 if>
    28.                 <if test="#{item.merchandiseName}!=null">
    29.                     merchandise_name=#{item.merchandiseName},
    30.                 if>
    31.                 <if test="#{item.sumQuantity}!=null">
    32.                     sum_quantity=#{item.sumQuantity},
    33.                 if>
    34.                 <if test="#{item.soldQuantity}!=null">
    35.                     sold_quantity=#{item.soldQuantity},
    36.                 if>
    37.  
    38.             set>
    39.             where id=#{item.id}
    40.         foreach>
    41.     update>
    42. mapper>

    Service层

    1. package com.mrjj.java.service;
    2.  
    3. import java.util.List;
    4.  
    5. public interface MerchandiseService {
    6.     int deleteMoreMerchandise(List ids);
    7. }
    1. package com.mrjj.java.service.impl;
    2.  
    3. import com.mrjj.java.mapper.MerchandiseMapper;
    4. import com.mrjj.java.service.MerchandiseService;
    5. import org.springframework.stereotype.Service;
    6.  
    7. import javax.annotation.Resource;
    8. import java.util.List;
    9.  
    10. @Service("MerchandiseService")
    11. public class MerchandiseServiceImpl implements MerchandiseService {
    12.     @Resource
    13.     MerchandiseMapper merchandiseMapper;
    14.  
    15.  
    16.     @Override
    17.     public int deleteMoreMerchandise(List ids) {
    18.         int delCount = 0;
    19.         for (Long id : ids) {
    20.             delCount += merchandiseMapper.deleteOneMerchandise(id);
    21.         }
    22.         System.out.println("删除了" + delCount + "条用例");
    23.         return delCount;
    24.     }
    25. }

    controller层

    1. package com.mrjj.java.controller;
    2.  
    3. import com.mrjj.java.mapper.MerchandiseMapper;
    4. import com.mrjj.java.model.Merchandise;
    5. import com.mrjj.java.model.Result;
    6. import com.mrjj.java.service.MerchandiseService;
    7. import org.springframework.web.bind.annotation.*;
    8. import org.springframework.web.servlet.ModelAndView;
    9.  
    10. import javax.annotation.Resource;
    11. import java.util.List;
    12.  
    13. @RestController
    14. @RequestMapping("/mrjjMerchandise")
    15. public class MerchandiseController {
    16.     @Resource
    17.     MerchandiseMapper merchandiseMapper;
    18.     @Resource
    19.     MerchandiseService merchandiseService;
    20.  
    21.     @GetMapping
    22.     public Result listMerchandise() {
    23.         List Marchandise = merchandiseMapper.getMerchandise();
    24.         System.out.println("查到的商品是" + Marchandise);
    25.         return Result.success(Marchandise);
    26.     }
    27.  
    28.     @GetMapping("/view")
    29.     public ModelAndView showMerchandise() {
    30.         ModelAndView MarchandiseView = new ModelAndView();
    31.         List Marchandise = merchandiseMapper.getMerchandise();
    32.         MarchandiseView.addObject("mrjjMarchandiseView", Marchandise);
    33.         MarchandiseView.setViewName("mrjjMarchandise");
    34.         return MarchandiseView;
    35.     }
    36.  
    37.     @PostMapping
    38.     public Result addMerchandise(@RequestBody Merchandise merchandise) {
    39.         int i = merchandiseMapper.addMerchandise(merchandise);
    40.         if (i > 0) {
    41.             return Result.success(merchandise);
    42.         } else {
    43.             return Result.fail(210, "新增商品信息失败", merchandise);
    44.         }
    45.     }
    46.  
    47.     @PutMapping
    48.     public Result updateMerchandise(@RequestBody List MerchandiseList) {
    49.         System.out.println("修改");
    50.         int i = merchandiseMapper.updateMerchandise(MerchandiseList);
    51.         if (i > 0)
    52.             return Result.success("修改商品信息成功");
    53.         else
    54.             return Result.fail(230, "修改商品信息失败", MerchandiseList);
    55.     }
    56.  
    57.     @DeleteMapping("/{id}")
    58.     public Result deleteOneMerchandise(@PathVariable Long id) {
    59.         System.out.println(id);
    60.         int i = merchandiseMapper.deleteOneMerchandise(id);
    61.         System.out.println("删除的结果是：" + i);
    62.         if (i > 0) {
    63.             return Result.success("删除商品成功");
    64.         } else {
    65.             return Result.fail(240, "删除商品信息用例失败", "删除商品信息失败");
    66.         }
    67.     }
    68.  
    69.     @DeleteMapping("/ids/{ids}")
    70.     public int deleteMoreMerchandise(@PathVariable List ids) {
    71.         return merchandiseService.deleteMoreMerchandise(ids);
    72.     }
    73.  
    74.  
    75. }

    单元测试

    1. package com.mrjj.java.controller;
    2.  
    3. import com.mrjj.java.model.Result;
    4. import org.junit.jupiter.api.Test;
    5. import org.junit.runner.RunWith;
    6. import org.springframework.boot.test.context.SpringBootTest;
    7. import org.springframework.test.annotation.Rollback;
    8. import org.springframework.test.context.junit4.SpringRunner;
    9. import org.springframework.transaction.annotation.Transactional;
    10.  
    11. import javax.annotation.Resource;
    12.  
    13. import java.util.ArrayList;
    14. import java.util.List;
    15.  
    16. @SpringBootTest
    17. @RunWith(SpringRunner.class)
    18. @Transactional
    19. @Rollback(value=true)
    20. class MerchandiseControllerTest {
    21.     @Resource
    22.     MerchandiseController merchandiseController;
    23.  
    24.     @Test
    25.     public void testQuery() {
    26.         Result queryData = merchandiseController.listMerchandise();
    27.         System.out.println(queryData);
    28.     }
    29.     @Test
    30.     public void testDelete(){
    31.         Result deleteData = merchandiseController.deleteOneMerchandise(4L);
    32.         System.out.println(deleteData);
    33.     }
    34.     @Test
    35.     public void testDeleteMore(){
    36.         List list1 = new ArrayList<>();
    37.         list1.add(0,5L);
    38.         list1.add(1,4L);
    39.         int deleteMoreData = merchandiseController.deleteMoreMerchandise(list1);
    40.         System.out.println(deleteMoreData);
    41.     }
    42. }

    三、前后端交互

    配置

    大致画了个流程图

    可以看到在发送请求时，路径以及变了 

    vite.config.ts文件配置

    target是本地服务的地址和端口号

    添加的路径/mrjj

    1. server:{
    2.     open:true,
    3.     proxy:{
    4.       '/mrjj': {
    5.         target: 'http://localhost:8888',
    6.         changeOrigin: true,
    7.         rewrite: (path) => path.replace(/^\/mrjj/, ''),
    8.       },
    9.     }
    10.   }

    创建axios实例 

    1. import axios, { type AxiosResponse } from 'axios'
    2. const instance = axios.create({
    3.   baseURL: '/mrjj',
    4.   timeout: 30000,
    5.   headers: { 'Content-Type': 'application/json;charset=utf-8' }
    6. })
    7.  
    8. instance.interceptors.response.use(
    9.   function (response: AxiosResponse) {
    10.     const { code } = response.data
    11.     if (code === 200) {
    12.       return response.data
    13.     }
    14.   },
    15.   function (error) {
    16.     return Promise.reject(error)
    17.   }
    18. )
    19. export default instance

    业务请求

    baseURL对应本地服务的接口地址

    导出后端服务增删改查方法

    1. import request from '../request'
    2. import axios, { type AxiosPromise } from 'axios'
    3. import type { MrjjMerchandise } from '@/types/merchandises/type'
    4. const instance = axios.create({
    5.   baseURL: '/mrjjMerchandise',
    6.   timeout: 30000,
    7.   headers: { 'Content-Type': 'application/json;charset=utf-8' }
    8. })
    9. export default instance
    10.  
    11. export function listMerchandiseApi(): AxiosPromise<MrjjMerchandise[]> {
    12.   return request({
    13.     url: '/mrjjMerchandise',
    14.     method: 'get'
    15.   })
    16. }
    17.  
    18. export function addMerchandiseApi(data: MrjjMerchandise) {
    19.   return request({
    20.     url: '/mrjjMerchandise',
    21.     method: 'post',
    22.     data: data
    23.   })
    24. }
    25.  
    26. export function changeMerchandiseApi(data: MrjjMerchandise) {
    27.   return request({
    28.     url: '/mrjjMerchandise',
    29.     method: 'put',
    30.     data
    31.   })
    32. }
    33.  
    34. export function deleteMerchandiseApi(ids: string) {
    35.   return request({
    36.     url: '/mrjjMerchandise/ids/' + ids,
    37.     method: 'delete'
    38.   })
    39. }

    四、前端实现

    环境配置

    1. import { createApp } from 'vue'
    2. import App from './App.vue'
    3. import ElementPlus from 'element-plus'
    4. import 'element-plus/dist/index.css'
    5. import zhCn from 'element-plus/es/locale/lang/zh-cn'
    6. import VXETable from 'vxe-table'
    7. import 'vxe-table/lib/style.css'
    8. import router from './router'
    9. createApp(App).use(router).use(ElementPlus, { locale: zhCn }).use(VXETable).mount('#app')

    Main.vue