springBoot+vue初始化前後端分離專案搭建（含資料庫）
阿新 • • 發佈：2020-09-01
所學材料資料庫資源
CREATE TABLE `book` ( `id` int(10) NOT NULL AUTO_INCREMENT, `name` varchar(20) DEFAULT NULL, `author` varchar(20) DEFAULT NULL, `publish` varchar(20) DEFAULT NULL, `pages` int(10) DEFAULT NULL, `price` float(10,2) DEFAULT NULL, `bookcaseid` int(10) DEFAULT NULL, `abled` int(10) DEFAULTNULL, PRIMARY KEY (`id`), KEY `FK_ieh6qsxp6q7oydadktc9oc8t2` (`bookcaseid`), CONSTRAINT `FK_ieh6qsxp6q7oydadktc9oc8t2` FOREIGN KEY (`bookcaseid`) REFERENCES `bookcase` (`id`) ) INSERT INTO `book` VALUES (1,'解憂雜貨店','東野圭吾','電子工業出版社',102,27.30,9,1),(2,'追風箏的人','卡勒德·胡賽尼','中信出版社',330,26.00,1,1),(3,'人間失格','太宰治','作家出版社',150,17.30,1,1),(4,'這就是二十四節氣','高春香','電子工業出版社',220,59.00,3,1),(5,'白夜行','東野圭吾','南海出版公司',300,27.30,4,1),(6,'擺渡人','克萊兒·麥克福爾','百花洲文藝出版社',225,22.80,1,1),(7,'暖暖心繪本','米攔弗特畢','湖南少兒出版社',168,131.60,5,1),(8,'天才在左瘋子在右','高銘','北京聯合出版公司',330,27.50,6,1),(9,'我們仨','楊絳','生活.讀書.新知三聯書店',89,17.20,7,1),(10,'活著','餘華','作家出版社',100,100.00,6,1),(11,'水滸傳','施耐庵','三聯出版社',300,50.00,1,1),(12,'三國演義','羅貫中','三聯出版社',300,50.00,2,1),(13,'紅樓夢','曹雪芹','三聯出版社',300,50.00,5,1),(14,'西遊記','吳承恩','三聯出版社',300,60.00,3,1);
vue前端配置
檢視需要安裝好nodejs和npm,然後輸入下面的cmd命令檢視是否安裝好
（我看到一篇部落格上說nodejs於vue相當於jvm於java，我不知道這個比喻是不是恰當）
版本出現，說明已經安裝好了，
還有一個vue-cli，vue腳手架 我之前已經安裝好了，下面的命名行
進入我們的工作目錄，使用腳手架安裝專案
出現命令，參考
完成後效果
執行專案 npm run dev
瀏覽器開啟：localhost:8080，即可看到vue專案
vue目錄
這個圖挺不錯的，講述vue入口，啟動的順序
資料展示頁面 可以與後端互動
在src下的components建立Book.vue
<template>
<div>
<table>
<tr>
<td>編號</td>
<td>圖書名稱</td>
<td>作者</td>
</tr>
</table>
{{msg}}
</div>
</template>
<script>
export default {
name: "book",
data(){
return{
msg:'Hello Vue'
}
}
}
</script>
<style scoped>
</style>
配置路由訪問book
瀏覽器輸入顯示
book.vue加強
<template>
<div>
<table>
<tr>
<td>編號</td>
<td>圖書名稱</td>
<td>作者</td>
</tr>
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.author}}</td>
</tr>
</table>
{{msg}}
</div>
</template>
<script>
export default {
name: "book",
data(){
return{
msg:'Hello Vue',
books:[
{
id: 1,
name:'Java零基礎實戰',
author:'寧楠'
},
{
id: 2,
name:'Vue零基礎實戰',
author:'張三'
},
{
id: 3,
name:'Spring Boot零基礎實戰',
author:'小明'
}
]
}
}
}
</script>
<style scoped>
</style>
建立後端springBoot應用
快速構建springBoot專案
勾選以上幾條，快速構建完成
配置application.yml
spring: datasource: url: jdbc:mysql://localhost:3306/library?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai username: root password: root driver-class-name: com.mysql.cj.jdbc.Driver jpa: show-sql: true properties: hibernate: format_sql: true server: port: 8181
然後建立實體類
上面應該大寫
package com.southwind.springboottest.entity; import lombok.Data; import javax.persistence.Entity; import javax.persistence.Id; /** * @author * @create-date 2020/9/1 0001 15:23 */ @Entity @Data public class Book { @Id private Integer id; private String name; private String author; }
建立BookReposipory 繼承 JpaReposipory
測試下JPA
package com.southwind.springboottest.repository; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import static org.junit.jupiter.api.Assertions.*; /** * @author * @create-date 2020/9/1 0001 15:33 */ @SpringBootTest //首先加一個這樣一個註解 class BookRepositoryTest { @Autowired private BookRepository bookRepository;//測試需要注入 @Test void findAll(){ System.out.println(bookRepository.findAll()); } }
測試結果
寫controller層外部可以呼叫內部的sql語句
package com.southwind.springboottest.controller; import com.southwind.springboottest.entity.Book; import com.southwind.springboottest.repository.BookRepository; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.List; /** * @author * @create-date 2020/9/1 0001 15:51 */ @RestController //全部基於rest @RequestMapping("/book") public class BookHandler { @Autowired private BookRepository bookRepository; @GetMapping("/findAll") public List<Book> findAll(){ return bookRepository.findAll(); } }
前後端對接
安裝axios
在命令列內輸入npm install axios -S進行安裝。
安裝完成後在main.js中使用axios，在main.js中加入以下程式碼
import axios from 'axios'Vue.prototype.$axios = axios
book.vue加上傳送後端請求
<template>
<div>
<table>
<tr>
<td>編號</td>
<td>圖書名稱</td>
<td>作者</td>
</tr>
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.author}}</td>
</tr>
</table>
{{msg}}
</div>
</template>
<script>
export default {
name: "book",
data(){
return{
msg:'Hello Vue',
books:[
{
id: 1,
name:'Java零基礎實戰',
author:'寧楠'
},
{
id: 2,
name:'Vue零基礎實戰',
author:'張三'
},
{
id: 3,
name:'Spring Boot零基礎實戰',
author:'小明'
}
]
}
},
created(){
this.$axios.get('http://localhost:8181/book/findAll').then(
function(resp){
console.log(resp);
}
)
}
}
</script>
<style scoped>
</style>
有跨域問題
後端配置CrosConfig
package com.southwind.springboottest.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; /** * @author * @create-date 2020/9/1 0001 16:27 */ @Configuration//自動配置 public class CrosConfig implements WebMvcConfigurer { //實現這個介面 //重新addCorsMappings方法 @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") //新增對映路徑，“/**”表示對所有的路徑實行全域性跨域訪問許可權的設定 .allowedOrigins("*") //開放哪些ip、埠、域名的訪問許可權 .allowedMethods( "GET", "POST", "PUT", "OPTIONS", "DELETE") //開放哪些Http方法，允許跨域訪問 .allowCredentials(true) //是否允許傳送Cookie資訊 .maxAge(3600) .allowedHeaders("*"); //允許HTTP請求中的攜帶哪些Header資訊 } }
介面顯示相關資料解決
然後response賦值過去
created(){ const _this = this; this.$axios.get('http://localhost:8181/book/findAll').then( function(resp){ _this.books = resp.data; } ) }
整體結果 呼叫資料庫