node=day6
（1）反馈
（2）项目结构
1、新建项目文件目录forum（社区）
2、初始化项目，新建项目说明文件package.json
3、初始化git仓库，用于后期向git推送发布
4、新建项目说明文档README.md，后期在Git上也可以浏览
5、创建git上传忽略文件类型设置文件“.gitignore”
6、安装核心包Express（开启创建服务）、mongoose（数据库）
下载完毕后会发现，npm新版在安装第三方依赖时，会自动创建package-lock.json锁文件，将记录依赖树，锁定版本
7、创建静态资源开放目录public，给客户端用
8、创建入口文件，编写代码
注意：这里需要开放静态资源public，同时因为后期要用jquery和bootstrap，所以这里开放node_modules目录，让前端直接访问该目录下的资源
查看Express官方文档会发现开放静态资源有个写法
这里可以对上述代码做下修改
这里注意：path为核心模块（路径操作模块），所以需要引入，接下来便可以通过url浏览静态资源。如下所示
上面path.join(__dirname,'./public')与之前相比，是将路径变为绝对路径。这里 便涉及到两个知识点：path路径操作模块和__dirname文件路径。接下来做下介绍
（3）path路径操作模块
详情参见path路径操作模块.
（4）dirname和filename
详情参见node中其他成员（非模块成员）之dirname和filename.
（5）art-template模板引擎中的include-extend-block
1、接下来开始渲染页面，此时需要配合模板引擎
因为这里用的Express搭建的服务，所以需要用到模板引擎express-art-template，同时还需要art-template。因为express-art-template是基于art-template开发的
新版npm5.xxx之后不需要加--save参数，即可默认加上
2、接下来启动服务，配置模板引擎相关参数
注意：这里避免相对路径，使用动态绝对路径
index.html内容：
启动后，测试如下
因为放在了public开放目录下，所以也可以通过开放资源url访问
接下来加个模板参数进行渲染
3、模板参数渲染
结果如下所示
对比分析可得静态资源经过了模板编译，此时渲染成了我们想要的内容
4、公共部分抽离
分析可得在开发中，有的地方例如网页头部导航和底部，在很多页面用到，此时便可以抽取出来
接下来打开art-template官网文档，查看相关配置（这里选择简体中文，方便阅读）
然后查找语法
接下来看下子模板和模板继承
①首先新建文件header.html
②接下来在其他页面（同级index.html）引入
③同理，建立公共底部模板文件footer.html
渲染结果如下
④进一步封装，目前为止已经把头部、底部抽离出去，但还有很多架构一样
此时便可以利用模板继承
⑤模板继承
接下来新建布局模板layout.html，将原来的index.html文件内容粘贴过去做下修改
接下来在index.html页面去继承
此时页面渲染结果如下
分析:因为index.html没有填入内容，所以这里展示默认内容
⑥接下来开始填坑
分析可知：填坑内容与留坑语法类似，此时结果如下
⑦公共模板完善
因为接下来要用到bootstrap和jquery，所以直接在公共模板页面引入，首先下载第三方依赖包
补充（dist发布目录）：
查看效果，发现文件引入成功，字体样式已经改动
此时模板页和后代子页面都已经整合到一起
5、art-template多环境应用
模板引擎art-template可以在node服务器环境应用，也可以在浏览器环境应用，原因在于源码里没有涉及具体环境API（模板引擎只操作字符串，与DOM操作、文件操作均无关）
6、其他相关模板引擎
7、公共模板页的设计
关于公共模板页layout.html的设计主要注意： 1、将公共部分放到这里 2、在需要后代继承覆盖的地方留坑，并加上“默认内容”
为了后代各个页面拥有自己的样式和脚本，所以还需要在样式和脚本处留坑，但这里注意：默认位置，后期会被覆盖，也可以不填，之后再做修改
接下来在index.html对应填坑即可
对于脚本部分，为了防止混淆，我们可以命名为script
这里对于留坑位置做下修改，都给去掉
然后在index页面做下样式定制
此时网页记载完毕后的内容如下
（6）案例资源页面
这里便涉及到文件分类和命名，之所以用_，是因为要和其他业务主页面区分开来
对于公共页面局部，可以抽离归类到相关文件夹，例如_layouts（布局）目录，存放如下（因为可能有多个公共模板，所以命名为layouts）
_partials（部分）目录，存放如下，存放公共头部、尾部、导航等
所以接下来依次编写静态页面，即静态资源页面设计和命名，详见node（day6）之静态资源页面设计和命名.
（7）设计注册、登录、退出路由
相对之前来说多了几个目录controllers、models、routes等。
接下来设计下路由
注意：有些功能是需要权限的，例如发布一篇博客，如果不登录是无法发表的
（8）配置注册登录路由
1、路由提取
正如之前所讲，入口文件不做路由处理
一般小型项目，可以直接在根目录下新建router.js处理路由。
但当项目较大，请求越来越多时，最好将其在routes目录下分类管理。
例如：注册登录退出相关的操作，放到routes下的session.js（会话），因为注册登录退出操作，都相当于在和服务器进行会话
新建话题、删除话题、修改话题、查看话题列表等操作，放到routes下的topic.js
例如：这里在routes/router.js设计渲染首页路由，如下所示（ 备注：后期修改为routes下各个子文件操作，然后通过routes/router.js统一管理 ）
接下来在入口文件require引入加载并use使用
2、接下来添加其他路由操作
之后进行验证，点击登录、注册按钮跳转到相应页面即可
（9）快速启动配置
为了快速启动项目，接下来在项目说明文件配置scripts项，如下所示
配置完毕后，以后再启动项目只需输入指令“npm start”
（10）处理注册页面，配置Express中间件body-parser
接下来看下注册页模板内容
点击提交时利用jQuery操作表单提交，所以这里需要引入jquery
serialize() 方法通过序列化表单值创建 URL 编码文本字符串,
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中
关于jQuery的ajax里dataType预期服务器返回数据类型，详见jQuery的ajax里dataType预期服务器返回数据类型.
这里的data为序列化后的表单数据，打印如下
接下来获取表单post提交数据，这时便需要配置body-parser中间件
1、下载body-parser中间件
2、在入口文件进行相关配置，注意：一定要放在挂载路由之前配置
此时在路由配置文件输出打印post提交数据
测试如下：
如果body-parser配置放到了挂载路由到app实例之前，则获取不到post提交数据
接下来便要开始操作数据库，这里我们使用mongoose第三方包实现，首先要设计数据模型
（11）设计数据库（用户数据模型）
1、分析
因为除了用户数据，还有话题相关数据、评论相关数据等，所以这里需要设计多个数据模型，将其放到models目录下
models下有多个数据模型，代表多个集合。user.js代表用户数据集合
2、设计user.js用户数据集合
注意：集合命名为大写单数User，最终数据库集合名会变为小写复数users
3、设计文档格式
首先是基本信息
另外，除了基本信息，还有些看不到的信息，例如创建时间、修改时间... ...，这里加入创建即注册时间
重点分析：
这里可能会有疑问：为什么Date.now没有加函数执行符？
原因：加入函数执行符会即时调用
这里传入方法Date.now，当你去new Model时即实例化模型，如果没有传递create_time，则mongoose就会调用default指定的Date.now方法使用其返回值作为默认值
对比分析：例如type为a+b，则在new Schema时便自动计算出结果
同理，在创建时间处，如果加入函数执行符，则会立即执行。这时变成了写死的时间
接下来设计修改时间文档格式
此外还有用户头像avatar，在用户信息设置处有个默认头像
此外，在用户信息设置里还有介绍bio
加下来还有性别gender
接下来还有生日，生日这里不用加默认值
接下来结合业务逻辑需求，看下还需要哪些数据，如下所示
分析完毕后，此外还有账户状态status。例如管理员管理用户状态，禁言、封号等等... ...
此外也可以通过mongoose框架模型层次，对数据格式做限制，例如email必须为邮箱格式、昵称nickname长度不能超过10位等等... ...，需要用到验证中间件，后期介绍
（12）处理注册请求
1、开启数据库服务，连接数据库
2、基于之前设计的用户数据模型，进行业务操作（注册、登录等）
注册即为保存数据、登录为查询数据
在正式操作前，首先在编码里连接数据库
目前为止先写到这里，但操作其他数据时（topic.js、comment.js）还需要再次连接，肯定不合适
所以这里做下修改，新建mongoose.js操作数据库，如下所示
/*1、引包*/ var mongoose = require('mongoose') var db_url = 'mongodb://localhost/blog' /*2、连接数据库*/ /*mongoose.connect('mongodb://localhost:27017/0204')默认开启的端口为27017*/ mongoose.connect(db_url)/*这里也可以将端口去掉，默认便是27017*/ /* 链接成功 */ mongoose.connection.on('connected', function() { console.log('Mongoose connection open to ' + db_url); }); /* 链接异常 */ mongoose.connection.on('error', function(error) { console.log('Mongoose connection error:' + err); }); /* 链接断开 */ mongoose.connection.on('disconnected', function() { console.log('Mongoose connection disconnected'); }); module.exports = mongoose;
之后在其他文件调用即可
首先查询用户邮箱是否存在，然后查询用户昵称是否存在。这里我们使用fAPI为indOne，find方法即使只查出一个，也会将其放入数组
如果邮箱已经存在，接下来需要判断昵称，查询文档，找到or操作
所以接下来利用or
接下来直接判断“邮箱或者昵称是否重复。如果两者有一个存在则提示，邮箱或者昵称已存在”
当然可能有的网站在切换输入框时便直接判断，这样的话需要将邮箱、昵称分开编写API接口
注意：这里res.send()返回结果需要结合客户端代码进行分析。
如下所示，查看后即可得知，该操作是表单操作post异步请求，需要服务端返回JSON数据，之后客户端根据JSON内容进行业务交互
接下来做下测试
此时发现客户端没有输出，服务端执行到了OK。
那么问题来了：服务端发送了响应数据，为什么客户端没有输出呢？(服务端发送了响应数据为ok，如下所示)
原因：客户端ajax里指定期望服务器返回数据格式dataType为json，但服务端发送的不是json。所以客户端解析不到，所以客户端没有报错，也看不见
接下来做下测试，给客户端发送响应数据，格式为json
此时在做下测试，点击注册按钮后，便可以发现客户端打印数据
分析：jQuery的ajax里的dataType:json的作用为
预期后台返回结果为json字符串，如果返回的是json字符串，那么直接将其解析转为js可操作的对象，结合文章jQuery的ajax里dataType预期服务器返回数据类型.理解
如果后台返回结果为字符串，而不是json格式字符串，那么无法进行转换，如下所示
如果这里是纯字符串，那么肯定无法正常转换。但客户端里面尝试转换对象格式失败，虽然无法正常输出，但也不会报错
3、后台发送json格式响应
如下所示，直接发送json格式响应
所以这里使用JSON.stringify()进行转换
此时注册页面提交后便可以输出后台发送的响应
4、Express框架的json方法
再在响应里添加数据，测试如下
都可以正常获取服务器返回响应，但是这样操作也过于繁琐，Express封装了json方法可以直接转换
测试如下：
Express的响应方法json方法会自动将里面的对象转换为json字符串，也就免去了手动转换
小结：
5、json响应方法替换send
接下来将之前的send响应方法都替换为json，然后统一响应格式.
这里注意：error中属于服务器错误所以success为false，而邮箱或者昵称已经存在属于业务操作，都已经完成对比，所以状态码为200
6、保存数据到数据库
如果数据没有问题，则保存数据到数据库
接下来做下测试，注册页面填写信息提交，然后连接数据库进行查询
再次点击注册，客户端输出结果如下（邮箱或昵称已存在email or nickname already exist）
7、服务端自定义业务状态码
接下来开始在客户端根据服务端返回响应进行操作，但此时仍然存在问题
即返回状态码都为200或者500，无法准确获取响应结果。此时便需要在服务端设计一些自定义的业务状态码... ...
虽然也可以根据字符message判断，但字符可控性太差，所以还是推荐自定义业务状态码
接下来将success改为error_code，然后自定义值
500为错误，1为邮箱或昵称已存在，0位成功... ...
因此这里便需要接口文档进行前后端协同开发，统一规定自定义业务状态码
8、客户端接收响应，针对性处理
测试如下（再次提交时便会提示，信息已经存在）
此时可以用CMD或者MongoDB的可视化操作工具进行预览，接下来可以启动预览
CMD操作如下
9、密码加密md5
此时可以从数据库直接看到密码，但像密码这种隐私数据，一般存储时都是md5加密（php、node、java等任何语言都可以加密操作）
目的：防止数据库信息泄露，用户密码曝光
这里便需要用到第三方包，Github有很多种，选择一种即可
这里例如选择第一个
这里附上GitHub中文社区，进入直接搜索md5即可GitHub中文社区
接下来开始安装使用
接下里引入使用
然后在存储数据之前对密码进行二次加密，当然也可以多层加密，提高安全性。一层加密的话加密程度低，建议至少两层
接下来做下测试（密码为123456）
注册成功后查看数据库，此时发现密码为加密后的数据
注意：
登录时输入的密码不能直接和数据库存储的加密密码比对，都是拿着加密的密码进行比对。
且只能正向加密，不能反向解密。所以，即使是开发人员，也无从得知用户密码
（13）表单同步提交和异步提交
1、分析
从特性上将，表单具有默认的提交行为，默认是同步的，即同步表单提交，浏览器会锁死（转圈... ...），等待服务端的响应结果
接下来做下对比分析
2、异步提交，首先看下案例里的异步提交
异步表单提交：form标签内部不再编写action和method，而是通过ajax的url和method选项去实现提交
3、同步提交
同步提交时不再需要ajax，而是直接在form表单的开始标签里添加action和method属性实现，接下来开始进行注册
点击提交按钮
再次刷新页面，内容如下
4、区别
同步提交表单内容会导致浏览器锁死，异步提交表单内容不会发生锁死，浏览器任然可以干别的事情
详情参见文章浅谈表单同步提交和异步提交.
（14）服务端重定向，针对异步请求无效
当注册成功后，应该重定向到登录页面
目前为止，只是弹框提示
注意：如果客户端是异步请求，服务端重定向针对异步请求无效。如下所示，如果改为重定向或者res.render()、res.send()都会无效，无法跳转重定向。
即如果是异步请求服务端无法重定向，对比之前的表单同步请求则可以实现跳转重定向
所以如果想实现重定向，必须由客户端实现。如下所示
关于页面重定向知识点，如下所示
（15）登录功能
1、首先编写html模板代码
接下来编写脚本代码，获取表单输入提交内容，并且阻止表单默认提交事件
测试如下
2、发送AJAX请求，执行异步提交操作
注意：一般为了防止他人暴力破解，不会专门提示邮箱错误或者密码错误。
场景：他人在输入邮箱和密码后提示密码错误，则可以知道，该账号一定存在，接下来只破解密码即可，增加了用户账号风险。如下所示
所以一般会提示“邮箱或者密码错误”，所以编写ajax请求如下
3、处理登录操作服务端
登录界面渲染已经没有问题即get请求已经解决，接下来主要处理表单post请求
4、处理登录post请求
步骤：获取请求数据→查询数据库→发送响应
首先获取表单数据，接下来链接数据库查询，因为之前已经加载过了用户数据设计文档
所以接下来通过User操作即可
注意： 1、可以在读取失败时直接将错误信息发送回去，通过error自带的属性，即error.message属性。此时客户端在开发时，便可以看到详细报错信息 2、因为是异步请求，服务端无法重定向到首页，所以需要发送成功响应，自定义状态码 3、用户存在，登录成功，通过Session记录登录状态（稍后添加)
测试如下
点击确定后便会重定向到首页，接下来做下session登录状态存储。
（16）通过session保存登录状态
详见文章node通过session保存登录状态.
（17）处理用户退出功能
接下里编写退出功能，即点击退出按钮时进行用户退出操作
接下来编写路由
注意：a链接默认为同步请求，因为点击链接时，浏览器便会刷新。
因为是同步请求，所以可以使用服务端重定向。注意：之前所讲，ajax异步请求的重定向，无法在服务端操作。
（18）小结
（19）总结
.
