如何用Node.js和JSON快速构建一个动态服务器？

本文共计937个文字，预计阅读时间需要4分钟。

创建HTML页面，包括以下四个页面：index.（默认主页）、register.（用于注册账号）、sign_in.（用于登录账号）、home.（用于显示登录后的页面）。主要代码片段如下：

首页 欢迎来到首页

注册账号 注册页面

登录账号 登录页面

登录后页面 欢迎回来

一、创建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="img.558idc.com/uploadfile/allimg/210405/191S13327-0.jpg"></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="img.558idc.com/uploadfile/allimg/210405/191S13327-0.jpg"></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 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搭建动态服务器内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！