Node.js学习——Express的路由、动态路由、get 传值、引入ejs

一、安装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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <h2>我是一个ejs模板引擎</h2>
    <p><%=title%></p>
    <%- include('footer.ejs') %>
</body>
</html>

新建/views/news.ejs

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <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>
        <%for(let i=0;i<list.length;i++){%>
            <li><%=list[i]%></li>
        <%for(let i=0;i<newsList.length;i++){%>
            <li><%=newsList[i].title%></li>
    <%- 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

background: red;

在views/index.html、views/news.html中引入该css文件就能引入/static中设置的样式

<meta charset="UTF-8">