含義

前后端分離開發(fā)顧名思義,就是將前端后端分離可以同時(shí)進(jìn)行開發(fā).前端就只管前端的事,后端就只管后端的事,比起傳統(tǒng)的Web開發(fā)這種開發(fā)方式大大的提高了整體的工作效率,也避免了傳統(tǒng)Web開發(fā)的各種耦合

后端

根據(jù)需求戳气，分析數(shù)據(jù)庫、建庫牺荠、建表

image

建立web模塊 webapp類型的maven項(xiàng)目

image

建立模塊手動(dòng)創(chuàng)建src、resources空厌、test-java目錄

image

image

右擊項(xiàng)目,選擇Mark Directory as.其中src添加Sources Root,resources添加Resources Root,test-java添加Test Sources Root

建立package：entity痒玩、dao、service挨稿、controller旭绒、util

image

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>

此處為依賴的版本號(hào)

entity實(shí)體類
在實(shí)體類中,一個(gè)類對(duì)應(yīng)一張表,這里我們通過注釋引用數(shù)據(jù)庫中表

@Table(name="表名")

dao接口挥吵，增加自定義的復(fù)雜關(guān)聯(lián)查詢（注解）

//自定義的多表關(guān)聯(lián)查詢
@Results({@Result(column = "數(shù)據(jù)表中列名",property = "對(duì)應(yīng)實(shí)體類中的屬性名")})
//其中sql語句必須要在數(shù)據(jù)中跑通
@Select("sql語句 ")

service接口重父，注入dao，調(diào)用相應(yīng)方法
用Junti對(duì)service做單元測(cè)試
選擇junit4

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations = {"/配置名"})

controller蔫劣，使用RESTful風(fēng)格請(qǐng)求坪郭，完成控制層

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">

<mvc:annotation-driven/>

<context:component-scan base-package="com.spring.web.controller"/>

<mvc:default-servlet-handler/>
</beans>

用postman對(duì)對(duì)controller進(jìn)行測(cè)試，杜絕一切404和500
或者啟動(dòng)tomcat服務(wù)器,然后在網(wǎng)站欄中輸入tomcat中的網(wǎng)址,后前還得加Controlller中@RequestMapping中的值

前端

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

created: function() {
//記錄當(dāng)前的vue對(duì)象
var _this = this;
//通過axios發(fā)起異步請(qǐng)求
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ù)