• SpringBoot和Vue前后端分离

    SpringBoot-Vue前后端分离

    实现增删改查及分页小DEMO

    一、前言

    主要通过Spring Boot和Vue`来简单实现一个前后端分离的小demo，该小demo实现增删改查、分页功能。主要是该小demo了解SpringBoot搭配Vue完成前后端分离项目的开发流程和项目部署。

    二、开发栈

    前端
    • 开发工具：VsCode
    • 开发框架：Vue CLI 2.0 + axios
    • 包管理工具: npm
    • 打包工具：webpack
    后端
    • 开发工具：IDEA
    • 开发框架：SpringBoot + MyBatis
    • 打包工具：Maven
    • 数据库： MySQL

    三、后端开发环境搭建

    1. File->New->Project…
      在这里插入图片描述
    2. 选择 Spring Initializr ，然后选择默认的 url 点击next
      在这里插入图片描述
    3. 勾选Spring Web、SQL模板，next
      在这里插入图片描述
    4. 点击finish，搭建完成

    四、数据库

    启动mysql
    在这里插入图片描述
    启动SQLyog，新增测试数据（可以直接在GitHub中直接下载sql文件导入）

    SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `userId` int(20) NOT NULL AUTO_INCREMENT,
  `userDate` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `userName` varchar(100) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `userAddress` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  PRIMARY KEY (`userId`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 71 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (15, '2019-09-29T03:17:12.000Z', '王老三', '上海市普陀区金沙江路 1515 弄');
INSERT INTO `user` VALUES (16, '2019-09-29T03:27:05.000Z', '张小四', '上海市普陀区金沙江路 1514 弄');
INSERT INTO `user` VALUES (17, '2019-09-29T03:30:04.000Z', '王老五', '上海市普陀区金沙江路 1513弄');
INSERT INTO `user` VALUES (18, '2019-09-29T03:33:15.000Z', '小六子', '上海市普陀区金沙江路 1512弄');
INSERT INTO `user` VALUES (20, '2019-09-29T03:33:15.000Z', '王老八', '上海市普陀区金沙江路 1512弄');
INSERT INTO `user` VALUES (21, '2019-09-29T05:42:52.000Z', '王大拿', '上海市普陀区金沙江路 1511弄');
INSERT INTO `user` VALUES (22, '2019-09-29T05:43:50.000Z', '小九九', '上海市普陀区金沙江路 1510弄');
INSERT INTO `user` VALUES (23, '2019-09-29T05:43:50.000Z', '刘诗诗', '上海市普陀区金沙江路 1499弄');
INSERT INTO `user` VALUES (24, '2019-09-29T05:46:07.000Z', '扎昂四四', '上海市大湾区科技路');
INSERT INTO `user` VALUES (25, '2019-09-29T05:46:07.000Z', '扎昂四四新东方', '上海市大湾区科技路2001号');
INSERT INTO `user` VALUES (26, '2019-09-29T05:46:07.000Z', '王小虎', '上海市大湾区科技路2002号');
INSERT INTO `user` VALUES (27, '2019-09-29T05:46:07.000Z', '抽拉吧唧', '上海市大湾区科技路2003号');
INSERT INTO `user` VALUES (28, '2019-09-29T05:46:07.000Z', '年啦编辑', '上海市大湾区科技路2004号');
INSERT INTO `user` VALUES (29, '2019-09-29T05:46:07.000Z', '你多少', '上海市普陀区金沙江路 1211弄');
INSERT INTO `user` VALUES (30, '2019-09-29T05:46:07.000Z', '反发达', '上海市普陀区金沙江路 1212弄');
INSERT INTO `user` VALUES (31, '2019-09-29T05:51:20.000Z', '发官方', '上海市普陀区金沙江路 1213弄');
INSERT INTO `user` VALUES (32, '2019-09-29T05:51:20.000Z', '方还有', '上海市普陀区金沙江路 1214弄');
INSERT INTO `user` VALUES (33, '2019-09-29T05:51:20.000Z', '过不分', '上海市普陀区金沙江路 1498弄');
INSERT INTO `user` VALUES (34, '2019-09-29T05:51:20.000Z', '菜市场', '上海市普陀区金沙江路 1497弄');
INSERT INTO `user` VALUES (35, '2019-09-29T05:51:20.000Z', '权威的', '上海市普陀区金沙江路 1496弄');
INSERT INTO `user` VALUES (36, '2019-09-29T05:55:09.000Z', '冈反对的', '上海市大湾区科技路2001号');
INSERT INTO `user` VALUES (37, '2019-09-29T05:55:09.000Z', '冈反对', '上海市大湾区科技路2003号');
INSERT INTO `user` VALUES (38, '2019-09-29T05:55:09.000Z', '偶哦里面', '上海市大湾区科技路2004号');
INSERT INTO `user` VALUES (39, '2019-09-29T05:55:09.000Z', '偶哦韩大苏打', '上海市大湾区科技路2005号');
INSERT INTO `user` VALUES (40, '2019-09-29T05:55:09.000Z', '偶哦匀', '上海市大湾区科技路2006号');
INSERT INTO `user` VALUES (41, '2019-09-29T05:55:09.000Z', '敢哦匀', '上海市大湾区科技路2006号');
INSERT INTO `user` VALUES (42, '2019-09-29T05:55:09.000Z', '敢孩', '上海市大湾区科技路2006号');
INSERT INTO `user` VALUES (43, '2019-09-29T05:55:09.000Z', '敢女孩', '上海市大湾区科技路2007号');
INSERT INTO `user` VALUES (45, '2019-09-29T05:55:09.000Z', '工行行', '上海市大湾区科技路2008号');
INSERT INTO `user` VALUES (46, '2019-09-29T05:55:09.000Z', '家好吗', '上海市大湾区科技路2008号');
INSERT INTO `user` VALUES (47, '2019-09-29T05:55:09.000Z', '的程度', '上海市大湾区科技路2009号');
INSERT INTO `user` VALUES (48, '2019-09-29T05:55:09.000Z', '称得上', '上海市大湾区科技路2009号');
INSERT INTO `user` VALUES (49, '2019-09-29T05:55:09.000Z', '韩国和', '上海市大湾区科技路2010号');
INSERT INTO `user` VALUES (50, '2019-09-29T05:55:09.000Z', '韩好', '上海市大湾区科技路2010号');
INSERT INTO `user` VALUES (51, '2019-09-29T05:55:09.000Z', '韩吧', '上海市大湾区科技路2011号');
INSERT INTO `user` VALUES (52, '2019-09-29T05:55:09.000Z', '韩吧吧', '上海市大湾区科技路2012号');
INSERT INTO `user` VALUES (53, '2019-09-29T05:55:09.000Z', '长度是', '上海市大湾区科技路2013号');
INSERT INTO `user` VALUES (54, '2019-09-29T05:55:09.000Z', '比如合', '上海市大湾区科技路2014号');
INSERT INTO `user` VALUES (55, '2019-09-29T05:55:09.000Z', '如合境', '上海市大湾区科技路2015号');
INSERT INTO `user` VALUES (56, '2019-09-29T05:55:09.000Z', '如合国', '上海市大湾区科技路2016号');
INSERT INTO `user` VALUES (57, '2019-09-29T05:55:09.000Z', '如更好', '上海市大湾区科技路2017号');
INSERT INTO `user` VALUES (58, '2019-09-29T05:55:09.000Z', '如更法', '上海市大湾区科技路2018号');
INSERT INTO `user` VALUES (59, '2019-09-29T05:55:09.000Z', '反对', '上海市大湾区科技路2019号');
INSERT INTO `user` VALUES (60, '2019-09-29T05:55:09.000Z', '如国部', '上海市大湾区科技路2019号');
INSERT INTO `user` VALUES (61, '2019-09-29T06:04:15.000Z', '奇热网', '上海市普陀区金沙江路 1496弄');
INSERT INTO `user` VALUES (62, '2019-09-29T06:04:33.000Z', '反对法', '上海市普陀区金沙江路 1495弄');
INSERT INTO `user` VALUES (63, '2019-09-29T06:04:33.000Z', '的风格', '上海市普陀区金沙江路 1494弄');
INSERT INTO `user` VALUES (64, '2019-09-29T06:04:33.000Z', '广泛同', '上海市大湾区科技路2020号');
INSERT INTO `user` VALUES (65, '2019-09-10T06:04:33.000Z', '但仍然', '上海市普陀区金沙江路 1493弄');
INSERT INTO `user` VALUES (66, '2019-09-29T06:10:28.000Z', 'vdfv', '放到电饭锅的');
INSERT INTO `user` VALUES (67, '2019-09-14T16:00:00.000Z', '朱老六', '上海市高新区上海中心');
INSERT INTO `user` VALUES (69, '2019-09-10T16:00:00.000Z', '是的', ' 学生的三十四分');
INSERT INTO `user` VALUES (70, '2019-09-29T07:51:44.000Z', '张小子', '上海市浦东区1234号');

SET FOREIGN_KEY_CHECKS = 1;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    五、后端开发过程

    1. 更新 pom.xml


      4.0.0

      com.example
demo
0.0.1-SNAPSHOT
springboot-mybatis



    org.springframework.boot
    spring-boot-starter-parent
    2.1.3.RELEASE



    1.2.0
    5.1.39




    
    
        org.springframework.boot
        spring-boot-starter-web
    

    
    
        org.springframework.boot
        spring-boot-starter-test
        test
    

    
    
        org.mybatis.spring.boot
        mybatis-spring-boot-starter
        ${mybatis-spring-boot}
    

    
    
        mysql
        mysql-connector-java
        ${mysql-connector}
    

    
    
        junit
        junit
        4.12
    
    
        org.junit.jupiter
        junit-jupiter
        RELEASE
        test
    


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59

    2. 更新 application.properties（这里使用properties，但更推荐使用yaml）

      数据源配置

      spring.datasource.url=jdbc:mysql://localhost/first?useUnicode=true&characterEncoding=utf8
      spring.datasource.username=root
      spring.datasource.password=root
      spring.datasource.driver-class-name=com.mysql.jdbc.Driver

      Mybatis 配置

      mybatis.typeAliasesPackage=org.spring.springboot.domain
      mybatis.mapperLocations=classpath:mapper/*.xml

      端口

      server.port=8081

    3. 新建 Pojo类：User.java

      package com.example.demo.entity;

      package com.xxl.pojo;

      public class User {

      private int userId;
private String userDate;
private String userName;
private String userAddress;

public User() {
}

public User(int userId, String userDate, String userName, String userAddress) {
    this.userId = userId;
    this.userDate = userDate;
    this.userName = userName;
    this.userAddress = userAddress;
}

public int getUserId() {
    return userId;
}

public void setUserId(int userId) {
    this.userId = userId;
}

public String getUserDate() {
    return userDate;
}

public void setUserDate(String userDate) {
    this.userDate = userDate;
}

public String getUserName() {
    return userName;
}

public void setUserName(String userName) {
    this.userName = userName;
}

public String getUserAddress() {
    return userAddress;
}

public void setUserAddress(String userAddress) {
    this.userAddress = userAddress;
}

@Override
public String toString() {
    return "User{" +
            "userId=" + userId +
            ", userDate='" + userDate + ''' +
            ", userName='" + userName + ''' +
            ", userAddress='" + userAddress + ''' +
            '}';
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56

      }

    4. 新建 UserMapper.java

      package com.xxl.mapper;

      import com.xxl.pojo.User;
      import org.apache.ibatis.annotations.Mapper;

      import java.util.List;

      @Mapper
      public interface UserMapper {

      public List findUserByName(String userName);

public List ListUser();

public List queryPage(Integer startRows);

public int getRowCount();

public int insertUser(User user);

public int delete(int userId);

public int Update(User user);

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

      }

    5. 新建 UserMapper.xml

      
    
    
    
    











    INSERT INTO user
    (
        userId,userDate,userName,userAddress
    )
    VALUES (
               #{userId},
               #{userDate, jdbcType=VARCHAR},
               #{userName, jdbcType=VARCHAR},
               #{userAddress, jdbcType=VARCHAR}
           )



    delete from user where userId=#{userId}



    update user
    set user.userDate=#{userDate},user.userName=#{userName},user.userAddress=#{userAddress}
    where user.userId=#{userId}


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49

    6. 新建 UserService.java

      package com.xxl.service;

      import com.xxl.pojo.User;
      import com.xxl.mapper.UserMapper;
      import org.springframework.beans.factory.annotation.Autowired;
      import org.springframework.stereotype.Service;

      import java.util.List;

      @Service
      public class UserService {

      @Autowired
private UserMapper userMapper;

public List findByName(String userName) {
    return userMapper.findUserByName(userName);
}

public List queryPage(Integer startRows) {
    return userMapper.queryPage(startRows);
}

public int getRowCount() {
    return userMapper.getRowCount();
}

public User insertUser(User user) {
    userMapper.insertUser(user);
    return user;
}

public List ListUser(){
    return userMapper.ListUser();
}

public int Update(User user){
    return userMapper.Update(user);
}

public int delete(int userId){
    return userMapper.delete(userId);
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31

      }

    7. 新建 UserCtrl.java

      package com.xxl.controller;

      import com.xxl.pojo.User;
      import com.xxl.service.UserService;
      import org.springframework.beans.factory.annotation.Autowired;
      import org.springframework.web.bind.annotation.*;

      import java.util.List;

      @RestController
      public class UserCtrl {

      @Autowired
private UserService userService;

@RequestMapping(value = "/delete", method = RequestMethod.POST)
public Integer delete(Integer userId) {
    System.out.println(userId);
    int result = userService.delete(userId);
    return result;
}

@RequestMapping(value = "/update", method = RequestMethod.POST)
@ResponseBody
public String update(User user) {
    int result = userService.Update(user);
    if (result >= 1) {
        return "修改成功";
    } else {
        return "修改失败";
    }

}

@RequestMapping(value = "/insert", method = RequestMethod.POST)
public User insert(User user) {
    return userService.insertUser(user);
}

@RequestMapping("/ListUser")
@ResponseBody
public List ListUser() {
    return userService.ListUser();
}

@RequestMapping("/ListByName")
@ResponseBody
public List ListUserByName(String userName) {
    return userService.findByName(userName);
}

/**
 * 分页
 * @return
 */
@RequestMapping(value="/page")
@ResponseBody
public List page(Integer page){
    int pageNow = page == null ? 1 : page;
    int pageSize = 5;
    int startRows = pageSize*(pageNow-1);
    List list = userService.queryPage(startRows);
    return list;
}

/**
 * rows
 * @return
 */
@RequestMapping(value="/rows")
@ResponseBody
public int rows(){
    return userService.getRowCount();
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62

      }

    8. 后端整体结构如下：
      在这里插入图片描述

    9. 测试后端项目是否搭建成功

    ① 启动后端项目
    在这里插入图片描述
    run 主启动类DemoApplication

    ② 测试接口

    部署vue+Springboot前后端分离项目的步骤实现
    pdf 0星 超过10%的资源 67KB
    下载

    用Postman测试一下各个方法
    在这里插入图片描述
    也可以在浏览器直接测试（推荐装上JSON-handle插件方便查看json数据）
    在这里插入图片描述

    六、前端开发环境搭建

    用脚手架（Vue-CLI）来搭建该项目

    七、前端开发过程

    1. 安装插件 样式模板库ElementUI 和 前后端通信的插件axios

    项目根目录安装axios执行命令

    npm install axios
npm i element-ui -S

    • 1
    • 2

    1. 更新 App.vue

    八、前后端整合

    在前端工程configindex.js文件中配置proxyTable{}，如下：

    proxyTable: {
    '/': {
        target:'http://localhost:8081', // 你请求的第三方接口
            changeOrigin:true, 
                // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite:{  // 路径重写，
                    '^/': ''  // 替换target中的请求地址
                }
    }
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    八、该项目的意义

    学习并使用该项目，是为了快速熟悉前后端分离方式的项目。

    通过本demo，可以熟悉如下内容：

    ① 前端使用Vue，后端使用SpringBoot的项目搭建及项目的基本结构

    ② 前后端分离的项目通过使用Get、Post请求，来实现通信的效果，以完成数据的传递

    GitHub地址：

    源码地址：https://github.com/676554649z/SpringBoot_Vue.git

    先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

  • 相关阅读:
    Java开发三年四面字节跳动斩获offer，掌握这些题进大厂没压力！
    C# 实战--listBox1使用
    webpack
    request对象对请求体，请求头参数的解析
    GPE(Grafana+Prometheus+Exporter)项目实战之Golang篇(上)
    【杂谈】关于中国足球的AI对话
    【蓝桥杯选拔赛真题46】Scratch磁铁游戏 少儿编程scratch蓝桥杯选拔赛真题讲解
    Windows10安装麒麟桌面V10双系统
    STM32MP157A驱动开发 | 04 - Linux DRM显示驱动框架
    php代码审计之——phpstorm动态调试
  • 原文地址：https://blog.csdn.net/m0_67401545/article/details/126114534