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>
-
