项目中前后端代码的拆分

在项目中前后端代码的拆分

　　在项目中，我们肯定是需要分层来书写各个模块的代码的，用来便于阅读以及后期的维护，下面来书写一个简单的后台管理系统的jQuery+node的代码，css和html暂时不放，主要就是为了理清这些思路，并且做出详细的解析，方便用于大家的阅读理解。

　　首先：全局安装express，在我详解express中有这一功能的详解，然后express -e搭建骨架，稍微修改一下文件夹，以备使用方便。

前端代碼的複用。

一：代码的复用。

　　1、在js下的common中创建一个page.js文件。index.html引入page.js文件。

　　2、因为需要将这些插入到header中，所以page.js中this.container = $(#header)，接收了一下。

　　3、然后在原型上，创建了init(),create()两个方法，init调create，page里调用init，首先，page这个函数是用来写头部、登录注册的，所以create需要来引三个模块（接收）。

　　4、首先没有header这个文件，所以去创建一个。

　　　　create（）{       this.header = new Header(); }

　　5、创建header文件，里面构造函数。

　　　　然后有个参数，这个参数就是接收到的nav。然后函数里接收一下。this.。。 = 。。

　　　　这时index.html引入一下header文件。

　　6、在header文件中创建一个方法，为字符串，接收一下nav，为了实现代码的复用。

　　7、header的原型对象，创建init原型方法，和createDome方法。作用是创建div插到页面中。字符串——>div——>this.container，然后这个page里写一实参传给header一下this.container。

　　8、login和register与header一样的道理，只是id名称换了一下，login插入到div，register插入div。

　　9、在page的原型方法里接收一下login、register。

　　10、index.html里引入这几个js。

二、注册

　　1、创建一个handleclick方法，里面，this.el.find("注册id名").on("click",$.proxy(this.handleclickcb回调)),

　　2、然后再写handleclickcb方法，里面还是要查找注册的username以及password。

　　3、然后定义$.ajax，因为涉及到密码，所以是past。谈话再写一个成功的回调。

　　　　成功回调里接收一个参数，输出data自己测试。

　　4、定义接口（简单自己定义一下接口）：

　　　注册接口

   　　     接口地址：/api/register

 　　       返回格式：json

      　　  请求方式：post

 

      　  传递的参数

            名称   必填     类型      说明

            username    Y        string       用户ID

            password    Y        string       用户密码

   

 

  　      返回的参数

            status: true  成功  false  失败

            info:说明

 

後端代碼的分層：以下图片为后端代码的一个顺序

　　1、开启数据库：mongod --dbpath c:\data\db

　　2、安装mongoose：cnpm install mongoose --save

　　3、连接数据库：创建一个utils文件夹，里面创建一个databse.js文件，作用就是用来连接数据库的。

　　4、导出mongoose。

　　5、mongoose要做数据的增删改查，所以创建两个文件夹M(Model)层，C(controller)层，mongoose引过来要在model使用，所以在M层创建一个user文件，这个文件主要用来做数据的增删改查。

　　6、改一下app.js下的路径。 "/api", 通过中间件，找到routes/user，在里面添加一个注册接口。

　　如果这么写的话是不是里面要写业务逻辑了？但是业务不可以在里面写，因为里面是路由，所以在controller层里面写，创建一个user文件，写业务逻辑。但是这个逻辑是在router文件下user.js里注册接口那里用的。

 

　　7、所以在user.js里引入一下，var userController = require("../controller/user");

　　　　然后在注册接口那里自定义模块引入。因为不只是一个业务逻辑，所以引入自定义模块没有写死，没有直接后边点。

　　8、user.js:post请求的时候接收数据的时候通过req.body进行接收。

　　　　get请求的时候接收数据的时候通过req.query进行接收。

　　9、下面需要判断用户名是否存在。

　　　　创建表，有用户和密码，提示：用户名已存在，如果没有的话，提示：注册成功。

　　　　如何看到用户名是否存在？

　　　　使用mongoose中的查，在model层的user.js进行。

　　10、

　　　　将方法导出，谁使用呢？controller层的user.js使用。

　　11、controller层，导入第三方模块，const userModel = require（“../model/user”）;

　　　　userModel.userFind(传一个对象{username},(接受一个值，看看有没有这个东西)=>{

　　　　})

　　　　而這個回调函数里接收的值在哪里来的？

　　　　是（10）里cb调用的，在里面先拿了表：

　　　　然后设置表的字段。

　　12、然后开始查：

　　　　查一下userinfo里面传的参数，就是接收过来的对象：（{username：username}）

　　　　后边的参数就是user.js

　　　　里接收的参数。

　　　13：箭头函数，可以不加括号使用，

　　14、在controller里的user.js里判断用户名是否存在，如果长度大于0，证明有东西，else证明没东西，但是如果增的话需要增的方法，但是现在没有方法，所以去添加一个增的方法，去modol的user.js里添加。userSave

　　15、

　　　　user里传了一个对象，然后.save，存进去。

　　　　然后then里也会有结果，也会有结果，但是结果是什么不知道，所以console看一下，然后再导出去。

　　16、然后现在就可以，当用户名不存在的时候，存储。

　　17、接收到了result，所以当接收到result的时候可以做判断。

　　　　如果这个东西存在的话。

18：model和controller层的连接：

model：书写数据的增删改查的方法，暴露出去，供controller使用，然后controller拿过来，需要接收了，

constuserModel = require("../model/user");引入进来，身上就会有model的增删改查。

三、 下一步进行登录：

　　首先说一下登录的逻辑：

　　　　1>接收前端传递过来的username password

　　　　2>验证username是否存在

　　　　3>如果存在，验证password（加密） 如果不存在返回给用户 用户名不存在。

　　　　4>如果密码验证成功，则返回登录成功，如果验证失败则返回密码错误

 　　对于用户注册之后，客户端传递给服务端来说，肯定会对密码进行一个加密。

　　密码的安全性/

　　node中专门有一个模块就是用来加密的。

　　加密的方式：MD5(有加密也可以加密) / sha256(只有加密，不能解密)

　　1、引入加密模块：

 　　　　

　　2、加密模块中有一个方法：createHash('sha256/md5')，创建一个sha256的加密方式。

在“注册成功”这一块，创建一个sha256的加密模式：

　　然后下面继续写一个加密的数据，你加密的是谁？是密码，所以：

　　这个加密的结果在哪里？在这里：这个hex参数是固定的。

　　然后输出出来看到确实为加密过后的，将这一段代码放到password后边。

　　原因是{username，password} = req.body 结构赋值结构赋值出来是一个对象，如果key和value值相同写一个就可以了，但是现在password不是之前的了，所以后边：　hash.digest('hex')

　　最后加密后的输出：

　　3、在register.js里，handleRegisterSucc这个方法里，如果data.status为true时，alert"注册成功";然后输入框点击注册完毕后隐藏掉。将id名换一下就可以了。然后刷新一下页面。

　　4、登录：

　　　　//在写代码时，id名  js_**意思就是用来做js操作的。

　　5、 前端：

　　　　在login.js里写一个userLogin的方法，在上边调用一下，里面主要写点击登录的操作。

　　6、点击按钮的时候，查找用户名，密码。

　　然后用ajax传过去。成功的时候还有一个回调函数，这个函数就是用来输出数据的。

 

　　然后该写接口了，正常项目中，接口应该一次写完的。（上面的接口已经写好，就是url里面的。）

　　注意：像返回的参数，status和info，到时候直接和后端定好。

　　建议：写一步测试一步。然后将边界条件加上去，边界条件：

　　error：像用户请求错误的时候，是不是要看一下请求错误的值。

　　7、 后端：

　　　　在routes文件夹下的user.js里，添加一个登录接口。

　　8、但是controller层下没有login这个方法，所以去定一个。

　　9、首先先将login这个方法导出去，然后在login这个方法里，如果要进行登录进行什么？

　　　　首先拿到用户名和密码，然后验证用户名和密码是否存在，要去查，然后如果找到了要验证密码是否正确，如果正确就登录成功了。然后因为注册的时候密码进行加密，所以后端这里登陆的时候如果要验证的话也要加密一下进行比对。

 

　　10、然后要接收一下（注：post用req.body进行接收，get请求用req.query进行接收）

　　　　引进来一个userModel，传一个username。后边有个回调，里面有个返回值，如果存在返回密码，密码进行加密，然后如果密码等于之前加密过的，返回登陆成功。如果不存在告诉用户，用户名不存在，登录失败。

　　11、回到前端：

　　public下的js下的login.js文件。如果data.status为true时，alert（data.info），为else时也alert(data.info),然后刷新页面。下一个问题，登录注册那里发生改变。持久登录。

　　12、而如何实现持久登录呢，就用token，详解我的随笔token。

　　13、回到后端：

　　　　到controller层，引入token模块。

　　然后在用户登陆成功以后生成一个token：

　　最后一个参数是登录的时间，60*60是秒数，不加单位默认是秒，1h是小时。

　　然后payload和secrent都没有，在上边简单设置一下。

　　secret是个盐，一般用sha256加密一下。然后声明一个变量接收一下JWT：

　　var token = JWT.sign(payload,secret,{expiresIn:"1h"})

　　token的使用顺序也参考day-06-token

　　14、导入完了token之后怎么做呢？创建cookie存储token。

　　　　第一个cookie的key值，第二个cookieval值。

　　15、接下来做什么事情呢？将username放在登录那里。

　　　　就是当登陆成功的时候，自己的username名称会显示在登录的位置。

　　　　首先也将username存储在cookie中。res.cookie("user",username);注意：cookie是绘画跟踪技术，主要用来做验证的。

　　16、 回到前端：

　　　　public文件夹下的common下的header.js。

　　　　下新增一个ul下的两个li，一个js_username，一个js_logout，一个是退出，ul设置hide。

　　　　主要就是当找到这个id的时候隐藏。然后呢，在成功的时候，还要加一个。

　　　　将user显示在那里，接下来应该做什么呢，应该做退出，点击退出的时候，删除cookie。因为一删除cookie，所有账号密码就应该退出了。

　　17、删除cookie：

　　　　最后记得调用方法。confirm属于提示框，一个确定选项，一个取消选项。

 

 

至此，一个简单的后台管理系统的登录及注册就写好了，之后简单写一下新增、增加之后的列表及如何分页的分析。