我的第一个前端项目：博客之登录与注册页面设计

做前端已经一段时间了，记得当初刚开始学习node的时候一头雾水，不知道该如何下手？记得当初实训的内容是写一个像之灰的博客。在写博客之前引入一些前面学习的框架如：expresss、mongoose、body-parser、ejs、cookie-parser。Ejs前面接触的较少，先来介绍一下ejs模板："E" 代表 "effective"，即高效。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。EJS 支持直接在标签内书写简单、直白的 JavaScript 代码。只需让 JavaScript 输出你所需要的 HTML ，完成工作很轻松！

设置好每一个框架的静态路由，使用body-parser中间件解析post数据、cookie-parser 中间件解析cookie数据、设置模板引擎为ejs，根据页面的格局将页面花费为3部分：处理前台服务的(/),处理登陆服务的(/api),处理后台服务的(/admin)。

在这里为了更方便我们将3个路由分别设置二级路由，创建一个routers文件夹，分别创建admin、api、main3个js文件。这里主要讲的登陆、注册。在api.js中引入express框架。我们需要使用express.Router()指令为其创建二级路由。express.Router()指令每个路由文件通过生成一个 express.Router 实例 router 并导出，通过 app.use 挂载到不同的路径。在实际开发中推荐使用 express.Router 将不同的路由分离到不同的路由文件中。

在注册的时候需要为后台反馈设置一定的格式，常见一个responseDate空对象。然后在reghister路由中给判断前台传过来的数据用户名，密码是否为空，判断2次输入密码是否一致。通过mongoose判断传过来的用户名在数据库中是否已经被注册mongo.findOne({username}).then((result)=>{})其中每一步都需要使用if判断，如果有一步出了错就return结束，并且向前台返回对应的出错。这时候responseDate就派上用场了。设置responseDate.code = 4;记录出错的步骤responseDate.message ='此用户已被注册';用这个来记录出错的原因，是什么原因导致了出错。

得到了后台的反馈信息，现在就需要在前台中展现出不来。通过前台ajax的success将数据存在msg中。因为数据是后台传过来的，所以我们要先为msg变成我们需要的（let data = JSON.parse(msg);）。JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。然后获取了标签将他的innerText设置为data.message，然后设置一个循环定时器，判断data.code为真时执行，当为假时不执行。

现在注册按钮结束了，接下来就时登陆按钮。为登陆按钮设置ajax。将我们的值传给后台。在登陆时也要判断账户不能为空，密码不能为空。从数据库中查询有没有注册过。如果注册就登陆成功，如果用户为空就是没注册过，向前台反馈密码或者用户名出错。当我们登陆成功时下发cookie。

在app.js中设置所有路由下，如果任何一个路由下发了cookie，这这里都能监测到，并且把检测到的值反馈给前台，如果这个值为真时。页面中就以这个值，在前台中展现出来，让用户只管的看出来已经登陆成功了。

最后的结果为：