一、创建html页面
创建4个页面，index.html、register.html、sign_in.html、home.html
- index.html 默认主页
- register.html 用于注册账号
- sign_in.html 用于登录账号
- home.html 用于显示登录后的页面
主要代码片段
register.html
sign_in.html
home.html
{{loginStatus}}
你好,{{user.name}}
登录
二、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
// 读取 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()
}
})
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搭建动态服务器内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！
