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 = "<h3>我是一个html标签</h3>"
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>news</title>
<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 == true</div>
<%}%>
<%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>
-
标签：req,res,app,express,html,路由,ejs 来源： https://www.cnblogs.com/fqh123/p/15227550.html