一、安装express
1. 局部安装
生成package.json文件。
npm init
或：
npm init -y // -y表示快速生成
下载并安装express，并写入package.json。
npm install express --save
或简写为：
npm i express -S
2. 全局安装express
npm install express --global
或：
npm i express -g
3. 使用express的脚手架生成器生成项目框架
详情可查看官网：https://www.expressjs.com.cn/starter/generator.html
全局安装express-generator
npm install express-generator -g
使用如下指令在指定目录下新建express项目
express --view=ejs OperateExpressGenerator
此处使用的是ejs模板引擎，OperateExpressGenerator就是新建的express项目目录，
到指定目录下install各个模块
npm install
启动项目使用指令
node start
或者
node ./bin/www
二、路由、动态路由、get 传值、请求对象req、响应对象res
const express = require('express')
const app=express()
app.get("/",(req,res)=>{
res.send("你好 express")
})
app.get('/.*fly$', function(req, res) { // app.js-路由路径匹配fly结尾的任意路径
res.send('/.*fly$');
})
app.get("/article",(req,res)=>{
res.send("新闻页面")
})
app.get("/login",(req,res)=>{
res.send("登录")
})
app.get("/register",(req,res)=>{ //get:显示数据
res.send("注册页面")
})
// 请求对象req
// 地址栏输入http://localhost:3000/aa/bb/cc/3?a=1&b=2
app.get('/aa/bb/cc/:id', function (req, res) {
// 1.req.originalUrl:获取请路由配置的原始url由baseUrl和url组成
console.log(req.originalUrl); // 返回结果为/aa/bb/cc/3?a=1&b=2
// 2.req.hostname:获取用户请求的域名
console.log(req.hostname); // localhost
// 3.req.ip:获取用户请求的ip地址，可以用来设置白名单
console.log(req.ip); // ::1
// 4.req.method:获取用户请求方法，可以手动实现路由功能
console.log(req.method); // GET
// 5.req.params:用来获取路由动态参数中的内容
console.log(req.params); // { id: '3' }
// 6.req.path:获取url请求中的路径，注意不是host，port或query，仅仅是路径，可以手动实现路由功能
console.log(req.path); // /aa/bb/cc/3
// 7.req.protocol:获取客户端请求的协议，一般是http或https
console.log(req.protocol); // http
// 8.req.secure:判断用户是否是https请求，返回boolean值
console.log(req.secure); // false
// 9.req.xhr:用来判断是否是Ajax请求（XMLHttprequest），返回boolean值
console.log(req.xhr); // false
res.send()
});
// 响应对象res
var goods = {
"iphonex": {
"nums": 100,
"price": 1999.98,
"color": "red"
},
"car": {
"nums": 100,
"price": 9999999,
"color": "black"
}
}
router.get('/testRes', function (req, res) {
// 1.res.json():给客户端发送json数据
res.json({error:0,data:goods});
// 2.res.send():发送数据给客户端，可以是字符串，json对象或buffer
res.send('success');
res.send(goods);
res.send(Buffer.from('Hi,Harrison!'));
// 3.res.render():渲染指定模板给客户端
res.render('index', {
title: 'Hi,Hou sir!'
});
// 4.res.redirect():重定向
res.redirect('/login');
// 5.res.status():设置响应header状态码，比如200,301,404,500等
res.status(200).send('success');
// 6.res.sendStatus():同样是设置响应header状态码，它等同于send + status两个方法的链式操作
res.sendStatus(200); // 等效于 res.status(200).send('OK')
res.sendStatus(403); // 等效于 res.status(403).send('Forbidden')
res.sendStatus(404); // 等效于 res.status(404).send('Not Found')
res.sendStatus(500); // 等效于 res.status(500).send('Internal Server Error')
// 7.res.set(),res.setHeader:设置响应head信息，如content-type，content-lenght等
res.setHeader('Content-Type', 'text/html;charset=utf8');
res.set({
'Content-Type': 'application/json'
});
console.log(res.get('Content-Type'));
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type, Authorization');
res.setHeader("Content-Type", "application/json;charset=utf-8");
res.end();
// 8.res.end():结束请求响应循环
res.end();
});
app.post("/doLogin",(req,res)=>{ //post:增加数据
console.log("执行登录")
res.send("执行登录")
})
app.put("/editUser",(req,res)=>{ //put：主要用于修改数据
console.log("修改用户")
res.send("修改用户")
})
app.delete("/deleteUser",(req,res)=>{ //delete：主要用于删除数据
console.log("执行删除")
res.send("执行删除")
})
app.all('/secret', function(req,res,next){ // all：接收任意的http方法
res.send('This is all request page!')
})
//路由里面配置多级目录 http://localhost:3000/admin/user/edit
app.get("/admin/user/add",(req,res)=>{
res.send("admin user add")
})
app.get("/admin/user/edit",(req,res)=>{
res.send("admin user edit")
})
//动态路由 配置路由的时候也要注意顺序
app.get("/article/add",(req,res)=>{
res.send("article add")
})
app.get("/article/:id",(req,res)=>{
var id=req.params["id"] //获取动态路由
res.send("动态路由"+id)
})
app.get('/users/:uid/movies/:mid', function(req, res) {
res.send(req.params);
// 访问localhost:3000/users/1/movies/2时得到{'uid':1,'mid':3}
})
//get 传值 http://localhost:3000/product?id=123&cid=123
app.get("/product",(req,res)=>{
let query = req.query //获取get传值
console.log(query)
res.send("product-"+query.id)
})
app.listen(3000)
注意
1、在使用express获取动态路由时
app.get("/article/:id",(req,res)=>{
var id=req.params["id"] //获取动态路由
res.send("动态路由"+id)
})
id是作为路由类型的占位符，可以替代其他值
2、获取get传值是通过let query = req.query //获取get传值
三、引入ejs
1、安装 cnpm install ejs --save
2、配置 app.set("view engine","ejs")
3、使用 (默认加载模板引擎的文件夹是views)
res.render("index",{
})
4、改变加载模板引擎文件夹
app.set('views', __dirname + '/views');
__dirname表示当前文件目录，此处的__dirname + '/views'可以换为其他的文件路径
新建app.js文件
const express = require("express");
const app = express()
//配置模板引擎
app.set("view engine","ejs")
app.get("/",(req,res)=>{
let title = "你好ejs";
res.render("index",{
title:title
})
})
app.get("/news",(req,res)=>{
let userinfo={
username:"张三",
age:20
}
let article="<h3>我是一个h3</h3>"
let list=["1111","22222","3333333"]
let newsList=[
{
title:"新闻1111",
},
{
title:"新闻122222",
},
{
title:"新闻33331",
},
{
title:"新闻44444",
}
]
res.render("news",{
userinfo:userinfo,
article:article,
flag:true,
score:60,
list:list,
newsList:newsList
})
})
//监听端口 端口号建议写成3000以上
app.listen(3000)
注意
上面的res.render()的第一个参数是需要加载的目录文件
此时新建/views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>我是一个ejs模板引擎</h2>
<p><%=title%></p>
<%- include('footer.ejs') %>
</body>
</html>
新建/views/news.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>绑定数据</h2>
<p><%=userinfo.username%>---<%=userinfo.age%></p>
<p><%=article%></p>
<p><%-article%></p>
<h2>条件判断</h2>
<%if(flag==true){%>
<strong>flag=true</strong>
<%}%>
<%if(score>=60){%>
<p>及格</p>
<%}else{%>
不及格
<%}%>
<h2>循环遍历</h2>
<ul>
<%for(let i=0;i<list.length;i++){%>
<li><%=list[i]%></li>
<%}%>
</ul>
<br>
<ul>
<%for(let i=0;i<newsList.length;i++){%>
<li><%=newsList[i].title%></li>
<%}%>
</ul>
<%- include('footer.ejs') %>
</body>
</html>
新建/viewss/footer.ejs
<footer>
<h1>公共的底部</h1>
</footer>
注意
-
<%“脚本”标签，用于流程控制，无输出； -
<%_删除其前面的空格符； -
<%=输出数据到模板，输出的是转义HTML标签； -
<%-输出非转义的数据到模板； -
<%#注释标签，不执行、不输出内容； -
<%%输出字符串 '<%'； -
%>一般结束标签； -
-%>删除紧随其后的换行符； -
_%>将结束标签后面的空格符删除。
例如： -
<%-%>中-后面可以有空格，<%-%>主要就是解析-后面的内容，比如<h3>我是一个h3</h3>、include('footer.ejs') -
<%=%>中=后面接的是显示的内容 -
<%%>中可以写JavaScript语句
5、使用ejs模板引擎注册html模板引擎
var ejs = require('ejs');
app.engine('html',ejs.__express);
app.set("view engine","html")
此时引入的模板引擎的后缀名改为.html
即将views/index.ejs、views/news.ejs、views/footer.ejs改为views/index.html、views/news.html、views/footer.html、
6、配置静态web目录
app.use(express.static("static"))
此时在目录/static中新建文件bese.css
h1{
background: red;
}
在views/index.html、views/news.html中引入该css文件就能引入/static中设置的样式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/base.css">
</head>
网友评论