首页要安装express插件:npm install --save express

配置静态

//配置静态文件

//导入express 
var express=require("express");
//必须要实例化才能用
var app=express();

//开始配置文件static括号内是静态文件夹名,可以配置多个静态文件夹
app.use(express.static("static"));

//跟node http.createServer差不多参数格式
app.get("/",function(req,res){
	//类似于http.end();
	res.send();
	//监听,端口号,这里省略写本机的localhost
}).listen(3000);

访问index.html网址是：http://localhost:3000/ ←express会自动找静态文件夹下index.html(若你配置了静态文件夹)
或者http://localhost:3000/index.html
访问login.html网址是：http://localhost:3000/login.html

拦截器

//配置拦截器

//导入express 
var express=require("express");
//必须要实例化才能用
var app=express();

//配置拦截器
//   /是全拦截
app.use("/",function(req,res,next){
	console.log("第一个拦截器");
	//主方法本体,相当于继续执行下一个方法,没有这个就不会继续走下一个方法了
	next();
})
app.use("/",function(req,res,next){
	console.log("第二个拦截器");
	next();
})

//开始配置文件static括号内是静态文件夹名,可以配置多个静态文件夹
app.use(express.static("static"));

//跟node http.createServer差不多参数格式
app.get("/",function(req,res){
	//类似于http.end();
	res.send();
	//监听,端口号,这里省略写本机的localhost
}).listen(3000);

全栈模板(Jade和EJS)

jade模板

要先下载jade插件 npm install --save-dev jade
js文件

//配置拦截器

//导入express 
var express=require("express");
//必须要实例化才能用
var app=express();

//配置拦截器
//   /是全拦截
app.use("/",function(req,res,next){
	console.log("第一个拦截器");
	//主方法本体,相当于继续执行下一个方法,没有这个就不会继续走下一个方法了
	next();
})

//设置模板引擎为jade
app.set("view engine","jade");
//设置为views,__dirname是常量(自动获取当前绝对路径)内的jada文件夹(自己创建,也可以改名)内
app.set("views",__dirname+"/jade")

//配置模板,若是"/"拦截的话,最好静态文件夹内不要用index.html
//开始配置文件static括号内是静态文件夹名,可以配置多个静态文件夹
app.use(express.static("static"));

//跟node http.createServer差不多参数格式
app.get("/",function(req,res){
	//传值给jade文件,第一个参数是文件名，第二个是传参内容(json格式)
	res.render("index",{titlex:"自定义参数"});
	//监听,端口号,这里省略写本机的localhost
}).listen(3000);

index.jade

扫描二维码关注公众号，回复： 3912092 查看本文章

doctype html
html(lang='en')
	head
		title #{titlex}
		meta(name='keyWords',content="jade模板")
		script(type="text/javascript").
			var a=100;
			console.log(a);
			function clickBtn(){
			alert("点击方法");
			}
		style.
			h1{
			color:red;
			}
		link(type="text/css",rel="stylesheet",href="http://localhost:3000/index1.css")
	body
		//格式: 网页元素+空格+文本内容
		h1 h1显示的内容,样式为字体红色
		//格式：网页元素配置class为col,id为text
		div.col#text
			//div的子类 格式：网页元素+括号(括号内写属性)
			a(href="http://www.baidu.com",target="_black") 百度
			br
			//前面添加"|"会编译为文本
			|加了"|"是判断是标签元素还是文本元素
			br
			button(onClick="clickBtn()") 点击
			br
			|嵌入脚本是+"-"如 -var str="文本内容" div=str
			br
			//定义脚本变量
			-var str="文本内容哈哈"
			div=str
			br
			//定义脚本for
			-for(var i=0;i<3;i++)
				div #{i}
			//定义脚本if else
			-var a=false,b=false
			if (a) 
				div a is true
			else if(b)
				div b is true
			else
				div all is false
			//遍历循环
			-var arr=['zhangsan','lisi','wangwu']
				each item in arr
					div=item

ejs模板

首先要下载ejs插件 npm install --save ejs
router.js

//配置拦截器

//导入express 
var express=require("express");
//必须要实例化才能用
var app=express();

//设置模板引擎为ejs
app.set("view engine","ejs");
//设置为views,__dirname是常量(自动获取当前绝对路径)内的ejs文件夹(自己创建,也可以改名)内
app.set("views",__dirname+"/ejs")

//配置模板,若是"/"拦截的话,最好静态文件夹内不要用index.html
//开始配置文件static括号内是静态文件夹名,可以配置多个静态文件夹
app.use(express.static("static"));

//跟node http.createServer差不多参数格式
app.get("/",function(req,res){
	//传值给jade文件,第一个参数是文件名，第二个是传参内容(json格式)
	res.render("index",{titlex:"自定义参数"});
	//监听,端口号,这里省略写本机的localhost
}).listen(3000);

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 跟普通html写法大部分一样。变量定义跟java小脚本一样 -->
	<h1><%=titlex%></h1>
	<!-- 定义for循环 -->
	<% for(var i=0;i<3;i++){%>
	<div><%=i%></div>
	<%}%>
</body>
</html>

get post接收参数

router.js

//导入express 
var express=require("express");
//必须要实例化才能用
var app=express();

//开始配置文件static括号内是静态文件夹名,可以配置多个静态文件夹
app.use(express.static("static"));

//可以多个方法提交(多个"/XXX")只需listen其中一个即可,listen只能存在一个
//get提交
app.get("/get",function(req,res){
	//获取get提交的参数值
	console.log(req.query);
	res.send("get提交获取参数值");
	//监听,端口号,这里省略写本机的localhost
}).listen(3000);

//post提交
//需要追加几个插件
var bodyParser=require("body-parser");
//必须设置这个才能解析query的数据
app.use(bodyParser.urlencoded({extended:false}));
app.post("/post",function(req,res){
	//获取post提交过来的参数
	console.log("走到了post提交");
	//若想返回多个参数可以返回一个json对象
	res.send({msg:"post提交","code":1});
})

index1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
	首页静态文件
	<h1>哈哈哈哈</h1>
	<input type="text" id="text"/>
	<button onClick="methodGet()">get提交按钮</button>
	<button onClick="methodPost()">post提交按钮</button>
	<script>
		function methodGet(){
			let val=$("#text").val();
			$.ajax({
				url:"http://localhost:3000/get",
				type:"get",
				data:{txt:val},
				success(dt){
					alert(dt);
				}
			})
		}//
		function methodPost(){
			let val=$("#text").val();
			$.ajax({
				url:"http://localhost:3000/post",
				type:"post",
				data:{txt:val},
				dataType:"json",
				success(dt){
					console.log(dt);
					alert(dt.msg);
				}
			})
		}
	</script>
</body>
</html>

Express使用

配置静态

拦截器

全栈模板(Jade和EJS)

jade模板

ejs模板

get post接收参数

猜你喜欢