1-1 加载页面

在controller 文件夹 新建 home.js

  1. 'use strict';
  3. const Controller = require('egg').Controller;
  5. class HomeController extends Controller {
  6.   async index() {
  7.     const { ctx } = this;
  8.     var db = this.app.mongodb;
  9.     const collection = await db.collection('member');
  10.     //拿到member中所有数据
  11.     var members = await collection.find().toArray();
  12.     console.log(members);
  13.     await ctx.render("/home",{members});
  14.   }
  15. }
  17. module.exports = HomeController;

在view 文件夹 新建 home.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .logo {
  11.             width: 50px;
  12.         }
  13.     </style>
  14.     <meta name="referrer" content="no-referrer" />
  15.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  16. </head>
  18. <body>
  19.     <div class="container">
  21.         <table class="table table-hover">
  22.             <thead>
  23.                 <tr>
  24.                     <th>id</th>
  25.                     <th>姓名</th>
  26.                     <th>年龄</th>
  27.                     <th>性别</th>
  28.                     <th>头像</th>
  29.                     <th>删除</th>
  30.                 </tr>
  31.             </thead>
  32.             <tbody>
  33.                 {%for item in members%}
  34.                 <tr>
  35.                     <td>{{item._id}}</td>
  36.                     <td><a href="/detail?_id={{item._id}}">{{item.username}}</a></td>
  37.                     <td>{{item.age}}</td>
  38.                     <td>{{item.sex}}</td>
  39.                     <td><img class="logo" src="{{item.logo}}" alt=""></td>
  40.                     <td><a href="/doDelete?_id={{item._id}}" class="btn btn-danger">删除</a></td>
  41.                 </tr>
  42.                 {% endfor %}
  43.             </tbody>
  44.         </table>
  46.     </div>
  47. </body>
  49. </html>

对应路由

  1. router.get('/form', controller.form.index);