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

后端

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

  
  数据库

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

  
  建立模块

• 手动创建src、resources、test-java目录

  
  新建目录

赋予root

右击项目,选择Mark Directory as.其中src添加Sources Root,resources添加Resources Root,test-java添加Test Sources Root

• 建立package：entity、dao、service、controller、util

  
  建包

• 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注解-->
    <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中的值

前端

<!-- 通过CDN引入axios -->
        <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[]中的数据