文章目录

第一个Web项目——微信小程序后端开发前言

去年夏天，一个偶然的机会，我和几个同学参加了学院一位老师主持的教改项目。 需求是开发一个基于SPOC和翻转课堂（类似MOOC和知道）的计算机组成原理课程的学习应用程序。 后来经过讨论，我决定降低难度，先做一个带有后台管理系统的微信小程序，于是我的第一个Web项目就开始了~

需求分析

这里简单介绍一下SPOC和翻转课堂的含义

“翻转课堂”是一种颠覆传统教学从“课堂讲授+课后作业练习”到“课前自主学习+课堂协作探究”的新型教学模式。

SPOC（）一般译为小型限制性在线课程或小型私人在线课程，音译为“私人广播课程”。

本项目的需求是开发一个学习型的小程序。 用户分为学生和教师。 学生可以观看视频、课件、动画、完成作业、考试、发表评论、点赞、回复，老师可以上传教学视频。 、课件、动画，并发布作业、考试、通知，查看学生的学习状况。 还可以查看评论和回复，及时解答学生的疑问。

团队分工

团队有四人，整体工作分为产品设计、前端开发、后端开发三个部分，每个部分由两个人负责。 其中，我负责后端开发，同时兼任项目负责人（其实并没有听起来那么高，只是需要承担更多的决策、协调、沟通的角色）。

总体设计

这个分为小程序和管理系统

首先是小程序。 这是用墨刀制作的一些原型。 我在这里说几句话。 市面上的小程序基本上都是通过微信授权直接登录。 最多只能绑定一个手机号码。 我们需要对学生的学习状况进行统计。 只需设置注册和登录功能即可

至于管理系统，我们是10月份才开始做的，是我和另外一个后端同学负责的。 时间很紧。 作为前端新手，我们并没有一套非常系统的方法来开发。 我们只是大致确定了需求。 要构建哪些模块，每个模块要增删改查哪些表。 这里就不放原型图了（比较简单）。

实现小程序前端的开发工具和编码

据我了解，从事前端工作的同学，都是先去微信公众平台注册一个账号，然后做一些开发设置。 具体步骤可以百度一下。 前端使用微信开发者工具。 如果你不知道怎么用，基本可以在微信的开放文档中找到，包括很多实用的API。

后端

这里分为两部分：数据库和接口代码。

数据库

我使用了数据库。 我是跟着学堂在线的一个小程序入门教程来的。 推荐的本地开发环境为PHP、FTP、数据库管理工具。 详细使用请参见

原来的数据库设计不好，有很多冗余数据。 后来，我参加了数据库系统的课程并进行了重大更改。 我首先确定有哪些实体以及它们之间的联系，然后画了ER图，最后构建了它。 模块，通过外码约束大大减少了冗余，表的数量也减少了。

接口代码

教程用的是PHP语言，框架是，看开发手册，我去b站找视频学习PHP的基本语法，然后又去学习原生PHP以及框架如何操作数据库。 然后根据业务逻辑开始编码。 事实上，每个接口（或者类中的函数）的结构都是相似的。 主要由三部分组成：接收前端数据、增删改查、返回结果给前端。

顺便说一句，我正在使用 IDE 进行代码编辑。 根据教程，这不是 IDE。 它没有那么多调试、运行等功能。 它只有编辑、注释、格式化等功能，这里吐槽一下它自带的格式化代码功能（先选择代码，然后编辑->行->），有点辣。 而且，如果存在语法错误，也不会像这样自动检测到。 之前我也被骗过好几次了，如果用肉眼都找不到的话，就只能用它们来测试了。

管理系统前端1.0

起初我们不知道我们需要建立一个管理系统，认为所有功能都在小程序中。 后来老师和我们讨论这个问题的时候，我们才知道原来是有这么一回事。 事实上，管理制度应该具备一切。 功能，即对数据库中的所有表进行增删改查，小程序只需要一些轻量级的功能。 至于上传大容量文件、查看学习状态，这些不够轻量的功能都放在了管理系统中。 嗯，凡事总有第一次，那么我们就开始学习html和css的基本前端三件套吧。

当我们开始研究它时，我们想先实现功能。 界面丑一点也没关系，所以我们学习了一些三件套的基础知识，然后学习了ajax技术（因为我们需要和后端进行通信）。 我们在这里使用的第一件事是创建对象。 ，使用open()方法设置请求类型和url，使用send()方法向后端发送数据。 在遇到它之前，所有后续请求都将使用 $.ajax()。

接下来，我们遇到了另一个困难，因为表格基本上是用来展示数据的。 那么获取数据后如何动态添加表呢？ 查找到数据后，用每条数据拼接成tr标签包含的字符串，拿到标签后调用()方法添加到表中。

另外，我们想在每一行的末尾设置一个按钮，用于事件处理，所以我们也像放入数据一样，将标签放入字符串中，然后为每一个设置id属性。 比如修改数据的那个叫fixi，最后一个i代表表格的行，然后添加一个事件监听器，点击的时候获取id，然后检查最后一位来确定是哪一行。

这些方法的实现相当繁琐，感觉就像是在重新发明轮子。 我们也有点郁闷，因为基本上每个页面都要这么做，但当时我们没有那么多时间和精力去学习框架，只想先实现功能。 （u1s1，上学期课太多了，差点吐了）。

放两张界面图

管理系统前端2.0

我们正在度假，终于有了更多的空闲时间。 我们决定改变一下界面，但毕竟我们的水平不高，所以需要使用一些第三方的东西。

用小程序前端测试了一些功能后，有一天后端同学发现了一个开源框架，我们一起看了文档，最后决定：就用它吧。

来吧，经典的模块化前端框架，低门槛，开箱即用。

您可以在实际使用之前阅读文档。 个人感觉上手还是蛮快的。 提供了很多实用的组件，包括弹出层、表格、表单、文件上传、流加载等。

以表格为例。 以前我们都是动态添加数据，现在可以直接.()并设置参数； 之前我们设置了事件处理的id，现在我们绑定工具栏和.on(); 而之前我们还没有实现分页。 现在我们只需要设置分页参数，然后在查询数据库的时候分页读入即可。

此外，还提供了页面布局模板，包括徽标、用户名、退出按钮、导航栏和一些CSS动画。 我们要做的就是遵循它的模板，页面元素的样式也参考它提供的样式。

借助 ，我们可以更加关注业务逻辑，更加关注用户体验。

测试后端本地测试

工具：

使用方法：打开新窗口，选择请求类型，输入url，设置参数，点击发送

我觉得这种测试就是模拟前端发送数据，然后运行后端代码，看看结果是否正确。 这是一个白盒测试。 然而，我们不是专业的测试人员。 目前这种测试还不是很规范。 我们只能尽可能的想到不同的测试。 例子。

前后端联合测试

由于放假回家，无法面对面见面，只好使用腾讯会议进行线上测试。

部署工作完成后，我们通常会编写接口代码，然后告诉前端同学URL和需要的参数（这里注意微信小程序的请求API只允许开头URL，前端必须需要在微信公众平台合法域名上配置，否则会报错）。 前端会把这些东西填充到wx. api，然后运行它。 他们会检查返回的数据是否正确。 我们将检查数据库情况。 如果没有问题的话，我们再测试几个数据。 一切安好。 如果是这样，请转到下一个函数。 这个方法应该是软件工程师提到的V模型的单元测试。

部署

我们用的是新浪云。 经过实名认证和学生认证后，我们将赠送您一些云豆（新浪云的计费单位，1元=100个云豆）

按照前面提到的教程将整个项目部署到新浪云。 具体步骤请参见。

可以在代码管理中上传压缩包，也可以在线编辑（类似记事本）。 最好把主要的改动写在本地，然后粘贴上去。

开启共享服务，目前使用的是.9版本，然后创建表或者导入sql文件

启用该服务并将容量设置为16MB（节省一些钱）。 其实我也不知道这个服务是做什么的，但是如果不打开访问接口会不会报致命错误呢？

我们需要保存视频、课件、动画、作业、考试、头像等多种类型的文件，所以需要将它们存储在服务器上。 这里启动服务，看看如何使用。 普通用户有5个配额，每个容量10G，然后就可以直接当本地盘使用了。 您可以通过控制台上传文件或编写代码。 上传后，你会得到url，然后你就可以通过网络访问，请参见官方文档#如何在新浪云环境下操作PHP。

申请信息可以查看二级域名。 需要购买独立域名并备案。

日志中心可以查看每个请求的接口、时间、请求者设备等信息。

控制台还可以实时查看流量统计、资源使用情况和消耗情况。

总结

我已经完成了这个项目的前端和后端。 我感觉前端不适合我。 也许我对页面元素风格和用户体验不够敏感，但我必须承认前端还是蛮有趣的。 至于后端，更注重逻辑。 目前我对后端的了解仅仅停留在数据库、网络、部署层面。 事实上，如果用户数量非常多，就必须考虑高并发问题，必须使用多线程、负载均衡、消息队列等。 等待技术，所以还有很多技术需要学习。

最后感谢老师的支持和几位队友的帮助。 这是我第一次写博客，如有描述不当的地方还请指出。