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