egg3.0渲染模板egg-view-nunjucks,支持点击事件

最新推荐文章于 2024-06-12 09:49:46 发布

HaanLen

最新推荐文章于 2024-06-12 09:49:46 发布

阅读量282

点赞数

分类专栏： Node 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_40119412/article/details/130354259

版权

Node 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

安装依赖

$ npm i egg-view-nunjucks --save

  "dependencies": {
    "egg": "^3",
    "egg-mongoose": "^3.3.1",
    "egg-scripts": "^2",
    "egg-view-nunjucks": "^2.3.0"
  },

配置信息

app/config/plugin.js

'use strict';

/** @type Egg.EggPlugin */
module.exports = {
  mongoose: {
    enable: true,
    package: 'egg-mongoose',
  },
  nunjucks: {
    enable: true,
    package: 'egg-view-nunjucks',
  },
};

app/config/config.default.js

'use strict';

/**
 * @param {Egg.EggAppInfo} appInfo app info
 */
module.exports = appInfo => {
  /**
   * built-in config
   * @type {Egg.EggAppConfig}
   **/
  const config = exports = {
    security: {
      csrf: {
        enable: false,
      },
    },
    mongoose: {
      client: {
      // 链接到本地的MongoDB，note是我本地数据库的名字
        url: 'mongodb://127.0.0.1:27017/note',
        options: {
          // dbName: 'note',
          useNewUrlParser: true,
        },
      },
    },
    view: {
      defaultViewEngine: 'nunjucks',
      mapping: {
        '.tpl': 'nunjucks',
      },
    },
  };

  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + '_1682063943419_2410';

  // add your middleware config here
  config.middleware = [];

  // add your user config here
  const userConfig = {
    // myAppName: 'egg',
  };

  return {
    ...config,
    ...userConfig,

  };
};

支持tpl文件高亮

在settings.json文件中添加配置

  "files.associations": {
    "*.tpl": "html"
  },

定义view

app\view\role.tpl

<html>

<head>
  <title>Role Test</title>
  <link rel="stylesheet" href="/public/css/role.css" />
</head>

<body>

  <ul class="role-view view" id="role-box" >
    {% for item in list %}
    <li class="item" data-item="{{item}}">
      {{ item.name }}
    </li>
    {% endfor %}
  </ul>
</body>
<script>

  const dom = document.getElementById('role-box')
  dom.addEventListener('click', (e) => {
    console.log('e', e);
  })
  console.log(dom);

</script>

</html>

css样式

app\public\css\role.css

.role-view  {
  background-color: palevioletred;
}

.role-view .item {
  height: 26px;
  line-height: 26px;
}

app/controller/role.js

以下代码为上述文件的其中一个函数

  // 查询数据
  async list() {
    const { ctx } = this;
    const res = await ctx.service.role.findRoleList();
    console.log('render', res);

    // ctx.body = res;
    await ctx.render('role.tpl', { list: res });
  }

app/router.js

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/role', controller.role.list);
  router.post('/role/add', controller.role.add);
  router.post('/role/bitch_add', controller.role.bitch_add);
  router.delete('/role/del', controller.role.del);
  router.delete('/role/bitch_del', controller.role.bitch_del);
  router.post('/roles', controller.rolePost.index);
};