从零开始构建部署上线Node.js+Express+Bootstrap+Jade响应式网站应用—RSPT丨留学生活第一站（二）
该系列文章总汇链接
从零开始构建部署上线Node.js+Express+Bootstrap+Jade响应式网站应用—RSPT丨留学生活第一站（一）
从零开始构建部署上线Node.js+Express+Bootstrap+Jade响应式网站应用—RSPT丨留学生活第一站（二）
从零开始构建部署上线Node.js+Express+Bootstrap+Jade响应式网站应用—RSPT丨留学生活第一站（三）
一、Nodejs学习
Node.js是一个Javascript运行环境(runtime)。实际上它是对Chrome V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。
Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。
Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。
具体的nodejs的模块和API可以参考官方文档；
学习文档参考 http://www.runoob.com/nodejs/nodejs-tutorial.html
我跟着这本书学习整个搭建过程：
二、Express
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。
使用 Express 可以快速地搭建一个完整功能的网站。
Express 框架核心特性：
- 可以设置中间件来响应 HTTP 请求。
- 定义了路由表用于执行不同的 HTTP 请求动作。
- 可以通过向模板传递参数来动态渲染 HTML页面。
Express的用户请求处理逻辑：
三、jade/pug学习
Pug原名不叫Pug，原来是大名鼎鼎的jade，后来由于商标的原因，改为Pug，哈巴狗。
Jade 是一个高性能的模板引擎，它深受 Haml 影响，它是用 JavaScript 实现的，并且可以供 Node 使用。从实际意义上来说，Jade是为了提高前端开发人员的效率而产生的。Jade中，空格、换行、缩进都是有意义的，由这些决定了标签和内容的嵌套关系。
典型地，在HTML中，开始标签+内容+结束标签的模式，被改造成开始标签+空格+内容的模式。
Jade模板的使用原则是:设计一系列的模板布局, 然后让其他文件去扩展。
特性
- 客户端支持
- 代码高可读
- 灵活的缩进
- 块展开
- Mixins
- 静态包含
- 属性改写
- 安全，默认代码是转义的
- 运行时和编译时上下文错误报告
- 命令行下编译jade模板
- HTML5 模式 (使用 !!! 5 文档类型)
- 合并动态和静态标签类
- 可以通过filters 修改树
- 模板继承
- 原生支持 Express JS
- 通过 each 枚举对象、数组甚至是不能枚举的对象
- 块注释
- 没有前缀的标签
-
AST Filters 过滤器
:stylus 必须已经安装 stylus
:less 必须已经安装 less.js
:markdown 必须已经安装markdown-js 或者 node-discount
:cdata
:coffeescript 必须已经安装coffee-script - Emacs Mode
- Vim Syntax
- TextMate Bundle
- Coda/SubEtha syntax Mode
- Screencasts
- html2jade 转换器
具体的文档以及说明全部在这里https://pugjs.org/zh-cn/api/getting-started.html
四、bootstrap
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
作用：
- 用它提供的样式和组件快速写网站
- 你只需要引用一些定义好的类，也就是class名字，就可以创建出已经有非常漂亮的样式的网页，而且支持自适应，是一个很不错的框架。
简单点说：
是一个快速搭建网站前台页面的开源项目（基于Jquery）。你只需要了解相关的class、标签名称等所代表的意思，然后在构建页面的时候，导入bootstrap的JS、css等，它就会去表现相应的效果出来。
比如HTML说明：缩略语；当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML 元素的增强样式。 缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。当你需要段落文字某个单词或者词语需要有上面的那种效果，你就那样按照那种格式写就好了，附加的class=“initialism”是让字号更小一点，也可以不要。反过来说：如果你不试用bootstrap的东西或者其他类似的框架，那你就得自己写这样的效果，开发时间长。再比如Jquery的easyui，也是差不多道理。
具体的内容我是读了这本关于bootstrap 4 的书：
五、其他的库和插件
自己都整理出自己的开发文档，方便自己以后工作中使用。
快速开发虽然说是快速，但是也花了我半个多月，学习看书，然后修补各种bug，去爱奇艺上找各种数据资源。终于完成了本地的开发。
第三部分也是重头戏的开始，项目的部署和上线；这部分我需要好好记录和总结，这部分网上并没有很全的教程和步骤。