SpringBoot-Vue前后端分离

实现增删改查及分页小DEMO

一、前言

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

二、开发栈

前端

开发工具：VsCode
开发框架：Vue CLI 2.0 + axios
包管理工具: npm
打包工具：webpack

后端

开发工具：IDEA
开发框架：SpringBoot + MyBatis
打包工具：Maven
数据库： MySQL

三、后端开发环境搭建

File->New->Project…
选择 Spring Initializr ，然后选择默认的 url 点击next
勾选Spring Web、SQL模板，next
点击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;

五、后端开发过程

更新 pom.xml

<?xml version="1.0" encoding="UTF-8"?>

4.0.0

<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot-mybatis</name><!-- Spring Boot 启动父依赖 -->
<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.3.RELEASE</version>
</parent><properties><mybatis-spring-boot>1.2.0</mybatis-spring-boot><mysql-connector>5.1.39</mysql-connector>
</properties><dependencies><!-- Spring Boot Web 依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- Spring Boot Test 依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!-- Spring Boot Mybatis 依赖 --><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>${mybatis-spring-boot}</version></dependency><!-- MySQL 连接驱动依赖 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>${mysql-connector}</version></dependency><!-- Junit --><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version></dependency><dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter</artifactId><version>RELEASE</version><scope>test</scope></dependency>
</dependencies>

更新 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

新建 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 + ''' +'}';
}

}

新建 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<User> findUserByName(String userName);public List<User> ListUser();public List<User> queryPage(Integer startRows);public int getRowCount();public int insertUser(User user);public int delete(int userId);public int Update(User user);

}

新建 UserMapper.xml

<?xml version = "1.0" encoding = "UTF-8"?>

<resultMap id="result" type="com.xxl.pojo.User"><result property="userId" column="userId" /><result property="userDate" column="userDate" /><result property="userName" column="userName" /><result property="userAddress" column="userAddress"/>
</resultMap><select id="ListUser" resultMap="result">SELECT * FROM user
</select><select id="findUserByName" resultMap="result" parameterType="String">SELECT * FROM userwhere userName like concat(concat('%',#{userName}),'%')order by userId desc
</select><select id="queryPage" resultMap="result"  parameterType="Integer">select * from userorder by userId desclimit #{startRows},5
</select><select id="getRowCount" resultType="Integer">select count(*) from user
</select><insert id="insertUser" parameterType="com.xxl.pojo.User">INSERT INTO user(userId,userDate,userName,userAddress)VALUES (#{userId},#{userDate, jdbcType=VARCHAR},#{userName, jdbcType=VARCHAR},#{userAddress, jdbcType=VARCHAR})
</insert><delete id="delete" parameterType="int">delete from user where userId=#{userId}
</delete><update id="Update" parameterType="com.xxl.pojo.User">update userset user.userDate=#{userDate},user.userName=#{userName},user.userAddress=#{userAddress}where user.userId=#{userId}
</update>

新建 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<User> findByName(String userName) {return userMapper.findUserByName(userName);
}public List<User> 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<User> ListUser(){return userMapper.ListUser();
}public int Update(User user){return userMapper.Update(user);
}public int delete(int userId){return userMapper.delete(userId);
}

}

新建 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<User> ListUser() {return userService.ListUser();
}@RequestMapping("/ListByName")
@ResponseBody
public List<User> ListUserByName(String userName) {return userService.findByName(userName);
}/*** 分页* @return*/
@RequestMapping(value="/page")
@ResponseBody
public List<User> page(Integer page){int pageNow = page == null ? 1 : page;int pageSize = 5;int startRows = pageSize*(pageNow-1);List<User> list = userService.queryPage(startRows);return list;
}/*** rows* @return*/
@RequestMapping(value="/rows")
@ResponseBody
public int rows(){return userService.getRowCount();
}

}

后端整体结构如下：
测试后端项目是否搭建成功

① 启动后端项目

run 主启动类DemoApplication

② 测试接口

用Postman测试一下各个方法

也可以在浏览器直接测试（推荐装上JSON-handle插件方便查看json数据）

六、前端开发环境搭建

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

七、前端开发过程

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

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

npm install axios
npm i element-ui -S

更新 App.vue

八、前后端整合

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

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

八、该项目的意义

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

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

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

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

GitHub地址：

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

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

SpringBoot和Vue前后端分离相关推荐

基于SSM+SpringBoot+MySQL+Vue前后端分离的博客论坛系统
项目运行截图系统首页技术描述开发工具: idea/eclipse 数据库: mysql Jar包仓库: Maven 前段框架: vue/ElementUI/echart 后端框架: spring ...
视频教程-SpringBoot+Security+Vue前后端分离开发权限管理系统-Java
SpringBoot+Security+Vue前后端分离开发权限管理系统 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独 ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【后端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[后端篇] 数据库准备后端搭建 1.快速创建个SpringBoot项目 2.引入依赖 3.编写代码快速生成代码 4.运行代码生成器生成代码 5.编写application.pr ...
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】
前后端分离项目快速搭建[前端篇] 后端篇前端篇创建vue项目安装所需工具开始编码 1.在根目录下添加vue.config.js文件 2.编写main.js 3.编写App.vue 4.编写ax ...
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
本文目录前言做项目的三大好处强强联手(天狗组合) 专栏作者简介专栏的优势后端规划 1. SpringBoot 和 SpringCloud 的选择 2. Mybatis 和 MybatisPl ...
SpringBoot 和 Vue 前后端分离教程(附源码)
编辑:业余草来源:https://www.xttblog.com/?p=4851 昨天,一位网友问我要 SpringBoot + Vue 的源码项目.其实网上有很多,我这里分享一个项目的简单教程,授 ...
springboot+Mybatis+vue前后端分离开发：作业管理系统
1.功能设计本系统功能设计如下: 按照需求分为教师端和学生端,教师端发布作业,查看自己发布的作业,查看学生名单,添加学生. 学生端查看作业.提交或修改作业. 2.数据库设计 student表: 字段 ...
node vue 合并项目_吐血整理最佳实践：SpringBoot整合Vue前后端分离开发
[toc] 开发环境 IDEA V2018.5 npm v6.4.x vue-cli v2.9.x 创建项目 IDEA > Create New Project > Gradle 2018 ...
SpringBoot+MyBatis+VUE前后端分离
文章目录需求分析 1.创建表 2.创建SpringBoot项目 2.1 选择项目类型 2.2 设置组名包名等(根据个人需求更改) 2.3 选择依赖 2.3.1 选择Web依赖 2.3.2 选择MyS ...

SpringBoot和Vue前后端分离

SpringBoot-Vue前后端分离

实现增删改查及分页小DEMO

一、前言

二、开发栈

前端

后端

三、后端开发环境搭建

四、数据库

五、后端开发过程

数据源配置

Mybatis 配置

端口

六、前端开发环境搭建

七、前端开发过程

八、前后端整合

八、该项目的意义

GitHub地址：

SpringBoot和Vue前后端分离相关推荐

最新文章

热门文章