easy-table-vue+VueJs、SpringBoot+Mybatis實現MVVM模型前后台數據交互

該項目分為前端展示部分和后台服務部分。

前端部分

　　使用的技術是：NodeJs、Webpack、VueJs

　　使用的組件庫是：IVIEW、easy-table-vue

　　使用的開發工具是：WebStorm　　鏈接：https://pan.baidu.com/s/1UBmLnRXM-IDcAiw72IESJw  提取碼：cuf0

　　項目地址：https://gitee.com/wlovet/table-project

后台部分

　　使用的技術是：Maven、SpringBoot、Mybatis

　　使用的開發工具是：IDea 　　鏈接：https://pan.baidu.com/s/1wFeT50WYvNDNg6OQgs54qw  提取碼：64nr

　　項目地址：https://gitee.com/wlovet/table-server

交互的技術是 ：axios

開發模式是：MVVM模式

該案例的目的是教大家從零搭建與編寫一個完整的並且可以交互的項目！希望大家喜歡！

 

第一步：搭建前端服務器與環境

①安裝node.js，下載相應版本的node.js,下載地址：https://nodejs.org/en/download/，下載完雙擊安裝，點擊下一步直到安裝完成
②安裝完成后，附件里選擇命令提示符（或者在開始的搜索框里輸入cmd回車調出命令面板）輸入：node -v回車，出現相應版本證明安裝成功，
　node環境已經安裝完成，由於有些npm有些資源被屏蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所有我還需要npm的
　國內鏡像---cnpm。在命令行中輸入：npm install -g cnpm –registry=https://registry.npm.taobao.org回車，大約需要3分鍾，
　如果報錯或沒反應，則卸掉node.js重新安裝
③安裝全局vue-cli腳手架，用於幫助搭建所需的模板框架。輸入命令：cnpm install -g vue-cli回車等待完成。
④創建項目，首先我們要選定目錄，然后再命令行中把目錄轉到選定的目錄，假如我們打算把項目新建在e盤下的vue文件夾中則輸入下面的命令：
　e:回車，然后cd vue，然后輸入命令：vue init webpack 項目文件夾名稱，回車，運行初始化命令的時候會讓用戶輸入幾個基本的選項，
　如項目名稱，描述，作者等信息，如果不想填直接回車默認就好。(一頓回車+N鍵就完成了)
⑤安裝項目所需的依賴包，首先輸入：cd 項目名回車，然后輸入：cnpm install回車等待安裝，安裝完成之后，會在我們的項目目錄firstVue
　文件夾中多出一個node_modules文件夾，這里邊就是我們項目需要的依賴包資源。安裝完依賴包之后，就可以運行整個項目了。
⑥測試環境是否搭建成功，在cmd里輸入：cnpm run dev回車，項目運行成功后，瀏覽器會自動打開localhost:8080（如果瀏覽器沒有自動打開
　，可以手動輸入）。運行成功后，會看到Welcome to Your Vue.js App頁面。

 

 

第二步：使用WebStorm打開easy-table-vue

結構圖如下：

1、引入IVIEW組件和easy-table-vue組件，在當前項目的cmd窗口輸入

cnpm install iview --save-dev

cnpm install vue-easytable --save-dev

2、打開main.js文件，使用這些組件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入IVIEW組件
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
//引入vue-easytable
import 'vue-easytable/libs/themes-base/index.css'
import {VTable,VPagination} from 'vue-easytable'
Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

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>
      <Footer class="layout-footer-center"> &copy; 作者：不若為止</Footer>
    </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
    }
  ]
})

此時頁面展示如下：

現在界面的數據都是定死的，還不能做到與后台交互。

 

第三步：執行下面的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));

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

 

第四步：使用IDeal創建一個SpringBoot項目

此處教大家一個快速創建SpringBoot項目的辦法，這樣可以省去編寫pom.xml的步驟，記得連上網絡

1、點擊New Project，選擇Spring Initializr，點擊

2、輸入包名和項目名，點擊next

3、這里的操作就是在pom.xml配置你所需要的環境，配置好之后，點擊next，然后Finnish就創建好了一個項目啦

使用Eclipse或者MyEclipse的小伙伴，可以創建一個Maven項目，把我的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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.wzhi</groupId>
    <artifactId>tableserver</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>tableserver</name>
    <description>實現數據表格的前后台交互</description>

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

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.1</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

 

第五步：編寫后台交互的業務代碼

完整的項目結構圖如下：

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.cj.jdbc.Driver
        password: 123456
        url: jdbc:mysql://XXX.XXX.XXX.XXX:3306/test?characterEncoding=utf8&useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
        username: root

2、修改TableserverApplication.java，代碼如下：

/**
 * @author 不若為止
 * @version 1.0
 * @class PersonService
 * @package com.wzhi.tableserver
 * @desc
 *           @MapperScan 的作用是掃描到文件夾下的@Mapper注解
 *           @Slf4j 是日志打印注解
 *           @SpringBootApplication SpringBoot的啟動注解
 * @copyright weizhi
 * @date 2018/09/04
 */
@SpringBootApplication
@MapperScan(basePackages = "com.wzhi.tableserver.dao")
@Slf4j
public class TableserverApplication {
    public static void main(String[] args) {
        ConfigurableApplicationContext context =SpringApplication.run(TableserverApplication.class, args);
        log.info("該服務的名稱是：{}",context.getEnvironment().getProperty("spring.application.name"));
        log.info("該服務的啟動端口是：{}",context.getEnvironment().getProperty("server.port"));
    }
}

3、在config目錄下新建CorsConfig.java，解決axios的跨域問題，代碼如下：

package com.wzhi.tableserver.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
 * @author 不若為止
 * @version 1.0
 * @class CorsConfig
 * @package com.wzhi.tableserver.config
 * @desc 因為Vue使用的是axios進行后台交互，所以需要配置一個過濾
 * @copyright weizhi
 * @date 2018/09/04
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig(){
        CorsConfiguration corsConfiguration =new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter(){
        //System.out.println("進入跨域處理");
        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",buildConfig());
        return new CorsFilter(source);
    }
}

4、新建Person.java實體類，代碼如下：

package com.wzhi.tableserver.pojo;

import lombok.Data;
import lombok.experimental.Accessors;

/**
 * @author 不若為止
 * @version 1.0
 * @class Person
 * @package com.wzhi.tableserver.pojo
 * @desc 個人信息實體類
 * @copyright weizhi
 * @date 2018/09/04
 */
@Data
@Accessors(chain = true)
public class Person {
    private Integer id;
    private String userName;
    private String zone;
    private String email;
    private String sex;
    private String phone;
    private String createTime;
}

5、新建PersonMapper.java文件，代碼如下：

package com.wzhi.tableserver.dao;

import com.wzhi.tableserver.pojo.Person;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

/**
 * @author 不若為止
 * @version 1.0
 * @class PersonMapper
 * @package com.wzhi.tableserver.dao
 * @desc 個人信息Mapper，此處的Mapper注解會被啟動類的@MapperScan掃描到
 * @copyright weizhi
 * @date 2018/09/04
 */
@Mapper
public interface PersonMapper {
    /**
     * @desc 查詢所有的用戶
     * @return
     */
    List<Person> findAll();
}

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

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<!-- 全局參數 -->
<configuration>
    <settings>
        <!-- 使全局的映射器啟用或禁用緩存。 -->
        <setting name="cacheEnabled" value="true" />
        <!-- 全局啟用或禁用延遲加載。當禁用時，所有關聯對象都會即時加載。 -->
        <setting name="lazyLoadingEnabled" value="true" />
        <!-- 當啟用時，有延遲加載屬性的對象在被調用時將會完全加載任意屬性。否則，每種屬性將會按需要加載。 -->
        <setting name="aggressiveLazyLoading" value="true" />
        <!-- 是否允許單條sql 返回多個數據集 (取決於驅動的兼容性) default:true -->
        <setting name="multipleResultSetsEnabled" value="true" />
        <!-- 是否可以使用列的別名 (取決於驅動的兼容性) default:true -->
        <setting name="useColumnLabel" value="true" />
        <!-- 允許JDBC 生成主鍵。需要驅動器支持。如果設為了true，這個設置將強制使用被生成的主鍵，有一些驅動器不兼容不過仍然可以執行。 default:false -->
        <setting name="useGeneratedKeys" value="true" />
        <!-- 指定 MyBatis 如何自動映射 數據基表的列 NONE：不隱射 PARTIAL:部分 FULL:全部 -->
        <setting name="autoMappingBehavior" value="PARTIAL" />
        <!-- 這是默認的執行類型 （SIMPLE: 簡單； REUSE: 執行器可能重復使用prepared statements語句；BATCH: 
            執行器可以重復執行語句和批量更新） -->
        <setting name="defaultExecutorType" value="SIMPLE" />
        <!-- 使用駝峰命名法轉換字段。 -->
        <setting name="mapUnderscoreToCamelCase" value="true" />
        <!-- 設置本地緩存范圍 session:就會有數據的共享 statement:語句范圍 (這樣就不會有數據的共享 ) defalut:session -->
        <setting name="localCacheScope" value="SESSION" />
        <!-- 設置但JDBC類型為空時,某些驅動程序 要指定值,default:OTHER，插入空值時不需要指定類型 -->
        <setting name="jdbcTypeForNull" value="NULL" />
    </settings>
</configuration>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org/DTD Mapper 3.0" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wzhi.tableserver.dao.PersonMapper">
    <resultMap type="com.wzhi.tableserver.pojo.Person" id="person">
        <result column="id" jdbcType="INTEGER" property="id"/>
        <result column="create_datetime" jdbcType="VARCHAR" property="createTime"/>
        <result column="email" jdbcType="VARCHAR" property="email"/>
        <result column="phone" jdbcType="VARCHAR" property="phone"/>
        <result column="sex" jdbcType="VARCHAR" property="sex"/>
        <result column="username" jdbcType="INTEGER" property="username"/>
        <result column="zone" jdbcType="VARCHAR" property="zone"/>
    </resultMap>
    <sql id="personColnum">
       id,create_datetime,email,phone,sex,username,zone
    </sql>
    <select id="findAll" resultMap="person">
        SELECT <include refid="personColnum"/>
        FROM persons
    </select>
</mapper>

7、新建PersonService.java和PersonServiceImpl.java

package com.wzhi.tableserver.service;

import com.wzhi.tableserver.pojo.Person;
import java.util.List;
/**
 * @author 不若為止
 * @version 1.0
 * @class PersonService
 * @package com.wzhi.tableserver.service
 * @desc 個人信息Service
 * @copyright weizhi
 * @date 2018/09/04
 */
public interface PersonService {
    /**
     * @desc 查詢所有的用戶
     * @return
     */
    List<Person> findAll();
}

package com.wzhi.tableserver.service.impl;

import com.wzhi.tableserver.dao.PersonMapper;
import com.wzhi.tableserver.pojo.Person;
import com.wzhi.tableserver.service.PersonService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
@Slf4j
@Service
public class PersonServiceImpl implements PersonService {
    @Autowired
    private PersonMapper mapper;
    @Override
    public List<Person> findAll() {
        return mapper.findAll();
    }
}

8、新建PersonController.java，代碼如下：

package com.wzhi.tableserver.controller;

import com.wzhi.tableserver.pojo.Person;
import com.wzhi.tableserver.service.PersonService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @author 不若為止
 * @version 1.0
 * @class PersonController
 * @package com.wzhi.tableserver.controller
 * @desc 個人信息交互
 * @copyright weizhi
 * @date 2018/09/04
 */
@RestController
@Slf4j
public class PersonController {
    @Autowired
    private PersonService service;

    @GetMapping(value = "findAll")
    public List<Person> findAll(){
        log.info("查詢所有的角色信息");
        return service.findAll();
    }
}

 

第六步：實現前后台的數據交互

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

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入IVIEW組件
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
//引入vue-easytable
import 'vue-easytable/libs/themes-base/index.css'
import {VTable,VPagination} from 'vue-easytable'
Vue.component(VTable.name, VTable)
Vue.component(VPagination.name, VPagination)
//引入axios
import axios from 'axios' Vue.prototype.$ajax = axios Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2、修改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>
      <Footer class="layout-footer-center"> &copy; 作者：不若為止</Footer>
    </Layout>
  </div>
</template>

<script>
  export default {
    name: "table-main",
    data() {
      return {
        tableData: [],
        columns: [
          {field: 'userName', title: '姓名', width: 80, titleAlign: 'center', columnAlign: 'center', isResize: true},
          {field: 'phone', title: '手機號碼', width: 150, titleAlign: 'center', columnAlign: 'center', isResize: true},
          {field: 'sex', title: '性別', width: 150, titleAlign: 'center', columnAlign: 'center', isResize: true},
          {field: 'email', title: '電子郵箱', width: 280, titleAlign: 'center', columnAlign: 'left', isResize: true},
          {field: 'createTime', title: 'createTime', width: 150, titleAlign: 'center', columnAlign: 'center', isResize: true},
          {field: 'zone', title: 'zone', width: 150, titleAlign: 'center', columnAlign: 'center', isResize: true},
        ]
      }
    },
  created() { //在created函數中使用axios的get請求向后台獲取用戶信息數據
      this.$ajax('http://localhost:8888/findAll').then(res => { this.tableData = res.data }).catch(function (error) { console.log(error); }); }

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

3、啟動TableServerApplication，刷新界面，從后台查詢到數據如下：

編輯過程中會遇的問題

1、使用WebStorm打開Vue項目沒有這樣的圖表

解決辦法：點擊File->Settings->Plugins，搜索Vue，下載點擊Apply重啟即可

2、有很多人會遇到CORS跨域請求的問題，一種解決辦法是在后台編寫配置類MyCorsConfig.java

@Configuration
public class MyCorsConfig {    
    @Bean
    public WebMvcConfigurer corsConfigurer(){
     return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                // 限制了路徑和域名的訪問
                /*registry.addMapping("/api*").allowedOrigins("http://localhost:8081");*/
              registry.addMapping("/**")
                .allowedOrigins(ALL)
                .allowedMethods(ALL)
                .allowedHeaders(ALL)
                .allowCredentials(true);
            }
        };
    }        
}

也可以在某個接口加上@CrossOrigin(origins = “http://ip:port”)注解