Node04

最新推荐文章于 2024-06-20 20:20:21 发布

-Cola

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量56

点赞数

文章标签： java vue hadoop nodejs elasticsearch

本文链接：https://blog.csdn.net/Cola_6/article/details/121227459

版权

API文档

地址：https://apidocjs.com/

安装：npm install apidoc -g
项目根目录创建 apidoc.json

{
  "name": "用户",
  "version": "0.1.0",
  "description": "用户登录、注册接口文档",
  "title": "接口文档",
  "url" : "http://127.0.0.1:3000"
}

写注释：拷贝文档上的实例
生成api文档：apidoc -i ./router -o ./apidoc
说明：编译当前目录下router文件夹中的所有文件，输出到当前目录下的apidoc文件夹中

注释示例：

/**
 * @api {post} /file/upload 上传图片
 * @apiGroup file
 *
 * @apiParam {String} upfile 要上传图片数据的key值
 *
 * @apiSuccessExample 返回数据示例:
 * {
 *     "err": 0,
 *     "msg": "ok 上传成功",
 *     "imgurl": "/static/uploads/upfile-1589360718128-12365.jpg"
 * }
 */

生成api文档：apidoc -i ./router -o ./apidoc

增加菜品

...

删除菜品

...

修改菜品

...

分类查询

router.post('/getType',(req,res)=>{
let = req.body
// 空值判断
if (!type) {
return res.send({err:-1,msg:'参数不能为空'})
}
// 类型查询
Food.find()
.then((data)=>{
res.send({err:0,msg:'查询成功',list: data})
})
.catch(()=>{
res.send({err:-2,msg:'查询失败'})
})
})

关键字查询

router.post('/getKeyword',(req,res)=>{
  let {kw} = req.body
  let reg = new RegExp(kw)// 匹配关键字
  // Food.find({name:{$regex:reg}})// 只查询name
  Food.find({$or:[{name:{$regex:reg}},{desc:{$regex:reg}}]})// 查询name或desc
  .then((data)=>{
    res.send({err:0,msg:'查询成功',list:data})
  })
  .catch((err)=>{
    res.send({err:-1,msg:'查询失败'})
  })
})

分页查询

router.post('/getPage',(req,res)=>{
  let size = req.body.size || 4
  let page = req.body.page || 1
  let count = 0
  let pages = 0
  Food.find()
  .then((data)=>{
    count = data.length// 总条数
    return Food.find().limit(Number(size)).skip(Number((page-1)*size))
  })
  .then((data)=>{
    pages = Math.ceil(count/size)// 最大页数
    res.send({err:0,msg:'查询成功',info:{list:data,count:count,pages:pages}})
  })
  .catch((err)=>{
    res.send({err:-1,msg:'查询失败'})
  })
})

上传图片

安装：npm install multer

const express = require('express')
const router = express.Router()
const multer = require('multer')

let upload = multer({
    limits:{
        //限制文件大小500k
        fileSize: 500*1024,
        //限制文件数量
        files: 1
    },
    storage: multer.diskStorage({
        // 设置上传后的文件路径
        destination: function (req, file, cb) {
            cb(null,'./public/uploads')
        },
        // 给上传文件重命名
        filename: function (req, file, cb) {
        // console.log(file);
        // {
        //     fieldname: 'upfile',
        //     originalname: '01.jpg',
        //     encoding: '7bit',
        //     mimetype: 'image/jpeg'
        // }
            let fileFormat = (file.originalname).split('.')
            // 给图片名加上时间戳，防止重命名
            // 比如 abc.jpg 分割成数组['abc','jpg']，然后获取后缀名
            // 设置图片名字：上传的key值+时间戳+五位随机数+后缀名
            cb(null,file.fieldname + '-' + Date.now() + '-' + parseInt(Math.random()*100000) 
            + '.' + fileFormat[fileFormat.length-1])
        }
    }),
    fileFilter: function(req, file, cb){
        // console.log(file);
        // {
        //     fieldname: 'upfile',
        //     originalname: '01.jpg',
        //     encoding: '7bit',
        //     mimetype: 'image/jpeg'
        // }
        let types = ['jpg','jpeg','png','gif']// 允许上传的图片格式
        let arr = file.mimetype.split('/')
        let tmpType = arr[1]
        if (types.indexOf(tmpType) == -1) {
            cb(null, false)// 拒绝文件
        } else {
            cb(null, true)// 接收文件
        }
    }
});
// 'upfile'是要上传图片数据的key值 {'upfile':图片数据}
let uploadfn = upload.single('upfile')

// 上传文件(只能用post)
router.post('/upload',(req,res)=>{
    // console.log(req.file);
    uploadfn(req,res,(err)=>{
        if (err) {
            return res.send({err:-1,msg:'上传图片不能大于500k'})
        }
        if (!req.file) {
            return res.send({err:-2,msg:'上传文件类型错误'})
        }
        let {filename} = req.file
        let imgulr = `/static/uploads/${filename}`
        res.send({err:0,msg:'图片上传成功',imgulr:imgulr})
    })
})

module.exports = router

前端部分

<body>
<!-- 1.上传图片 -->
<!-- 2.显示图片 -->

<!-- 表单上传图片 -->
<!-- <form action="http://127.0.0.1:3000/file/upload" method="POST" enctype="multipart/form-data">
    <h2>图片上传</h2>
    <input type="file" name="upfile">
    <input type="submit" value="提交">
</form> -->
<!-- form表单提交会刷新页面，不能在当前页显示图片 -->

<!-- ajax 上传图片 -->
<p>上传图片：<input class="ipt" type="file" name="upfile"></p>
<p><button class="btn">上传</button></p>
<img class="show" src="" alt="">

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('.btn').click(function (){
  // console.log( $('.ipt') );// jq对象
  // console.log( $('.ipt')[0] );// 原生dom对象
  // console.log( $('.ipt')[0].files );// 上传的文件列表
  // console.log( $('.ipt')[0].files[0] );// 上传的文件对象

  // 创建一个空的formData对象，用于上传文件
  var formData = new FormData()
  // 把要上传的文件对象插入到formData对象中，然后上传formData对象
  formData.append('upfile',$('.ipt')[0].files[0])

  $.ajax({
    url: 'http://localhost:3000/file/upload',
    type: 'POST',
    data: formData,
    processData: false,// *
    contentType: false,// *
    success: function (data){
      // console.log(data)
      alert(data.msg)
      // console.log(data.imgulr);
      $('.show').attr('src',data.imgulr)
    }
  })
})
</script>
</body>

注意点

processData设置为false。因为data值是FormData对象，不需要对数据做处理。
<form>标签添加enctype="multipart/form-data"属性。
cache设置为false，上传文件不需要缓存。
contentType设置为false。因为是由<form>表单构造的FormData对象，
且已经声明了属性enctype="multipart/form-data"，所以这里设置为false

Q.E.D.

-Cola

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node04

API文档地址：https://apidocjs.com/安装：npm install apidoc -g项目根目录创建 apidoc.json{ "name": "用户", "version": "0.1.0", "description": "用户登录、注册接口文档", "title": "接口文档", "url" : "http://127...
复制链接

扫一扫