API文档
- 安装: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.