前后端分離開(kāi)發(fā)顧名思義,就是將前端后端分離可以同時(shí)進(jìn)行開(kāi)發(fā).前端就只管前端的事,后端就只管后端的事,比起傳統(tǒng)的Web開(kāi)發(fā)這種開(kāi)發(fā)方式大大的提高了整體的工作效率,也避免了傳統(tǒng)Web開(kāi)發(fā)的各種耦合
后端
-
根據(jù)需求造成，分析數(shù)據(jù)庫(kù)监徘、建庫(kù)旗芬、建表
數(shù)據(jù)庫(kù) -
建立web模塊 webapp類型的maven項(xiàng)目
建立模塊 -
手動(dòng)創(chuàng)建src、resources、test-java目錄
新建目錄
賦予root
右擊項(xiàng)目,選擇Mark Directory as.其中src添加Sources Root,resources添加Resources Root,test-java添加Test Sources Root
-
建立package：entity柬唯、dao揭北、service、controller芥喇、util
建包 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)一張表,這里我們通過(guò)注釋引用數(shù)據(jù)庫(kù)中表
@Table(name="表名")
- dao接口继控，增加自定義的復(fù)雜關(guān)聯(lián)查詢（注解）
//自定義的多表關(guān)聯(lián)查詢
@Results({@Result(column = "數(shù)據(jù)表中列名",property = "對(duì)應(yīng)實(shí)體類中的屬性名")})
//其中sql語(yǔ)句必須要在數(shù)據(jù)中跑通
@Select("sql語(yǔ)句 ")
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">
<!--啟動(dòng)mvc注解-->
<mvc:annotation-driven/>
<!--掃描含有注解的包 （控制器所在包）-->
<context:component-scan base-package="com.spring.web.controller"/>
<!--保證靜態(tài)資源不被攔截-->
<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中的值
前端
<!-- 通過(guò)CDN引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
created: function() {
//記錄當(dāng)前的vue對(duì)象
var _this = this;
//通過(guò)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ù)
