node+nodemon+express+swig模板渲染配合使用

使用背景：使用node做后台，express做静态资源访问页面，数据用swig渲染到html

目录结构：

server  #服务配置文件
    server.js  #启动的主文件
    router.js  #页面跳转的路由配置
src  #源码目录
    assets  #资源
        imgs
        css
        js
    pages  #html页面
    index.html  #首页html

1.启动文件server.js

const express = require('express')
// const ejs = require('ejs');
const swig = require('swig')
const appRouter = require('./router.js')
const app = express();

// 配置ejs模板渲染，用ejs.renderFile
// app.set('view cache', false);  
// app.set('views', './src');
// app.set('view engine', 'html'); 
// app.engine('html', ejs.renderFile); 

// 配置swig模板渲染 
app.set('view cache', false); // 设置页面不缓存
app.set('views', './src'); // 这个是设置渲染的目录，只要可以定位到目录就行
app.set('view engine', 'html'); // 设置渲染.html结尾的文件
app.engine('html', swig.renderFile); // 渲染html


// 代理静态资源到assets
app.use('/assets', express.static('src/assets'))
// 使用路由
app.use('/', appRouter)

// 创建服务
const server = app.listen(8090, 'localhost', function () {
  const host = server.address().address;
  const port = server.address().port;
  console.log('> 服务启动完成，访问地址： http://%s:%s/', host, port);
})

2.router.js中配置路由跳转到指定的页面，可以带数据到页面中，在页面中会通过swig的模板渲染出来

const express = require('express')
const appRouter = express.Router();

// 首页
appRouter.get('/index', function (request, response) {
  response.render('index.html', {
    content: '首页'
  })
})
// demo1页面
appRouter.get('/demo1', function (request, response) {
  response.render('page/demo1.html', {
     content: 'demo1页面'
  })
})

module.exports = appRouter

3.swig渲染模板的示例，主要介绍页面取值的方式，页面取值和脚本中绑定变量

1.页面取值用 {{ content }}，各种if，for等自行随便百度，一大把。
2.传值到页面中，在脚本里变量绑定传递过来的数据（这个网上基本百度不到）
<script>
    var content = {{ JSON.stringify(content) }}
    console.log(content)

    var myObj = {{ JSON.stringify(myObj) }}
    console.log(myObj.id, myObj.name)

    var myArray = {{ JSON.stringify(myArray) }}
    console.log(myArray[0])

  // 摸索了很多种方式，这里必须要这样写，传值过来不管是对象，字符串，数组，都可以解析为对象，正常的可以取值，注意不要带任何引号，编辑器可能会报错不要管，以上的方式是可以正常取到值的
</script>

4.渲染模板后，每次修改数据都要重启服务，可以用nodemon来做热部署，每次修改文件按保存后就自动重启服务

1.安装nodemon：sudo npm i nodemon -g
2.根目录配置nodemon.json，用nodemon启动时候会自动加载该文件配置
{
  "watch": ["server", "src"], // 监听的目录，可以自己设置
  "ext": "js json html", // 监听目录下的文件后缀，自己定义
  "ignore": ["src/assets/img/"] // 忽略的文件目录
}
3.package.json中配置
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node ./server/server.js",
    "restart": "nodemon ./server/server.js" // 用nodemon启动server文件
  }
4.输入命令：npm restart