Day12-微信小程序實戰-交友小程序-搭建服務器與上傳文件到後端並控制雲開發數據庫-項目總結與github代碼發布流程(附上項目全部完整代碼學習使用)

要搞一個小型的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  ?

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!

※綠能、環保無空污,成為電動車最新代名詞,目前市場使用率逐漸普及化

※廣告預算用在刀口上,台北網頁設計公司幫您達到更多曝光效益

※教你寫出一流的銷售文案?

您可能也會喜歡…