web

# express

cnpm i express --save

# 内容渲染

大多数情况下，渲染内容用res.render()，将会根据views中的模板文件进行渲染。

如果想写一个快速测试页，可以使用res.send()。这个函数将根据内容，自动帮设置Content-Type头部和200状态码。

# GET POST

GET请求的参数在URL中，在原生Node中，需要使用url模块来识别参数字符串。在Express中，不需要使用url模块了。可以直接使用req.query对象。

POST请求在express中不能直接获得，可以使用body-parser模块。使用后，将可以用req.body得到参数。但是如果表单中含有文件上传，那么还是需要使用formidable模块。

//也可以使用这种方式将req.body上挂载post数据
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

# 静态文件伺服能力

app.use(express.static("./public"));

可以直接访问public里的页面,为了怕干扰到其他的动态路由,可以加一个参数在前面,用来区分

# 模板引擎ejs

创建一个views目录，专门存储模板文件

cnpm i ejs --save

app.set("view engine","ejs");

app.get("/",function(req,res){
    res.render("haha",{
        "news" : ["我是小新闻啊","我也是啊","哈哈哈哈"]
    });
});

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
	<ul>
	   <% for(let i=0;i<news.length;i++){%>
			<li><%= news[i] %></li>
	   <%}%>
	</ul>
</body>
</html>

TIP

修改默认存放文件夹，

想要变成/websong

app.set('views','webosg');
app.set('view enging','ejs');

# 第一个express

var express =require("express")

var app = express();

app.get("/",function(req,res){
	 res.send("你好");
})

app.get("/haha",function(req,res){
    res.send("这是haha页面，哈哈哈哈哈哈");
});

app.get(/^\/student\/([\d]{10})$/,function(req,res){
    res.send("学生信息，学号" + req.params[0]);
});

app.get("/teacher/:gonghao",function(req,res){
    res.send("老师信息，工号" + req.params.gonghao);
});

app.listen(3000,()=>{
	console.log("server is ok")
});

# express中get和post参数

  • 原生node获取参数方式

    • get
    var http=require("http")
var url =require("url")
http.createServer((req,res)=>{
	var obj =url.parse(req.url,true)
	var query=obj.query
})

    const http = require("http")
const querystring = require("querystring")
const url =require("url")
http.createServer((req,res)=>{
	if(req.method.toLocaleLowerCase()==="get"){
	  let mes=url.parse(req.url,true)
	  let mes1=JSON.stringify(mes.query)
	  res.write(`1${mes1}`)
	  let mes2=JSON.stringify(querystring.decode(req.url.split('?')[1]) )
	  res.write(`2${mes2}`)

	}
	res.end("ok")
}).listen(3000,()=>{
	console.log(`server is bulid`)
})

    url.parse();方法可以将一个完整的URL地址，分为很多部分，常用的有：host、port、pathname、path、query。第一个参数是地址，第二个参数默认是false，设置为ture后，其query属性就会从查询字符串格式（“a=1&b=2”）转换为了对象格式（{a: 1,b: 2}）。

    • post

    要想获得post参数对象，需要用到第三方包querystring

    var http=require("http")
var fs= require("fs")
var querystring =require("querystring")
http.createServer(function(req,res){
	console.log(req.url)
	if(req.url=="/"){
		fs.readFile("./test1.html",function(err,data){
			if(err){
				throw err
			}
			res.end(data)
		})
	}
	if(req.url==="/post"&&req.method.toLowerCase()=="post"){
		var data = '';

		req.on('data', function (chunk) {
			// chunk 默认是一个二进制数据，和 data 拼接会自动 toString
			data += chunk;
		});
		req.on('end', function () {
			
			var dataObject = querystring.parse(data);
			res.write(data)
			res.write("-------")
			res.end(JSON.stringify(dataObject))
		});
		
	}
	
}).listen(3000,()=>{
	console.log("server is ok")
})

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<form action="/post" method="post">
			name:<input type="text" name="name"><br/>
			sex:<input type="text" name="sex"><br/>
			<input type="submit">
		</form>
	</body>
</html>

    name=3333&sex=4444-------{"name":"3333","sex":"4444"}

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="fun()">kaishi</button>
	</body>
</html>
<script type="text/javascript">
	var data=
	{
        type: 'post',
        name: 'post发送json参数'
      }
	function fun(){
		var xhr = new XMLHttpRequest();
		xhr.open('post', 'http://localhost:3000/post', true);

		xhr.setRequestHeader('Content-Type', 'application/json');
		xhr.send(JSON.stringify(data));

		xhr.onload = function () {
		  if (xhr.status === 200) {
			var text = xhr.responseText;
			document.write(text)
		  } else {
			
		  }
		};

	}
</script>


    {"type":"post","name":"post发送json参数"}
-------
{"{\"type\":\"post\",\"name\":\"post发送json参数\"}":""}

  • express中的get和post

    • get
    1. 以问号连接在地址栏里
    var express = require("express");
var app = express();

app.get("/",function(req,res){
	console.log(req.query)
	res.end(JSON.stringify(req.query))
})

app.listen(3000);
//http://localhost:3000/?ID=19&NAME=23
//{"ID":"19","NAME":"23"}
    1. 在前端异步调用接口传参数用
    var express = require("express");
var app = express();

app.get("/:id/:name",function(req,res){
	console.log(req.query)
	console.log(req.params)
	res.end(JSON.stringify(req.params))
})
app.listen(3000);
//http://localhost:3000/18/zhangsan
//{"id":"18","name":"zhangsan"}
    • post 引入body-parser
    //配置
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

//使用
req.body;

    	var express = require("express");
	var app = express();
	let fs= require("fs")
	var bodyParser = require("body-parser");
	app.use(bodyParser.urlencoded({ extended: false }))
	app.use(bodyParser.json())
	app.get("/",function(req,res){
		fs.readFile("./test1.html",function(err,data){
			if(err){
				throw err
			}
			res.end(data)
		})
	})
	app.post("/post",function(req,res){
		console.log(req.body)
		res.end(JSON.stringify(req.body))
		//{"type":"post","name":"post发送json参数"}
		//对上面的一个表单提交的一个用ajax的application/json提交的均可以成功转化格式
	})
	
	app.listen(3000);

# express路由中的next

next参数加上使用后，如果经过判断不是本路由需要使用的内容，就会继续往下走，给下个路由判断

var express = require("express");

var app = express();

var a = 100;

app.get("/:username/:id",function(req,res,next){
    var username = req.params.username;
    //检索数据库，如果username不存在，那么next()
    if(username!=="admin"){
        console.log("1");
        res.send("用户信息");
    }else{
        next();
    }
});

app.get("/admin/login",function(req,res){
    console.log("2");
    res.send("管理员登录");
});


app.listen(3000);

//http://localhost:3000/admin/login
//管理员登录
------
//http://localhost:3000/adm2in/login
//用户信息

# express中的app.use

app.use()也是一个中间件。与get、post不同的是，他的网址不是精确匹配的。而是能够有小文件夹拓展的。

var express = require("express");
var app = express();
var a = 100;
app.use("/admin",function(req,res){ 
    res.write(req.originalUrl + "\n");   
    res.write(req.baseUrl + "\n");  
    res.write(req.path + "\n");   
    res.end("ok");
});

app.listen(3000);

//http://localhost:3000/admin/12/33?id=123&name=99
//    /admin/12/33?id=123&name=99
//    /admin
//    /12/33
//    ok

TIP

不写路径的时候，实际上就相当于"/"，就是所有网址

//应用
var express = require("express");
var fs = require("fs");

var app = express();

//当你不写路径的时候，实际上就相当于"/"，就是所有网址
app.use(haha);

app.get("/admin",function(req,res){
    res.send("管理员");
})

app.listen(3000);

function haha(req,res,next){
    var filePath = req.originalUrl;
    //根据当前的网址，读取public文件夹中的文件
    //如果有这个文件，那么渲染这个文件
    //如果没有这个文件，那么next();
    fs.readFile("./public/" + filePath,function(err,data){
        if(err){
            //文件不存在
            next();
            return;
        }
        res.send(data.toString());
    });
}

Express中，使用cookie-parser中间件来设置cookie。 主要设置选项：domain、path、maxAge、signed

session 会话，专门用于实现“登陆”，表示某一次用户的访问。

会话是特殊的cookie。用户在登陆之后，服务器往客户端的cookie中发送一个字符串，但是此字符串是经过服务器加密的，服务器会缓存cookie文本和用户的信息；再次访问之后，如果这个加密字符串与服务器的缓存匹配，那么则判断这是同一个用户回来了，那么将保持登陆状态。

express中，使用express-session中间件，来使用session。

任何语言中，session的使用，是“机理透明”的。他是帮你设置cookie的，但是足够方便，让你感觉不到这事儿和cookie有关。

var express = require("express");
var app = express();
var session = require("express-session");

app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true
}));

app.get("/",function(req,res){
	if(req.session.login == "1"){
		res.send("欢迎" + req.session.username);
	}else{
		res.send("没有成功登陆");
	}
});

app.get("/login",function(req,res){
	req.session.login = "1";	//设置这个session
	req.session.username = "考拉";
	res.send("你已经成功登陆");
});

app.listen(3000);
最后更新: 11/26/2020, 5:23:38 PM

← npm →