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

、创建html页面

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

index.html 默认主页
register.html 用于注册账号
sign_in.html 用于登录账号
home.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对应的随机数值存在，就显示已登录，否则显示未登录

作者：努力了吗梁同学
链接：https://juejin.im/post/5ee58c926fb9a047ae454143
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

文来源：掘金
本文作者：古柳_Deserts_X
github：https://github.com/lidaguang1989/javascript-knowhow

不知不觉做前端已经五年多了，无论是从最初的jQuery还是现在火热的Angular，Vue，React等前端框架，甚至是nodejs等服务端的兴起，归根到底，我始终觉着一切的核心还是JavaScript。于是最近就有了一个想法，想要梳理一下这些年学习以及使用JS的心得。

本系列文章主要是针对JS的相关知识点做一个类似提纲似的提炼，一来可以作为今后温故知新的参照；二来也是希望能够帮助大家更加系统清晰的理解JS这门语言。

本系列文章主要参照了Nicholas C. Zakas 的两本著作：《JavaScript高级程序设计（第3版）》及《编写可维护的JavaScript》"

者：岁岁来源：博学谷

好用的JS前端开发框架有哪些？对于一个程序员来说，选择一款好用的开发工具可以大大提高工作效率，底层前端框架领域中早先jquery称霸，近年MVVM类型的框架成为主流，Vue、React和Angular三大框架较为常见。今天小编就介绍一些JS前端开发框架供大家选择。

一、 Foundation框架

Foundation框架比Bootstrap略显高大上一点，但他们俩的设计理念都非常清楚，Bootstrap有引导，尝试处理你项目中的一切所需。Foundation有基础、地基及支柱，给项目中强有力的创造与支持。相对于Bootstrap丰富的组件及插件，Foundation仅提供了有限的几种元素，其目标是即使你使用预定义的UI元素，也不应该与大家的网站长得太像。

二、 Bootstrap

Bootstrap在业界非常受欢迎，以至于有很多前端框架都在其基础上开发，如WeX5就是在Bootstrap源码基础上优化而来。Bootstrap是基于HTML、CSS和Javascript的，简洁灵活使得Web开发更加敏捷。提供优雅的HTML和CSS规范，在jQuery的基础上进行更加个性化和人性化的完善。兼容大部分jQuery插件，并包含了丰富的Web组件，如下拉菜单、按钮式下拉菜单、导航条、按钮组、分页、缩略图、进度条和媒体对象等。自带了13个jQuery插件，其中有模式对话框、标签页、滚动条和弹出框等。

三、Curl

Curl是一个命令行工具，用于通过HTTP(s)、FTP和数十种其它协议进行请求。使用Curl可以进行文件下载、检查相应标题和自由访问远程数据。在Web开发中Curl经常和RESTfulAPI一起使用用于测试连接。

四、Tree

Tree是一个小型的命令行实用程序，将目录中的文件以可视化的方式进行显示。它采用递归运行的方式，遍历每个级别的嵌套并绘制所有内容的格式树。这样就能快速地浏览并查找需要的文件。

五、Tmux

根据维基的解释，Tmux是一个终端复用器。通俗地说，它是一个能将多个终端连接到单个终端会话的工具。Tmux允许用户在终端中的程序之间切换，添加屏幕窗格，并将多个终端连接到同一个会话，使其保持同步。在远程服务器上工作时，Tmux特别有用，允许用户创建新的选项卡而无需再次登录。

六、du

du命令用于生成关于文件和目录的空间使用情况的报告。du很容易使用，可以递归地运行，遍历每个子目录并返回每个文件的大小。du常见用例：当某个驱动器的空间不足，用户不清楚每个存储器的大小。使用此命令可以快速查看每个文件夹所占用的存储空间，从而找到占用最大空间的存储器。

七、 AUI

AUI专为APIClound设计的一套框架，解决了许多移动端开发实际中遇到的许多问题是一个纯CSS框架。使用容器+布局+模块的构建方式，JS辅助，更自由更灵活更易于扩展使用。遵循GoogleMaterial设计规范，完美适配各个机型。面向HTML5，使用CSS3实现动画交互，轻量级高性能。

八、AmazeUI

据称是中国首个开源HTML5跨屏前端框架。妹子UI以移动优先为理念，从小屏逐渐到大屏，实现响应式网页。AmazeUI包含20+个CSS组件、20+个JS组件，更有多个包含不同主题的Web组件。相比国外框架，UI关注中文排版提供本地化支持。面向HTML5开发，使用CSS3来实现动画交互，轻量级高性能。

九、FrozenUI

FrozenUI是一款开源简单易用，轻量敏捷的移动端框架。基于手Q样式规范，目前全面应用于企业手Q增值业务中。基础样式效果简单色调清爽，社区活跃，组件自然不少。包括按钮、列表、表单、通知、提示条、弹出框、选项卡等等常用组件。还包括一个FrozenJs的JS组件库。可以在主流的Android和IOS上应用。基本样式使用离线包的方式减少请求提供快速接入方案。

程序员在不同业务场景下的角色互换，需要掌握多种开发工具，因此多了解一些JS前端开发框架对于工作非常有帮助。

在线咨询

上一篇：使用CSS完成元素居中的七种方法
下一篇：怎样选择近视镜框

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

、创建html页面

主要代码片段

二、Node服务器

三、主要思路

register.html

/register

sign_in.html

/sign_in

/home

您的项目需求