disk-demo-index-jk
v1.0.0
Published
```js 后台代码 const http = require("http"); const fs = require("fs"); const path = require("path"); const url = require("url");
Readme
登录 注册
后台代码
const http = require("http");
const fs = require("fs");
const path = require("path");
const url = require("url");
const static = "public";
const login = "login.html";
// const data = [{
// user: "张三",
// pwd: '123'
// }, {
// user: "李四",
// pwd: '444'
// }];
http.createServer((req, res) => {
//获取路径
let pathname = url.parse(req.url).pathname;
//判断是否为根路径
if (pathname === "/") {
pathname = login;
}
// console.log(pathname)
if (path.extname(pathname)) {
// console.log(111)
//静态资源
res.end(fs.readFileSync(path.join(static, pathname)));
} else {
// console.log(111)
//非静态资源
//判断请求是GET还是POST
if (req.method === "GET" && pathname === "/api/login") {
//是get那就先解构 将路径转换为标准路径
let {
user,
pwd
} = url.parse(req.url, true).query;
if (user === "hop" && pwd === "123") {
res.end('1');
} else {
res.end("0");
}
}
// console.log(111)
if (req.method === "POST" && pathname === "/api/login") {
//定义一个字符串容器
let body = '';
//数据进行传输
req.on("data", chunk => {
body += chunk;
});
req.on("end", () => {
//传输结束 转换为JSON字符串类型
let {
user,
pwd
} = JSON.parse(body); //转换json型字符串
// console.log(body);
let data = require("./data.json");
// let flag = data.filter(item =>
// item.user === user && item.pwd === pwd
// )
// console.log(user, pwd);
// console.log(flag);
let flag = data.some(item => item.user === user && item.pwd === pwd);
if (flag) {
res.end("1");
} else {
res.end("0");
}
})
}
//注册
if (req.method === "POST" && pathname === "/api/register") {
//定义一个字符串容器
let body = '';
//数据进行传输
req.on("data", chunk => {
body += chunk;
});
req.on("end", () => {
//传输结束 转换为JSON字符串类型
let {
user,
pwd
} = JSON.parse(body); //转换json型字符串
// console.log(body);
let data = require("./data.json");
// let flag = data.filter(item =>
// item.user === user && item.pwd === pwd
// )
// console.log(user, pwd);
// console.log(flag);
let flag = data.some(item => item.user === user);
if (!user || !pwd) {
flag = true;
}
if (flag) {
res.end("0");
} else {
data.push(JSON.parse(body));
fs.writeFileSync("data.json", JSON.stringify(data));
res.end("1");
}
})
}
}
}).listen("8080", () => console.log("服务器正在运行中...."));
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/index.css">
<title>Document</title>
</head>
<body>
<form>
<h2>首页登录注册</h2>
<input type="text" placeholder="请输入账户" class="user">
<input type="password" placeholder="请输入密码" class="pwd">
<button class="btn" type="button">登录</button>
<button class="register" type="button"> 注册</button>
</form>
</body>
<script src="./js/axios.js"></script>
<script>
let user = document.querySelector(".user"),
pwd = document.querySelector(".pwd"),
btn = document.querySelector(".btn"),
registers = document.querySelector(".register");
function logins() {
//发送请求要用ajax
console.log(45)
axios.post("/api/login", {
user: user.value,
pwd: pwd.value,
}).then((result) => {
// console.log(result);
if (result.data) {
alert('登录成功');
} else {
alert("登录失败");
}
})
}
// 注册
function register() {
//发送请求要用ajax
console.log(45)
axios.post("/api/register", {
user: user.value,
pwd: pwd.value,
}).then((result) => {
// console.log(result);
if (result.data) {
alert('注册成功');
} else {
alert("注册失败，请重新注册");
}
})
}
btn.addEventListener("click", logins);
registers.addEventListener("click", register);
</script>
</html>