28.VUE.JS + RESTFUL + PAGEHELPER + THYMELEAF + SPRINGBOOT 前后端分离 增删改查 CRUD 教程

数据库准备

首先准备数据库 how2java
1
create database how2java
 步骤 3 : 

准备表

准备 Hero 表和相关数据
 
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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);

 

pom.xml

pom.xml 中的相关导包，各个部分都做了注释
 
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<?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>
        <!-- springboot web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- springboot tomcat 支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </dependency>
        <!-- thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- thymeleaf legacyhtml5 模式支持 -->      
        <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>    
        <!-- mybatis -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.1.1</version>
        </dependency>        
        <!-- tomcat的支持.-->
        <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>
        <!-- mysql-->
        <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的校验更宽松点，符合大家（懒散）的开发习惯。。。
application.properties
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#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


1
2
3
4
5
6
7
8
9
10
11
12
13
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 : 

分页配置

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 : 

异常处理

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 : 

实体类

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 目录下
Hero.xml
 
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
<?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 接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 实现类

 
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
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 文件
 
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
74
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个文件压缩了在右上角下载
js 文件
 步骤 19 : 

模板文件

在 resources 下新建 templates 目录，创建3个模板文件
模板文件
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!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>
                            <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>

 

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
74
75
76
77
78
79
<!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>
    </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>
    

 

1
2
3
4
5
6
7
8
9
10
<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>

 

 

 

启动测试

 
运行下面类的主方法启动项目
 
com.how2java.springboot.Application
 

然后访问测试地址：
 
http://127.0.0.1:8080/listHero
 

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

posted on 2019-01-04 17:31  我是司  阅读(634)  评论(0)    收藏  举报

导航