index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<input type="text" id="user" placeholder="请输入名字..."/>
<input type="password" id="pass" placeholder="请输入密码..."/>
<input type="button" value="登录" onclick="send(1)"/>
<input type="button" value="注册" onclick="send(2)"/>
<script>
function send(type){
let type_ = type == 1 ? 'get' : 'post';
let url_ = type == 1 ? 'login' : 'register';
$.ajax({
type:type_,
url:'http://localhost:8045/' + url_,
data:{
user:$('#user').val(),
pass:$('#pass').val()
},
success:function(datas){
console.log('后台返回数据:'+datas.msg);
}
})
}
</script>
</body>
</html>
server.js文件
const express = require('express');
const expressstatic = require('express-static');//中间件
const bodyparser = require('body-parser');//post获取参数
let server = express();
//用户数据
let users = {};
// server.all('*', function(req, res, next) {
// res.header("Access-Control-Allow-Origin", "*");
// res.header("Access-Control-Allow-Headers", "X-Requested-With");
// res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
// res.header("X-Powered-By",' 3.2.1')
// res.header("Content-Type", "application/json;charset=utf-8");
// next();
// });//解决跨域问题
// server.use('/',function(req,res){
// res.send('sss');
// res.end();
// });//不管是走post 还是 get 都会走过use
server.use('/',function(req,res,next){
console.log('a');
next();//node里的链式操作,表示可以进行下一步
});
server.use('/',function(req,res,next){
console.log('b');
next();
});
server.get('/login',function(req,res){
console.log(req.query,req.url,req.path);//这里直接就有json的参数
//req.url 是querystring类型,
//req.path 是名字pathname
// res.send({"msg":"后台收到数据了!!!!!"});//send 可以直接传json数据
// res.end();
//1、用户是否存在
//2、密码是否错误
//3、成功登录
if(!users[req.query.user]){
res.send({"ok":false,"msg":"用户不存在"});
}else if(!users[req.query.user] == req.query.pass){
res.send({"ok":false,"msg":"用户名或密码错误"});
}else{
res.send({"ok":true,"msg":"成功登录"});
}
res.end();
});
//1、server.use(bodyparser.urlencoded({extended: false})); //前端给后台的contentType为application/x-www-form-urlencoded
server.use(bodyparser.urlencoded({ extended: false }));
server.post('/register',function(req,res){
console.log(req.body);//{ user: '12', pass: '12' }
//1、用户是否存在
//2、成功注册
if(users[req.body.user]){
res.send({"ok":false,"msg":"用户已存在"});
}else{
res.send({"ok":true,"msg":"注册成功"});
users[req.body.user] = req.body.pass;
}
res.end();
});
server.use(expressstatic('./www'));//读取文件 静态文件
server.listen(8045);
/*
这里搞一个小东西:nodemon
这个东西是热更新,当我们改了服务之后不需要再重启服务
就能够看到更改了
使用方法:
1、npm install nodemon -g
2、nodemon server.js
这里需要注意的是:开始我安装的不是全局的,所以使用nodemon说不是内部命令之类之类的
需要全局安装!!!!
*/