Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的 易于扩展的网络应用 · Node.js 借助事件驱动, 非阻塞 I/O 模型变得轻量和高效, 非常适合 运行在分布式设备 的 数据密集型 的实时应用
这篇文章主要为大家详细介绍了 node.js 实现简单的登录注册页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
首先需要新建四个文件
一个服务器 js
一个保存数据的 txt
一个登陆、一个注册页面 html
1、注册页面
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- regist
- </title>
- </head>
- <body>
- <div>
- <label for="user">
- 用户名
- </label>
- <input type="text" id="user">
- </div>
- <div>
- <label for="password">
- 密 码
- </label>
- <input type="password" id="password">
- </div>
- <div>
- <button id="register">
- 注册
- </button>
- </div>
- </body>
- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
- </script>
- <script>
- $(function() {
- $("#register").click(function() {
- $.ajax({
- url: "http://localhost:3000/register",
- type: "POST",
- data: {
- username: $("#user").val(),
- password: $("#password").val()
- },
- success: function(res) {
- alert(res);
- },
- error: function(err) {
- console.log(err);
- }
- })
- })
- });
- </script>
- </html>
2、登录界面
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- login
- </title>
- </head>
- <body>
- <div>
- <label for="user">
- 用户名
- </label>
- <input type="text" id="user">
- </div>
- <div>
- <label for="password">
- 密 码
- </label>
- <input type="password" id="password">
- </div>
- <div>
- <button id="login">
- 登录
- </button>
- <button id="register">
- <a href="regist.html">
- 注册
- </a>
- </button>
- </div>
- </body>
- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
- </script>
- <script>
- $(function() {
- $("#login").click(function() {
- if ($("#user").val().length == 0) {
- return alert("请输入内容!");
- }
- if ($("#password").val().length == 0) {
- return alert("请输入密码!");
- }
- $.ajax({
- url: "http://localhost:3000/login",
- type: "POST",
- data: {
- username: $("#user").val(),
- password: $("#password").val()
- },
- success: function(res) {
- alert("登录成功!")
- },
- error: function(err) {
- console.log(err);
- }
- })
- })
- });
- </script>
- </html>
3、搭建服务器
- var http = require("http");
- var url = require("url");
- var qs = require("querystring");
- var fs = require("fs");
- http.createServer(function(req, res) {
- //设置请求头
- res.setHeader("Access-Control-Allow-Origin", "*");
- if (req.method == "POST") {
- //接收发来的用户名和密码
- var result = "";
- //获取前端代码发来的路由地址
- var pathName = url.parse(req.url).pathname;
- req.addListener("data",
- function(chunk) {
- result += chunk;
- });
- req.on("end",
- function() {
- var user = qs.parse(result);
- //判断用户是否存在
- if (user.username) {
- fs.readFile("db.txt", "utf-8",
- function(err, data) {
- if (!err) {
- console.log("读取文件成功");
- if (!data) {
- if (pathName == "/login") {
- res.end("该用户不存在");
- return;
- }
- //根据前端发来的路由地址判断是登录还是注册页面,如果是注册页面
- if (pathName == "/register") {
- //创建一个数组一个对象来保存帐号和密码
- var arr = [];
- var obj = {};
- //把用户的帐号密码保存
- obj.username = user.username;
- obj.password = user.password;
- arr.push(obj);
- //同步写入db.txt文件,必须是同步进行
- fs.writeFileSync("db.txt", JSON.stringify(arr), "utf-8");
- res.end("注册成功!");
- return;
- }
- } else {
- console.log("文件中有数据");
- //把数据转成JSON对象,以便我们使用
- var arr = JSON.parse(data);
- //遍历整个保存数据的数组 判断登录注册
- for (var i = 0; i < arr.length; i++) {
- var obj = arr[i];
- if (obj.username == user.username) {
- if (pathName == "/login") {
- if (obj.password == user.password) {
- res.end("登录成功!");
- return;
- } else {
- res.end("密码错误!");
- return;
- }
- }
- if (pathName == "/register") {
- res.end("该用户已存在!");
- return;
- }
- }
- }
- if (pathName == "/login") {
- res.end("用户名不存在!");
- return;
- }
- if (pathName == "/register") {
- //创建新对象写入数据
- var obj = {};
- obj.username = user.username;
- obj.password = user.password;
- arr.push(obj);
- fs.writeFileSync("db.txt", JSON.stringify(arr), "utf-8");
- res.end("注册成功!");
- return;
- }
- }
- } else {
- console.log("读取文件失败");
- }
- })
- }
- });
- } else {
- res.end("get请求");
- }
- }).listen(3000,
- function(err) {
- if (!err) {
- console.log("服务器启动成功,正在监听port3000...");
- }
- });
4、在 db.txt 文件中可以查看注册信息
来源: http://www.phperz.com/article/17/0627/334201.html