前后交互--创建一个属于自己的博客网站(二)

登录模块的实现

前端页面这里不做阐述了,我们重点在后端

js验证

首先我们需要获取到用户的输入信息，进行js验证，这里我们使用jquery为我们提供的serializeArray()方法获取到用户提交的表单信息，
但因为serializeArray返回的是一个数组，其中存储的是形式于{name:'',value:''}的多个对象，不便于操作。
我们希望能直接得到一个存储着所有提交信息的对象，所以这里我们需要定义一个函数对serializeArray()的返回值进行处理。

function toObj(arry){
    let obj={}
    arry.forEach(element => {
        obj[element.name]=element.value
    });
    return obj
}

在得到提交信息的对象后，我们就可以对其值进行判断，判断用户的输入是否为空，若为空则阻止表单的提交，并且弹出提示信息

 
        $('#loginform').on('submit',function(){
            let arry=toObj($(this).serializeArray())
            if(arry.email.trim().length>0&&arry.password.trim().length>0){
                //继续向下执行的代码
                //....
            }else{
            //为空终止表单的提交
                alert('您的用户名或密码未输入')
                return false
            }
           
        })

服务器验证

这里我们需要用到第三方模块body-parser，使用npm安装完毕后，我们在app.js中引入body-parser,用app.use(body_parser.urlencoded({extend:false})拦截和处理所有请求参数。

//引入body-parser第三方模块对请求参数处理
const body_parser = require('body-parser')
//拦截所有请求，并对请求参数进行处理
app.use(body_parser.urlencoded({express:false}))

来到登录的路由，对请求参数解构，在数据库中查询用户输入的值是否存在，不存在就渲染错误页面，反之则将管理员页面响应给客户端，即登陆成功。

admin.post('/login', async(req, res) => {
    const { email, password } = req.body
    let u = await user.findOne({ eamil: email.trim(),password:password.trim()})
    if (u == null) {
        res.status(400).render('admin/login_err')
    } else {
        res.render('admin/admin')
    }
    
    
})

至此登录模块完成。

session记录用户登录信息

实际上我们真的登录成功了吗，其实并没有，当我们再次发送请求时，服务器由不认识我们了，这是由于http协议的无状态性，每次响应都是独立的，完成响应后服务器与客户端的联系就断开了。
为解决这样的问题，我们引入express-session第三方模块，session可将用户信息存储到服务端。

//导入express-session模块
const session = require('express-session')
//配置session
app.use(session({secret:'secret key'}))

在用户登录路由将用户名赋值给req.session.username,用于记录用户登录信息。

admin.post('/login', async (req, res) => {
    const { email, password } = req.body
    let u = await user.findOne({ eamil: email.trim(), password: password.trim() })
    if (u == null) {
        res.status(400).render('admin/login_err')
    } else {
        //将用户名存储在请求对象中
        req.session.username = u.username
        //req中存储着服务器app对象
        req.app.locals.userInfo = u
        //redirect:重定向
        res.redirect('/admin/user')
    }


})

回到app.js文件中，用use中间件拦截所有请求，判断用户的登录状态，如果用户访问的不是登录页面，并且用户的登录状态不存在，则重定向到登录页面，反之则将请求传递到下一个路由处理。

app.use('/admin', (req, res,next) => {
    if (req.url != '/login' && !req.session.username) {
        res.redirect('/admin/login')
    } else {
        next()
    }
})

至此登录模块才真正的完成了。