网络编程 
首页 > 网络编程 > 浏览文章

如何利用Node.js与JSON搭建简单的动态服务器

(编辑:jimmy 日期: 2024/11/7 浏览:3 次 )

一、创建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="/UploadFiles/2021-04-02/jquery.min.js">

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="/UploadFiles/2021-04-02/jquery.min.js">

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('"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 "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对应的随机数值存在,就显示已登录,否则显示未登录

总结

上一篇:原生JS实现无缝轮播图片
下一篇:js+css实现全屏侧边栏
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。