Express框架

最新推荐文章于 2023-07-06 21:19:02 发布

头铁的无法自拔

最新推荐文章于 2023-07-06 21:19:02 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/ybb520chongren_/article/details/83279779

版权

Express的三个功能：

1.static静态文件访问，设置拦截

2.全栈模板：jade,ejs

3.对get，post的支持

一.static静态文件访问

下载express：$npm install express --save

static文件夹下的文件直接访问：假如文件夹有index.html，直接在浏览器上敲localhost:3000/index.html；同理：文件夹下有index.css或index.jpg,直接敲localhost:3000/index.css或localhost:3000/index.jpg.不管static文件下放的是任何文件格式都能通过国路径访问

var express=require("express");//导入express
var app=express();//实列express

app.use(express.static('static'))//注册静态文件

app.get("/",function(res,req){
      console.log("这是个网页");
      //res.send("这是个首页")
}).listen(3000)

二.拦截器

app.use("/",function(res,req,next){
   console.log("拦截器1");
   next()
})//拦截器

app.use("/",function(res,req,next){
   console.log("拦截器2");
   next();
})//拦截器

app.use("/test",function(res,req,next){
   console.log("拦截器3");
   next()
})//拦截器

三.全栈模板

建模（jade）

*下载express：$npm install express --save和下载jade:npm install jade --save-dev

var express=require("express")
var app=express()//将express实例化

app.set("view engine","jade");//设置模板引擎

console.log(__dirname)
app.set("views", __dirname+"/jade");//将模板写到所在的包下,通过views获得模板的视图

app.use(express.static('static'))//注册静态文件

app.get("/",function(req,res){
	res.render("index",{titlex:"课工场首页"})//响应，通过该视图views在浏览器上响应
}).listen(3000)

jade模板

doctype html
html(lang="en")
	head
		title #{titlex}
		meta(name="keywords",content="ke gong chang")				
		script(type="text/javascript").
			var a=100;
			console.log(a);
			function clickBtn(){
				alert("我被点击了")
			}
		style.
			body{
				background:green;
			}
		link(type="text/css",rel="stylesheet",href="./index.css")
	body
		h1 课工场
		div.col#test
			a(href="http://www.baidu.com",target="_blank",style="{color:red}")百度
			|中国强则少年强
			button(onclick="clickBtn")点击
			-for(var i=0;i<3;i++)
				h1 #{i}
			-var str="课工场"
				div=str
			-var a=false,b=false
				if a
					div a is true
				else if b
					div b is true
				else
					div all are true
			-var arr=['zhangsan','lisi','wangwu']
				each item in arr
					div=item

这是jade的书写格式：

父子标签关系是用tab缩进来确定的
div.col#test 相当于 class=col id=test
前面加 | 表示后面的内容都是文本内容
标签空一下格，在写就是该标签的文本内容

ejs模板


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>EJS</title>
</head>
<body>
	<%=titlex%>
</body>
</html>

ejs模板是跟html格式书写是一样的，就像jsp嵌入java代码一样，直接用<%%>括起来，在内部就能写脚本代码

四.post/get请求

1.get请求

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<script src="https://cdn.bootcss.com/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
	<button onclick="dian()">点击</button>
	<script>
		function dian(){
			$.ajax({
				url:"http://localhost:3000/index",
				type:"get",
				data:{"name":"jinq","pass":"123"},
				success:function(res){
					alert(res.msg);
				}
			})
		}
	</script>
</body>

var express=require("express")
var app=express()

app.use(express.static('static'))//注册静态文件

app.get("/index",function(req,res){
	// res.writeHead(200,{"Content-type":"text/html;charset=UTF-8",
 //          "Access-Control-Allow-Origin":"*"})
     
     //console.log(url.parse(req.url))
      console.log(req.query)
	res.send({       
         'msg':'返回数据'
	})
}).listen(3000)

2.pos请求

它与get请求不一样，它需要下载body-parser：npm install body-parser

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button onclick="Btn()">提交</button>
	<script src="https://cdn.bootcss.com/jquery/1.8.0/jquery.min.js"></script>

	<script>
		function Btn(){
		$.ajax({
			
         	url:"http://localhost:3000",
            type:"post",
            data:{
           	  "name":"Jin",
           	  "pass":"123"
           },
           
           success:function(res){
           	console.log(res)
           }
         })

		}
	</script>
</body>
</html>

var express=require("express")
var bodyParser=require("body-parser")
var app=express()

app.use(bodyParser.urlencoded({extended:false}))
app.use(express.static('static'))

app.post("/",function(req,res){
	console.log(req.body)
	res.send({
		"msg":req.body,
		"code":1
	})
}).listen(3000)

头铁的无法自拔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Express框架

Express的三个功能： 1.static静态文件访问，设置拦截 2.全栈模板：jade,ejs 3.对get，post的支持一.static静态文件访问下载express：$npm install express --savestatic文件夹下的文件直接访问：假如文件夹有index.html，直接在浏览器上敲localhost:...
复制链接

扫一扫