eggjs视图+静态资源

视图 - 安装配置

进入项目目录，打开命令行
- 安装ejs模板插件
```
cnpm install egg-view-ejs -S
```

打开config/plugin.js，找到如下内容

module.exports = {
    //里面添加下面三行
    ejs: {
        enable:true,
        package:'egg-view-ejs'
    }
}

打开config/config.default.js，找到return字段
```
//return前面添加下面三行
config.view = {
    mapping:{
        '.html':'ejs'
    }
}
```
- 这里默认是识别.ejs文件，我们改成识别.html，这样就可以新建html文件去写视图模板

视图 - 书写

app目录内
- 新建view视图文件夹打开
- 在里面新建xxxxx.html
- 里面按html规则写视图模板

在模板内有几种关键字写法,详见ejs官网

<% 中间写隐藏的逻辑代码比如for和if %> 

<%= 中间写显示的数据变量代码，输出内容会转义 %>
最常用

<%- 输出内容不会对html标签做转义 %>
可用于include('其他模板的路径')来引入其他模板片段，可避免html做转义

<%_ 删除前面的空格符和后面的换行符 _%>

在控制器方法里面渲染视图模板，用于返回给用户显示
- 创建要传给模板的对象
```
const obj = {
    data: 'world'
}
```
- 指定用此对象的数据，渲染xxxxx模板
```
await this.ctx.render('xxxxx',{ obj })
```
  - 记得await异步，不用加模板文件后缀
  - 如果不渲染，则要用ctx.body = xxx来返回给用户json内容
- xxxxx模板内容，可输出 Hello world
```
<h2>
Hello <%= obj.data%>
</h2>
```

静态资源

app目录内
- 新建public资源文件夹打开，在里面
  - 新建images文件夹放图片
  - 新建css文件夹放样式表
  - 新建js文件夹放代码

在模板内: 可引入图片资源

<img src="/public/images/xxx.png" alt="">

在模板内: 可引入样式表资源

<link rel="stylesheet" href="/public/css.xxx.css">

在模板内: 引入js代码资源

<script src="/public/js/xxx.js"></script>

Keyboard shortcuts

eggjs视图+静态资源

视图 - 安装配置

视图 - 书写

静态资源