zoukankan      html  css  js  c++  java
  • 项目中前后端代码的拆分

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

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

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

    前端代碼的複用。

    一:代码的复用。

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

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

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

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

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

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

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

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

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

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

      8loginregisterheader一样的道理,只是id名称换了一下,login插入到divregister插入div

      9、在page的原型方法里接收一下loginregister

      10index.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:datadb

      2、安装mongoosecnpm install mongoose --save

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

      4、导出mongoose

      5mongoose要做数据的增删改查,所以创建两个文件夹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");

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

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

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

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

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

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

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

      10

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

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

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

        })

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

        是(10)cb调用的,在里面先拿了表:

        然后设置表的字段。

      12、然后开始查:

        查一下userinfo里面传的参数,就是接收过来的对象:({usernameusername}

        后边的参数就是user.js

        里接收的参数。

       13:箭头函数,可以不加括号使用,

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

      15

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

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

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

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

        如果这个东西存在的话。

    18modelcontroller层的连接:

    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后边。

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

      最后加密后的输出:

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

      4、登录:

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

      5、 前端:

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

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

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

     

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

      注意:像返回的参数,statusinfo,到时候直接和后端定好。

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

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

      7、 后端:

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

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

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

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

      10、然后要接收一下(注:postreq.body进行接收,get请求用req.query进行接收)

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

      11、回到前端:

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

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

      13、回到后端:

        到controller层,引入token模块。

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

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

      然后payloadsecrent都没有,在上边简单设置一下。

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

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

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

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

        第一个cookiekey值,第二个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属于提示框,一个确定选项,一个取消选项。

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

  • 相关阅读:
    Linux--echo输出内容到控制台
    Web前端基础(14):jQuery基础(一)
    Web前端基础(13):JavaScript(七)
    Web前端基础(12):JavaScript(六)
    Web前端基础(11):JavaScript(五)
    Web前端基础(10):JavaScript(四)
    Web前端基础(9):JavaScript(三)
    Web前端基础(8):JavaScript(二)
    Web前端基础(7):JavaScript(一)
    Web前端基础(6):CSS(三)
  • 原文地址:https://www.cnblogs.com/-Bloom/p/10282009.html
Copyright © 2011-2022 走看看