Vue.js + Restful + PageHelper + Thymeleaf + Springboot 前后端分离增删改查 CRUD 教程

更多内容，点击了解： https://how2j.cn/k/springboot/springboot-vue/1788.html

步骤 1 : 教程说明

步骤 2 : 数据库准备

步骤 3 : 准备表

步骤 4 : 先运行，看到效果，再学习

步骤 5 : 模仿和排错

步骤 6 : 新建 springboot 项目

步骤 7 : pom.xml

步骤 8 : application.properties

步骤 9 : Application.java

步骤 10 : 分页配置

步骤 11 : 异常处理

步骤 12 : 实体类

步骤 13 : Mapper

步骤 14 : Hero.xml

步骤 15 : Service 接口

步骤 16 : Service 实现类

步骤 17 : Controller 类

步骤 18 : js 文件

步骤 19 : 模板文件

步骤 20 : 启动测试

步骤 1 : 教程说明

这个教程比较复杂，涉及到了多方面的知识点，包括 Vue.js Springboot, Restful风格，分页 PageHelper 的使用， Thymeleaf 模板。
对任何一个知识点不熟悉，都可以通过下载区(点击进入)搜索找到相关教程。

步骤 2 : 数据库准备

首先准备数据库 how2java

create database how2java

步骤 3 : 准备表

准备 Hero 表和相关数据

USE `how2java`;

CREATE TABLE `hero` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(30) DEFAULT NULL,

`hp` float DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=6194 DEFAULT CHARSET=utf8;

INSERT INTO `hero` VALUES (6094,'name0',0);

INSERT INTO `hero` VALUES (6095,'name1',1);

INSERT INTO `hero` VALUES (6096,'name2',2);

INSERT INTO `hero` VALUES (6097,'name3',3);

INSERT INTO `hero` VALUES (6098,'name4',4);

INSERT INTO `hero` VALUES (6099,'name5',5);

INSERT INTO `hero` VALUES (6100,'name6',6);

INSERT INTO `hero` VALUES (6101,'name7',7);

INSERT INTO `hero` VALUES (6102,'name8',8);

INSERT INTO `hero` VALUES (6103,'name9',9);

INSERT INTO `hero` VALUES (6104,'name10',10);

INSERT INTO `hero` VALUES (6105,'name11',11);

INSERT INTO `hero` VALUES (6106,'name12',12);

INSERT INTO `hero` VALUES (6107,'name13',13);

INSERT INTO `hero` VALUES (6108,'name14',14);

INSERT INTO `hero` VALUES (6109,'name15',15);

INSERT INTO `hero` VALUES (6110,'name16',16);

INSERT INTO `hero` VALUES (6111,'name17',17);

INSERT INTO `hero` VALUES (6112,'name18',18);

INSERT INTO `hero` VALUES (6113,'name19',19);

INSERT INTO `hero` VALUES (6114,'name20',20);

INSERT INTO `hero` VALUES (6115,'name21',21);

INSERT INTO `hero` VALUES (6116,'name22',22);

INSERT INTO `hero` VALUES (6117,'name23',23);

INSERT INTO `hero` VALUES (6118,'name24',24);

INSERT INTO `hero` VALUES (6119,'name25',25);

INSERT INTO `hero` VALUES (6120,'name26',26);

INSERT INTO `hero` VALUES (6121,'name27',27);

INSERT INTO `hero` VALUES (6122,'name28',28);

INSERT INTO `hero` VALUES (6123,'name29',29);

INSERT INTO `hero` VALUES (6124,'name30',30);

INSERT INTO `hero` VALUES (6125,'name31',31);

INSERT INTO `hero` VALUES (6126,'name32',32);

INSERT INTO `hero` VALUES (6127,'name33',33);

INSERT INTO `hero` VALUES (6128,'name34',34);

INSERT INTO `hero` VALUES (6129,'name35',35);

INSERT INTO `hero` VALUES (6130,'name36',36);

INSERT INTO `hero` VALUES (6131,'name37',37);

INSERT INTO `hero` VALUES (6132,'name38',38);

INSERT INTO `hero` VALUES (6133,'name39',39);

INSERT INTO `hero` VALUES (6134,'name40',40);

INSERT INTO `hero` VALUES (6135,'name41',41);

INSERT INTO `hero` VALUES (6136,'name42',42);

INSERT INTO `hero` VALUES (6137,'name43',43);

INSERT INTO `hero` VALUES (6138,'name44',44);

INSERT INTO `hero` VALUES (6139,'name45',45);

INSERT INTO `hero` VALUES (6140,'name46',46);

INSERT INTO `hero` VALUES (6141,'name47',47);

INSERT INTO `hero` VALUES (6142,'name48',48);

INSERT INTO `hero` VALUES (6143,'name49',49);

INSERT INTO `hero` VALUES (6144,'name50',50);

INSERT INTO `hero` VALUES (6145,'name51',51);

INSERT INTO `hero` VALUES (6146,'name52',52);

INSERT INTO `hero` VALUES (6147,'name53',53);

INSERT INTO `hero` VALUES (6148,'name54',54);

INSERT INTO `hero` VALUES (6149,'name55',55);

INSERT INTO `hero` VALUES (6150,'name56',56);

INSERT INTO `hero` VALUES (6151,'name57',57);

INSERT INTO `hero` VALUES (6152,'name58',58);

INSERT INTO `hero` VALUES (6153,'name59',59);

INSERT INTO `hero` VALUES (6154,'name60',60);

INSERT INTO `hero` VALUES (6155,'name61',61);

INSERT INTO `hero` VALUES (6156,'name62',62);

INSERT INTO `hero` VALUES (6157,'name63',63);

INSERT INTO `hero` VALUES (6158,'name64',64);

INSERT INTO `hero` VALUES (6159,'name65',65);

INSERT INTO `hero` VALUES (6160,'name66',66);

INSERT INTO `hero` VALUES (6161,'name67',67);

INSERT INTO `hero` VALUES (6162,'name68',68);

INSERT INTO `hero` VALUES (6163,'name69',69);

INSERT INTO `hero` VALUES (6164,'name70',70);

INSERT INTO `hero` VALUES (6165,'name71',71);

INSERT INTO `hero` VALUES (6166,'name72',72);

INSERT INTO `hero` VALUES (6167,'name73',73);

INSERT INTO `hero` VALUES (6168,'name74',74);

INSERT INTO `hero` VALUES (6169,'name75',75);

INSERT INTO `hero` VALUES (6170,'name76',76);

INSERT INTO `hero` VALUES (6171,'name77',77);

INSERT INTO `hero` VALUES (6172,'name78',78);

INSERT INTO `hero` VALUES (6173,'name79',79);

INSERT INTO `hero` VALUES (6174,'name80',80);

INSERT INTO `hero` VALUES (6175,'name81',81);

INSERT INTO `hero` VALUES (6176,'name82',82);

INSERT INTO `hero` VALUES (6177,'name83',83);

INSERT INTO `hero` VALUES (6178,'name84',84);

INSERT INTO `hero` VALUES (6179,'name85',85);

INSERT INTO `hero` VALUES (6180,'name86',86);

INSERT INTO `hero` VALUES (6181,'name87',87);

INSERT INTO `hero` VALUES (6182,'name88',88);

INSERT INTO `hero` VALUES (6183,'name89',89);

INSERT INTO `hero` VALUES (6184,'name90',90);

INSERT INTO `hero` VALUES (6185,'name91',91);

INSERT INTO `hero` VALUES (6186,'name92',92);

INSERT INTO `hero` VALUES (6187,'name93',93);

INSERT INTO `hero` VALUES (6188,'name94',94);

INSERT INTO `hero` VALUES (6189,'name95',95);

INSERT INTO `hero` VALUES (6190,'name96',96);

INSERT INTO `hero` VALUES (6191,'name97',97);

INSERT INTO `hero` VALUES (6192,'name98',98);

INSERT INTO `hero` VALUES (6193,'name99',99);

步骤 4 : 先运行，看到效果，再学习

老规矩，先下载下载区(点击进入)的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。
运行下面类的主方法启动项目

com.how2java.springboot.Application

然后访问测试地址：

http://127.0.0.1:8080/listHero

这就是前后端分离的 CRUD 了。
没有套用 bootstrap 美化界面，尽量要足够少的知识来展现本教程的核心内容，以免被分散精力。

步骤 5 : 模仿和排错

在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码，来定位问题所在。
采用这种方式，学习有效果，排错有效率，可以较为明显地提升学习速度，跨过学习路上的各个槛。
推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。
这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来
这里提供了绿色安装和使用教程：diffmerge 下载和使用教程

步骤 6 : 新建 springboot 项目

新建一个 springboot 项目，新建方式在前面教程已经讲解过了，这里不赘述Eclipse 方式创建 Springboot 项目IDEA 方式创建 Springboot 项目

步骤 7 : pom.xml

pom.xml 中的相关导包，各个部分都做了注释

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

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

<modelVersion>4.0.0</modelVersion>

<groupId>com.how2java</groupId>

<artifactId>springboot</artifactId>

<version>0.0.1-SNAPSHOT</version>

<name>springboot</name>

<description>springboot</description>

<packaging>war</packaging>

<parent>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-parent</artifactId>

<version>1.5.9.RELEASE</version>

</parent>

<dependencies>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-tomcat</artifactId>

</dependency>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<dependency>

<groupId>net.sourceforge.nekohtml</groupId>

<artifactId>nekohtml</artifactId>

<version>1.9.22</version>

</dependency>

<dependency>

<groupId>junit</groupId>

<artifactId>junit</artifactId>

<version>3.8.1</version>

<scope>test</scope>

</dependency>

<dependency>

<groupId>com.github.pagehelper</groupId>

<artifactId>pagehelper</artifactId>

<version>4.1.6</version>

</dependency>

<dependency>

<groupId>org.mybatis.spring.boot</groupId>

<artifactId>mybatis-spring-boot-starter</artifactId>

<version>1.1.1</version>

</dependency>

<dependency>

<groupId>org.apache.tomcat.embed</groupId>

<artifactId>tomcat-embed-jasper</artifactId>

</dependency>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-devtools</artifactId>

<optional>true</optional>

</dependency>

<dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

<version>5.1.21</version>

</dependency>

</dependencies>

<properties>

<java.version>1.8</java.version>

</properties>

<build>

<plugins>

<plugin>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-maven-plugin</artifactId>

</plugin>

</plugins>

</build>

</project>

步骤 8 : application.properties

在 src/main/resources 下新建 application.properties 文件
配置文件指定了数据库参数， mybatis 参数和 thymeleaf 参数
其中 LEGACYHTML5 表示使用传统模式，比起 HTML5 来对 html的校验更宽松点，符合大家(懒散)的开发习惯。。。

#database

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/how2java?characterEncoding=UTF-8

spring.datasource.username=root

spring.datasource.password=admin

spring.datasource.driver-class-name=com.mysql.jdbc.Driver

#mybatis

mybatis.mapper-locations=classpath:mapper/*.xml

mybatis.type-aliases-package=com.how2java.springboot.pojo

#thymeleaf

spring.thymeleaf.mode=LEGACYHTML5

spring.thymeleaf.encoding=UTF-8

spring.thymeleaf.content-type=text/html

spring.thymeleaf.cache=false

步骤 9 : Application.java

启动类

package com.how2java.springboot;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication

public class Application {

public static void main(String[] args) {

SpringApplication.run(Application.class, args);

}

步骤 10 : 分页配置

package com.how2java.springboot.config;

import java.util.Properties;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import com.github.pagehelper.PageHelper;

@Configuration

public class PageHelperConfig {

@Bean

public PageHelper pageHelper() {

PageHelper pageHelper = new PageHelper();

Properties p = new Properties();

p.setProperty("offsetAsPageNum", "true");

p.setProperty("rowBoundsWithCount", "true");

p.setProperty("reasonable", "true");

pageHelper.setProperties(p);

return pageHelper;

}

步骤 11 : 异常处理

package com.how2java.springboot.exception;

import javax.servlet.http.HttpServletRequest;

import org.springframework.web.bind.annotation.ControllerAdvice;

import org.springframework.web.bind.annotation.ExceptionHandler;

import org.springframework.web.servlet.ModelAndView;

@ControllerAdvice

public class GlobalExceptionHandler {

@ExceptionHandler(value = Exception.class)

public ModelAndView defaultErrorHandler(HttpServletRequest req, Exception e) throws Exception {

ModelAndView mav = new ModelAndView();

mav.addObject("exception", e);

mav.addObject("url", req.getRequestURL());

mav.setViewName("errorPage");

return mav;

}

步骤 12 : 实体类

package com.how2java.springboot.pojo;

public class Hero {

private int id;

private String name;

private int hp;

public int getHp() {

return hp;

}

public void setHp(int hp) {

this.hp = hp;

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

@Override

public String toString() {

return "Hero [id=" + id + ", name=" + name + ", hp=" + hp + "]";

}

步骤 13 : Mapper

package com.how2java.springboot.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import com.how2java.springboot.pojo.Hero;

@Mapper

public interface HeroMapper {

public int add(Hero hero);

public void delete(int id);

public Hero get(int id);

public int update(Hero hero);

public List<Hero> list();

}

步骤 14 : Hero.xml

这个文件就放在 src/main/resources/mapper 目录下

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

<!DOCTYPE mapper

PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.how2java.springboot.mapper.HeroMapper">

<insert id="add" parameterType="Hero" >

insert into hero ( name,hp ) values (#{name},#{hp})

</insert>

<delete id="delete" parameterType="Hero" >

delete from hero where id= #{id}

</delete>

<select id="get" parameterType="_int" resultType="Hero">

select * from hero where id= #{id}

</select>

<update id="update" parameterType="Hero" >

update hero set name=#{name}, hp = #{hp} where id=#{id}

</update>

<select id="list" resultType="Hero">

select * from hero

</select>

</mapper>

步骤 15 : Service 接口

package com.how2java.springboot.service;

import java.util.List;

import com.how2java.springboot.pojo.Hero;

public interface HeroService {

public int add(Hero hero);

public void delete(int id);

public Hero get(int id);

public int update(Hero hero);

public List<Hero> list();

}

步骤 16 : Service 实现类

package com.how2java.springboot.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import com.how2java.springboot.mapper.HeroMapper;

import com.how2java.springboot.pojo.Hero;

import com.how2java.springboot.service.HeroService;

@Service

public class HeroServiceImpl implements HeroService{

@Autowired HeroMapper heroMapper;

@Override

public int add(Hero hero) {

return heroMapper.add(hero);

}

@Override

public void delete(int id) {

heroMapper.delete(id);

}

@Override

public Hero get(int id) {

return heroMapper.get(id);

}

@Override

public int update(Hero hero) {

return heroMapper.update(hero);

}

@Override

public List<Hero> list() {

return heroMapper.list();

}

步骤 17 : Controller 类

首先 HeroController 分为两部分:
1. restful 部分
2. 页面跳转部分
restful 就提供 CRUD 等等操作
页面跳转主要用来跳转到 thymeleaf 对应的 html 文件

package com.how2java.springboot.web;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.DeleteMapping;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.PutMapping;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.RestController;

import org.springframework.web.servlet.ModelAndView;

import com.github.pagehelper.PageHelper;

import com.github.pagehelper.PageInfo;

import com.how2java.springboot.pojo.Hero;

import com.how2java.springboot.service.HeroService;

@RestController

public class HeroController {

@Autowired HeroService heroService;

/*restful 部分*/

@GetMapping("/heroes")

public PageInfo<Hero> list(@RequestParam(value = "start", defaultValue = "1") int start,@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {

PageHelper.startPage(start,size,"id desc");

List<Hero> hs=heroService.list();

System.out.println(hs.size());

PageInfo<Hero> page = new PageInfo<>(hs,5); //5表示导航分页最多有5个，像 [1,2,3,4,5] 这样

return page;

}

@GetMapping("/heroes/{id}")

public Hero get(@PathVariable("id") int id) throws Exception {

System.out.println(id);

Hero h=heroService.get(id);

System.out.println(h);

return h;

}

@PostMapping("/heroes")

public String add(@RequestBody Hero h) throws Exception {

heroService.add(h);

return "success";

}

@DeleteMapping("/heroes/{id}")

public String delete(Hero h) throws Exception {

heroService.delete(h.getId());

return "success";

}

@PutMapping("/heroes/{id}")

public String update(@RequestBody Hero h) throws Exception {

heroService.update(h);

return "success";

}

/*页面跳转部分*/

@RequestMapping(value="/listHero", method=RequestMethod.GET)

public ModelAndView listHero(){

ModelAndView mv = new ModelAndView("listHero");

return mv;

}

@RequestMapping(value="/editHero", method=RequestMethod.GET)

public ModelAndView editHero(){

ModelAndView mv = new ModelAndView("editHero");

return mv;

}

步骤 18 : js 文件

在 src/main/webapp 下新建 js 目录，里面放上3个要用到的第三方 js 库： axios.min.js, jquery.min.js, vue.min.js
这3个文件压缩了在下载区(点击进入)下载

步骤 19 : 模板文件

在 resources 下新建 templates 目录，创建3个模板文件

listHero.html
editHero.html
errorPage.html

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="./js/jquery.min.js"></script>

<script src="./js/vue.min.js"></script>

<script src="./js/axios.min.js"></script>

<style type="text/css">

td{

border:1px solid gray;

}

table{

border-collapse:collapse;

}

div#app{

margin:20px auto;

width:400px;

padding:20px;

}

div#pagination{

text-align: center;

line-height: 100px;

}

div#pagination a{

text-decoration:none;

}

.disableHref{

cursor:default;

color:#E5E0E0;

text-decoration:none;

}

</style>

<script>

$(function(){

$("a.disableHref").click(function(event){

return false;

// event.preventDefault();

});

</script>

</head>

<body>

<div id="app">

<table id="heroListTable" >

<tr>

<td colspan="3">

<div id="pagination" >

<a :class="{ disableHref: pagination.pageNum==1 }" href="#nowhere" @click="jump('first')">[first]</a>

<a :class="{ disableHref: !pagination.hasPreviousPage }" href="#nowhere" @click="jump('pre')">[pre]</a>

<a href="#nowhere" :class="{disableHref:pagination.pageNum==i}" v-for="i in pagination.navigatepageNums" @click="jumpByNumber(i)" >

{{i}}

</a>

<a :class="{ disableHref: !pagination.hasNextPage }" href="#nowhere" @click="jump('next')">[next]</a>

<a :class="{ disableHref: pagination.pageNum==pagination.pages }" href="#nowhere"@click="jump('last')">[last]</a>

</div>

</td>

</tr>

<tr>

<td>英雄名称</td>

<td>血量</td>

<td>操作</td>

</tr>

<tr v-for="hero in heros ">

<td>{{hero.name}}</td>

<td>{{hero.hp}}</td>

<td>

<a :href="'editHero?id=' + hero.id ">编辑</a>

<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>

</td>

</tr>

<tr>

<td colspan="3">

<br>

英雄名称:

<input type="text" v-model="hero4Add.name" />

<br>

血量：

<input type="number" v-model="hero4Add.hp" />

<br>

<button type="button" v-on:click="add">增加</button>

<br>

</td>

</tr>

</table>

</div>

<script type="text/javascript">

var data4Vue = {

heros: [],

hero4Add: { id: 0, name: '', hp: '0'},

pagination:{}

};

//ViewModel

var vue = new Vue({

el: '#app',

data: data4Vue,

mounted:function(){ //mounted　表示这个 Vue 对象加载成功了

this.list(1);

},

methods: {

list:function(start){

var url = "heroes?start="+start;

axios.get(url).then(function(response) {

vue.pagination = response.data;

console.log(vue.pagination);

vue.heros = response.data.list;

})

},

add: function (event) {

var url = "heroes";

axios.post(url,this.hero4Add).then(function(response){

vue.list(1);

vue.hero4Add = { id: 0, name: '', hp: '0'}

});

},

deleteHero: function (id) {

var url = "heroes/"+id;

axios.delete(url).then(function(response){

vue.list(1);

});

},

jump: function(page){

if('first'== page && 1!=vue.pagination.pageNum)

vue.list(1);

else if('pre'== page && vue.pagination.hasPreviousPage )

vue.list(vue.pagination.prePage);

else if('next'== page && vue.pagination.hasNextPage)

vue.list(vue.pagination.nextPage);

else if('last'== page && vue.pagination.pageNum!=vue.pagination.pages)

vue.list(vue.pagination.pages);

},

jumpByNumber: function(start){

if(start!=vue.pagination.pageNum)

vue.list(start);

}

});

</script>

</body>

</html>

<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="./js/jquery.min.js"></script>

<script src="./js/vue.min.js"></script>

<script src="./js/axios.min.js"></script>

<style type="text/css">

div#app{

margin:20px auto;

width:400px;

padding:20px;

}

</style>

</head>

<body>

<div id="app">

<div id="div4Update">

英雄名称:

<input type="text" v-model="hero4Update.name" />

<br>

血量：

<input type="number" v-model="hero4Update.hp" />

<input type="hidden" v-model="hero4Update.id" />

<br>

<button type="button" v-on:click="update">修改</button>

<button type="button" v-on:click="cancel">取消</button>

</div>

<script type="text/javascript">

//获取地址栏参数的函数

function getUrlParms(name){

var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if(r!=null)

return unescape(r[2]);

return null;

}

var data4Vue = {

heros: [],

hero4Update: { id: 0, name: '', hp: '0'}

};

//ViewModel

var vue = new Vue({

el: '#app',

data: data4Vue,

mounted:function(){ //mounted　表示这个 Vue 对象加载成功了

this.get();

},

methods: {

get:function(){

var id = getUrlParms("id");

var url = "heroes/"+id;

console.log(url);

axios.get(url).then(function(response) {

vue.hero4Update = response.data;

})

},

update:function (event) {

var url = "heroes/"+vue.hero4Update.id;

axios.put(url,vue.hero4Update).then(function(response){

location.href="listHero";

});

},

cancel:function(){

location.href="listHero";

}

});

</script>

</body>

</html>

<html xmlns:th="http://www.thymeleaf.org">

<body>

<div style="width:500px;border:1px solid lightgray;margin:200px auto;padding:80px">

系统出现了异常，异常原因是：

<div th:text="${exception}"></div>

出现异常的地址是：

<div th:text="${url}"></div>

</div>

</body>

</html>

步骤 20 : 启动测试

运行下面类的主方法启动项目

com.how2java.springboot.Application

然后访问测试地址：

http://127.0.0.1:8080/listHero

这就是前后端分离的 CRUD 了。
没有套用 bootstrap 美化界面，尽量要足够少的知识来展现本教程的核心内容，以免被分散精力。

更多内容，点击了解： https://how2j.cn/k/springboot/springboot-vue/1788.html