超详细的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: '<App/>'
24 })

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

<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">IVIEW布局</div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              Item 1
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>
              Item 2
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-analytics"></Icon>
              Item 3
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-paper"></Icon>
              Item 4
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Content :style="{padding: '0 50px'}">
        <Breadcrumb :style="{margin: '20px 0'}">
          <BreadcrumbItem>Home</BreadcrumbItem>
          <BreadcrumbItem>Components</BreadcrumbItem>
          <BreadcrumbItem>Layout</BreadcrumbItem>
        </Breadcrumb>
        <Card>
          <div style="min-height: 200px;">
            <v-table
              is-horizontal-resize
              style="width:100%"
              :columns="columns"
              :table-data="tableData"
              row-hover-color="#eee"
              row-click-color="#edf7ff"
            ></v-table>
          </div>
        </Card>
      </Content>
      
    </Layout>
  </div>
</template>

<script>
  export default {
    name: "table-main",
    data() {
      return {
        tableData: [
          {"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
          {"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
          {"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
          {"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
          {"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"},
          {"name":"赵伟","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
          {"name":"李伟","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
          {"name":"孙伟","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
          {"name":"周伟","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
          {"name":"吴伟","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
        ],
        columns: [
          {field: 'name', title: '姓名', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
          {field: 'tel', title: '手机号码', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
          {field: 'hobby', title: '爱好', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
          {field: 'address', title: '地址', width: 280, titleAlign: 'center', columnAlign: 'left',isResize:true}
        ]
      }
    }
  }
</script>

<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
  }
  .layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
    font-weight: bold;
    text-align: center;
    color: #49ffcc;
  }
  .layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
  }
  .layout-footer-center{
    text-align: center;
  }
</style>

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(), 'gubaoer@hotmail.com', 08613000001111, 'male', 'gubaoer', 'HongKou District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'boyle.gu@hotmail.com', 08613000001112, 'male', 'baoer.gu', 'JingAn District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'yoyo.wu@gmail.com', 08613000001113, 'female', 'yoyo.wu', 'JingAn District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'stacy.gao@126.com', 08613000001114, 'female', 'stacy.gao', 'MinHang District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'yomiko.zhu@qq.com', 08613000001115, 'female', 'yomiko.zhu', 'PuDong District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'hong.zhu@163.com', 08613000001116, 'male', 'hong.zhu', 'YangPu District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'leon.lai@qq.com', 08613000001117, 'male', 'leon.lai', 'JinShan District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'mark.lei@sohu.com', 08613000001118, 'male', 'mark.lei', 'HuangPu District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'wen.liu@360.com', 08613000001119, 'male', 'wen.liu', 'ChongMing District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'cai.lu@baidu.com', 08613000001120, 'female', 'cai.lu', 'BaoShan District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'alex.li@icee.com', 08613000001121, 'male', 'alex.li', 'ChangNing District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'sofia.xu@qq.com', 08613000001122, 'female', 'sofia.xu', 'ZhaBei District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'cora.zhang@qq.com', 08613000001123, 'female', 'cora.zhang', 'XuHui District');
INSERT INTO persons (create_datetime, email, phone, sex, username, zone) VALUES (now(), 'tom.gao@hotmail.com', 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.0</modelVersion>
 4 
 5   <groupId>com.springboot</groupId>
 6   <artifactId>SpringBootDemo</artifactId>
 7   <version>0.0.1-SNAPSHOT</version>
 8   <packaging>jar</packaging>
 9 
10   <name>SpringBootDemo</name>
11   <url>http://maven.apache.org</url>
12 
13    <parent>
14         <groupId>org.springframework.boot</groupId>
15         <artifactId>spring-boot-starter-parent</artifactId>
16         <version>1.5.8.RELEASE</version>
17         <relativePath/> <!-- lookup parent from repository -->
18    </parent>
19    <properties>
20         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
21         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
22         <java.version>1.8</java.version>
23     </properties>
24 
25   <dependencies>
26   
27       <dependency>
28         <groupId>mysql</groupId>
29             <artifactId>mysql-connector-java</artifactId>
30     </dependency>
31   
32       <dependency>
33             <groupId>org.projectlombok</groupId>
34             <artifactId>lombok</artifactId>
35             <version>1.16.10</version>
36      </dependency>
37 
38   
39   
40     <dependency>
41       <groupId>junit</groupId>
42       <artifactId>junit</artifactId>
43       <version>3.8.1</version>
44       <scope>test</scope>
45     </dependency>
46     
47     <dependency>
48             <groupId>org.springframework.boot</groupId>
49             <artifactId>spring-boot-starter-data-jpa</artifactId>
50         </dependency>
51         <dependency>
52             <groupId>org.mybatis.spring.boot</groupId>
53             <artifactId>mybatis-spring-boot-starter</artifactId>
54             <version>1.3.1</version>
55         </dependency>
56         <dependency>
57             <groupId>org.springframework.boot</groupId>
58             <artifactId>spring-boot-starter-web</artifactId>
59         </dependency>
60 
61         <dependency>
62             <groupId>mysql</groupId>
63             <artifactId>mysql-connector-java</artifactId>
64             <scope>runtime</scope>
65         </dependency>
66         <dependency>
67             <groupId>org.springframework.boot</groupId>
68             <artifactId>spring-boot-starter-test</artifactId>
69             <scope>test</scope>
70         </dependency>
71 
72         <dependency>
73             <groupId>org.springframework.boot</groupId>
74             <artifactId>spring-boot-starter-freemarker</artifactId>
75         </dependency>
76 
77 
78         <dependency>
79             <groupId>com.alibaba</groupId>
80             <artifactId>druid</artifactId>
81             <version>1.1.0</version>
82         </dependency>
83         <!-- webjars -->
84         <dependency>
85             <groupId>org.webjars</groupId>
86             <artifactId>jquery</artifactId>
87             <version>2.1.4</version>
88         </dependency>
89   </dependencies>
90   
91   <build>
92         <plugins>
93             <plugin>
94                 <groupId>org.springframework.boot</groupId>
95                 <artifactId>spring-boot-maven-plugin</artifactId>
96             </plugin>
97         </plugins>
98    </build>
99 </project>

Pom.xml