准备工作：
确保Idea和Hbulider正常工作之外，还要安装好数据库软件，比如MySQL，后台测试接口软件Postman(提前注册好)
前后端分离开发的意义：
知乎：Web 前后端分离的意义大吗？
《浅谈架构之路：前后端分离模式》
一、后台部分
大致顺序总览
1.根据需求，分析数据库，建库，建表，准备数据
2.建立web模块，webapp类型的maven项目
3.手动创建src(蓝色)，resources，test(绿色)—java目录
4.建立package，entity，dao，service，controller
5.添加pom依赖：web模块依赖，webmvc模块依赖，jackson相关依赖
6.创建entity实体类
7.dao接口，用注解的方式增加自定义的复杂关联语句
8.service接口，注入dao，调用相关方法
9.用Junit对service做单元测试
10.controller，使用RESTful风格请求，完成控制层
11.用postman对controller进行测试，杜绝一切404,500
-
建立数据库db_spring,分别建立表t_sys_user,t_course
t_sys_user
t_course - 表建完之后，自己添加几条数据
-
在idea中创建好web项目以及相应的包
结构如图 - 按照顺序一步步完成代码，代码已经上传到github的web项目中，地址如下：
github地址 -
配置tomacat服务器
1
2
3
4
5 -
设置完记得先aply，再点击ok
6
测试
配置成功 -
service单元测试通过之后，开始进行controller测试，使用postman
测试
到这里,后台工作大致也结束了
二、前端部分
- 将后台数据通过页面展示出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js-访问API接口数据-蓝墨云班课练习</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">
<!-- 通过CDN引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 通过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>进行中的班课</p>
<p>{{courses.length}}个进行中的班课</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>已结束的班课</p>
<p>{{courses1.length}}个已经结束的班课</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：对图片加上一层黑白色：-webkit-filter: grayscale(1)
效果演示：
演示
修改数据库
刷新页面
注意点：
1、文件命名要符合规范，存放位置一定要保证正确合理
2、数据库中主键属性为bignit，在idea中为Long(L要大写)
3、要按照步骤来编写后台代码，单元测试要保证通过，结果合理
4、一定要保证Tomcat服务器配置正确
5、postman测试要杜绝404等一切错误
6、在写完前端代码进行测试时，tomacat服务器不能关闭，不然数据跳转不过去
