搭建基于nodejs的前后端分离的博客

1. 使用koa包搭建后台服务，处理路由跳转和HTTP请求；layui组件构建前端页面并通过ajax发起请求；mongodb数据库用于存储用户账号密码头像和文章内容评论等数据信息；
2. 实现了用户注册登陆功能（表单验证），后台根据数据库验证用户信息的可靠性，通过cookie和session保存用户登录状态；
3. 使用layui富文本编辑器模块实现发表文章和评论的功能，提交到后台后重定向并渲染到页面上；
4. 使用koa-multer实现图片上传功能，能够修改用户的头像信息；

实现逻辑

主页 /

1. 先判断是否有session，没有的话确认是否有cookie，有cookie将cookie中的nickname，userID和avatar值更新给session。（cookie被设置了只有在主页才会传递给后台，因此判断是否维持登陆状态需要依靠session，但是session在关闭网页就会消失而cookie不会，重新打开主页需要根据cookie重新设置session）
2. 渲染主页，同时发起向/islog的get请求，如果没有session则表示没登陆过，返回响应让jQuery将登陆注册区块显示出来，如果session存在则返回nickname和avatar值显示用户信息的区块。

登陆 /login

1. 点击登陆按钮渲染登陆页面，利用了layui自带的功能对昵称和密码栏进行格式验证。
2. 昵称和密码输入完毕，点击提交将发起向/login的post请求。
3. 在后台取得前端传输过来的nickname和password属性，从数据库取得保存用户信息的user集合，并从中查找是否存在，如果存在用户名则将密码加密后和数据库中存储的密码对比看是否正确，如果正确在浏览器上设置cookie保存nickname，userId和avatar值，并且同时设置后台session。
4. 渲染登录状态页面，发起向/log-state的get请求，根据情况后台返回响应在页面上显示不同的登陆信息（不存在用户，出错，密码错误，登陆成功），定时器设置3秒后重定向。

注册 /register

1. 点击注册按钮渲染登陆页面，一方面利用layui进行账号和密码的验证，另一方面在对用户输入完用户名失去焦点时候发起向/repeat的post请求，后台接受后在user集合中查找是否存在重复的用户名，并把结果作为响应返回给客户端，客户端根据响应作出相应提示。
2. 当用户名没有重复且其他信息填写正确后，提交按钮将发起向/register的post请求，将用户注册的信息（用户名密码和邮箱地址）发送到后台。为了保险起见，后台会再一次验证用户名是否重复，若无重复则将密码加密后新增一条文档并保存到user集合中，然后渲染注册状态页面，发起向/reg-state的get请求，根据情况后台返回响应在页面上显示不同的注册信息（用户名重复，出错，注册成功），定时器设置3秒后重定向。

登出 /logout

1. 清除后台session： ctx.session = null; 清除浏览器cookie ：ctx.cookies.set(name, null, {maxAge : 0});。
2. 重定向到主页。

编辑文章页面 /publish

1. 调用keepLogin中间件判断是否登陆状态下，然后渲染编辑页面，根据登录状态显示用户信息或登陆注册区块（这里有点多余了，只有在登陆的状态下才能够进入到文章编辑页面的）。
2. 利用layui实现富文本编辑器和相关的内容验证，点击提交将（分类，标题和文章内容）发起向/publish的post请求，后台将收到的内容和session中的userId保存到articles集合中，然后返回状态（成功，出错），前端根据状态进行重定向。

进入到不同的选项卡中 /web/:id

这里取前端技术的选项卡举例，其余相同。

1. 调用keepLogin中间件判断是否登陆状态下，根据登录状态显示用户信息或登陆注册区块。
2. 根据动态id获得要显示第几页，然后在后台查询articles集合中根据类型筛选出相应的文章集合，将关联表的信息提取出来，然后打包起来。渲染页面后发起向/web-query的get请求，后台把之前打包好的文章集合响应给前端渲染（头像，作者，标题，发表时间，评论数）出来，每一篇文章用它的_id作为连接的动态路由。

进入具体的文章页面 /article/:id

1. 调用keepLogin中间件判断是否登陆状态下，根据登录状态显示用户信息或登陆注册区块。
2. 后台获取路由id，也就是文章的_id，在articles集合中找到对应文档，同样打包好等待渲染页面后发起向/article-content的get请求，把打包好的内容响应给前端渲染出来（作者，标题，发表时间，分类）。
3. 然后还会向/comment-display发起post请求，将文章的_id发给后台，后台在comments集合中找到该文章对应所有的评论，将关联表的信息提取出来打包响应给前端，将评论的内容渲染出来（评论者id，头像，评论内容，评论时间）。

提交评论 /comment

1. 在文章页面评论文章并提交后向/comment发起post请求，后台会再检测是否为登陆状态，如果是则保存评论内容（作者，内容，文章id），更新文章评论数。
2. 评论成功则刷新页面，显示提交后的评论。若失败则弹窗提示。

修改用户头像

1. 利用layui的上传模块，在上传图片时候会向/upload发起post请求，利用koa-multer模块保存上传的图片。
2. 将新上传图片的路径在session和cookie中重新设置。

基于Reactjs框架构建仿小米商城移动端

1. 用rem作为移动端适配布局的单位进行布局，swiper插件用作轮播图；
2. 根据后台接口API，用fetch方法请求得到数据进行渲染；
3. 为实现购物车模块，利用react-redux进行组件间的数据通讯；