超详细的SpringBoot+Mybatis+Vue整合笔记

这是我的第一篇博客。请多多指教！

 

开发工具

前端：WebStorm、后台：Eclipse

Vue环境搭建

vue是一个JavaMVVM库，是一套用于构建用户界面的渐进式框架，是初创项目的首选前端框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。

安装Vue

1、安装node.js，安装完node.js之后，npm也会自动安装

下载链接：

https://pan.baidu.com/s/1wUd9LfnoCk8ixxbjHADFXw

提取码：hvg3

查询是否安装成功的命令：

node -v

npm -

 

2、全局安装脚手架工具vue-cli，命令如下

npm install --global vue-cli

3、vue项目初始化命令如下，若没有安装webpack，则先安装webpack

npm install -g webpack

vue init webpack myVue

初始化完成后的vue项目目录如下：

4、进入到myVue目录下，使用npm install 安装package.json包中的依赖

命令如下：

cd myVue

npm install

5、运行项目：

npm run dev

在浏览器上输入：localhost:8080，将会出现下面的vue初始页面：

 

WebStorm下载安装

下载链接：https://pan.baidu.com/s/1b8Vb2Ml5DbkWZUC5ONCD0g

提取码：855v

一波正常安装操作后，如下方式进行破解

1.将破解补丁JetbrainsCrack.jar复制到安装目录的bin目录下

2.修改下方这两个文件新增一行指定JetbrainsCrack.jar地址

3.运行软件点击activate 和activation code然后将数据包中提供的注册码（readme.txt中）复制到注册框中并点击OK即可，安装破解完成

使用WebStorm打开Vue项目

1、引入IVIEW组件和easy-table-vue组件，在当前项目的cmd窗口输入

npm install iview --save-dev

npm install vue-easytable --save-dev

2、打开main.js文件，使用这些组件

 1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 import Vue from 'vue'
 4 import App from './App'
 5 import router from './router'
 6 //引入IVIEW组件
 7 import iView from 'iview';
 8 import 'iview/dist/styles/iview.css';
 9 Vue.use(iView);
10 //引入vue-easytable
11 import 'vue-easytable/libs/themes-base/index.css'
12 import {VTable,VPagination} from 'vue-easytable'
13 Vue.component(VTable.name, VTable)
14 Vue.component(VPagination.name, VPagination)
15 
16 Vue.config.productionTip = false
17 
18 /* eslint-disable no-new */
19 new Vue({
20   el: '#app',
21   router,
22   components: { App },
23   template: ''
24 })

3、在src/components文件夹下新建文件TableMain.vue文件，添加代码如下：

4、修改src/router文件夹下的index.js，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import TableMain from '@/components/TableMain'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Table',
      component: TableMain
    }
  ]
})

 

此时页面展示如下：

执行与后台交互

1.执行下放sql脚本，向数据库中插入数据

创建人员信息表

 

CREATE TABLE persons 
(id  integer, 
create_datetime datetime, 
email varchar(255), 
phone varchar(255), 
sex varchar(255), 
username varchar(255), 
zone blob, 
primary key (id));

 

设置主键自增（mysql库）

--第一步：给 id 增加auto_increment 属性
alter table persons modify id int(11)  auto_increment;

--第二步：给自增值设置初始值
alter table persons  auto_increment=1;

插入测试数据

 

INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001111, 'male', 'gubaoer', 'HongKou District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001112, 'male', 'baoer.gu', 'JingAn District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001113, 'female', 'yoyo.wu', 'JingAn District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001114, 'female', 'stacy.gao', 'MinHang District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001115, 'female', 'yomiko.zhu', 'PuDong District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001116, 'male', 'hong.zhu', 'YangPu District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001117, 'male', 'leon.lai', 'JinShan District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001118, 'male', 'mark.lei', 'HuangPu District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001119, 'male', 'wen.liu', 'ChongMing District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001120, 'female', 'cai.lu', 'BaoShan District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001121, 'male', 'alex.li', 'ChangNing District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001122, 'female', 'sofia.xu', 'ZhaBei District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001123, 'female', 'cora.zhang', 'XuHui District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), '[email protected]', 08613000001124, 'female', 'tom.gao', 'HuangPu District');

 

使用Eclipse创建一个SpringBoot项目

 目录结构如下：

这里分享一下我的pom.xml文件

 1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 2   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 3   <modelVersion>4.0.0modelVersion>
 4 
 5   <groupId>com.springbootgroupId>
 6   <artifactId>SpringBootDemoartifactId>
 7   <version>0.0.1-SNAPSHOTversion>
 8   <packaging>jarpackaging>
 9 
10   <name>SpringBootDemoname>
11   <url>http://maven.apache.orgurl>
12 
13    <parent>
14         <groupId>org.springframework.bootgroupId>
15         <artifactId>spring-boot-starter-parentartifactId>
16         <version>1.5.8.RELEASEversion>
17         <relativePath/> 
18    parent>
19    <properties>
20         <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
21         <project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding>
22         <java.version>1.8java.version>
23     properties>
24 
25   <dependencies>
26   
27       <dependency>
28         <groupId>mysqlgroupId>
29             <artifactId>mysql-connector-javaartifactId>
30     dependency>
31   
32       <dependency>
33             <groupId>org.projectlombokgroupId>
34             <artifactId>lombokartifactId>
35             <version>1.16.10version>
36      dependency>
37 
38   
39   
40     <dependency>
41       <groupId>junitgroupId>
42       <artifactId>junitartifactId>
43       <version>3.8.1version>
44       <scope>testscope>
45     dependency>
46     
47     <dependency>
48             <groupId>org.springframework.bootgroupId>
49             <artifactId>spring-boot-starter-data-jpaartifactId>
50         dependency>
51         <dependency>
52             <groupId>org.mybatis.spring.bootgroupId>
53             <artifactId>mybatis-spring-boot-starterartifactId>
54             <version>1.3.1version>
55         dependency>
56         <dependency>
57             <groupId>org.springframework.bootgroupId>
58             <artifactId>spring-boot-starter-webartifactId>
59         dependency>
60 
61         <dependency>
62             <groupId>mysqlgroupId>
63             <artifactId>mysql-connector-javaartifactId>
64             <scope>runtimescope>
65         dependency>
66         <dependency>
67             <groupId>org.springframework.bootgroupId>
68             <artifactId>spring-boot-starter-testartifactId>
69             <scope>testscope>
70         dependency>
71 
72         <dependency>
73             <groupId>org.springframework.bootgroupId>
74             <artifactId>spring-boot-starter-freemarkerartifactId>
75         dependency>
76 
77 
78         <dependency>
79             <groupId>com.alibabagroupId>
80             <artifactId>druidartifactId>
81             <version>1.1.0version>
82         dependency>
83         
84         <dependency>
85             <groupId>org.webjarsgroupId>
86             <artifactId>jqueryartifactId>
87             <version>2.1.4version>
88         dependency>
89   dependencies>
90   
91   <build>
92         <plugins>
93             <plugin>
94                 <groupId>org.springframework.bootgroupId>
95                 <artifactId>spring-boot-maven-pluginartifactId>
96             plugin>
97         plugins>
98    build>
99 project>

Pom.xml

 编写后台交互的业务代码

1、修改application.yml，添加配置内容如下：

mybatis:
    config-location: classpath:mybatis/mybatis.cfg.xml
    mapper-locations: classpath:mybatis/mapper/*.xml
    type-aliases-package: com.wzhi.tableserver.pojo
server:
    port: 8888
spring:
    application:
        name: table-server
    datasource:
        driver-class-name: com.mysql.jdbc.Driver
        password: 136670
        url: jdbc:mysql://localhost:3306/springboottest?autoReconnect=true&useSSL=false
        username: root

application.yml

2、新建Person.java实体类，代码如下：

 1 package com.springboot.domain;
 2 
 3 /**
 4  * @author 不若为止
 5  * @version 1.0
 6  * @class Person
 7  * @package com.wzhi.tableserver.pojo
 8  * @desc 个人信息实体类
 9  * @copyright weizhi
10  * @date 2018/09/04
11  */
12 
13 public class Person {
14     private Integer id;
15     private String username;
16     private String zone;
17     private String email;
18     private String sex;
19     private String phone;
20     private String createTime;
21     public Integer getId() {
22         return id;
23     }
24     public void setId(Integer id) {
25         this.id = id;
26     }
27     public String getUsername() {
28         return username;
29     }
30     public void setUsername(String username) {
31         this.username = username;
32     }
33     public String getZone() {
34         return zone;
35     }
36     public void setZone(String zone) {
37         this.zone = zone;
38     }
39     public String getEmail() {
40         return email;
41     }
42     public void setEmail(String email) {
43         this.email = email;
44     }
45     public String getSex() {
46         return sex;
47     }
48     public void setSex(String sex) {
49         this.sex = sex;
50     }
51     public String getPhone() {
52         return phone;
53     }
54     public void setPhone(String phone) {
55         this.phone = phone;
56     }
57     public String getCreateTime() {
58         return createTime;
59     }
60     public void setCreateTime(String createTime) {
61         this.createTime = createTime;
62     }
63     
64     
65 }

Person.java

3、新建PersonMapper.java文件，代码如下

 1 package com.springboot.dao;
 2 
 3 import org.apache.ibatis.annotations.Mapper;
 4 
 5 import com.springboot.domain.Person;
 6 
 7 import java.util.List;
 8 
 9 /**
10  * @author 不若为止
11  * @version 1.0
12  * @class PersonMapper
13  * @package com.wzhi.tableserver.dao
14  * @desc 个人信息Mapper，此处的Mapper注解会被启动类的@MapperScan扫描到
15  * @copyright weizhi
16  * @date 2018/09/04
17  */
18 @Mapper
19 public interface PersonMapper {
20     /**
21      * @desc 查询所有的用户
22      * @return
23      */
24     List findAll();
25 }

PersonMapper.java

4、新建mybatis.cfg.xml和PersonMapping.xml文件

 1 xml version="1.0" encoding="UTF-8" ?>
 2 DOCTYPE configuration
 3         PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
 4         "http://mybatis.org/dtd/mybatis-3-config.dtd">
 5 
 6 <configuration>
 7     <settings>
 8         
 9         <setting name="cacheEnabled" value="true" />
10         
11         <setting name="lazyLoadingEnabled" value="true" />
12         
13         <setting name="aggressiveLazyLoading" value="true" />
14         
15         <setting name="multipleResultSetsEnabled" value="true" />
16         
17         <setting name="useColumnLabel" value="true" />
18         
19         <setting name="useGeneratedKeys" value="true" />
20         
21         <setting name="autoMappingBehavior" value="PARTIAL" />
22         
24         <setting name="defaultExecutorType" value="SIMPLE" />
25         
26         <setting name="mapUnderscoreToCamelCase" value="true" />
27         
28         <setting name="localCacheScope" value="SESSION" />
29         
30         <setting name="jdbcTypeForNull" value="NULL" />
31     settings>
32 configuration>

Mybatis.cfg.xml

 1 xml version="1.0" encoding="UTF-8"?>
 2 DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 3 <mapper namespace="com.springboot.dao.PersonMapper">
 4     <resultMap type="com.springboot.domain.Person" id="person">
 5         <result column="id" jdbcType="INTEGER" property="id"/>
 6         <result column="create_datetime" jdbcType="VARCHAR" property="createTime"/>
 7         <result column="email" jdbcType="VARCHAR" property="email"/>
 8         <result column="phone" jdbcType="VARCHAR" property="phone"/>
 9         <result column="sex" jdbcType="VARCHAR" property="sex"/>
10         <result column="username" jdbcType="VARCHAR" property="username"/>
11         <result column="zone" jdbcType="VARCHAR" property="zone"/>
12     resultMap>
13     <sql id="personColnum">
14        id,create_datetime,email,phone,sex,username,zone
15     sql>
16     <select id="findAll" resultMap="person">
17         SELECT <include refid="personColnum"/>
18         FROM persons
19     select>
20 mapper>

PersonMapping.xml

5、新建PersonService.java和PersonServiceImpl.java

 1 package com.springboot.service.api;
 2 
 3 import java.util.List;
 4 
 5 import com.springboot.domain.Person;
 6 /**
 7  * @author 不若为止
 8  * @version 1.0
 9  * @class PersonService
10  * @package com.wzhi.tableserver.service
11  * @desc 个人信息Service
12  * @copyright weizhi
13  * @date 2018/09/04
14  */
15 public interface PersonService {
16     /**
17      * @desc 查询所有的用户
18      * @return
19      */
20     List findAll();
21 }

PersonService.java

 1 package com.springboot.service.impl;
 2 
 3 import java.util.List;
 4 
 5 import org.springframework.beans.factory.annotation.Autowired;
 6 import org.springframework.stereotype.Service;
 7 
 8 import com.springboot.dao.PersonMapper;
 9 import com.springboot.domain.Person;
10 import com.springboot.service.api.PersonService;
11 
12 @Service
13 public class PersonServiceImpl implements PersonService {
14     @Autowired
15     private PersonMapper mapper;
16     @Override
17     public List findAll() {
18         return mapper.findAll();
19     }
20 }

PersonServiceImpl.java

6、新建PersonController.java，代码如下：

 1 package com.springboot.controller;
 2 
 3 
 4 import lombok.extern.slf4j.Slf4j;
 5 import org.springframework.beans.factory.annotation.Autowired;
 6 import org.springframework.web.bind.annotation.GetMapping;
 7 import org.springframework.web.bind.annotation.RestController;
 8 
 9 import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
10 import com.springboot.domain.Person;
11 import com.springboot.service.api.PersonService;
12 
13 import java.util.List;
14 
15 /**
16  * @author 不若为止
17  * @version 1.0
18  * @class PersonController
19  * @package com.wzhi.tableserver.controller
20  * @desc 个人信息交互
21  * @copyright weizhi
22  * @date 2018/09/04
23  */
24 @RestController
25 @JsonIgnoreProperties({"hibernateLazyInitializer", "handler"})
26 public class PersonController {
27     @Autowired
28     private PersonService service;
29 
30     @GetMapping(value = "findAll")
31     public List findAll(){
32         List list = service.findAll();
33        
34         return list;
35     }
36 }

PersonController.java

实现前后台的数据交互

1、在前端项目中引入axios，执行命令cnpm install axios --save-dev，修改在main.js为：

 1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 import Vue from 'vue'
 4 import App from './App'
 5 import router from './router'
 6 //引入IVIEW组件
 7 import iView from 'iview';
 8 import 'iview/dist/styles/iview.css';
 9 Vue.use(iView);
10 //引入vue-easytable
11 import 'vue-easytable/libs/themes-base/index.css'
12 import {VTable,VPagination} from 'vue-easytable'
13 Vue.component(VTable.name, VTable)
14 Vue.component(VPagination.name, VPagination)
15 //引入axios
16 import axios from 'axios'
17 Vue.prototype.$ajax = axios
18 Vue.config.productionTip = false
19 
20 /* eslint-disable no-new */
21 new Vue({
22   el: '#app',
23   router,
24   components: { App },
25   template: ''
26 })

main.js

2、修改TableMain.vue文件，修改数据从后台服务获取，代码如下：

  1 
 50 
 51 
 78 
 79 

TableMain.vue

注：这里有个需要注意的地方，接口服务和前端vue程序部署在不同的端口上，直接调用会报跨域错误

需要使用nginx做一个反向代理

3、启动DemoApplication，刷新界面，从后台查询到数据如下：

 

转载于:https://www.cnblogs.com/ggjun/p/10990215.html