https://www.bilibili.com/video/av85793766?p=1
Vue工程
創建
vue ui創建工程，導入Idea
(js版本太低可能有語法報錯，配置中改爲6即可)
啓動：npm run serve
停止：ctrl+C
引入頁面&配置路徑
router/index.js中引入.vue
App.vue中配置router
Book.vue
template就是html，script就是js，style就是css
template中只允許有一個根節點
前端可以先用假數據，寫在script裏面
<template>
<div id="showcase">
<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:'2019999999999999',
books:[
{
id: 20200001,
name: '病毒星球',
author: '卡爾·齊默'
},
{
id:20200002,
name: '洛基啓示錄',
author: '喬安妮·M·哈里斯'
},
{
id:20200003,
name: '增強人類',
author: '海倫·帕帕揚尼斯'
}
]
}
}
}
</script>
<style scoped>
</style>
vue可以動態加載，改完代碼不需要重啓，直接訪問即可
試了下可以正常訪問～
Spring工程
創建
Idea中Spring Initializr默認模版創建
依賴勾上：Lombok、Spring Web、Spring Data JPA、MySQL Driver
配置文件
這裏沒有用application.properties，刪掉
新建application.yml，存放連接數據庫的信息
數據庫建表
用提供的book.sql建book表
Book
和book表對應，加@Entity後，根據類名和表名對應綁定
再加一個@Data，是lombok的註解，自動生成get/set
屬性名和變量名對應，自動綁定
id要加一個@Id，它是主鍵
@Entity
@Data
public class Book {
@Id
private Integer id;
private String name;
private String author;
}
BookRepository
繼承JpaRepository，<>中第一個是實體類，第二個是主鍵類型
接口中findAll等方法都有，直接用就行
public interface BookRepository extends JpaRepository<Book,Integer> {
}
測試BookRepository
然後測試一下
建立的Spring工程自帶一個測試類BookstoreServerApplicationTests
或者自己創建，在接口名上右鍵->Go To->Test->Create New Test
給生成的測試類加一個@SpringBootTest，要測試的類@Autowired自動注入，寫的方法加一個@Test，就可以運行了
@SpringBootTest
class BookRepositoryTest {
@Autowired
private BookRepository bookRepository;
@Test
void findAll(){
System.out.println(bookRepository.findAll());
}
}
試一下
成功
且打印了sql語句，因爲yml裏面配了jpa: show-sql: true和格式化
每寫一個repository先測一下，保證沒問題再繼續寫controller
BookHandler
配上對應的註解和mapping
@RestController
@RequestMapping("/book")
public class BookHandler {
@Autowired
private BookRepository bookRepository;
@GetMapping("/findAll")
public List<Book> findAll(){
return bookRepository.findAll();
}
}
測試
運行BookstoreServerApplication啓動類
注意此時端口是8181
沒有問題，後端就搞定了
接下來前後端對接就行
對接
vue中ajax請求用axios組件
（先在命令行把服務停掉，安裝，vue add axios）
裝好之後自動有了src/plugins/axios.js
刷新頁面時讀取數據，可以寫到初始化函數中，比如這樣：
<script>
export default {
created() {
alert(123)
axios.get('http://localhost:8181/book/findAll/').then(function (resp){
console.log(resp)
})
}
}
</script>
刷新，看瀏覽器的控制檯
有個跨域問題（8181訪問8080），前端後端都可以解決
這裏在SpringBoot中解決
只需添加一個配置類，重寫addCorsMappings方法即可（不用記，固定的，要用的時候複製就行）
@Configuration
public class CrosConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
}
重啓，再訪問就好了
然後再回調函數中把data拿到就行
注意：不能直接用this，回調函數中this指的是回調，而不是外面，要先在外面拿到this
<template>
<div id="showcase">
<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>
</div>
</template>
<script>
export default {
name: "Book",
data(){
return{
books:[]
}
},
created() {
const _this = this
axios.get('http://localhost:8181/book/findAll').then(function (resp){
_this.books = resp.data
})
}
}
</script>
<style scoped>
</style>
這樣前後端就連上了
總結
- 寫前端，用加數據測試
- 寫後端，保證接口能訪問
- 調後端（後端解決跨域問題）