报错cannot get/ 原因没有设置静态资源目录 管线
就是加入管线 app.use(express.static('public'));
为什么能找到public文件夹?
把app.use看成管道,第一道网就是public,带进入这个文件夹,默认进入index.js
index.html
我是主页
1打通路
加入管线
效果:返回一个json
2.怎么让他返回一个HTML页面?
express约定的视图文件夹views
node app
效果:找不到文件
缺少一道网 -->视图模板 必须用它来找views/.html并且可以解析它->安装ejs
npm install ejs --save
引入 const ejs = require('ejs');
加入管线(设置视图引擎) app.engine('ejs',ejs.renderFile);
3.怎么让他去找到views文件夹? app.set('views','views');
set和use功能一样
// 第一个参数是视图模板(固定),第二个参数是视图模板所在的位置,默认express框架把views文件夹当成视图文件的位置
app.engine(‘ejs’,require(‘ejs’).renderFile);//优化
查文档 http://www.expressjs.com.cn/4x/api.html#app.engine
如果想让他解析jsp文件(安全性高)
app.engine(‘jsp’,require(‘ejs’).renderFile);//优化
views/ order.jsp
router/order.js ->res.render(‘order.jsp’)//ejs后缀可以省略
改成ejs
app.engine(‘ejs’,require(‘ejs’).renderFile);
views/ order.ejs
router/order.js ->res.render(‘order’)
错误表示没有解析器,设置一个解析器
app.set(‘view engine’,‘ejs’);
相当于
解析HTML,js
app.engine(‘ejs’,require(‘ejs’).renderFile);
解析ejs
app.set(‘view engine’,‘ejs’);
两个作用一样
4.怎么让视图动态化?
原来:视图模板里面发起ajax请求 ,脚本,jQuery $.get 获取数据,绑定到视图上(dom绑定)
现在:要动态渲染,需要数据
数据从哪里来?
回到render函数
res.render(‘order’,[option]);
// 第一个参数是视图的名称,如果是.ejs文件,必须省略后缀名,如果是.html,.jsp,.abc,.def等自己定义的后缀名时,必须加后缀。
// 第二个参数是视图需要的数据
数据传过去了如何使用?
<%= title %>
app.js
app.set(‘views’,‘views’);//可以省略。默认
app.set(‘view engine’,‘ejs’);//与下两行等效 如果是.ejs文件,可省略后缀名,
// 需要使用视图模板引擎,让他解析views文件中的.html文件
// 需要安装视图模板引擎:npm install ejs --save
// const ejs = require(‘ejs’);
// app.engine(‘ejs’,ejs.renderFile);
// 设置视图引擎
// 加()立即执行了,没有加()相当于绑定到前面
// app.engine(‘ejs’,require(‘ejs’).renderFile);//要在order.js里加 res.render(‘order.ejs’) 如果是.ejs文件,必须加上后缀名,
//------------------------------------------------------
app.use(require(‘./router/order.js’));
app.use(require(‘./router/product.js’));
// 理解在接口前多加一个前缀
app.use(‘/api’,require(‘./router/product.js’));
router/order.js
const express = require(‘express’);
const route = express.Router();
// 方盒子-属性,不加括号、 立方体-方法加括号
// a标签发起的是get请求,如果要让他发起post请求,要设置监听事件
route.get(‘/order/list’,function(req,res,next){
// res.json({code:200});
res.render(‘order’,{
title:‘我是订单列表页’,
content:‘
我是标题2
’,person:{
name:‘张三’,
age:20,
sex:true,
fav:[‘读书’,‘听音乐’,‘唱歌’]
}
});
});
module.exports = route;
模板用ejs渲染
views/order.ejs
订单列表
<%= title %>
<%- content %>
姓名:<%= person.name %>
年龄:<%= person.age %>
姓别:<%= person.sex?“男”:“女” %>
姓别:<% if(person.sex){ %>
男
<% }else{ %>
女
<% } %>
爱好:
<% for(var i = 0; i < person.fav.length ;i++){%>
<%= person.fav[i]%>
<% }%>
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://img-blog.csdnimg.cn/img_convert/ce82f3c9fac626f66819aaae13fbef1d.jpeg)
最后
给大家分享一些关于HTML的面试题,有需要的朋友可以戳这里免费领取,先到先得哦。
系化!**
[外链图片转存中…(img-ZktmSxvw-1712203427121)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://img-blog.csdnimg.cn/img_convert/ce82f3c9fac626f66819aaae13fbef1d.jpeg)
最后
给大家分享一些关于HTML的面试题,有需要的朋友可以戳这里免费领取,先到先得哦。
[外链图片转存中…(img-oOJr2Sda-1712203427122)]
[外链图片转存中…(img-2Nq1jFRQ-1712203427122)]