const express = require("express"); const path = require("path"); const app = express(); app.use(express.json()); app.use(express.urlencoded({extended:true})); app.listen(5555); //模拟数据库获取的数据 let data = [ {"name":"鞋子",price:"499$"}, {"name":"T-恤",price:"255$"}, {"name":"大衣",price:"888$"} ]; //get方式返回页面 /* app.get("/",(req,res)=>{ res.sendFile(path.join(__dirname,"./public/index.html")); }) */ //post方式返回数据 /* app.post("/",(req,res)=>{ res.send(data); }) */ /* 以上的方法太老式了,而且前端还得去处理返回的字符串数据 这时我们使用ejs方法!!! const ejs = require("ejs"); 前提:引入模块ejs 单独使用ejs的时候需要引入ejs模块 const ejs = require("ejs"); 但是如果是配合着express模块来使用,就不用引入ejs */ app.use(express.static("./public")); /*调用模板引擎ejs 固定写法*/ app.set("view engine","ejs"); //ejs只是一种,还可以是pug,... /*render用于返回一个模板引擎文件 * 参数1 可以是一个绝对路径,或者是 "相对路径名"--render会自动去当前目录找views文件夹 * * 参数2 代表渲染模板的时候带过去的数据 * 必须是一个基础的对象 {} * 在调用的模板引擎中,会自动产生 "全局变量"--传过去的对象的属性名 * */ // res.render("test" , {goudan:"狗蛋",dachui:"大锤"}); //ejs的语法每一行必须有开始和结束符号<% %> /* <% '脚本' 标签,用于流程控制,无输出。 <%_ 删除其前面的空格符 <%= 输出数据到模板(输出是转义 HTML 标签) <%- 输出非转义的数据到模板 <%# 注释标签,不执行、不输出内容 <%% 输出字符串 '<%' %> 一般结束标签 -%> 删除紧随其后的换行符 _%> 将结束标签后面的空格符删除 */ app.get("/",(req,res)=>{ res.render("test" , {x:data}); }) /* test.ejs核心文件: <% x.forEach(item=>{%> <tr> <td><%=item.name %></td> <td><%=item.price %></td> <td><%=item.age %></td> </tr> <%})%> !!!等号必须连着<%一起写,不然会报错 */ /* 核心:其实就是把HTML代码放到了后缀名为ejs的文件里面,可以写CSS样式,但是不能<script></script>写js代码去处理返回的数据。 但是如果css,js文件时通过link script标签引入的,那则需要设置一个静态路由,不然会报错 Refused to apply style from 'http://127.0.0.1:5555/public/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 方法:app.use(express.static("./public")); !!!ejs文件访问静态文件(css,js等)的时候直接写里面的路径,不需要从ejs文件去找。 ejs文件修改不需要重启node服务 ejs方便了模块的分开,直接引入写好的ejs模块组合就行 !!!==> <%- include("路径名-是相对于此文件夹出发",{data:data})%> 直接引入过来了 如果是等号:<%= include("路径名-是相对于此文件夹出发",{data:data})%> 就会以字符串的形式返回,很少用 <title><%= title%></title>标题可以改变 可以实现不使用ajax请求,就可以把后端返回来的数据,以javascript的语法进行操作,但是要加上ejs的语法格式。 可以将不同的模块(HTML)分开来写,然后用<%- include('ejs文件名'); -%>,参数1 可以是一个绝对路径, 或者是 "相对路径名"--render会自动去当前目录找views文件夹 @首先(下面会有代码实例演示): 在编写服务器脚本的页面中引入express(有express模块后就不用引入ejs模块了) 然后设置路由监听,和正常的express使用即可 app.set("view engine","ejs"); res.render() 开启 */ app.get("/index",(req,res)=>{ res.render("index"); }) app.get("/menu",(req,res)=>{ res.render("menu"); }) app.get("/personal",(req,res)=>{ res.render("personal"); }) app.get("/page",(req,res)=>{ res.render("page",{title:"page"}) }) app.get("/page1",(req,res)=>{ res.render("page1",{title:"page1"}) }) app.get("/page2",(req,res)=>{ res.render("page2",{title:"page2"}) })
全部评论
(0) 回帖