Express使用
目录
配置静态
拦截器
全栈模板(Jade和EJS)
jade模板
ejs模板
get post接收参数
首页要安装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
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=itemejs模板
首先要下载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
Document
<%=titlex%>
<% for(var i=0;i<3;i++){%>
<%=i%>
<%}%>
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
Document
首页静态文件
哈哈哈哈