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

举报
Zhoubo 发表于 2020/08/06 13:25:12 2020/08/06
【摘要】 随着前端技术的演变发展,层出不穷的前端框架纷纷登场,对于表单数据提交也从HTML<form>逐步演变为通过AJAX技术来提交。今天我们分享一个基于Node.js下Koa2框架的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

 


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200