文章小程序全栈开发，从入门到上线，第4节——发布文章文章小程序全栈开发，从入门

1.添加图片上传接口新增一个文件夹，server/static/articles/专门用来存文章图片的。然后，在server/app.js里，修改静态文件地址

/* app.js */ ... app.use(express.static(path.join(__dirname, './static'))) ...

新增server/routes/upload.js，

/* upload.js */const express = require('express')const {saveFile} = require('../utils/file')const multer = require('multer') const path = require('path')let uploadRouter = express.Router()let upload = multer({dest: path.join(__dirname, '../uploads/')})//图片上传示例 web端 /** 如果需要验证用户，加上authUse 就行。前端也要记得header带上token */ uploadRouter.post('/articles', upload.single('file'), async function(req, res, next) { const {file} = req let baseUrl = saveFile(file, '/articles') res.json({ path: baseUrl, url: process.env.STATIC_URL + baseUrl }) })module.exports = uploadRouter

上传的图片，将会保存在static/articles目录下
在server/app.js里面，也要引入这两个

/* app.js */ ... var uploadRouter = require('./routes/upload'); ...app.use('/upload', uploadRouter);

创建server/utils/file.js文件夹，进行上传图片时的处理

/* file.js */const fs = require('fs') const path = require('path')// 文件保存，删除等操作// file为multer 包处理后的file。 const saveFile = (file, localPath, fileName) => { let data = https://www.it610.com/article/fs.readFileSync(file.path) let extname = file.originalname.substring(file.originalname.lastIndexOf('.')+1) let savename = fileName ? (fileName + '.' + extname) : file.originalname fs.writeFileSync(path.join(__dirname, '../static' + localPath + '/' + savename), data) fs.unlinkSync(path.join(__dirname, '../uploads/' + file.filename)) let baseUrl = localPath + '/' + savename return baseUrl }// 删除文件 const deleteFile = (pathUrl) => { if (!fs.existsSync(path.join(__dirname, '../static' + pathUrl))) { return true } fs.unlinkSync(path.join(__dirname, '../static' + pathUrl)) return true }module.exports = { saveFile, deleteFile }

在server/.env里面，加入静态文件地址，加入后，代码如下

# jwt 密钥，任意字符串 JWT_TOKEN_SECRET=ZM_j3@faF93Mdaie2f # jwt 生成的 token 的过期时间，单位秒 JWT_TOKEN_EXPIRATION_TIME=3600# 微信小程序 appid WECHAT_MINI_APP_ID=wx1f196182a0f906e7 # 微信小程序 secret WECHAT_MINI_APP_SECRET=74d89**********e1e47c9f66aaeab# mysql 数据库配置 MYSQL_HOST=localhost MYSQL_USER=root MYSQL_PASSWORD=12345678 MYSQL_DATABASE=bidu MYSQL_PORT=3306 MYSQL_CHARSET=utf8mb4_unicode_ci# 静态文件地址 STATIC_URL=http://localhost:3000

2.小程序添加文章页面详细代码，可查看github上的源码。
在小程序端新增一个编辑文章的页面home/add，并在home页面添加导航。
富文本编辑是用的微信富文本组件，预览示例
其中需要注意的是，图片上传接口，如下：

文章图片

3.添加文章新增接口首页，我们要新建一张文章的表，字段status默认值为2，如图：

文章图片

另外，文章的详情内容，用mongodb来存储。所以，我们要新增.env的内容，加入：
没有用户名和密码，可以不填

... # mongodb 数据库配置 MONGODB_HOST=localhost MONGODB_USER=root MONGODB_PASSWORD=123456 MONGODB_DATABASE=bidu MONGODB_PORT=27017

创建server/routes/articles.js，方法和之前一样，然后，新增文章的接口如下：

// 新增 articlesRouter.post('/add', authUse, async (req, res, next) => { const {user, body} = req const {title, cover_url, html} = bodylet nowTime = getTime('date_time') // 将基础数据，保存在mysql let tempAid = (await mysql.set('articles', { title: title, cover_url: cover_url, uid: user.id, created_at: nowTime })).data.insertId// 将文章内容保存在 mongodb await mongodb.set('articles', { title: title, html: html, article_sql_id: tempAid, cover_url: cover_url, nickname: user.nickname, avatar_url: user.avatar, created_at: nowTime, status: 2, })res.json({ status: 2, message: '成功' }) })

可以看到，上面代码中，有一个authUse中间件，这个就是之前在server/utils/jwt.js里写的，通过请求时的header中的授权信息，token，来判断，该用户是否登录，如果是登录的，且没过期，就可以通过id获取用户的详情信息。因为在中间件authUse里，我们把user赋值到req上的，所以，中间执行之后的代码，就可以从req中，很方便的获取到用户信息了。即const {user} = req。
小程序里/pages/home/add/add.js，请求接口如下：
如果要验证用户身份，就要带token，我是每个接口都单独写的，其实完全可以自己封装成统一请求。

/* add.js */addOne(){ let {title, coverPath, html} = this.data console.log('title, c, f', title, coverPath, html)wx.request({ url: app.config.api + '/articles/add', method: 'POST', header: { 'Authorization': `Bearer ${wx.getStorageSync('TOKEN')}` }, data: { title: title, cover_url: coverPath, html: html }, success: ({data}) => { console.log('dddddddd', data) } }) }

这里，新增功能就可以了。
【文章小程序全栈开发，从入门到上线，第4节——发布文章】demo地址