03-08 03:15 阅读 119

express路由、静态托管、ejs模板引擎

app.js

配置不同的路由

const express = require("express")
const querystring = require("querystring")

const app = express();

// http://127.0.0.1:3000/?name=user&age=12
app.get("/",(req,res) => {
  var query = req.query;
  console.log(query);//{ name: ‘user‘, age: ‘12‘ }
  res.send("你好express");

})

app.get("/register",(req,res) => { //get 主要用于显示数据

  res.send("注册页面");
  
})

app.post("/doLogin",(req,res) => { //post 主要用于增加数据
  
  res.send("执行登录");
  
})

app.put("/editUser",(req,res) => { //put 请求主要用来修改数据
  res.send("修改用户");
  
})

app.delete("/deleteUser",(req,res) => { //delete 请求主要用来删除数据
  res.send("删除用户");
  
})

//配置多级路由
app.get("/admin/user/add",(req,res) => { 

  res.send("多级路由");
  
})

//配置动态路由
app.get("/artical/:id",(req,res) => { 
  var id = req.params["id"];
  console.log(id);
  res.send("多级路由"+id);
  
})

app.listen(3000)

ejs模板使用、静态资源托管

/**
 * express中使用ejs模板引擎
 * express默认集成了ejs
 * 1、安装 cnpm install ejs --save
 * 2、app.set("view engine","ejs")
 * 3、使用  默认加载模板引擎的文件夹是views
 * res.render("index",{
 *  
 * })
 * 
 * 如何将模板的.ejs后缀设置成.html后缀    没有下面的设置 那么模板的后缀名就用.ejs
 * 1、引入ejs  const ejs = require("ejs") 不用安装ejs哦
 * 2、app.engine("html",ejs.__express)
 * 3、app.set("view engine","html")
 * 
 * 
 * 配置静态托管
 * app.use(express.static(‘public‘))
 * 也可以配置虚拟目录
 * app.use(‘/static‘,express.static(‘public‘))  正常访问public下的静态资源 前面需要加上./static
 */

const express = require("express");
const ejs = require("ejs");
const app = express();
// 配置静态资源托管
app.use(express.static("static"))
// 使用ejs模板引擎 并设置模板后缀为.html后缀
app.engine("html",ejs.__express)
app.set("view engine","html")
// 指定模板位置(默认是views)  可以省去行代码
app.set("views",__dirname+‘/views‘)

app.get("/",(req,res) => {
  let title = "你好ejs"

  res.render("index",{
    title:title,
  })

})

app.get("/news",(req,res) => {
  let userInfo = {name:"张三",age:18};
  let artical = "我是一个html标签
"
  let list = [111,222,333]
  
  res.render("./news",{
    userInfo,
    artical,
    flag:true,
    score:Math.random()*10,
    list,
  })

})

app.listen(3000)

news.html

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>newstitle>
  <link rel="stylesheet" href="css/base.css">
head>
<body>
    <h2>绑定数据h2>
    <div><%=userInfo.name%>---<%=userInfo.age%>div>
    
    <h2>解析html标签h2>
    <div><%-artical%>div>

    <h2>条件判断h2>
    <%if(flag == true){%>
      <div>flag == truediv>
    <%}%>

    <%if(score > 6){%>
      <div>及格div>
    <%}else{%>
      <div>不及格div>
    <%}%>

    <h2>循环遍历h2>
    <ul>
      <%for(var i = 0;i < list.length;i++){%>
        <li><%=list[i]%>li>
      <%}%>
    ul>

    <h2>引入公共组件h2>
    <%-include(‘./footer.html‘)%>
    
body>
html>

原文：https://www.cnblogs.com/fqh123/p/15227550.html