準(zhǔn)備工作：
確保Idea和Hbulider正常工作之外岖研，還要安裝好數(shù)據(jù)庫(kù)軟件，比如MySQL挖垛，后臺(tái)測(cè)試接口軟件Postman(提前注冊(cè)好)
前后端分離開(kāi)發(fā)的意義：
知乎：Web 前后端分離的意義大嗎伴嗡？
《淺談架構(gòu)之路：前后端分離模式》
一迅皇、后臺(tái)部分
大致順序總覽
1.根據(jù)需求，分析數(shù)據(jù)庫(kù)，建庫(kù)嫉你，建表月帝，準(zhǔn)備數(shù)據(jù)
2.建立web模塊，webapp類型的maven項(xiàng)目
3.手動(dòng)創(chuàng)建src(藍(lán)色)幽污，resources嚷辅，test(綠色)—java目錄
4.建立package，entity距误，dao簸搞，service，controller
5.添加pom依賴：web模塊依賴准潭，webmvc模塊依賴趁俊，jackson相關(guān)依賴
6.創(chuàng)建entity實(shí)體類
7.dao接口，用注解的方式增加自定義的復(fù)雜關(guān)聯(lián)語(yǔ)句
8.service接口刑然，注入dao寺擂，調(diào)用相關(guān)方法
9.用Junit對(duì)service做單元測(cè)試
10.controller，使用RESTful風(fēng)格請(qǐng)求泼掠，完成控制層
11.用postman對(duì)controller進(jìn)行測(cè)試怔软，杜絕一切404,500
-
建立數(shù)據(jù)庫(kù)db_spring,分別建立表t_sys_user,t_course
t_sys_user
t_course - 表建完之后，自己添加幾條數(shù)據(jù)
-
在idea中創(chuàng)建好web項(xiàng)目以及相應(yīng)的包
結(jié)構(gòu)如圖 - 按照順序一步步完成代碼择镇，代碼已經(jīng)上傳到github的web項(xiàng)目中挡逼，地址如下：
github地址 -
配置tomacat服務(wù)器
1
2
3
4
5 -
設(shè)置完記得先aply，再點(diǎn)擊ok
6
測(cè)試
配置成功 -
service單元測(cè)試通過(guò)之后腻豌，開(kāi)始進(jìn)行controller測(cè)試挚瘟，使用postman
測(cè)試
到這里,后臺(tái)工作大致也結(jié)束了
二、前端部分
- 將后臺(tái)數(shù)據(jù)通過(guò)頁(yè)面展示出來(lái)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js-訪問(wèn)API接口數(shù)據(jù)-藍(lán)墨云班課練習(xí)</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 通過(guò)CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 通過(guò)CDN引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style type="text/css">
body {
background-color: #eee;
}
.top {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
hr{
width: 80%;
color: #efefef;
}
.container {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding-left: 20px;
padding-top: 10px;
}
.card {
width: 190px;
display: flex;
flex-direction: column;
border: 1px solid #eee;
margin-right: 20px;
margin-bottom: 10px;
background-color: #fff;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
}
.card img {
width: 100%;
}
p {
font-size: 12px;
margin-bottom: 5px;
}
.teacher {
display: flex;
justify-content: space-between;
}
.left {
display: flex;
}
.avatar img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 5px;
}
.code {
color: #00BBDD;
margin-top: 5px;
}
.bottom {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.container1 {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding-left: 20px;
padding-top: 10px;
}
.card1 {
width: 190px;
display: flex;
flex-direction: column;
border: 1px solid #eee;
margin-right: 20px;
margin-bottom: 10px;
background-color: #fff;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
-webkit-filter: grayscale(1);
}
</style>
</head>
<body>
<div id="app">
<div class="top">
<p>進(jìn)行中的班課</p>
<p>{{courses.length}}個(gè)進(jìn)行中的班課</p>
</div>
<hr>
<div class="container">
<div class="card" v-for="(course, index) in courses" :key="index">
<div class="cover">
<img :src="'img/'+course.cover">
</div>
<div class="course-class">
<p>{{course.courseClass}}</p>
</div>
<div class="course-name">
<p>{{course.courseName}}</p>
</div>
<div class="teacher">
<div class="left">
<div class="avatar">
<img :src="'img/'+course.avatar">
</div>
<div class="username">
<p class="code">{{course.username}}</p>
</div>
</div>
<div class="course-code">
<p class="code" v-if="loginUserId === course.userId">{{course.courseCode}}</p>
</div>
</div>
</div>
</div>
<div class="bottom">
<p>已結(jié)束的班課</p>
<p>{{courses1.length}}個(gè)已經(jīng)結(jié)束的班課</p>
</div>
<hr>
<div class="container1">
<div class="card1" v-for="(course, index) in courses1" :key="index">
<div class="cover">
<img :src="'img/'+course.cover">
</div>
<div class="course-class">
<p>{{course.courseClass}}</p>
</div>
<div class="course-name">
<p>{{course.courseName}}</p>
</div>
<div class="teacher">
<div class="left">
<div class="avatar">
<img :src="'img/'+course.avatar">
</div>
<div class="username">
<p class="code">{{course.username}}</p>
</div>
</div>
<div class="course-code">
<p class="code" v-if="loginUserId === course.userId">{{course.courseCode}}</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
loginUserId: 2,
courses: [],
courses1: []
},
created: function() {
var _this = this;
axios.get('http://127.0.0.1:8080/web/courses')
.then(function(response) {
console.log(response.data);
_this.courses = response.data;
}),
axios.get('http://127.0.0.1:8080/web/fin-courses')
.then(function(response) {
console.log(response.data);
_this.courses1 = response.data;
})
}
})
</script>
</body>
</html>
tips：對(duì)圖片加上一層黑白色：-webkit-filter: grayscale(1)
效果演示：
注意點(diǎn)：
1饲梭、文件命名要符合規(guī)范乘盖，存放位置一定要保證正確合理
2、數(shù)據(jù)庫(kù)中主鍵屬性為bignit憔涉，在idea中為L(zhǎng)ong(L要大寫)
3订框、要按照步驟來(lái)編寫后臺(tái)代碼，單元測(cè)試要保證通過(guò)兜叨，結(jié)果合理
4穿扳、一定要保證Tomcat服務(wù)器配置正確
5、postman測(cè)試要杜絕404等一切錯(cuò)誤
6国旷、在寫完前端代碼進(jìn)行測(cè)試時(shí)矛物，tomacat服務(wù)器不能關(guān)閉，不然數(shù)據(jù)跳轉(zhuǎn)不過(guò)去
