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"})
})