一、
------------------------注册页面----------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h1>注册页面</h1>
<p>
用户名:<input type="text">
</p>
<p>
密码:<input type="text">
</p>
<button>注册</button>
<script>
$(function(){
//ajax 请求必须在同一个服务器端打开
$("button").click(function(){
$.ajax({
type:"get", //设置发送的方式
url:"http://localhost:8088/reg", //接口
data:{ //发送的数据 其中input标签中的name 应该加上属性 因为name的值为 获取对象的KEY值
username:$("input").eq(0).val(),
upass:$("input").eq(1).val()
},
dataType:"JSON", //获取的值得类型JSon
success(data){
if(data=='注册成功'){ //传送过来的数据是登录成功的话则打开login 网页
location.herf('login.html')
}
else{
console.log('登录失败')
}
}
})
})
})
</script>
</body>
</html>
//------------------------------登录界面--------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h1>登录页面</h1>
<p>
用户名:<input type="text">
</p>
<p>
密码:<input type="text">
</p>
<button>登录</button>
<script>
$(function(){
$("button").click(function(){ //登录点击事件
$.ajax({
type:"post", //登录时数据的发送方式
url:"http://localhost:8088/login", //端口
data:{
username:$("input").eq(0).val(),
upass:$("input").eq(1).val()
},
dataType:"JSON",
success(data){
if(data=='登录成功'){ //传送过来的数据是登录成功的话则打开index 网页
location.herf('inxex.html')
}
else{
console.log('登录失败')
}
}
})
})
})
</script>
</body>
</html>
------------------------------主页面-----------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$.ajax({
type:"get",
url:"http://localhost:8088/getusers",
data:{
//为空则表示发送过去的值为空
},
dataType:"JSON",
success(data){
console.log(data)
}
})
})
</script>
</body>
</html>
const http = require("http")
const fs=require("fs") //解读文件
const url = require("url") //解析get 传输过来的值
const querystring=require("querystring") //解析post传输过来的值
let users=[{id:1,username:"王一",upass:123}]
let server = http.createServer((req, res) => {
if (req.method == "GET") {
let { pathname, query } = url.parse(req.url, true)
if (pathname.endsWith(".html")) {
fs.readFile(`./www${pathname}`, (err, data) => {
if (err) {
res.write("404")
res.end()
} else {
res.write(data)
res.end()
}
})
} else if (pathname == "/reg") {
let result = users.some(item => item.username == query.username)
if (result) {
res.write(JSON.stringify({ message: "用户已存在" }))
res.end()
} else {
let user = {
id: users.length + 1,
...query
}
users.push(user)
res.write(JSON.stringify({ message: "注册成功" }))
res.end()
}
} else if (pathname == "/getusers") {
res.write(JSON.stringify({ message: users }))
res.end()
}
} else if (req.method == "POST") {
if (req.url == "/login") {
let arr = []
req.on("data", data => {
arr.push(data)
})
req.on("end", () => {
let buffer = Buffer.concat(arr) //转化成一个Buffer对象
let result = querystring.parse(buffer.toString())//将buffer对象转为js对象
let user = users.filter(item => item.username == result.username)
if (user.length > 0) {
if (user[0].upass == result.upass) {
res.write(JSON.stringify({ message: "登录成功" }))
res.end()
} else {
res.write(JSON.stringify({ message: "密码不正确" }))
res.end()
}
} else {
res.write(JSON.stringify({ message: "用户名不存在" }))
res.end()
}
})
}
}
})
server.listen(8088)