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

这里的use多了一个r

把这两个代码书写错误改好了之后，再上传就可以看到结果了

所以就实现了把图片传给后台了，然后我们就要把这个信息传给云平台了（以上完成了前台的文件传输到了后台）

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

  1. [转载红鱼儿]Delphi实现微信开发（3）如何使用multipart/form-data格式上传文件

    开始前,先看下要实现的微信接口,上传多媒体文件,这个接口是用Form表单形式上传的文件.对我来说,对http的Form表单一知半解,还好,查到这个资料,如果你也和我一样,必须看看这篇文章. 在xali ...

  2. Day8-微信小程序实战-交友小程序-首页用户列表渲染及多账号调试及其点赞功能的实现

    在这之前已经把编辑个人的所有信息的功能已经完成了 之后先对首页的列表搞动态的,之前都是写死的静态 1.之前都是把好友写死的,现在就在js里面定义一个数组,用循环来动态的绑定 在onReady中定义,取 ...

  3. Day7-微信小程序实战-交友小程序首页UI

    一般都是直接用微信提供的组件来进行布局的 在小程序中最好少用id,尽量用class 轮播图就是直接用swiper 直接在微信开发者文档里面->组件->swiper->示例代码 < ...

  4. Day10-微信小程序实战-交友小程序-自定义callPhone 和copyText组件

    ---为了方便用户可以拨打电话和复制微信号(下面就要实现这样的两个功能) 注意:在小程序中是没办法直接的添加用户的微信的,所以就只能是复制微信号 (这种东西的话可以直接去做,也可以做成组件,做出组件的 ...

  5. Day10-微信小程序实战-交友小程序-添加好友功能之创建并更新message信息

    1.首先要在 添加好友 这个按钮上添加一个事件,也就是在detail.wxml的添加好友这个按钮的哪里,添加一个点击事件 handleAddFriend 并且添加好友还要考虑,现在是已登陆状态还是未登 ...

  6. Day11-微信小程序实战-交友小程序-附近的人（地图的形式）及位置获取

    回顾:在下面的tabbar中,我们已经实现了首页 消息 我的,就剩下”附近“页面了 ”附近“的页面主要是用地图来进行展示的(可以显示我的位置,也可以显示周围附近的人的位置) (在地图里面点击它的头像的 ...

  7. Day12-微信小程序实战-交友小程序-优化“附近的人”页面与serach组件的布局和样式以及搜索历史记录和本地缓存*内附代码）

    回顾/:我们已经实现了显示附近的人的功能了,可以多个人看到附近的人页面了 但是还是要进行优化有几个问题:1.我们用户选择了其他的自定义头像之后,在首页可以看到头像的变化,但是在附近的人中头像会变成报错 ...

  8. Day10-微信小程序实战-交友小程序-创建friendList字段实现好友关系（添加好友功能）--内附代码

    回顾:之前我们进行了删除的功能,以及对message消息的增删,下面实现添加好友的功能 我们先在数据库中,在message这个字段的list里面,添加上测试号的id,就是模拟这个两个测试号要加我主号的 ...

  9. Day10-微信小程序实战-交友小程序-实现删除好友信息与子父组件间通信

    回顾:上一次已经把消息的布局以及样式做好了 效果图: 在removeList.js文件中,messageId就是发起这个消息的用户了 先查看一下自定义组件的生命周期 https://developer ...

随机推荐

  1. vnc安装 VNC的安装以及使用[转]

    VNC (Virtual Network Console)是虚拟网络控制台的缩写.它 是一款优秀的远程控制工具软件,由著名的 AT&T 的欧洲研究实验室开发的.VNC 是在基于 UNIX 和  ...

  2. 【Linux】CentOS 7安装与使用，安装jdk1.8，安装mysql

    虚拟机软件VMware Workstation Pro 安装CentOS7,准备好镜像文件! 一定要勾选"启动时连接" 语言选英语 时区点击上海 确认硬盘,就是点击黄色警告的那个, ...

  3. Java实现 LeetCode 677 键值映射（字典树）

    677. 键值映射 实现一个 MapSum 类里的两个方法,insert 和 sum. 对于方法 insert,你将得到一对(字符串,整数)的键值对.字符串表示键,整数表示值.如果键已经存在,那么原来 ...

  4. Java实现蓝桥杯VIP算法训练 二元函数

    试题 算法训练 二元函数 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 令二元函数f(x,y)=ax+by,a和b为整数,求一个表达式S的值. 只有满足以下要求的表达式才是合法的: ...

  5. Java实现 蓝桥杯VIP 算法提高 11-2删除重复元素

    算法提高 11-2删除重复元素 时间限制:10.0s 内存限制:256.0MB 问题描述 为库设计新函数DelPack,删除输入字符串中所有的重复元素.不连续的重复元素也要删除. 要求写成函数,函数内 ...

  6. Java实现 蓝桥杯 算法提高 秘密行动

    试题 算法提高 秘密行动 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 小D接到一项任务,要求他爬到一座n层大厦的顶端与神秘人物会面.这座大厦有一个神奇的特点,每层的高度都不一样, ...

  7. java实现复制网站内容

    复制网站内容 复制代码 本程序将网站"www.baidu.com"首页的内容复制保存在文件test.html中.写了如下代码,请完善之: import java.net.*; im ...

  8. 信道估计（channel estimation）图解——从SISO到MIMO原理介绍

    1. 引言 在所有通信中,信号都会通过一个介质(称为信道),并且信号会失真,或者在信号通过信道时会向信号中添加各种噪声.正确解码接收到的信号而没有太多错误的方法是从接收到的信号中消除信道施加的失真和噪 ...

  9. 美女面试官问我Python如何优雅的创建临时文件，我的回答....

    [摘要] 本故事纯属虚构,如有巧合,他们故事里的美女面试官也肯定没有我的美,请自行脑补... 小P像多数Python自学者一样,苦心钻研小半年,一朝出师投简历. 这不,一家招聘初级Python开发工程 ...

  10. Python--编码转换

    # -*- coding:gbk -*- # 即使设置文件编码为gbk,下方定义的字符串s1依旧为unicode # 获取默认编码格式 import sys print(sys.getdefaulte ...