一：建文件夹，搭建目录
项目开始前先建好文件夹目录，如下图：
强调一点：是什么样的文件类型就放到什么类型的文件夹中，不要搞混，尤其是在项目当中要特别注意！！！
二：写静态页面
1./register注册页面html
<div class="box"><h1>用户注册</h1><div class="uname"><span>用户名:</span><input type="text" placeholder="请输入您的用户名" id="username"></div><div class="pwd"><span>密码:</span><input type="password" placeholder="请输入您的密码" id="password"></div><div id="register"><input type="button" value="立即注册" id="btn"><a href="./login.html">前往登录</a><span id="ts"></span></div></div>
/register注册页面css
* {margin: 0;padding: 0;}*::selection {background: none;}body {background: url(../img/register.jpg) no-repeat;background-size: 100%;}.box {width: 400px;height: 240px;border: 2px solid #000;background-color: #ccc;opacity: .7;border-radius: 8px;margin: 60px auto;}h1 {text-align: center;margin-bottom: 20px;}.box span {display: inline-block;width: 70px;height: 50px;margin-left: 66px;}.uname input,.pwd input {width: 200px;height: 24px;}#register {text-align: center;}#register span {display: block;margin: 10px auto;width: 100%;height: 20px;font-size: 14px;}#register input {width: 200px;height: 30px;background-color: #ff3040;outline: none;border: none;cursor: pointer;}#register a {text-decoration: none;}
2./login登录页面html
<div class="box"><form action=""><p>欢迎登录</p><div class="uname"><span>用户名:</span><input type="text" placeholder="请输入您的用户名" id="username"></div><div class="pwd"><span>密码:</span><input type="password" placeholder="请输入您的密码" id="password"></div><div class="login"><button>立即登录</button><span id="wz"></span></div><div class="footer"><a href="register.html" class="left" target="_blank">新用户注册</a><a href="register.html" class="right" target="_blank">忘记密码？</a></div></form></div>
/login登录页面css
* {margin: 0;padding: 0;}*::selection {background: none;}body {background: url(../img/login.jpg);}.box {width: 400px;height: 220px;border: 2px solid #000;margin: 200px auto;text-align: center;border-radius: 8px;}.box p {font-size: 26px;font-weight: 700;color: rgb(0, 0, 0);margin-bottom: 20px;}.uname,.pwd {padding-right: 44px;}.uname span,.pwd span {display: inline-block;width: 60px;text-align: right;}.uname input,.pwd input {width: 200px;height: 20px;margin-left: 8px;margin-bottom: 10px;}.login button {width: 100px;height: 30px;background-color: orangered;border: none;outline: none;border-radius: 8px;cursor: pointer;}.login span {display: block;margin: 10px auto;width: 100%;height: 20px;font-size: 14px;}.footer {position: relative;margin-top: 10px;}.footer a {text-decoration: none;font-size: 14px;color: black;}.footer a:hover {color: red;}.footer .left {position: absolute;left: 20px;}.footer .right {position: absolute;right: 20px;}
3./index首页html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>首页</title><style>* {margin: 0;padding: 0;}body {background: url(../img/index.jpg) no-repeat;}h1 {text-align: center;}</style></head><body><h1>Welcome to my index</h1></body></html>
4./404页面html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>错误</title></head><body><h1>404 Not Found Page</h1></body></html>
三：写app.js，搭建node环境
下面展示代码：
// 通过http模块创建服务器，并监听3000端口const http = require("http")const server = http.createServer()const fs = require("fs")const url = require("url")const queryString = require("querystring")server.on("request", (req, res) => {// 静态伺服const requrl = url.parse(req.url, true)// 读取register文件if (req.url == "/" || req.url == "/register.html" && req.method == "GET") {fs.readFile("./register.html", "utf8", (err, data) => {if (err) {fs.readFile("./404.html", "utf8", (err, data) => {res.end(data)})} else {res.setHeader("Content-type", "text/html")res.end(data)}})// 读取reg.css} else if (req.url == "/css/register.css" && req.method == "GET") {fs.readFile("../css/register.css", "utf8", (err, data) => {if (err) {console.log(err)} else {res.setHeader("Content-type", "text/css")res.end(data)}})// 读取login文件} else if (req.url == "/login.html" && req.method == "GET") {fs.readFile("./login.html", "utf8", (err, data) => {if (err) {fs.readFile("./404.html", "utf8", (err, data) => {res.end(data)})} else {res.setHeader("Content-type", "text/html")res.end(data)}})// 读取login.css} else if (req.url == "/css/login.css" && req.method == "GET") {fs.readFile("../css/login.css", "utf8", (err, data) => {if (err) {console.log(err)} else {res.setHeader("Content-type", "text/css")res.end(data)}})// 读取index文件} else if (req.url == "/index.html" && req.method == "GET") {fs.readFile("./index.html", "utf8", (err, data) => {if (err) {fs.readFile("./404.html", "utf8", (err, data) => {res.end(data)})} else {res.setHeader("Content-type", "text/html")res.end(data)}})//读取jquery文件} else if (req.url == "/js/jquery-3.4.0.js" && req.method == "GET") {fs.readFile("../js/jquery-3.4.0.js", "utf8", (err, data) => {if (err) {console.log(err)} else {res.end(data)}})//读取图片} else if (req.url == "/img/index.jpg" && req.method == "GET") {fs.readFile("../img/index.jpg", (err, data) => {if (err) {console.log(err)} else {res.setHeader("Content-type", "image/jpg")res.end(data)}})} else if (req.url == "/img/login.jpg" && req.method == "GET") {fs.readFile("../img/login.jpg", (err, data) => {if (err) {console.log(err)} else {res.setHeader("Content-type", "image/jpg")res.end(data)}})} else if (req.url == "/img/register.jpg" && req.method == "GET") {fs.readFile("../img/register.jpg", (err, data) => {if (err) {console.log(err)} else {res.setHeader("Content-type", "image/jpg")res.end(data)}})}//注册接口/registerelse if (requrl.pathname == '/register' && req.method == 'POST') {let str = '';req.on('data', (chunk) => {// console.log(0)str += chunk;})// console.log(1)req.on('end', () => {// console.log(2)let dataObj = queryString.parse(str);console.log(dataObj) //对象fs.readFile('../data/person.json', 'utf8', (err, data) => {// console.log(3)// console.log(data)let obj = JSON.parse(data) //数组for (let i = 0; i < obj.length; i++) {if (obj[i].username == dataObj.username) {return res.end('3')}}obj.push(dataObj)fs.writeFile('../data/person.json', JSON.stringify(obj), 'utf8', (err, result) => {if (err) {return res.end('2')}return res.end('1')})})})}//登录接口/loginelse if (requrl.pathname == '/login' && req.method == 'GET') {// console.log(requrl)// let userInput = queryString.parse(requrl.query)// console.log(userInput)// console.log(requrl.query);fs.readFile('../data/person.json', 'utf8', (err, data) => {console.log(data)if (err) {console.log(1);} else {let obj = JSON.parse(data)// console.log(obj)for (let i = 0; i < obj.length; i++) {if (obj[i].username == requrl.query.username && obj[i].password == requrl.query.password) {return res.end('1')} else if (obj[i].username == requrl.query.username && obj[i].password != requrl.query.password) {return res.end('3')}}}})}})server.listen(3000, () => {console.log("服务器已启动")})
四：Ajax请求
1./register页面
<script src="../js/jquery-3.4.0.js"></script><script>$('#btn').on('click', () => {$.ajax({url: '/register',type: 'POST',data: {username: $('#username').val(),password: $('#password').val()},success: function (res) {switch (res) {case '1':$('#ts').text('用户注册成功');$('#ts').css('color', 'green');window.location.href = './login.html';break;case '2':$('#ts').text('用户注册失败');$('#ts').css('color', 'red');break;case '3':$('#ts').text('该用户已注册').fadeOut(2000);$('#ts').css('color', 'red');break;case '4':$('#ts').text('未知错误')$('#ts').css('color', 'red');break;}}})})</script>
2./login页面
<script src="../js/jquery-3.4.0.js"></script><script>$('button').on('click', () => {$.ajax({url: '/login',type: 'GET',data: {username: $('#username').val(),password: $('#password').val()},success: function (res) {switch (res) {case '1':$('#wz').text('登陆成功')$('#wz').css('color', 'green');window.location.href = './index.html'break;case '2':$('#wz').text('登录失败');$('#wz').css('color', 'red');break;case '3':$('#wz').text('密码错误');$('#wz').css('color', 'red');break;case '4':$('#wz').text('未知错误');$('#wz').css('color', 'red');break;}}})})</script>
五：创建json存放数据
六：打开node运行测试app.js文件
如果没有node的可以自行去官网下载安装包，安装步骤next->next->…（参考傻瓜式教程）
一般默认为3000端口，代码中有说明，node打开以后在网址中输入localhost:3000/就可以访问了，感兴趣的同学可以下去试一试，另外代码中还有不少需要改进的地方，希望读者能够及时指正，一起进步
