要搞一個小型的cms內容發布系統
因為小程序上線之後，直接對數據庫進行操作的話，慧出問題的，所以一般都會做一個管理系統，讓工作人員通過這個管理系統來對這個數據庫進行增刪改查
微信小程序其實給我們提供了這樣的能力了
（也就是可以在自己已有的服務器來進行雲操作，所以就可以通過這個CMS內容管理系統來對雲數據庫進行修改）
我們就要建立自己的web服務器–》搭建一個簡易的服務器
https://koa.bootcss.com/
這個是要node版本是7以上，可以在node官網去搭建，我這邊之前按照過了，直接cmd打開，通過 node -v查看版本
然後還要下載一個 cnpm，這個主要是下載第三方模塊用的
https://www.cnblogs.com/biglovevolcaner/p/6707746.html
打開cmd，直接輸入這位大佬博客裏面的語句進行安裝即可了
這些都準備好了之後，就可以開始koa2的服務器搭建了
我們選擇koa的腳手架 koa-generator
https://blog.csdn.net/sinat_39049092/article/details/104575018
（跟這個博客到第三步就行）
然後我們就可以到想要搭建系統的文件中（我在d盤新建了一個weapp文件）
在cmd中輸入 D:\weapp 之後輸入 d：即可跳轉
輸入 koa2 miaomiao-cms -e
（後面的-e表示的是選擇ejs模板）
然後安裝提示，我們進入到這個建立的東西 cd miaomiao-cms
然後安裝一些初始的模塊
輸入 cnpm i
創立完之後，就可以去啟動了，我們通過 npm start
啟動好之後，我們在網頁中 輸入 localhost:3000
如果看到了這個界面的話，說明web服務器就已經搭建好了，就可以在這個web服務器下做一個簡易的cms系統了
之後就可以在d盤找到這個文件了
其中的public主要是放一些靜態資源的
在vscode裏面打開我們的文件
這個index其實就是類似於可以在前端显示的
實現引入 axios.min.js 可以通過npm安裝，也可以使用網上開源的
<script src=“https://unpkg.com/axios/dist/axios.min.js”></script>
通過設置：
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1><%= title %></h1>
<p>EJS Welcome to <%= title %></p>
<label for="">
上傳圖片 : <input type="file" id="uploadBtn">
</label>
</body>
</html>
我們可以看到
注意：假如網頁打不開，或者是沒更新出現的html結構的話，就重新的在這個miaomiao.cms下面 npm start重新打開
隨便選一張圖片，onchange就是只要選擇了圖片的話，就會觸發這個事件了，file就是拿到的我們上傳的文件了
拿到這個圖片要怎麼傳輸給後台呢，這個時候就要進行文件操作了FormData這個對象來實現了
通過append 給這個param對象添加一個key為file value為 。也就是通過這個append來產生一個鍵值對
然後把這個對象通過axios來傳輸到後端
這就是axios中傳輸給後端文件的代碼
在傳輸之前，先對 config 配置文件 進行設置，告訴我們後端這個是一個文件數據流
配置好了之後，就可以通過post把圖片傳輸給後台的接口 uploadBannerImg
通過下面的代碼
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>與你相遇-CMS管理系統</h1>
<label for="">
上傳圖片 : <input type="file" id="uploadBtn">
</label>
<script>
var uploadBtn = document.getElementById('uploadBtn');
uploadBtn.onchange = function(ev){
var file = ev.target.files[0];
var param = new FormData();
param.append('file' , file);
var config = {
headers : {
'Content-Type' : 'multipart/form-data'
}
};
axios.post('/uploadBannerImg' , param , config).then((res)=>{
console.log( res.data );
});
};
</script>
</body>
</html>
然後就是開始搞 定義 uploadBannerImg 這個接口了
在routes-》index.js裏面，添加上這個代碼
router.post('/uploadBannerImg' , async(ctx , next)=>{
var files = ctx.request.files;
console.log( files );
})
我們添加一個圖片，然後可以看到在後端中
會發現404了，我們再通過 npm start來開啟
先要結束上面的操作，通過 ctrl+c 彈出
然後輸入y之後，通過npm start，然後再次上傳圖片
打印出來了這個，說明file為undefined 也就是沒拿到這個圖片了
這個是因為koa默認是得不到我們上傳文件的東西的，還需要下載一個第三方的模塊來輔助完成這個功能才行
通過在miaomiao-cms目錄下的cmd 輸入 cnpm i -S koa-body
下載好了之後，在app.js裏面，引入koa-body
const koaBody = require('koa-body')
然後在app.js裏面做一個簡單的配置
app.use(koaBody({
multipart : true,//指定是否可以上傳多張
formidable : {
maxFileSize : 200*1024*1024 //設置上傳文件大小最大限制，默認2M
}
}))
（不配置這個，用默認的也是可以的）
搞好之後，再把項目 npm start啟動一下
上傳圖片之後，還是显示 undefined
原因就是index.js裏面的files少了一個s
二、把拿到的文件上傳到雲開發中
c
這裏的use多了一個r
把這兩個代碼書寫錯誤改好了之後，再上傳就可以看到結果了
所以就實現了把圖片傳給後台了，然後我們就要把這個信息傳給雲平台了（以上完成了前台的文件傳輸到了後台）
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/storage/uploadFile.html
通過：
POST https://api.weixin.qq.com/tcb/uploadfile?access_token=ACCESS_TOKEN
通過這個代碼其實是進行身份驗證拿到一個通行證Token，才可以使用這樣的功能
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/storage/uploadFile.html
通過：
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
可見它需要的是APP 的id還有密鑰，這兩個都可以在
https://mp.weixin.qq.com/wxamp/wxaalarm/get_jserr?token=590850009&lang=zh_CN
開發-》開發設置（就可以拿到id和密鑰了）
兩個都拿到的話，就可以通過get來獲得Token了，然後再用post即可了
首先在
在外層寫一個配置文件，因為這個id和密鑰都是比較隱私的，為了不讓其他人看到的話，最好就是寫一個配置文件了
把用戶名和密鑰都寫到這個配置文件中去，然後開始打碼
先在config.js裏面提供一個對外接口
（裏面的數據寫入自己的即可）
module.exports = {
appid : '',
secret : ''
};
然後在index.js裏面引入這個配置文件
const config = require('./config.js');
然後在koa2中，我們用的是request和request-promise，這樣的一些第三方的模塊，如果要安裝的話，可以在github裏面看看
https://github.com/request/request-promise
然後我們把後台關掉，開始下載一下這些東西
輸入 cnpm i -S request request-promise
就可以安裝這兩個東西了
就可以看到已經下載成功，我們就可以開始使用了
const request = require('request-promise');
還有一個內置的fs用來操作文件的模塊，我們可以直接引入，就不用下載了
const fs = require('fs');
然後在路由的index.js文件中的router.post裏面添加：
try{
let options = {
uri: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' +
config.appid + '&secret=' + config.secret + '',
json : true
}
let {access_token} = await request(options)
console.log( access_token );
} catch(err){
console.log(err.stack)
}
但是出現了報錯
少了一個點，要。。/才行
這樣的話我們就拿到了access_token了（注意 哪個密匙的話最好用最新的，重新更新一下不然可能調用失敗的）
得到這個access_token之後我們就可以用post請求了來得到我們要用到的信息
這個env就是指定了雲環境id ，我們這裏通過一個date設置時間戳的文件地址給filepath ，然後我們就把options拿去請求了，請求成功的話就返回賦值給res
這個res包括什麼，可以在微信開發文檔裏面看到的
拿到這些數據之後，就要調用下一個接口了，來返回最新的數據
注意有些參數 是 uri 而不是url的
然後把我們res拿到的值映射到，下面這些參數中去
const router = require('koa-router')()
const config = require('../config.js');
const request = require('request-promise');
const fs = require('fs');
router.get('/', async (ctx, next) => {
await ctx.render('index', {
title: 'Hello Koa 2!'
})
})
router.get('/string', async (ctx, next) => {
ctx.body = 'koa2 string'
})
router.get('/json', async (ctx, next) => {
ctx.body = {
title: 'koa2 json'
}
})
router.post('/uploadBannerImg' , async(ctx , next)=>{
// console.log( ctx.request )
var files = ctx.request.files;
// console.log( files );
try{
let options = {
uri: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+config.appid + '&secret=' + config.secret + '',
json : true
}
let {access_token} = await request(options);
// console.log( access_token );
let fileName = `${Date.now()}.jpg`;
let filePath = `banner/${fileName}`;
options = {
method : 'POST',
uri : 'https://api.weixin.qq.com/tcb/uploadfile?access_token=' + access_token + '',
body : {
"env" : 'gogocj-6skcv',
"path" : filePath,
},
json : true
}
let res = await request(options);
options = {
method : 'POST',
uri : res.url,
formData : {
"Signature" : res.authorization ,
"key" : filePath,
"x-cos-security-token" : res.token,
"x-cos-meta-fileid" : res.cos_file_id,
"file" : {
value : fs.createReadStream(file.path),
options : {
filename : fileName,
contentType : file.type
}
}
}
}
await request(options);
ctx.body = res;
} catch(err){
console.log(err.stack)
}
})
module.exports = router
綜上所述其實我們要調用三個接口，先用get來拿到我們的token，然後通過post來拿到我們其他上傳的具體信息，然後通過這些res的具體信息來調用另外一個接口賴完成最終上傳的任務
但是我們在雲開發中 查看存儲的時候，並沒有看到我們上傳過來的東西（最後就是在前端也加上一些提示）就不用來看數據庫了
在數據庫的存儲中沒有生成 banner
上面黑圖中，後面其實都是一些報錯的
這裏少了一句對file進行定義的語句了，寫上之後，全部的報錯都消失了
然後在雲開發的存儲中：
就上傳成功了
POST https://api.weixin.qq.com/tcb/databaseadd?access_token=ACCESS_TOKEN
這樣也是通過傳入access_token 來傳入
所以以上就實現了在web服務器端把圖片上傳到雲開發的存儲中，但是我們的目的是要在前端在banner中把這個圖片放在輪播圖上的，但是無法直接從存儲中讀取出來，要把存儲文件的這個id寫入到數據庫中（表單中）
我們在雲開發的數據庫中新建一個叫做 banner 的集合
也就是說不僅要上傳到雲開發的存儲中，還要上傳到這個banner集合中
查看開發文檔：
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/database/databaseAdd.html
const router = require('koa-router')()
const config = require('../config.js');
const request = require('request-promise');
const fs = require('fs');
router.get('/', async (ctx, next) => {
await ctx.render('index', {
title: 'Hello Koa 2!'
})
})
router.get('/string', async (ctx, next) => {
ctx.body = 'koa2 string'
})
router.get('/json', async (ctx, next) => {
ctx.body = {
title: 'koa2 json'
}
})
router.post('/uploadBannerImg' , async(ctx , next)=>{
// console.log( ctx.request )
var files = ctx.request.files;
var file = files.file;//這個file就是文件的一個二進制的數據了
// console.log( files );
try{
let options = {
uri: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+config.appid + '&secret=' + config.secret + '',
json : true
}
let {access_token} = await request(options);
// console.log( access_token );
let fileName = `${Date.now()}.jpg`;
let filePath = `banner/${fileName}`;
options = {
method : 'POST',
uri : 'https://api.weixin.qq.com/tcb/uploadfile?access_token=' + access_token + '',
body : {
"env" : 'gogocj-6skcv',
"path" : filePath,
},
json : true
}
let res = await request(options);
let file_id = res.file_id;
options = {
method : 'POST',
uri : 'https://api.weixin.qq.com/tcb/databaseadd?access_token=' + access_token + '',
body : {
"env" : 'gogocj-6skcv',
"query" : "db.collection(\"banner\").add({data:{fileId:\""+ file_id+"\"}})"
},
json : true
}
await request(options)
options = {
method : 'POST',
uri : res.url,
formData : {
"Signature" : res.authorization ,
"key" : filePath,
"x-cos-security-token" : res.token,
"x-cos-meta-fileid" : res.cos_file_id,
"file" : {
value : fs.createReadStream(file.path),
options : {
filename : fileName,
contentType : file.type
}
}
}
}
await request(options);
ctx.body = res;
} catch(err){
console.log(err.stack)
}
})
module.exports = router
router/index.js
我們再次上傳的時候，就發現語句寫入到banner這個集合裏面了
然後我們再上傳第二張圖片試試
可以看到也是上傳成功的了，這兩條數據都是比較簡單的，保存的就只是一個fileId的
然後就可以回到微信開發者工具去打代碼了，就可以直接讀取banner這個集合裏面的圖片了
在index.js裏面對那個imgurl進行操作
其實可以在getBannerList函數裏面定義我們從集合中限制拿幾張圖片的
（注意記得給這個banner數據庫集合設置 好權限，不然可能就訪問不到了
在index.js裏面的onready中觸發這個函數
getBannerList(){
db.collection('banner').get().then((res)=>{
console.log( res.data );
});
}
通過這個，我們打印出東西來看看
然後我們就可以把得到的數組映射到data裏面的imgUrl即可了
然後還要在wxml中，把src變成是item.fileId才行
所以通過代碼：
getBannerList(){
db.collection('banner').get().then((res)=>{
// console.log( res.data );
this.setData({
imgUrls : res.data
});
});
}
<block wx:for="{{imgUrls}}" wx:key="{{index}}">
<swiper-item>
<image src="{{item.fileId}}" ></image>
</swiper-item>
</block>
得到的效果就是：
這兩個圖片就是我們通過cms內容管理系統上傳的圖片了
其實雖然這個系統實現的功能就一個，但是是可以擴展的，比如用來管理用戶，就是用戶的頭像如果是違規的話
或者是發布一些系統的消息或者是公告的東西了（就是好友消息和系統消息都是可以有的，然後做一個好友消息和系統消息切換的分支即可）
以上就完成了這個項目的初始內容了，下面就是通過預覽，或者是通過真機調試（實時監聽用戶的操作）所以在調試完了之後，就是發布了，發布就是點擊上傳按鈕
上傳代碼完成之後，就可以在微信公眾平台，打開版本管理，可以先不用上傳審核，而是變成是一個體驗的版本，就可以得到一個二維碼了
這個體驗的權限就是通過（成員管理-》體驗成員設置，
當體驗的感覺沒問題之後，就可以提交審核了（如果審核不通過，就可能使banner中的圖片和我們餓內容使不符合的，就使要把這個小程序改成和實際差不多的再進行提交審核才行的
審核通過之後就會生成一個線上版本，這樣的話如何的用戶都可以進行訪問了
以上就是小程序發布的流程了的
下面就是把代碼上傳到github中進行共享，我們把cms的文件和這個小程序的代碼文件放一起
文件放一起之後，就可以打開gitbub進行上傳了
如何我們通過git插件來上傳的，可以下載一個git插件
https://git-scm.com/downloads
如然後在要上傳的文件裏面，右鍵點擊git bash
可以在這個頁面中查看我們如何通過git插件來實現代碼的上傳的了
https://github.com/gogocj/wxproject-miaomiao
也就是點開git工具，然後輸入 git init
然後查看狀態 git status
然後就是 git add . (注意後面是一個空格然後一個點）
然後就是 git commit -m “up 1”
上傳好了之後，就可以通過git status 來看看我們是否已經上傳成功了
之後就可以設置一下遠端了（remote）
輸入：git remote add origin https://github.com/gogocj/wxproject-miaomiao.git
上傳完畢之後，刷新一下就可以看到上傳的東西了
可以看到我們上傳的東西都在這裏了，但是蝦米那的這個README.md其實是小程序中默認的，我們可以修改一下的
可以直接在github裏面對這個文件在線的編輯
https://github.com/gogocj/wxproject-miaomiao
這就是我上傳到github上面的代碼了
感謝大家！
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【【其他文章推薦】
※帶您來了解什麼是 USB CONNECTOR ?
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!
※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※教你寫出一流的銷售文案?
現時市面上能買的電動車都是主打速度或續航力，但由 NASA Johnson Space Center所研發的電動車 Modular Robotic Vehicle（MRV）則是讓你能享受飄移的快感。 Modular Robotic Vehicle（MRV）的 4 個車輪可獨立轉向，且每個都可以轉 180度之多，所以要原地打轉沒難度，甚至可有飄移的效果。此外，車上除了有傳統的方向盤和油門之外，駕還搭配遠端操作系統，讓使用者即使不在車上，也能遠端進行駕駛。 （圖片來源：擷取自 NASA 影片）