node之express框架（二）静态资源和EJS

node之express框架（二）

静态资源访问

静态资源就是每个项目都有一些开放出来的东西供外部访问，如js，css，images等等，业内习惯将这些东西放在public文件夹内express.static（）这个api就是专门用来开放静态资源用的，不设置，外界无法访问。

app.js

	const express = require('express');
	const app = express();
	app.use(express.static('public'))
    app.listen(3000,function (){
        console.log('服务器启动成功','http://127.0.0.1:3000')
    })

目录结构

打开浏览器：

在目录下输入public下的路由文件可以直接访问

ejs

在讲ejs前先看个代码

app.js:

const express = require('express')
const bodyParser = require('body-parser')
const {resolve} = require('path')
const app = express()

app.set('views',resolve('views'))
app.set('view engine','ejs')

// 全局中间件 把保安在小区门口

// 第三方中间件  解决 Post请求体 把数据挂载到 req.body
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

// 开放静态资源访问
app.use(express.static(resolve('public')))
//跨域问题
app.all('*',function (req,res,next) {
    res.header('Access-Control-Allow-Origin','*')
    next()
})


// 全局自定义 中间件
app.use(function (req,res,next) {
    console.log(req.get('Origin'))
    // if (req.get('Origin') !== 'http://game.h5sm.com'){
    
    // if (req.get('Origin') !== 'http://127.0.0.1:3000'){
    //     // 不允许进入下一步的代码执行 next('这是响应的内容说明 ')
    //     next('不好意思，此接口不对外开放')
    // }
   
    // 允许进入下一步 next() 不用传参
    next()
})

// app.use(require('./router/index.js'))
app.use('/',require('./router/index.js'))

app.listen(3000,function (){
    console.log('服务器启动成功','http://127.0.0.1:3000')
})

router/index.js：

const {Router} = require('express')
const router = Router()

router.use('/',require('./web/home'))//当访问根路由时，我们进入的是web/home下
router.use('/admin',require('./admin/login'))

// /api 路由中间件 把保安请你家门口
router.use('/api',function (req,res,next) {
    // 符合条件(至于什么条件 根据需求 ) 往下执行
    next()
},require('./api/api'))

module.exports = router

什么是EJS

EJS是一个JavaScript模板库，用来从JSON数据中生成HTML字符串。 与最初的JavaScript相比较，一些不太了解你的代码的人可以更容易地通过EJS模板代码看得懂你的代码。 让我们放松一下，一起来享受下令人激动的干净简洁的感觉。总之可以让代码更加干净整洁，让人易懂。

标签含义

<% '脚本' 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 '<%'
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

自定义分隔符

可针对单个模板或全局使用自定义分隔符：

let ejs = require('ejs'),
    users = ['geddy', 'neil', 'alex'];

// 单个模板文件
ejs.render('<?= users.join(" | "); ?>', {users: users},
    {delimiter: '?'});
// => 'geddy | neil | alex'

// 全局
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
// => 'geddy | neil | alex'

缓存

EJS 附带了一个基本的进程内缓存，用于缓在渲染模板过程中所生成的临时 JavaScript 函数。 通过 Node 的 lru-cache 库可以很容易地加入 LRU 缓存：

let ejs = require('ejs'),
    LRU = require('lru-cache');
ejs.cache = LRU(100); // 具有 100 条内容限制的 LRU 缓存

如果要清除 EJS 缓存，调用 ejs.clearCache 即可。如果你正在使用的是 LRU 缓存并且需要设置不同的限额，则只需要将 ejs.cache 重置为 一个新的 LRU 实例即可。

自定义文件加载器

默认的文件加载器是 fs.readFileSync，如果你想要的自定义它, 设置ejs.fileLoader 即可。

let ejs = require('ejs');
let myFileLoader = function (filePath) {
  return 'myFileLoader: ' + fs.readFileSync(filePath);
};

ejs.fileLoader = myFileLoad;

使用此功能，您可以在读取模板之前对其进行预处理。

布局（Layouts）

EJS 并未对块（blocks）提供专门的支持，但是可以通过 包含页眉和页脚来实现布局，如下所示：

<%- include('header'); -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer'); -%>

客户端支持

从latest release 链接下载 ./ejs.js 或 ./ejs.min.js 文件。或者，你可以 clone 这个仓库并 通过执行 jake build 自己编译（或者执行 $(npm bin)/jake build，如果 jake 不是安装在全局环境的话）。

在页面中包含上面的任意一个文件，然后 ejs 就全局可用了

示例

<div id="output"></div>
<script src="ejs.min.js"></script>
<script>
  let people = ['geddy', 'neil', 'alex'],
      html = ejs.render('<%= people.join(", "); %>', {people: people});
  // With jQuery:
  $('#output').html(html);
  // Vanilla JS:
  document.getElementById('output').innerHTML = html;
</script>

注意事项

大多数情况下，EJS 将会按照我们的预期运行; 但是, 仍然需要注意：

1. 显然, 如果你没有文件系统的访问权限, ejs.renderFile 将无法正常工作。
2. 相同的原因, 除非为 include 设置一个回调函数，否则 include 无法正常工作。如下所示：

let str = "Hello <%= include('file', {person: 'John'}); %>",
      fn = ejs.compile(str, {client: true});

fn(data, null, function(path, d){ // include callback
  // path -> 'file'
  // d -> {person: 'John'}
  // Put your code here
  // Return the contents of file as a string
}); // returns rendered string
(str, {client: true});

fn(data, null, function(path, d){ // include callback
  // path -> 'file'
  // d -> {person: 'John'}
  // Put your code here
  // Return the contents of file as a string
}); // returns rendered string