Express 是一個(gè)簡(jiǎn)潔而靈活的 node.js Web應(yīng)用框架, 提供了一系列強(qiáng)大特性幫助你創(chuàng)建各種 Web 應(yīng)用，和豐富的 HTTP 工具。使用 Express 可以快速地搭建一個(gè)完整功能的網(wǎng)站。
首先想要使用expess框架广匙，需要安裝，方法如下
npm install express
安裝完成后就會(huì)發(fā)現(xiàn)在你的文件夾中多了一個(gè)node_module文件夾
使用express搭建一個(gè)簡(jiǎn)單的服務(wù)器
const express=require('express'); //引入express
var server=express();//創(chuàng)建一個(gè)服務(wù)器
server.listen(8080);//創(chuàng)建一個(gè)監(jiān)聽
使用express搭建一個(gè)服務(wù)器只需要這三步
接下來(lái)我們使用express搭建的服務(wù)器做一些簡(jiǎn)單的操作
const express=require('express');
var server=express();
server.use('./a.html',function(req,res){
// res.send(); res.end() 都是express中的方法，這塊也可以用res.write();但是res.write只能發(fā)送字符串夫椭，不能發(fā)送json對(duì)象
// res.send('aaaaaaaa');
// res.write({a:12,b:5});不能發(fā)送
res.send({a:12,b:5})；//可以發(fā)送
res.end();
})
server.use('./b.html',function(req,res){
res.send('bbbbb');
res.end();
});
server.listen(8080);
在express中有三種方式可以接受到用戶的請(qǐng)求
.get('/',function(req,res){};
.post('/',function(req,res){};
.use('/',function(req,res){};
post只能接受post發(fā)來(lái)的請(qǐng)求
get只能接受get發(fā)來(lái)的請(qǐng)求
use既可以幾首get發(fā)來(lái)的請(qǐng)求氯庆，又可以接受post發(fā)來(lái)的請(qǐng)求
js代碼
const express=require('express');
var server=express();
server.get('/',function(req,res){
console.log('這時(shí)get發(fā)來(lái)的請(qǐng)求');
})
server.post('/',function(req,res){
console.log('這是post發(fā)來(lái)的請(qǐng)求');
});
server.use('/',function(req,res){
console.log('這時(shí)use數(shù)據(jù)');
});
server.listen(8080);
html代碼
get
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method='get' action='http://localhost:8080'>
用戶名： <input type="text" name="uname">
<input type="submit" value='提交'>
</form>
</body>
</html>
post
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method='get' action='http://localhost:8080'>
用戶名： <input type="text" name="uname">
<input type="submit" value='提交'>
</form>
</body>
</html>
使用express做一個(gè)簡(jiǎn)單的注冊(cè)登錄
首先我們?cè)L問(wèn)驚天文件的時(shí)候會(huì)用到 express-static,所以我們需要下載express-static
npm install express-static
js代碼
const express=require('express');
const expressStatic=require('express-static');
var server=express();
server.listen(8080);
//用戶數(shù)據(jù)
var users={
'blue': '123456',
'zhangsan': '654321',
'lisi': '987987'
};
server.get('/login', function (req, res){
var user=req.query['user'];
var pass=req.query['pass'];
if(users[user]==null){
res.send({ok: false, msg: '此用戶不存在'});
}else{
if(users[user]!=pass){
res.send({ok: false, msg: '密碼錯(cuò)了'});
}else{
res.send({ok: true, msg: '成功'});
}
}
});
server.use(expressStatic('./www'));
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
用戶名: <input type="text" id='user'> <br>
密碼: <input type="password" id='pass'> <br>
<input type="button" value='登錄' id='btn1'>
<script src='ajax.js'></script>
<script type="text/javascript">
var user=document.getElementById('user');
var pass=document.getElementById('pass');
var btn1=document.getElementById('btn1');
btn1.onclick=function(){
ajax({
url:'/login',
data:{user:user.value,pass:pass.value},
success:function(str){
console.log(str);
var json=eval('('+str+')');
if(json.ok){
alert('登陸成功');
}else{
alert('失敗'+json.msg);
}
},
error:function(){
alert('通信失敗');
}
})
}
</script>
</body>
</html>
這樣一個(gè)簡(jiǎn)單的前后端交互的注冊(cè)登錄就做完了
