简单 web 服务与客户端开发实战

简单 web 服务与客户端开发实战

团队地址：github.com/Just-for-Service-Computing

个人GitHub：github.com/xiekch

本人主要承担前端的部分工作。

前后端分离

不得不说，自己是从这次开发中了解到什么是前后端分离，以前只是接触到MVC开发方式。

可是这种方式存在一些问题

• 前端无法单独调试
• 前端不可避免会遇到后台代码

前后端分离认为controller层也属于前端的一部分。在这一时期

前端：负责View和Controller层

后端：只负责Model层，业务处理/数据等

node.js就可以作为前端的开发语言了

好处是：

• 适配性提升
• 响应速度提升
• 性能得到提升

Vue.js

通过这次项目，学习了vue.js的使用。

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

安装

npm install vue -g

创建项目

vue init webpack swapi-web

运行

npm run dev

*.vue 文件，是一个单文件组件，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html , js , css。

前端的js文件是怎么打包到前端的呢？虽然vue在运行的时候会帮我们自动打包，可是最好还是了解一下webpack的基础知识。

Webpack

webpack之所以要出现，是为了解决js的历史遗留问题。

浏览器在解析js的时候有一个大盲点，就是js不具有模块化。也就是说，一个文件要给另一个文件暴露出去一部分数据，或者说一个变量，那么你就只能把这个变量定义在全局作用域下。除此之外，别无他法。

后来，node出现了，有一个很好的、但是浏览器没有的机制，那就是——能把js给模块化。

所以大家往往会先把js转化为后端代码，然后再编译成前端代码。这种情况出现的原因，就是因为node。

但是，浏览器不知道这段代码是什么意思啊，光能node运行还不行啊，浏览器看不懂这两段代码，就会报错啊。所以，为了让浏览器看懂这些所谓的入水口、出水口、require关键词，webpack就这样出现了。webpack的功能就是——动态地将这些后端代码编译成浏览器理解的代码，而这些被webpack打包编译出来的代码都被放在一个叫做 bundle.js 的文件里。

References

• 从分布式之的角度告诉你前后端分离架构的必要性!
• Vue.js
• webpack始出来