<!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" />
<link rel="stylesheet" href="css/login.css" />
<title>Document</title>
</head>
<body>
<div class="loginContainer">
<h1>登录</h1>
<form action="/checkUser" method="post">姓名：
<input class="inputStyle" type="text" name="username" />
<div class="exchange">用户名错误</div>
<br />密码：
<input class="inputStyle" type="password" name="pwd" /><br />
<input class="loginStyle" type="submit" value="登录" />
</form>
</div>
<script>
// ajax技术；
// XMLHttpRequest
document.querySelector(".inputStyle").onblur = function () {
// console.log(this.value);
let xhr = new XMLHttpRequest();
xhr.open("get", `/checkUserName?username=${this.value}`, true);
xhr.onload = function () {
console.log(xhr.responseText);
let obj = JSON.parse(xhr.responseText);
document.querySelector(".exchange").innerHTML = obj.info;
if (obj.status == 1) {
document.querySelector(".exchange").style.color = "green";
} else {
document.querySelector(".exchange").style.color = "red";
}
}
xhr.send();
}
</script>
</body>
const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");
const koaBody = require("koa-body");
const fs = require("fs");
const usersData = require("./data/users.json");
let app = new Koa();
app.use(static(__dirname+"/static"));
app.use(koaBody({
multipart:true
}));
let router = new Router();
router.get("/",(ctx,next)=>{
ctx.body = "hello";
})
router.get("/checkUserName",(ctx,next)=>{
console.log(ctx.query.username);
let res = usersData.find(v=>v.username==ctx.query.username);
if(res){
ctx.body = {
status:1,
info:"用户名正确"
};
}else{
ctx.body = {
status:2,
info:"用户名错误"
};
}
})
router.get("/get/:id",(ctx,next)=>{
console.log(ctx.params);
ctx.body = {
status:1,
info:"请求成功"
}
})
router.post("/post",(ctx,next)=>{
console.log(ctx.request.body);
ctx.body = {
status:1,
info:"post请求成功"
}
})
router.get("/xml",(ctx,next)=>{
// ctx.set("content-type","text/xml");
ctx.body = `<?xml version='1.0' encoding='utf-8' ?>
<books>
<nodejs>
<name>nodejs实战</name>
<price>56元</price>
</nodejs>
<react>
<name>react入门</name>
<price>50元</price>
</react>
</books>
`
})
router.post("/upload",(ctx,next)=>{
console.log(ctx.request.body);
console.log(ctx.request.files.img);
let fileData = fs.readFileSync(ctx.request.files.img.path);
fs.writeFileSync("static/imgs/"+ctx.request.files.img.name,fileData);
ctx.body = "请求成功";
})
router.post("/fileUpload",(ctx,next)=>{
console.log(ctx.request.files);
let fileData = fs.readFileSync(ctx.request.files.myfile.path);
fs.writeFileSync("static/imgs/"+ctx.request.files.myfile.name,fileData);
ctx.body = "请求成功";
})
app.use(router.routes());
app.listen(3000);
.loginContainer{
margin: 0 auto;
width: 600px;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
border: 1px solid;
}
.loginContainer input{
margin-bottom: 20px;
}
.loginStyle{
width: 160px;
height: 40px;
background: rgb(50,203,77);
color: white;
font-size: 17px;
}
.inputStyle{
width: 200px;
height: 30px;
padding: 5px;
outline: none;
}
.inputStyle:focus{
border: 1px solid rgb(50,203,77);
}
form{
position: relative;
}
.exchange{
position: absolute;
top:8px;
right: 65px;
color: red;
}
[{
"id":1,
"username":"张三",
"pwd":123
},{
"id":1,
"username":"李四",
"pwd":123
}]
