超詳細的SpringBoot+Mybatis+Vue整合筆記
這是個人第一篇博客。請多多指教！css
開發工具前端
前端：WebStorm、後臺：Eclipsevue
Vue環境搭建java
vue是一個JavaMVVM庫，是一套用於構建用戶界面的漸進式框架，是初創項目的首選前端框架。它是以數據驅動和組件化的思想構建的，採用自底向上增量開發的設計。node
安裝Vuemysql
一、安裝node.js，安裝完node.js以後，npm也會自動安裝jquery
下載連接：webpack
https://pan.baidu.com/s/1wUd9LfnoCk8ixxbjHADFXwios
提取碼：hvg3nginx
查詢是否安裝成功的命令：
node -v
npm -
二、全局安裝腳手架工具vue-cli，命令以下
npm install --global vue-cli
三、vue項目初始化命令以下，若沒有安裝webpack，則先安裝webpack
npm install -g webpack
vue init webpack myVue
初始化完成後的vue項目目錄以下：
四、進入到myVue目錄下，使用npm install 安裝package.json包中的依賴
命令以下：
cd myVue
npm install
五、運行項目：
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項目
一、引入IVIEW組件和easy-table-vue組件，在當前項目的cmd窗口輸入
npm install iview --save-dev
npm install vue-easytable --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 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 })
三、在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>
四、修改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>
編寫後臺交互的業務代碼
一、修改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
二、新建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 }
三、新建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 }
四、新建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>
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>
五、新建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 }
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 }
六、新建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 }
實現先後臺的數據交互
一、在前端項目中引入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 })
二、修改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"> © 做者：晨鐘又暮鼓</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>
注：這裏有個須要注意的地方，接口服務和前端vue程序部署在不一樣的端口上，直接調用會報跨域錯誤
須要使用nginx作一個反向代理
三、啓動DemoApplication，刷新界面，從後臺查詢到數據以下：
相關文章
- 1. 超詳細 idea 整合 maven
- 2. rabbitmq，從入門基礎到整合springboot，超詳細筆記
- 3. SSM（spring,springmvc,mybatis）的整合（超詳細）
- 4. 超詳細的maven搭建+eclipse整合
- 5. JSP超詳細筆記2
- 6. springboot超詳細筆記
- 7. springboot整合mybatis超詳細教程
- 8. Spring、SpringMVC、Hibernate整合 ----超詳細教程
- 9. 15Solr整合tomcat（超詳細版本）
- 10. SpringCloud+MyBatis+Redis整合—— 超詳細實例
- 更多相關文章...
- • Spring整合Redis詳細步驟 - Redis教程
- • SSH框架（Struts2+Spring+Hibernate）搭建整合詳細步驟 - Spring教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章