含义

前后端分离开发顾名思义,就是将前端后端分离可以同时进行开发.前端就只管前端的事,后端就只管后端的事,比起传统的Web开发这种开发方式大大的提高了整体的工作效率,也避免了传统Web开发的各种耦合

后端

根据需求，分析数据库、建库、建表

image

建立web模块 webapp类型的maven项目

image

建立模块手动创建src、resources、test-java目录

image image

右击项目,选择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相关依赖

<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实体类
在实体类中,一个类对应一张表,这里我们通过注释引用数据库中表

@Table(name="表名")

dao接口，增加自定义的复杂关联查询（注解）

//自定义的多表关联查询
@Results({@Result(column = "数据表中列名",property = "对应实体类中的属性名")})
//其中sql语句必须要在数据中跑通
@Select("sql语句 ")

service接口，注入dao，调用相应方法
用Junti对service做单元测试
选择junit4

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

controller，使用RESTful风格请求，完成控制层

<?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对对controller进行测试，杜绝一切404和500
或者启动tomcat服务器,然后在网站栏中输入tomcat中的网址,后前还得加Controlller中@RequestMapping中的值

前端

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

created: function() {
//记录当前的vue对象
var _this = this;
//通过axios发起异步请求
axios.get('连接接口的网址')
//回调函数
.then(function(response) {
console.log(response.data);
_this.courses = response.data;
})
}

将调用到的数据放入一组数据中如上courses[],之后就能在前端使用courses[]中的数据