一、创建html页面

创建4个页面,index.html、register.html、sign_in.html、home.html

  • index.html 默认主页
  • register.html 用于注册账号
  • sign_in.html 用于登录账号
  • home.html 用于显示登录后的页面

主要代码片段

register.html

<form id="registerForm">
 <div>
  <label for="">用户名:<input type="text" name="name" id=""></label>
 </div>
 <div>
  <label for="">密码:<input type="password" name="password" id=""></label>
 </div>
 <div>
  <button type="submit">注册</button>
 </div>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
let $form = $('#registerForm')
$form.on('submit', (e) => {
 e.preventDefault()
 const name = $form.find("input[name=name]").val()
 const password = $form.find('input[name=password').val()
 console.log(name, password)
 // pass AJAX post data
 $.ajax({
  method: 'post',
  url: '/register',
  contentType: 'text/json; charset=UTF-8',
  data: JSON.stringify({
   name, // name: name 
   password // password: password
  })
 }).then(() => {
  alert('注册成功')
  location.href = '/sign_in.html'
 }, () => {})
})
</script>

sign_in.html

<form id="signInForm">
 <div>
  <label for="">用户名:<input type="text" name="name" id=""></label>
 </div>
 <div>
  <label for="">密码:<input type="password" name="password" id=""></label>
 </div>
 <div>
  <button type="submit">登录</button>
 </div>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
 let $form = $('#signInForm')
 $form.on('submit', (e) => {
  e.preventDefault()
  // get name password
  const name = $form.find("input[name=name]").val()
  const password = $form.find('input[name=password').val()
  // pass AJAX post data
  $.ajax({
   method: 'POST',
   url: '/sign_in',
   contentType: 'text/json; charset=UTF-8',
   data: JSON.stringify({
    name,
    password
   })
  }).then(() => {
   alert('登录成功')
   location.href = '/home.html'
  }, () => {})
 })
</script>

home.html

<p>
 {{loginStatus}}
</p>
<p>
 你好,{{user.name}}
</p>
<p>
 <a href="sign_in.html">登录</a>
</p>

二、Node服务器

var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]

if (!port) {
 console.log('请输入指定端口。如:\nnode server.js 8888')
 process.exit(1)
}

var server = http.createServer(function (request, response) {
 var parsedUrl = url.parse(request.url, true)
 var pathWithQuery = request.url
 var queryString = ''
 if (pathWithQuery.indexOf('?') >= 0) {
  queryString = pathWithQuery.substring(pathWithQuery.indexOf('?'))
 }
 var path = parsedUrl.pathname
 var query = parsedUrl.query
 var method = request.method

 /******** main start ************/
 // 读取 session 文件,转化为对象
 const session = JSON.parse(fs.readFileSync('./session.json').toString())

 if (path === '/sign_in' && method === 'POST') {
  // 读数据库
  let userArray = JSON.parse(fs.readFileSync('./database/users.json'))
  const array = []
  // 每次接受数据就添加进数组
  request.on('data', (chunk) => {
   array.push(chunk)
  })
  request.on('end', () => {
   // 转化字符串
   const string = Buffer.concat(array).toString()
   // 在转化为对象
   const obj = JSON.parse(string)
   // 找到符合的 user
   const user = userArray.find(user => user.name === obj.name && user.password === obj.password) // 成功返回符合的对象,失败返回undefined
   if (user === undefined) { // 失败
    response.statusCode = 400
    response.setHeader('content-Type', 'text/JSON; charset=UTF-8')
    response.end(`{"errorCode":4001}`)
   } else { // 成功
    response.statusCode = 200
    // 设置 Cookie
    const random = Math.random()
    session[random] = {
     user_id: user.id
    }
    // 写入数据
    fs.writeFileSync('./session.json', JSON.stringify(session))
    response.setHeader("Set-Cookie", `'session_id=${random}; HttpOnly'`)
    response.end()
   }
  })
 } else if (path === '/home.html') {
  // 获取 Cookie
  const cookie = request.headers['cookie']
  let sessionId
  try { // 读取 Cookie 中的 id 值
   sessionId = cookie.split(';').filter(s => s.indexOf('session_id=') >= 0)[0].split('=')[1]
  } catch (error) {}
  if (sessionId && session[sessionId]) {
   // 从 session 中读取对应的值
   const userId = session[sessionId].user_id
   // 读数据库
   let userArray = JSON.parse(fs.readFileSync('./database/users.json'))
   // 找到符合的 user
   let user = userArray.find(user => user.id === userId)
   const homeHtml = fs.readFileSync('./public/home.html').toString()
   let string
   if (user) {
    string = homeHtml.replace('{{loginStatus}}', '已登录').replace('{{user.name}}', user.name)
    response.write(string)
   }
  } else {
   // 读取源文件内容
   const homeHtml = fs.readFileSync('./public/home.html').toString()
   // 替换文字
   const string = homeHtml.replace('{{loginStatus}}', '未登录').replace('{{user.name}}', '')
   response.write(string)
  }
  response.end()
 } else if (path === '/register' && method === 'POST') {
  response.setHeader('Content-Type', 'text/html; charset=UTF-8')
  // read database
  let userArray = JSON.parse(fs.readFileSync('./database/users.json')) // read database
  const array = []
  request.on('data', (chunk) => {
   array.push(chunk)
  })
  request.on('end', () => {
   // convert string
   const string = Buffer.concat(array).toString()
   // convert obj
   const obj = JSON.parse(string)
   // last user id
   const lastUser = userArray[userArray.length - 1]
   // new user
   const newUser = {
    id: lastUser ? lastUser.id   1 : 1,
    name: obj.name,
    password: obj.password
   }
   userArray.push(newUser)
   // write data
   fs.writeFileSync('./database/users.json', JSON.stringify(userArray))
  })
  response.end()
 } else {
  response.statusCode = 200
  let content
  // setting index
  const filePath = path === '/' ? '/index.html' : path
  // judge type
  const index = filePath.lastIndexOf('.')
  const suffix = filePath.substring(index)
  const fileType = {
   '.html': 'text/html',
   '.css': 'text/css',
   '.js': 'text/javascript'
  }
  response.setHeader('Content-Type', `${fileType[suffix] || "text/html"};charset=utf-8`)
  try {
   content = fs.readFileSync(`./public${filePath}`)
  } catch (error) {
   content = '文件路径不存在'
   response.statusCode = 404
  }
  response.write(content)
  response.end()
 }

 /******** main end ************/
})

server.listen(port)
console.log('监听 '   port   ' 成功!请输入下列地址访问\nhttp://localhost:'   port)

三、主要思路

register.html

使用jQuery的ajax将数据发送请求 /register 给后端,成功则跳转到 sign_in.html

数据需要使用 JSON.stringify 转化为字符串在提交

/register

读取 users.json 的数据,创建一个空数组,将传递过来的参数 push 进去。将数组转换为字符串,在转换为对象。
获取数据库中最小的 id 值,将数据组成新的对象,添加进入 数据库 中。

sign_in.html

使用ajax将数据发送请求 /sign_in 给后端,成功则跳转 home.html

/sign_in

读取 users.json 的数据,创建一个空数组,将传递过来的参数 push 进去。将数组转换为字符串,在转换为对象。
在读取后的数据库中,查找有没有符合条件的 user,成功返回读取后的对象,失败返回 undefined。
如果成功,设置随机数,将 随机数的值 与 user的id 绑定。并添加到 session.json 中。然后 setHeader,将cookie发送到浏览器。

/home

获取登入成功后 cookie 的值。读取 session 中对应的随机数。如果随机数和session对应的随机数值存在,就显示已登录,否则显示未登录

总结

到此这篇关于如何利用Node.js与JSON搭建简单的动态服务器的文章就介绍到这了,更多相关Node.js与JSON搭建动态服务器内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

如何利用Node.js与JSON搭建简单的动态服务器的更多相关文章

  1. nodejs npm package.json中文文档

    这篇文章主要介绍了nodejs npm package.json中文文档,本文档中描述的很多行为都受npm-config(7)的影响,需要的朋友可以参考下

  2. 基于win2003虚拟机中apache服务器的访问

    下面小编就为大家带来一篇基于win2003虚拟机中apache服务器的访问。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. node.js三个步骤实现一个服务器及Express包使用

    这篇文章主要介绍了node.js三个步骤实现一个服务器及Express包使用,文章通过新建一个文件展开全文内容,具有一定的参考价值,需要的小伙伴可以参考一下

  4. AngularJS下$http服务Post方法传递json参数的实例

    下面小编就为大家分享一篇AngularJS下$http服务Post方法传递json参数的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  5. 浅析Nodejs npm常用命令

    这篇文章主要介绍了浅析Nodejs npm常用命令的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

  6. nodejs 使用nodejs-websocket模块实现点对点实时通讯

    这篇文章主要介绍了nodejs 使用nodejs-websocket模块实现点对点实时通讯的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  7. JSON 入门教程基础篇 json入门学习笔记

    刚开始接触json的时候感觉有点奇怪的命名,后来使用才发现这么简单而且用好用,扩展性很强,这里就为大家整理一下

  8. nodeJs链接Mysql做增删改查的简单操作

    本篇文章主要介绍了nodeJs链接Mysql做增删改查的简单操作,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. PHP如何将图片文件上传到另外一台服务器上

    这篇文章主要介绍了PHP如何将图片文件上传到另外一台服务器上,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. Nodejs中使用captchapng模块生成图片验证码

    本篇文章主要介绍了Nodejs中使用captchapng模块实现图片验证码,非常具有实用价值,需要的朋友可以参考下

随机推荐

  1. Error: Cannot find module ‘node:util‘问题解决

    控制台 安装 Vue-Cli 最后一步出现 Error: Cannot find module 'node:util' 问题解决方案1.问题C:\Windows\System32>cnpm install -g @vue/cli@4.0.3internal/modules/cjs/loader.js:638 throw err; &nbs

  2. yarn的安装和使用(全网最详细)

    一、yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。二、yarn的特点:速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。三、y

  3. 前端环境 本机可切换node多版本 问题源头是node使用的高版本

    前言投降投降 重头再来 重装环境 也就分分钟的事 偏要折腾 这下好了1天了 还没折腾出来问题的源头是node 使用的高版本 方案那就用 本机可切换多版本最终问题是因为nodejs的版本太高,导致的node-sass不兼容问题,我的node是v16.14.0的版本,项目中用了"node-sass": "^4.7.2"版本,无法匹配当前的node版本根据文章的提

  4. nodejs模块学习之connect解析

    这篇文章主要介绍了nodejs模块学习之connect解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. nodejs npm package.json中文文档

    这篇文章主要介绍了nodejs npm package.json中文文档,本文档中描述的很多行为都受npm-config(7)的影响,需要的朋友可以参考下

  6. 详解koa2学习中使用 async 、await、promise解决异步的问题

    这篇文章主要介绍了详解koa2学习中使用 async 、await、promise解决异步的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. Node.js编写爬虫的基本思路及抓取百度图片的实例分享

    这篇文章主要介绍了Node.js编写爬虫的基本思路及抓取百度图片的实例分享,其中作者提到了需要特别注意GBK转码的转码问题,需要的朋友可以参考下

  8. CentOS 8.2服务器上安装最新版Node.js的方法

    这篇文章主要介绍了CentOS 8.2服务器上安装最新版Node.js的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. node.js三个步骤实现一个服务器及Express包使用

    这篇文章主要介绍了node.js三个步骤实现一个服务器及Express包使用,文章通过新建一个文件展开全文内容,具有一定的参考价值,需要的小伙伴可以参考一下

  10. node下使用UglifyJS压缩合并JS文件的方法

    下面小编就为大家分享一篇node下使用UglifyJS压缩合并JS文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

返回
顶部