zoukankan      html  css  js  c++  java
  • 16 ~ express ~ 添加博客分类

    一,创建表结构  /schemas/categories.js

    var mongoose = require('mongoose')
     
    module.exports = new mongoose.Schema({
      category_name : String,
    })
     

    二,创建模型 /models/Categories.js

    var mongoose = require('mongoose')
    var categoriesSchema = require('../schemas/categories')
     
    module.exports= mongoose.model('Categories',categoriesSchema)

    三,前台 ( 使用模板语法 ): 

    (一),  博客分类首页  : /views/category.html

    {% extends 'layout.html' %}
    {% block main %}
    <ol class="breadcrumb">
      <li><a href="/admin">管理首页</a></li>
      <li><span>分类列表</span></li>
    </ol>

    <h3>分类列表</h3>

    <table class="table table-bordered">
      <tr>
        <th>分类名称</th>
      </tr>
        <!-- 循环输出数组 . id是对象,需要转换成字符串 -->
     
      {% for category in categories %}
      <tr>
        <td> {{category.category_name}}</td>

        {% endfor %}
      </tr>
    </table>
    {% endblock %}

    (二),  添加博客分类页面 : views/category_add.html

    {% extends 'layout.html' %}
    {% block main %}
    <ol class="breadcrumb">
      <li><a href="/admin">管理首页</a></li>
      <li><span>添加分类</span></li>
    </ol>

    <h3>添加分类</h3>
    <form method="POST">
      <div class="form-group">
      <label for="category_name">分类名称</label>
        <input type="text" class="form-control" name="category_name" id="category_name" placeholder="Category Name">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>

    {% endblock %}

    四,后台引入模型  /router/admin.js

      var Category = require('../models/Category')
    **
    * 分类管理
    */
    router.get('/category',(req,res)=>{ // 是/,而不是 ./
      
      Category.find().then((categories)=>{
        res.render('admin/category',{
          userInfo: req.userInfo,
          categories:categories
        })
      })
    })

    /**
    * 添加分类
    */
    router.get('/category/add',(req,res)=>{
      res.render('admin/category_add',{
        userInfo:req.userInfo
      })
    })

    /**
    * 分类的保存 , 验证接收表单提交的信息
    */
    router.post('/category/add',(req,res)=>{
      // console.log(req.body)
     
      // 当用户提交错误的信息,则返回错误的页面 (因为前台没有设置AJAX) => 渲染一个错误的页面(通用错误页面 : admin/error)
      var category_name = req.body.category_name || ''
      if(category_name == ''){
        res.render('admin/error',{
          userInfo:req.userInfo,
          message:' 分类名称不能为空 ',
          url:'/admin/category/add'
      })
        return // 中断
    }

    // 查询数据库中是否存在刚刚上传的分类名称,有则返回分类名称已存在的信息,没有则存储上传的分类名称
    Category.findOne({
      category_name:category_name
    }).then((fs)=>{
      /**
      * 【bug】此处不能填 category_name 。
      * 参数不能为查询的对象(为空),应是查询后返回的结果
      * then 方法返回的是一个 Promise 对象
      * 异步操作的最终状态(" 完成或失败 "),以及该异步操作的结果值。
      * */
      if(fs){
        res.render('admin/error',{
          userInfo:req.userInfo,
          message:' 分类名称已存在 ',
          url:'/admin/category/add'
      })
        return Promise.reject() // 返回一个带有拒绝原因reason参数的Promise对象。 表示状态失败
      }else{
        // 保存
        return new Category({
          category_name:category_name
        }).save()
      }
     
    }).then((newCategory)=>{
      if(newCategory){
        res.render('admin/success',{
          userInfo:req.userInfo,
          message:' 添加分类成功 ',
          url:'/admin/category'
        })
      }
    })

     
  • 相关阅读:
    网卡中断负载均衡
    【Linux】tcp缓冲区大小的默认值、最大值
    ssh RSA key变化后处理
    drop_caches控制page cache
    Linux的page cache使用情况/命中率查看和操控
    如何在vscode中调试vue-cli项目?
    vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题
    charles 的安装和手机配置 (我用的win7系统 ,和 iphone8 的配置)
    如何结合插件 vue-lazyload 来简单实现图片懒加载?
    cordova 和 java ( JDK ) 和 android-studio (SDK)的初始安装和配置
  • 原文地址:https://www.cnblogs.com/500m/p/11031671.html
Copyright © 2011-2022 走看看