Node基础入门（四）：案例
上一篇《Node基础入门（三）：数据交互》
用以上所学知识开发一个登录/注册的程序。
一、需求分析
- 输入账户和密码，点击登录，查询数据库能否有该账户，有则继续检查密码能否正确，不正确则提醒“密码错误”，正确则登录成功，跳转后端页面，无该账户则提醒“账户不存在”；
- 输入账户和密码，点击注册，查询数据库能否有该账户，有则提醒“账户已存在”，无则注册成功；
- 因为还未学习数据库，所以我们用一个user对象（JSON）代替客户表。
二、接口设计
- 名称：
login/reg（注册和登录接口几乎相同） - 请求方式：
get/post（登录用get，注册用post） - 参数：
username账户（字符串）password密码 （字符串）
- 返回：
err错误码（数字，0：正确，1：错误）msg返回信息（字符串）
三、代码开发
app.js
let http = require('http')let url = require('url')// 将post的数据从字符串类型转化为我们需要的json类型let querystring = require('querystring')// 为了成功访问http://localhost:8080/login.htmllet fs = require('fs')// 这里用一个json代替数据库，假设客户表已经有一个客户admin，密码是123let user = { admin: '123'}http.createServer((req, res) => { // 获取数据 let path, get, post if (req.method === 'GET') { let {pathname, query} = url.parse(req.url, true) path = pathname get = query complete() } else if (req.method === 'POST') { let result = [] path = req.url req.on('data', buffer => { result.push(buffer) }) req.on('end', () => { // 合并片段，而后转成字符串，最后解决成json post = querystring.parse(Buffer.concat(result).toString()) complete() }) } function complete () { if (path === '/login') { // 处理中文乱码 res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' }) let {username, password} = get if (!user[username]) { res.end(JSON.stringify({ err: 1, msg: '账户不存在' })) } else if (user[username] !== password) { res.end(JSON.stringify({ err: 1, msg: '密码错误' })) } else { res.end(JSON.stringify({ err: 0, msg: '登录成功' })) } } else if (path === '/reg') { res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' }) let {username, password} = post if (user[username]) { res.end(JSON.stringify({ err: 1, msg: '账户已存在' })) } else { user[username] = password res.end(JSON.stringify({ err: 0, msg: '注册成功' })) } } else { // 说明是文件，则调用fs.readFile()，因而才能成功访问http://localhost:8080/login.html fs.readFile(`.${req.url}`, (err, data) => { if (err) { res.end('404') } else { res.end(data) } }) } }}).listen(8080)login.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录/注册</title></head><body><div class="wrapper"> 账户：<input type="text" id="username"><br> 密码：<input type="password" id="password"><br> <button id="login">登录</button><br> <button id="reg">注册</button></div><!--我们需要引入jQuery（目的是发送ajax请求），利用之前学到的npm install jquery安装jquery，成功后将node_modules/jquery/dist/里面的jquery.min.js拷贝至项目根目录--><script src="jquery.min.js"></script><script> // 点击登录 $('#login').click(() => { $.ajax({ url: '/login', method: 'get', data: { username: $('#username').val(), password: $('#password').val() }, dataType: 'json', success (res) { if (res.err) { alert(res.msg) } else { alert('登录成功') location.href = 'admin.html' } } }) }) // 点击注册 $('#reg').click(() => { $.ajax({ url: '/reg', method: 'post', data: { username: $('#username').val(), password: $('#password').val() }, dataType: 'json', success (res) { if (res.err) { alert(res.msg) } else { alert('注册成功') } } }) })</script></body></html>admin.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>后端</title></head><body><h2>这里是后端首页</h2></body></html>四、测试截图
1. 账户：admin，密码：123，点击登录，登录成功
2. 账户：admin，密码：111，点击登录，密码错误
3. 账户：eric，密码：123，点击登录，账户不存在
4. 账户：eric，密码：123，点击注册，注册成功
5. 账户：eric，密码：123，点击登录，登录成功
6. 账户：eric，密码：123，点击注册，账户已存在
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Node基础入门（四）：案例
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Node基础入门（四）：案例
