前后端分離已成為互聯(lián)網(wǎng)項(xiàng)目開發(fā)的業(yè)界標(biāo)準(zhǔn)使用方式暑中，在項(xiàng)目中灶体，我們會使用 Spring MVC 為前端頁面提供接口钦讳，來實(shí)現(xiàn)項(xiàng)目的前后端分離矿瘦。Spring MVC 是一個模型 - 視圖 - 控制器（MVC）的 Web 框架，Spring MVC 是 Spring 產(chǎn)品組合的一部分愿卒，它享有 Spring IoC 容器緊密結(jié)合 Spring 松耦合等特點(diǎn)缚去。那我們?nèi)绾问褂?Spring MVC 開發(fā)一個前后分離的項(xiàng)目呢？
后端
根據(jù)需求琼开，設(shè)計(jì)數(shù)據(jù)庫易结，建庫、建表柜候，準(zhǔn)備數(shù)據(jù)
主鍵使用 bigint搞动，實(shí)體類中的屬性使用包裝類，例如：Long
建立 Web 模塊渣刷，選擇 WebAPP 類型的 maven 項(xiàng)目
手動創(chuàng)建 src鹦肿、resources、test/java 目錄
建立相應(yīng)的package （entity辅柴、dao箩溃、service、controller）
pom 依賴：web 模塊依賴碌嘀、webMVC 依賴涣旨、jackson 相關(guān)依賴
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<spring.version>5.1.5.RELEASE</spring.version>
<aspectj.version>1.9.2</aspectj.version>
<junit.version>4.12</junit.version>
<log4j.version>1.2.17</log4j.version>
<slf4j.version>1.7.12</slf4j.version>
<mysql.version>5.1.47</mysql.version>
<mybatis.version>3.5.0</mybatis.version>
<mybatis-spring.version>2.0.0</mybatis-spring.version>
<tk-mybatis.version>4.1.5</tk-mybatis.version>
<druid.version>1.1.14</druid.version>
<lombok.version>1.18.6</lombok.version>
<jackson.version>2.9.8</jackson.version>
<jackson-mapper.version>1.9.13</jackson-mapper.version>
</properties>
entity 實(shí)體類
在實(shí)體類中,一個類對應(yīng)一張表,這里我們通過注釋引用數(shù)據(jù)庫中表
@Table(name = "t_course")
@Data
public class Course {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long courseId;
private String courseName;
private Long userId;
private String courseClass;
private String cover;
private String courseCode;
private Short finished;
}
dao 接口，增加自定義的復(fù)雜關(guān)聯(lián)查詢（注解）
public interface CourseDAO extends BaseDAO<Course> {
//自定義的多表關(guān)聯(lián)查詢
@Results({
@Result(column = "course_id", property = "courseId"),
@Result(column = "course_name", property = "courseName"),
@Result(column = "user_id", property = "userId"),
@Result(column = "course_class", property = "courseClass"),
@Result(column = "cover", property = "cover"),
@Result(column = "course_code", property = "courseCode"),
@Result(column = "finished", property = "finished"),
@Result(column = "username", property = "username"),
@Result(column = "avatar", property = "avatar")
})
//此處的sql語句一定要先在數(shù)據(jù)庫中調(diào)通
@Select("SELECT a.*,b.username,b.avatar FROM t_course a Left JOIN t_sys_user b ON a.user_id=b.user_id WHERE a.finished = 0")
List<CourseVO> selectCurrentCourses();
}
service 接口筏餐，注入dao开泽，調(diào)用相應(yīng)方法
public interface CourseService {
List<CourseVO> selectCurrentCourses();
}
@Service
@Transactional
public class CourseServiceImpl implements CourseService {
@Autowired
private CourseDAO courseDAO;
@Override
public List<CourseVO> selectCurrentCourses() {
return courseDAO.selectCurrentCourses();
}
}
對 service 做單元測試（JUnit）
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = {"/spring_mybatis.xml"})
public class CourseServiceImplTest {
@Autowired
private CourseService courseService;
@Test
public void selectCurrentCourses() {
List<CourseVO> courseVOList = courseService.selectCurrentCourses();
courseVOList.forEach(courseVO -> System.out.println(courseVO));
}
}
controller，使用 RESTful 風(fēng)格請求魁瞪，完成控制層
@RestController
public class CourseController {
@Autowired
private CourseService courseService;
@RequestMapping(value = "courses", method = RequestMethod.GET)
public List<CourseVO> selectCourses() {
List<CourseVO> courseVOList = courseService.selectCurrentCourses();
return courseVOList;
}
}
對 controller 進(jìn)行測試（postman）穆律，杜絕一切 404 和 500
前端
使用 vue.js 實(shí)現(xiàn)獲取接口
<!-- 通過CDN引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
created: function() {
//記錄當(dāng)前的vue對象
var _this = this;
//通過axios發(fā)起異步請求
axios.get('連接接口的網(wǎng)址')
//回調(diào)函數(shù)
.then(function(response) {
console.log(response.data);
_this.courses = response.data;
})
}
將調(diào)用到的數(shù)據(jù)放入一組數(shù)據(jù)中惠呼，如 courses[] ,之后就能在前端使用 courses[] 中的數(shù)據(jù)。
