Day12-微信小程序实战-交友小程序-搭建服务器与上传文件到后端

时间 2020-06-28

标签 day12 day 微信程序实战交友搭建服务器上传文件后端繁體版

原文原文链接

要搞一个小型的cms内容发布系统javascript

由于小程序上线以后，直接对数据库进行操做的话，慧出问题的，因此通常都会作一个管理系统，让工做人员经过这个管理系统来对这个数据库进行增删改查css

微信小程序其实给咱们提供了这样的能力了html

（也就是能够在本身已有的服务器来进行云操做，因此就能够经过这个CMS内容管理系统来对云数据库进行修改）前端

咱们就要创建本身的web服务器--》搭建一个简易的服务器java

https://koa.bootcss.com/node

这个是要node版本是7以上，能够在node官网去搭建，我这边以前按照过了，直接cmd打开，经过 node -v查看版本ios

而后还要下载一个 cnpm，这个主要是下载第三方模块用的git

https://www.cnblogs.com/biglovevolcaner/p/6707746.htmlgithub

打开cmd，直接输入这位大佬博客里面的语句进行安装便可了web

这些都准备好了以后，就能够开始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安装，也可使用网上开源的

经过设置：

<!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

2、把拿到的文件上传到云开发中

这里的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)
  }

可是出现了报错

少了一个点，要。。/才行