工程完全实现前后端分离

目录

 

为什么要实现前后端完全分离

前后端分离的场景(重前端)

如何实现前后端分离

前后端分离框架

前端做假数据

数据接口开发流程

更好的开发前端需要掌握哪些技术


为什么要实现前后端分离

  1. 打造精益团队
  2. 提升开发效率
  3. 应对复杂多变的前端需求
  4. 增强代码可维护性

     前后端分离的场景(重前端)

  1. 页面布局复杂,使用了主题和样式。
  2. 需要有较高的页面渲染效果
  3. 前端页面中包含复杂业务逻辑
  4. 页面需要渲染的数据量较大

如何实现前后端分离

    前后端分离框架

    angular  、vue(1x、2x)、node+express+ejs/jade

  1. angular框架太过沉重,框架过于陈旧。
  2. vue 1x和angular很相似,本地没有server,客户端渲染比较方便,用起来也比较方便,直接通过script src=“”引入库文件就可以,部署的时候放在静态服务里就可以运行了,上手容易,用起来简单。
  3. vue 2x结合node.js,有本地server路由和配置文件,可以做到组件化开发,提高复用率。
  4. jq+ajax也能实现前后分离,没有路由,开发成本挺高,前端渲染的方法单一、笨重,无非就是appen()、html()、text()等等一些办法,但是网上jquery的插件特别多特别全,配合jquery的话也很好。
  5. node+express+ejs/jade的前后端分离是主流的开发办法,node的框架express可以提供本地服务和路由,配合模板引擎jade+ejs可以实现快速开发,一些复杂的数据结构处理也可以在node程序中完成,实际上node起到了一个中间层的作用,后端对接java/php的接口,前端对接ejs/jade模板引擎,实现前端服务端页面渲染,很高大上。缺点就是你写的node程序一旦报错就会全盘崩溃,你不会屏蔽错的的话就会死的很惨,要谨慎!

   前端做假数据

利用mock(http://mockjs.com)来返回一些假数据,这样就可以模拟发送API到接受响应的整一个过程,因此前端也不需要依赖于后端开发了,可以独立开发,等到后台的API全部设计完之后,就可以比较快速的联调。

数据接口开发流程


更好的开发前端需要掌握哪些技术

语言知识

ES5 & ES6 & ES7      // ES语言基础

HTML5 API & CSS3        // HTML5和CSS特效

Less & Sass         // CSS预编译语言

SVG & Canvas & D3.js    // 图形数据可视化

WebGL & Three.js            // 3D场景

CMD & AMD & CommonJS        // 语言标准

RequireJS & SeaJS           // ES模块化库

CoffeeScript & TypeScript       // ES语言风格库

NodeJS & Express & Koa      // Node的WEB服务器

TCP & HTTP & WebSocket    // 网络协议

......

框架、库

jQuery

Backbone

Ember

Angular & Angular2 & Angular4

React

Vue & Vue2

Ionic & Ionic2

React Native

Weex

Electron

......

工具

Sublime Text & Atom & Webstorm & VS code     //编辑器、IDE

SVN & Git         //代码管理、版本控制

Chrome Dev Tools & FireFox Developer Edition // 浏览器开发者工具

ESLint & JSLint      // JavaScript代码语法检查

React DevTools      // react调试工具

Redux DevTools     // redux调试工具

Vue DevTools           // vue调试工具

Grunt & Gulp & browserify & Webpack // 代码打包工具

Babel    // ES6、react等语法转换工具,将代码转换成ES5

forever * pm2     // nodejs项目部署工具

karma & mocha & PhantomJS      //自动化测试框架

......

猜你喜欢

转载自blog.csdn.net/yanxinduan/article/details/81082058
今日推荐