express实战教程：（六）写一个后台管理页面，对导航栏的数据进行读取，并且增加、修改（完结）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>后台管理模板</h1>
    <form action="">
        <div>
            <p>修改导航为</p>
            <select name="" id="">
                <option value="">nav1</option>
            </select>
            <input type="text">
        </div>
        <div>
            <p>增加导航</p>
            <input type="text">
        </div>
    </form>
</body>
</html>

找到routes下面的mng.js，对路径作出响应需要导航条中的信息，一个处理get请求，一个处理post请求

const express = require('express');
const router = express.Router();
const init = require('../model/init');

/* GET users listing. */
router.get('/', function (req, res, next) {
  init.findOne({ init_id: 0 }, 'nav', function (err, doc) {
    res.render('mng', doc)
  })
});
router.post('/', function (req, res, next) {
  if (req.body.xiugaiwei !== '') {
    init.update({
      nav: { $elemMatch: { title: req.body.selected } }
    },
      { $set: { "nav.$.title": req.body.xiugaiwei } }
      ,
      function (err, doc) {
        console.log(doc)
      })
  }
})
module.exports = router;

效果：前台刷新页面也可以看到效果

最后增加一个导航条：

效果：

express实战教程：（六）写一个后台管理页面，对导航栏的数据进行读取，并且增加、修改（完结）

猜你喜欢