快捷導(dǎo)航

如何利用Node.js與JSON搭建簡(jiǎn)單的動(dòng)態(tài)服務(wù)器

更新時(shí)間：2020年06月16日 08:43:51 作者：努力了嗎梁同學(xué)

這篇文章主要給大家介紹了關(guān)于如何利用Node.js與JSON搭建簡(jiǎn)單的動(dòng)態(tài)服務(wù)器的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Node.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、創(chuàng)建html頁(yè)面

創(chuàng)建4個(gè)頁(yè)面，index.html、register.html、sign_in.html、home.html

index.html 默認(rèn)主頁(yè)
register.html 用于注冊(cè)賬號(hào)
sign_in.html 用于登錄賬號(hào)
home.html 用于顯示登錄后的頁(yè)面

主要代碼片段

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">注冊(cè)</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('注冊(cè)成功')
  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服務(wù)器

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

if (!port) {
 console.log('請(qǐng)輸入指定端口。如：\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 文件,轉(zhuǎn)化為對(duì)象
 const session = JSON.parse(fs.readFileSync('./session.json').toString())

 if (path === '/sign_in' && method === 'POST') {
  // 讀數(shù)據(jù)庫(kù)
  let userArray = JSON.parse(fs.readFileSync('./database/users.json'))
  const array = []
  // 每次接受數(shù)據(jù)就添加進(jìn)數(shù)組
  request.on('data', (chunk) => {
   array.push(chunk)
  })
  request.on('end', () => {
   // 轉(zhuǎn)化字符串
   const string = Buffer.concat(array).toString()
   // 在轉(zhuǎn)化為對(duì)象
   const obj = JSON.parse(string)
   // 找到符合的 user
   const user = userArray.find(user => user.name === obj.name && user.password === obj.password) // 成功返回符合的對(duì)象，失敗返回undefined
   if (user === undefined) { // 失敗
    response.statusCode = 400
    response.setHeader('content-Type', 'text/JSON; charset=UTF-8')
    response.end(`{"errorCode":4001}`)
   } else { // 成功
    response.statusCode = 200
    // 設(shè)置 Cookie
    const random = Math.random()
    session[random] = {
     user_id: user.id
    }
    // 寫(xiě)入數(shù)據(jù)
    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 中讀取對(duì)應(yīng)的值
   const userId = session[sessionId].user_id
   // 讀數(shù)據(jù)庫(kù)
   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 {
   // 讀取源文件內(nèi)容
   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('監(jiān)聽(tīng) ' + port + ' 成功！請(qǐng)輸入下列地址訪問(wèn)\nhttp://localhost:' + port)

三、主要思路

register.html

使用jQuery的ajax將數(shù)據(jù)發(fā)送請(qǐng)求 /register 給后端，成功則跳轉(zhuǎn)到 sign_in.html

數(shù)據(jù)需要使用 JSON.stringify 轉(zhuǎn)化為字符串在提交

/register

讀取 users.json 的數(shù)據(jù)，創(chuàng)建一個(gè)空數(shù)組，將傳遞過(guò)來(lái)的參數(shù) push 進(jìn)去。將數(shù)組轉(zhuǎn)換為字符串，在轉(zhuǎn)換為對(duì)象。
獲取數(shù)據(jù)庫(kù)中最小的 id 值，將數(shù)據(jù)組成新的對(duì)象，添加進(jìn)入數(shù)據(jù)庫(kù) 中。

sign_in.html

使用ajax將數(shù)據(jù)發(fā)送請(qǐng)求 /sign_in 給后端，成功則跳轉(zhuǎn) home.html

/sign_in

讀取 users.json 的數(shù)據(jù)，創(chuàng)建一個(gè)空數(shù)組，將傳遞過(guò)來(lái)的參數(shù) push 進(jìn)去。將數(shù)組轉(zhuǎn)換為字符串，在轉(zhuǎn)換為對(duì)象。
在讀取后的數(shù)據(jù)庫(kù)中，查找有沒(méi)有符合條件的 user，成功返回讀取后的對(duì)象，失敗返回 undefined。
如果成功，設(shè)置隨機(jī)數(shù)，將隨機(jī)數(shù)的值與 user的id 綁定。并添加到 session.json 中。然后 setHeader，將cookie發(fā)送到瀏覽器。

/home

獲取登入成功后 cookie 的值。讀取 session 中對(duì)應(yīng)的隨機(jī)數(shù)。如果隨機(jī)數(shù)和session對(duì)應(yīng)的隨機(jī)數(shù)值存在，就顯示已登錄，否則顯示未登錄

總結(jié)

到此這篇關(guān)于如何利用Node.js與JSON搭建簡(jiǎn)單的動(dòng)態(tài)服務(wù)器的文章就介紹到這了,更多相關(guān)Node.js與JSON搭建動(dòng)態(tài)服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: