node+ajax实战案例(4)
4.用户登录实现
4.1.用户登录实现思路
1 用户输入登录信息,点击登录的时候把用户登录的这些信息收集起来,然后组装数据通过ajax方式发送到后台
2 后台接到用户输入的登录信息,把这些信息拿去和数据库中的数据做比对,如果成功返回成功信息,如果失败返回失败信息
3 后台返回信息给前台页面,在前台页面中做相应的逻辑处理
4.2.收集用户登录信息并且发送到后台
<script>
var oBtn = document.getElementById('btn');
var oPass = document.getElementById('password');
var oUser = document.getElementById('username');
oBtn.onclick = function () {
ajax({
method: 'post',
url: '/login',
data: 'username='+oUser.value+'&password='+oPass.value,
success: function (result) {
console.log(result)
}
})
}
</script>
4.3.接收用户登录信息和后台做比对
if(url_obj.pathname === '/login' && req.method === 'POST'){
var user_info = '';
req.on('data',function (chunk) {
user_info+=chunk;
});
req.on('end', function (err) {
res.setHeader('content-type', 'text/html;charset=utf-8');
var user_obj = queryString.parse(user_info);
if(!err){
var sql = 'SELECT * FROM admin WHERE username="'+user_obj.username+'" AND password="'+user_obj.password+'"';
connection.query(sql, function (error, result) {
if(!error && result.length !== 0) {
res.write('{"status":0, "message": "登录成功"}');
}else{
res.write('{"status":1, "message": "用户名或者密码不正确"}')
}
res.end();
});
}
})
return;
}
4.4.前端收到后台发送的信息,根据信息做具体业务处理
var oBtn = document.getElementById('btn');
var oPass = document.getElementById('password');
var oUser = document.getElementById('username');
oBtn.onclick = function () {
ajax({
method: 'post',
url: '/login',
data: 'username='+oUser.value+'&password='+oPass.value,
success: function (result) {
if (result.status === 0){
window.location.href = '/admin';
}else{
alert(result.message);
}
}
})
}
5.客户列表渲染
5.1.新建数据表
数据表user的规划字段如下:
id int primary key auto_increment,
username varchar(30) not null,
email varchar(30) not null,
phone char(11) not null,
qq char(11) not null
新建完成后手动添加几条数据
5.2.发送请求获取数据
在admin.html文件中发送ajax请求
<script>
//获取表格数据
ajax({
method: 'get',
url: '/list',
success: function (result) {
console.log(result)
}
});
</script>
5.3.后台接收请求,并从数据库中查询出数据,返回给前端页面
// 返回整个表格数据
if(url_obj.pathname === '/list' && req.method === 'GET'){
var sql = 'SELECT * FROM user';
connection.query(sql, function (error, result) {
if(!error && result){
res.setHeader('content-type','text/plain;charset=utf-8');
res.write(JSON.stringify(result));
res.end();
}else {
console.log(error)
}
})
return;
}
5.4.前端接收到后台返回的数据,生成表格
//获取表格数据
ajax({
method: 'get',
url: '/list',
success: function (result) {
for(var i=0; i<result.length;i++){
var oTr = document.createElement('tr');
for(var item in result[i]){
var oTd = document.createElement('td');
oTd.innerHTML = result[i][item];
oTr.appendChild(oTd);
}
var oP = document.createElement('td');
oP.innerHTML = '<button class="btn btn-primary ">修改</button>\n' +
'<button class="btn btn-danger">删除</button>';
oTr.appendChild(oP);
oTable.appendChild(oTr);
}
}
});
螺钉课堂视频课程地址:http://edu.nodeing.com
node+ajax实战案例(4)的更多相关文章
- node+ajax实战案例(2)
2.静态资源渲染 2.1.创建http服务器 var http = require('http'); var url = require('url'); var app = http.createSe ...
- node+ajax实战案例(6)
8.删除客户 8.1.发送id到后台 删除用户信息比较简单,只需要把对应行的id发送到后台就可以了 oTable.onclick = function (ev) { var ev = ev || ev ...
- node+ajax实战案例(5)
6.添加客户 6.1.点击添加按钮,弹出表单框 // 添加用户 显示对话框 var addBtn = document.getElementById('add-btn'); var addUser = ...
- node+ajax实战案例(3)
3.用户注册实现 3.1.注册用户功能的实现逻辑 1 用户在表单上输入注册信息 2 点击注册后,收集用户在表单上输入的注册信息并且发送给后台 3 后台接收用户发送过来的注册信息 4 后台需要处理数据并 ...
- node+ajax实战案例(1)
1.mysql入门 1.1.数据库相关概念 1.1.1.什么是数据? 描述事物的符号记录称为数据,描述事物的符号可以是数字.文字.声音.图片.视频等,有多种表现形式,都可以经过数字化后存入计算机 1. ...
- 《Node.js实战(双色)》作者之一——吴中骅访谈录
- 如何从40亿整数中找到不存在的一个 webservice Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库 WPF实战案例-打印 RabbitMQ与.net core(五) topic类型 与 headers类型 的Exchange
如何从40亿整数中找到不存在的一个 前言 给定一个最多包含40亿个随机排列的32位的顺序整数的顺序文件,找出一个不在文件中的32位整数.(在文件中至少确实一个这样的数-为什么?).在具有足够内存的情况 ...
- Flume实战案例运维篇
Flume实战案例运维篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Flume概述 1>.什么是Flume Flume是一个分布式.可靠.高可用的海量日志聚合系统,支 ...
- 使用Zabbix监控Nginx服务实战案例
使用Zabbix监控Nginx服务实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编译安装nginx步骤详解并开启状态页 博主推荐阅读: https://www.cn ...
随机推荐
- JavaScript (四) js的基本语法 - - 函数练习、arguments、函数定义、作用域、预解析
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.函数练习 1.求最值 // - 求2个数中的最大值 function getMax(num1, nu ...
- 利用init进程监控底层节点的方法架构
native层利用底层节点变化,再针对变化进行相应的函数调用,实现某些功能. 架构如下: 底层提供节点更新,以及healthd读取节点的实现,都比较简单.而其余部分比较关键. 特别注意init监控pr ...
- Java实现 LeetCode 640 求解方程(计算器的加减法计算)
640. 求解方程 求解一个给定的方程,将x以字符串"x=#value"的形式返回.该方程仅包含'+',' - '操作,变量 x 和其对应系数. 如果方程没有解,请返回" ...
- Java实现蓝桥杯日志统计
标题:日志统计 小明维护着一个程序员论坛.现在他收集了一份"点赞"日志,日志共有N行.其中每一行的格式是: ts id 表示在ts时刻编号id的帖子收到一个"赞" ...
- Java实现 LeetCode 172 阶乘后的零
172. 阶乘后的零 给定一个整数 n,返回 n! 结果尾数中零的数量. 示例 1: 输入: 3 输出: 0 解释: 3! = 6, 尾数中没有零. 示例 2: 输入: 5 输出: 1 解释: 5! ...
- 第七届蓝桥杯JavaA组省赛真题
解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.煤球数量 煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形), 第 ...
- Java实现 洛谷 P1055 ISBN号码
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; public ...
- Java实现交替字符串
1 问题描述 输入三个字符串s1.s2和s3,判断第三个字符串s3是否由前两个字符串s1和s2交错而成且不改变s1和s2中各个字符原有的相对顺序. 2 解决方案 此处采用动态规划法,可以较大的提高时间 ...
- java实现第五届蓝桥杯写日志
写日志 写日志是程序的常见任务.现在要求在 t1.log, t2.log, t3.log 三个文件间轮流 写入日志.也就是说第一次写入t1.log,第二次写入t2.log,... 第四次仍然 写入t1 ...
- CSS学习:overflow:hidden解决溢出,坍塌,清除浮动
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌. CSS样式: .container{ background-color: bla ...