【技术分享】WEB前端全栈成长计划(二阶段)-Node.js实战案例-AJAX用户登陆

用户登陆案例是所有前后端初学者的第一关，还记得学习HTML表单<form>标签时，已经知悉可以通过<form action="/login" method="post">来向服务器提交数据，早期用户登陆大多通过它来完成。JavaScrip语言出现后对表单动态数据进行异步检测，极大的提高了用户的体验和降低了服务器的数据处理压力。<form>表单提交现在也有很多项目仍然在使用，因为它简单。

随着前端技术的演变发展，层出不穷的前端框架纷纷登场，对于表单数据提交也从HTML<form>逐步演变为通过AJAX技术来提交。今天我们分享一个基于Node.js下Koa2框架的AJAX用户登陆的案例实践。

       实践条件：

1． WIN10X64

2． Node.js安装

3． Koa2框架安装和基本使用

掌握HTML、CSS、 JavaScript基础，代码部分通过Koa2 WEB框架中完成

       实践目标：

       设计一个简单的用户登陆页面，输入帐号+密码后，通过AJAX提交到服务端接口进行处理，由服务器端判断并返回登陆结果。用户登陆页面将服务器返回结果弹出。

一、Node.js初始化项目

    cd d:\Gitee
    koa2 login
    cd login && cnpm install
    npm start

二、用户登陆首页

    Pug模板引擎语法编写

源代码： views/index.pug

block content
    h1 登陆华为帐号
    div 华为帐号：
      input(type='text' id='account')
    div 帐号密码：
      input(type='password' id='pwd')
    button(type='button' id='btn') 登陆

三、加载js资源

login.js 处理登陆提交及ajax请求发送

源代码： views/layout.pug

    block content
    <script src='/javascripts/login.js'></script>

四、登陆核心代码

    通过ajax()函数，使用ajax技术向服务器提交数据

源代码： javascripts/login.js

//alert('login') // 测试login.js是否能在首而成功加载
 
var btn = document.getElementById("btn");
var account = '';
var pwd = '';
 
btn.onclick = function(){
    account = document.getElementById("account").value;
    pwd = document.getElementById('pwd').value;
 
    ajax({
        type: 'post',
        url: '/login',
        data:{
            account: account,
            pwd: pwd
        },
        success: function(data){
            alert(data)
        }
    })
 
// ajax()函数使用ajax向服务器提交数据
    function ajax(opt){
 
        var defaultParam = {
            type: 'get',
            url: '#',
            data: {},
            async: true,
            success: function(){}
        }
 
        for(var key in opt){
            defaultParam[key] = opt[key];
        }
 
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
 
        var paramStr = "";
        for(var k in defaultParam.data){
            paramStr += k + '=' + defaultParam.data[k] + '&';
        }
        paramStr = paramStr.substr(0,paramStr.length - 1);
 
        console.log(paramStr);
 
        if(defaultParam.type == 'get'){
            xhr.open(defaultParam.type,defaultParam.url + '?' + paramStr,defaultParam.async);
            xhr.send()
        }else{
            xhr.open(defaultParam.type,defaultParam.url,defaultParam.async); // post请求
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            xhr.send(paramStr)
        }
 
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    defaultParam.success(xhr.responseText);
                }
            }
        }
    }
}

五、服务端WEB接口配置

在login.js中我们自定义ajax()方法中url对应的接口，在此配置

源代码： app.js

// 未尾添加
 
app.use(async function (ctx){
  if(ctx.path == "/login"){
    if(ctx.request.body.account == 'zhoubo' && ctx.request.body.pwd == '123456'){
      ctx.body = '登陆成功 ！'
    }else{
      ctx.body = '登陆失败 ！'
    }
  }
  
})
 
module.exports = app

六、测试代码

1、浏览器访问 localhost:3000

2、帐号 + 密码 正确,服务端返回 "登陆成功 !" 否则 返回 "登陆失败" 

3、测试帐号：zhoubo  密码：123456

同时分享项目Gitee地址，有需要的可以下载代码

https://gitee.com/net_master/Ajax_Node/tree/master/Node.js实战案例-AJAX用户登陆

书山有路勤为径，学海无涯苦作舟!!!

我唯一的野心就是

根本不成为任何什么人

这似乎是最合理的一件事

                    ―――― 查尔斯

zhoubo

2020.8.6 at Great 108