nodejs （experss静态资源配置和模板引擎）

小慧哥

已于 2022-09-28 10:47:47 修改

阅读量639

点赞数

分类专栏： Nodejs 文章标签： nodejs express

于 2019-09-24 14:45:30 首次发布

本文链接：https://blog.csdn.net/q465162770/article/details/101278821

版权

Nodejs 专栏收录该内容

44 篇文章 8 订阅

订阅专栏

详细流程写在这里了

nodejs （experss框架流程详解）

express 静态资源

在express 中public 是在框架中存放资源的地方比如JS CSS 图片等如果想加别的直接增加文件夹就可以

举栗子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/stylesheets/style.css">
  <title><%=title%></title>
</head>
<body>
  <a><%=title%></a>
  <h1>超链接为啥不是蓝色</h1>
  <img src="/images/dog.jpg">
  
</body>
</html>

在HTML 所有的控件如果想访问public下的资源可以使用 / 文件夹/文件名就可以比如（/images/dog.jpg）

为什么会这么方便？

因为：

在app.js中下面这句话把public文件夹做成全局静态路径路径变成http：//localhost:端口/images/dog.jpg形式

如果想改变不用public文件修改 app.js 把public 修改一下就好了

app.use(express.static(path.join(__dirname, 'public')));

模板引擎

模板引擎感觉有点数据绑定的意思这是我个人理解哈

上代码

路由

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/stylesheets/style.css">
  <title><%=title%></title>
</head>
<body>
  <a><%=title%></a>
  <h1>超链接为啥不是蓝色</h1>
  <img src="/images/dog.jpg">
  
</body>
</html>

1)路由

res.render('index', { title: 'Express' }); 发送对象也可以是数组

2)index.ejs 通过<%=title%> 来获取对象

如果加逻辑可以

<%if(..){..}%>

下一步做一个后台项目终于要入水了