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

这是我的第一篇博客。请多多指教！开发工具前端：WebStorm、后台：EclipseVue环境搭建vue是一个JavaMVVM库，是一套用于构建用户界面的渐进式框架，是初创项目的首选前端框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。安装Vue1、安装node.js，安装完node.js之后，npm也会自动安装下载链接：https://p...

weixin_30609331

3046人浏览 · 2019-06-08 18:34:00

weixin_30609331 · 2019-06-08 18:34:00 发布

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

开发工具

前端：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

编写后台交互的业务代码

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<Person> 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         <!-- 是否允许单条sql 返回多个数据集 (取决于驱动的兼容性) default:true -->
15         <setting name="multipleResultSetsEnabled" value="true" />
16         <!-- 是否可以使用列的别名 (取决于驱动的兼容性) default:true -->
17         <setting name="useColumnLabel" value="true" />
18         <!-- 允许JDBC 生成主键。需要驱动器支持。如果设为了true，这个设置将强制使用被生成的主键，有一些驱动器不兼容不过仍然可以执行。 default:false -->
19         <setting name="useGeneratedKeys" value="true" />
20         <!-- 指定 MyBatis 如何自动映射 数据基表的列 NONE：不隐射 PARTIAL:部分 FULL:全部 -->
21         <setting name="autoMappingBehavior" value="PARTIAL" />
22         <!-- 这是默认的执行类型 （SIMPLE: 简单； REUSE: 执行器可能重复使用prepared statements语句；BATCH: 
23             执行器可以重复执行语句和批量更新） -->
24         <setting name="defaultExecutorType" value="SIMPLE" />
25         <!-- 使用驼峰命名法转换字段。 -->
26         <setting name="mapUnderscoreToCamelCase" value="true" />
27         <!-- 设置本地缓存范围 session:就会有数据的共享 statement:语句范围 (这样就不会有数据的共享 ) defalut:session -->
28         <setting name="localCacheScope" value="SESSION" />
29         <!-- 设置但JDBC类型为空时,某些驱动程序 要指定值,default:OTHER，插入空值时不需要指定类型 -->
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<Person> 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<Person> 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<Person> findAll(){
32         List<Person> 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: '<App/>'
26 })

main.js

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

  1 <template>
  2   <div class="layout">
  3     <Layout>
  4       <Header>
  5         <Menu mode="horizontal" theme="dark" active-name="1">
  6           <div class="layout-logo">IVIEW布局</div>
  7           <div class="layout-nav">
  8             <MenuItem name="1">
  9               <Icon type="ios-navigate"></Icon>
 10               Item 1
 11             </MenuItem>
 12             <MenuItem name="2">
 13               <Icon type="ios-keypad"></Icon>
 14               Item 2
 15             </MenuItem>
 16             <MenuItem name="3">
 17               <Icon type="ios-analytics"></Icon>
 18               Item 3
 19             </MenuItem>
 20             <MenuItem name="4">
 21               <Icon type="ios-paper"></Icon>
 22               Item 4
 23             </MenuItem>
 24           </div>
 25         </Menu>
 26       </Header>
 27       <Content :style="{padding: '0 50px'}">
 28         <Breadcrumb :style="{margin: '20px 0'}">
 29           <BreadcrumbItem>Home</BreadcrumbItem>
 30           <BreadcrumbItem>Components</BreadcrumbItem>
 31           <BreadcrumbItem>Layout</BreadcrumbItem>
 32         </Breadcrumb>
 33         <Card>
 34           <div style="min-height: 200px;">
 35             <v-table
 36               is-horizontal-resize
 37               style="width:100%"
 38               :columns="columns"
 39               :table-data="tableData"
 40               row-hover-color="#eee"
 41               row-click-color="#edf7ff"
 42             ></v-table>
 43           </div>
 44         </Card>
 45       </Content>
 46       <Footer class="layout-footer-center"> &copy; 作者：晨钟又暮鼓</Footer>
 47     </Layout>
 48   </div>
 49 </template>
 50 
 51 <script>
 52   export default {
 53     name: "table-main",
 54     data() {
 55       return {
 56         tableData: [ ],
 57         columns: [
 58           {field: 'id', title: '序号', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
 59           {field: 'createTime', title: '日期', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
 60           {field: 'username', title: '姓名', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
 61           {field: 'phone', title: '手机号码', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
 62           {field: 'email', title: '邮箱', width: 150, titleAlign: 'center', columnAlign: 'center',isResize:true},
 63           {field: 'zone', title: '地址', width: 280, titleAlign: 'center', columnAlign: 'center',isResize:true}
 64         ]
 65       }
 66     },
 67     created() {
 68       //在created函数中使用axios的get请求向后台获取用户信息数据
 69       this.$ajax('http://localhost:8081/findAll').then(res => {
 70         this.tableData = res.data
 71         console.log(res.data);
 72       }).catch(function (error) {
 73         console.log(error);
 74       });
 75     }
 76   }
 77 </script>
 78 
 79 <style scoped>
 80   .layout{
 81     border: 1px solid #d7dde4;
 82     background: #f5f7f9;
 83     position: relative;
 84     border-radius: 4px;
 85     overflow: hidden;
 86     height: 100%;
 87   }
 88   .layout-logo{
 89     width: 100px;
 90     height: 30px;
 91     background: #5b6270;
 92     border-radius: 3px;
 93     float: left;
 94     position: relative;
 95     top: 15px;
 96     left: 20px;
 97     font-weight: bold;
 98     text-align: center;
 99     color: #49ffcc;
100   }
101   .layout-nav{
102     width: 420px;
103     margin: 0 auto;
104     margin-right: 20px;
105   }
106   .layout-footer-center{
107     text-align: center;
108   }
109 </style>

TableMain.vue

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

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

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^