使用Node.js和JSON搭建简单的动态服务器

时间  2020-06-15
标签 使用 node.js node json 搭建 简单 动态 服务器 栏目 Node.js 繁體版
原文   原文链接

1、建立html页面

建立4个页面，index.html、register.html、sign_in.html、home.htmljavascript

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

主要代码片断

register.htmlcss

<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.htmlhtml

<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.htmljava

<p>
    {{loginStatus}}
</p>
<p>
    你好,{{user.name}}
</p>
<p>
    <a href="sign_in.html">登陆</a>
</p>
复制代码

2、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)
复制代码

3、主要思路

register.html

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

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

/register

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

sign_in.html

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

/sign_in

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

/home

获取登入成功后 cookie 的值。读取 session 中对应的随机数。若是随机数和session对应的随机数值存在，就显示已登陆，不然显示未登陆后端

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程