Node基础入门（四）：案例

时间 2020-04-19

标签 node 基础入门案例繁體版

原文原文链接

上一篇《Node基础入门（三）：数据交互》html

用以上所学知识开发一个登陆/注册的程序。node

1、需求分析

输入帐户和密码，点击登陆，查询数据库是否有该帐户，有则继续检查密码是否正确，不正确则提示“密码错误”，正确则登陆成功，跳转后台页面，无该帐户则提示“帐户不存在”；
输入帐户和密码，点击注册，查询数据库是否有该帐户，有则提示“帐户已存在”，无则注册成功；
因为还未学习数据库，因此咱们用一个user对象（JSON）代替用户表。

2、接口设计

名称：login / reg（注册和登陆接口几乎相同）
请求方式：get / post（登陆用get，注册用post）
参数：jquery
- username 帐户（字符串）
- password 密码（字符串）
返回：ajax
- err 错误码（数字，0：正确，1：错误）
- msg 返回信息（字符串）

3、代码开发

app.js数据库

let http = require('http')
let url = require('url')
// 将post的数据从字符串类型转化为咱们须要的json类型
let querystring = require('querystring')
// 为了成功访问http://localhost:8080/login.html
let fs = require('fs')

// 这里用一个json代替数据库，假设用户表已经有一个用户admin，密码是123
let 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.htmlnpm

<!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.htmljson

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>后台</title>
</head>
<body>
<h2>这里是后台首页</h2>
</body>
</html>

4、测试截图

1. 帐户：admin，密码：123，点击登陆，登陆成功segmentfault

2. 帐户：admin，密码：111，点击登陆，密码错误app

3. 帐户：eric，密码：123，点击登陆，帐户不存在post

4. 帐户：eric，密码：123，点击注册，注册成功

5. 帐户：eric，密码：123，点击登陆，登陆成功

6. 帐户：eric，密码：123，点击注册，帐户已存在