前后端完全分离初探

栏目: Java · 发布时间: 3年前

来源: www.arccode.net

内容简介:前后端完全分离初探

本文转载自:http://www.arccode.net/2015/04/08/the-complete-separation-of-front-and-backend.html?utm_source=tuicool&utm_medium=referral,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

核心思路

后端负责业务逻辑处理, 前端负责展示逻辑的处理.

背景

  • 2013年3月,首次接触了 underscore.js 这个区区45k大小的js库, 在使用其提供的简单模板完成表格异步分页后,从此我开始慢慢践行前后端完全分离的架构.

  • 2013年7月,我接触到了REST这种重用HTTP应用协议的架构, 更坚定了我践行前后端分离的决心.

  • 2014年3月,国内刮起了nodeJS的风暴, 此时我采用国外的一个开源项目 MEAN 开发了一套完整的CMS系统, 此次开发学习到了API接口如何标准化, API具体的设计参考了 github API , Instagram API .

  • 2015年1月, 公司开发新产品, 需要新开发一套支持平台及数据下发平台, 在该产品中我主要参与API的设计, 并主导开发支撑平台, 下面我就介绍下这套支撑平台.

工具

工欲善其事, 必先利其器, 先介绍下自己使用的工具

IntelliJ IDEA

强大的 Java 集成开发工具, 没有之一.

Webstorm

强大的HTML,CSS,Javascript集成开发工具, 没有之一.

Sublime

强大的文本编辑工具, 目前我主要用于临时文件查看, 临时 json 数据格式化查看, 集成了plugin后, 它的功能会吓到人.

Navicat

小巧强大的关系 数据库 建模工具, 相当易用.

Cornerstone

强大的版本控制客户端.

Mou

一款简洁强大的MarkDown可视化编辑工具.

Zoc6

一款强大的Linux SSH客户端工具.

Transmit

一款强大的Linux SFTP客户端可视化工具.

代理

云梯

强大的VPN, 连接稳定, 速度快, 价格实惠, 可做全局代理, 包括terminal.

项目

目的

  • 提高使用者的工作效率
  • 提高开发人员的开发效率

前端类库

vue.js

一个用于创建web交互界面的库, 主要用于数据双向绑定.

superagent.js

一个非常方便的客户端请求代理模块,可方便的使用get,post,put,delete,head动词, 异步回调中封装了http状态码和业务数据等等.

dropzone.js

一个强大的文件上传库, 可获取文件mime, 文件大小等; 针对图片可生成缩略图, 获取图片宽度,高度.

backgrid.js

一个强大的表格组件.

director.js

一个强大的前端路由库, 通过 # 符号进行路径组织, 结合 vuecomponent 可进行单页的局部模块刷新.

后端类库

spring hateoas

spring 超文本驱动库, 可根据需求返回不同的httpStatus及links.

spring framework

对架构进行分层, 目前分三层

  • web接入层: 提供API接口,对前端传过来的数据进行校验, 校验未通过的话使用spring hateoas包装返回错误消息, 校验通过的话调用业务逻辑层
  • 业务逻辑层: 该层主要处理上层传进来的数据, 调用数据访问层进行数据持久化, 该层具有强大的扩展性;
    • 对于高并发写 db 的操作, 可集成消息队列库(如 ActiveMQ )将消息发送至队列, 采用队列依次消费减轻 db 写负担.
    • 对于高并发频繁读 db 的操作, 可集成缓存库(如 redis ), 把读 db 的操作改为先读缓存, 未命中才去读 db , 这样可大大减轻数据库读负担.
    • 在该层上还可以使用 spring AOP 对业务进行事务控制及日志记录.
  • 数据访问层: 该层只做一件事, 对数据库中的表记录进行增删改查, 不进行业务逻辑判断.

mybatis

一个半自动ORM(对象关系映射库)库, 简单灵活, 使用原生sql, 可完成较复杂的查询.

mybatis-generator-maven-plugin

mybatis插件, 可根据数据库中的表生成JavaBean,Dao接口,Dao的 xml 文件, 本人修改了部分源码, 可在JavaBean中自动添加注释, 详见另一篇博文 MyBatis-Generator最佳实践 .

spring security

完成用户的认证和授权.

thumbnailator (注: 需翻墙)

一个Java端的图片处理库, 可完成图片压缩, 裁剪, 水印等功能.

实战

如何提高使用者的工作效率?

  • 使用者看见就知道怎么使用
  • 为使用者自动完成部分可推导的表单填写
  • 拥有尽可能全的提示

如何提高开发人员的开发效率?

  • 技术选型时权衡考虑学习曲线与其提供的功能
  • 设计一套通用的可扩展的架构
  • 对常用操作及模块进行封装.

目前, 后端中将数据访问层和业务逻辑层中常用的方法封装成了泛型接口, 并使用抽象类来实现最基础的逻辑, 开发人员如果觉得指定方法无法满足需求, 可重写指定方法或使用新方法. 具体封装如下:

/**
 * GenericDao : 封装通用dao操作, 服务于GenericService
 *
 * @author http://arccode.net
 * @since 2014-12-03
 */
public interface GenericDao<Model, PK> {

    /**
     *  插入
     *
     * @param model
     */
    int insertSelective(Model model);

    /**
     *  删除
     *
     * @param id
     */
    int deleteByPrimaryKey(PK id);

    /**
     *  更新
     *
     * @param model
     */
    int updateByPrimaryKeySelective(Model model);

    /**
     *  查询单条记录
     *
     * @param id
     */
    Model selectByPrimaryKey(PK id);

    /**
     * 分页查询
     * @param page
     * @param model
     * @return
     */
    List selectAndPage(Page<Model> page, Model model);

}
/**
 * GenericService : 所有自定义Service的顶级接口,封装常用的增删查改操作
 *
 * Model : 代表数据库中的表映射的Java对象类型
 * PK :代表对象的主键类型
 *
 * @author http://arccode.net
 * @since 2014-12-03
 */
public interface GenericService<Model, PK> {

    /**
     * 分页获取集合, 带过滤功能
     * @param page 分页对象
     * @param model 分页条件, eg: model.name = "zhangsan", 对应sql语句为where name like %zhangsan%
     * @return
     */
    List getModels(Page<Model> page, Model model);

    /**
     * 新增
     * @param model
     * @return
     */
    Integer addModel(Model model);

    /**
     * 删除
     * @param id
     * @return
     */
    Integer removeModelById(PK id);

    /**
     * 修改
     * @param model
     * @return
     */
    Integer modifyModelById(Model model);

    /**
     * 根据主键id获取单条记录详情
     * @param id
     * @return
     */
    Model getModelById(PK id);

}
/**
 * GenericServiceSupport : 通用接口的实现类
 *
 * @author http://arccode.net
 * @since 2014-12-03
 */
public abstract class GenericServiceSupport<Model, PK>  implements GenericService<Model, PK>{

    /**
     * 定义成抽象方法,由子类实现,完成dao的注入
     * @return
     */
    public abstract GenericDao<Model, PK> getDao();

    @Override
    public List getModels(Page<Model> page, Model model) {
        return getDao().selectAndPage(page, model);
    }

    @Override
    public Integer addModel(Model model) {
        return getDao().insertSelective(model);
    }

    @Override
    public Integer removeModelById(PK id) {
        return getDao().deleteByPrimaryKey(id);
    }

    @Override
    public Integer modifyModelById(Model model) {
        return getDao().updateByPrimaryKeySelective(model);
    }

    @Override
    public Model getModelById(PK id) {
        return getDao().selectByPrimaryKey(id);
    }
}

熟练使用该模式, 开发一套业务逻辑的增删改查, 那速度是相当快.

针对前段也做了一些组件式的封装, 表格采用 backgrid.js 完成展示及分页操作, 只需要在 html 文件指定位置写入两个带id的html元素(一个用于展示表格, 一个用于分页), 之后copy写好的js模板, 在js中修改属性便可快速完成表格异步分页.

接下来将陆续发布实战干货.

本系列文章

  • 前后端完全分离初探
  • 前后端完全分离之API设计
  • 前后端完全分离之安全认证与授权-上
  • 前后端完全分离之安全认证与授权-下
  • 前后端完全分离之前端模块化开发
  • 前后端完全分离之前端路由系统
  • 前后端完全分离之后端面向服务的模块化开发

以上所述就是小编给大家介绍的《前后端完全分离初探》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

关注码农网公众号

关注我们,获取更多IT资讯^_^


为你推荐:

相关软件推荐:

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Vue.js前端开发

Vue.js前端开发

陈陆扬 / 人民邮电出版社 / 2017-2-1 / CNY 45.00

本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的适用场景和具体操作。本书的特点在于案例详实,使读者体会到框架的优点和便捷之处,提升开发效率,最后能将Vue.js运用到实际项目中,避免纸上谈兵的尴尬。一起来看看 《Vue.js前端开发》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具