美文网首页
前后端分离开发

前后端分离开发

作者: 长生藤 | 来源:发表于2019-03-16 17:27 被阅读0次

前后端分离开发顾名思义,就是将前端后端分离可以同时进行开发.前端就只管前端的事,后端就只管后端的事,比起传统的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[]中的数据

相关文章

  • 前端如何高效的与后端协作开发

    前端如何高效的与后端协作开发 1. 前后端分离 前端与后端的分离,能使前端的开发脱离后端的开发模式,拥有更大的自由...

  • Vue基础

    相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...

  • 《十次方》01、需求分析

    需求分析 首先,该项目工程采用的是前后端分离的开发形式。为什么要采用前后端分离的开发形式呢? 前后端分离的优点和必...

  • 前后端分离的优缺点和restful api

    前后端分离优缺点 为什么要前后端分离 pc、app、pad多端适应 SPA开发模式开始流行 前后端开发职责不清 开...

  • WEB开发中前后端分离的好处与区别

    什么是前后端分离 程序开发的时候,前后端开发以数据为交互导向的开发方式,同时也是一种架构方式。 前后端分离的好处 ...

  • 前后端分离开发

    含义 前后端分离开发顾名思义,就是将前端后端分离可以同时进行开发.前端就只管前端的事,后端就只管后端的事,比起传统...

  • 小程序开发心得

    通过三周的时间,经历了一次完整的前后端分离的开发过程,下面说说我对小程序新的理解和一些前后端分离的看法。 开发前准...

  • ibase2.0规范文档-01:OpenAPI在eclipse的

    前后端分离的契约(http接口文档) 在做前后端分离开发时,后端开发的服务需要有帮助说明。目前我们选用的是apid...

  • 深入解析Vue CLI 3.0脚手架如何mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的...

  • 详解Vue CLI 3.0脚手架如何mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的...

网友评论

      本文标题:前后端分离开发

      本文链接:https://www.haomeiwen.com/subject/cedsmqtx.html