第一个web项目-微信小程序后端开发
第一个web项目-微信小程序后端开发
前言
需求分析
团队分工
总体设计
开发工具及编码实现
小程序前端
后端
数据库
接口代码
管理系统前端1.0
管理系统前端2.0
测试
后端本地测试
前后端联合测试
部署
总结
第一个web项目-微信小程序后端开发
前言
去年暑假一个偶然的机会我和几位同学加入了学院一位老师主持的教改项目，需求是开发一个基于SPOC与翻转课堂的计算机组成原理课程的学习app（类似慕课、知到），后来经过讨论决定降低难度，先做一个微信小程序，附带一个后台管理系统，于是我的第一个web项目就开始了~
需求分析
这里简单介绍下SPOC和翻转课堂的意思
翻转课堂
“翻转课堂”（Flipping Classroom）是一种颠覆传统教学由“课堂授课听讲 + 课后作业练习”转变为“课前自主学习 + 课堂协作探究”的新型教学模式。
SPOC
SPOC（Small Private Online Course）一般被译为小规模限制性在线课程或者小规模私有型网络课程，音译为“私播课”。
这次项目的需求是开发一个学习类型的小程序，用户分为学生和教师，其中学生可以观看视频、课件、动画，完成作业、考试以及发布评论、点赞、回复，而教师可以上传教学视频、课件、动画和发布作业、考试、通知，以及查迟颂看学生的学习情况，也可以查看评论回复，及时解答学生的疑惑。
团队分工
团队一共有四个人，总体工作分为产品设计、前端开发、后端开发三部分，然后每部分由两人负责。其中我是负责后端开发的，同时兼任项目负责人（其实也没有听上去那么高大上，只是需要承担更多决策、协调、沟通的角色）。
总体设计
这里分为小程序和管理系统
首先是小程序，放几张使用墨刀制作的原型图，这里多说两句，市面上的小程序基本都是微信授权直接登录，最多绑定手机号，我们这个由于要统计学生的学习情况才设置了注册和登录功能
至于管理系统，由于是10月份才开始做的，而且是我和另一位做后端的同学负责的，时间比较紧，我们作为前端小白没有十分系统的方法去做开发，只是大概确定了需要做哪些模块，每个模块对哪些表的增删改查，这里原型码缓郑图就不放了（较简陋）
开发工具及编码实现
小程序前端
据我了解，做前端的同学先去微信公众平台注册账号，然后做一些开发设置，具体步骤自行百度。前端用的是微信开发者工具，有不会的基本上在微信开放文档都可以找到，包括许多实用的API。
后端
这里分为数据库、接口代码两部分
数据库
用哪饥的是mysql数据库，之前是跟着学堂在线的一个小程序入门教程做的，它推荐的本地开发环境是phpstudy，里面集成了php、mysql、apache、FTP、Nginx以及数据库管理工具phpMyAdmin，关于phpMyAdmin使用请看https://blog.csdn.net/u012767761/article/details/78238487
原本的数据库设计得不好，存在较多冗余数据，后来学习了数据库系统这门课，我进行了大改，先确定有哪些实体以及实体之间的联系，然后画er图，最后再建模，通过外码约束大量减少了冗余，也减少了表的数量。
接口代码
教程使用的是php语言，框架是thinkphp5，开发手册看https://www.kancloud.cn/manual/thinkphp5/118003，我当时是去b站找视频学了下php基础语法，然后就去学原生php以及框架如何 *** 作数据库。然后根据业务逻辑开始编码，其实每个接口（或者叫类里面的一个函数）结构都差不多，主要是三部分：接收前端传来的数据、增/删/改/查、返回结果给前端。
顺便说下代码编辑用的是sublime text3，教程看https://blog.csdn.net/sam976/article/details/75333079/，这个不是ide，没有那么多的功能比如调试、运行，单纯是只有编辑、加注释、格式化等等，这里吐槽下自带的格式化代码功能（先选择代码，再Edit ->Line ->Reindent），有点辣鸡。而且如果有语法错误不会像eclipse那样自动检测出来，之前被坑了几次，肉眼找不到的话只能用postman去测试了。
管理系统前端1.0
一开始我们是不知道还要做个管理系统的，以为所有功能都放在小程序，后来老师跟我们讨论聊到这个问题，我们才知道原来还有这回事，其实就是管理系统应该具有一切功能，即对数据库所有表的增删改查，而小程序只需要有些轻量的功能即可，至于上传大容量文件、查看学习情况这些不够轻量的功能全部放在管理系统。好吧，凡事总有第一次，我们就开始学习基本的前端三件套html,css,javascript。
开始做的时候我们希望先实现功能，界面难看点没有太多关系，于是学了部分三件套的基础后又学了ajax技术（因为要与后端通信），这里最开始用的是创建XMLHttpRequest 对象，用open()方法设置请求类型和url，用send()方法发送数据到后端，直到遇到了jquery，后面的请求统一都用$.ajax()了。
接下来又遇到了一个难点，因为基本都用表格来展示数据，那获取数据后如何动态地加入表格呢？查找资料后用每一条数据拼接成由tr标签包含的字符串，然后用jquery获取表格标签后调用append()方法加入表格中。
除此之外，我们想在每行末尾设置按钮进行事件处理，于是我们append数据的同时也把button标签放入刚才的字符串中，然后给每个button设置id属性，比如用于修改数据的就叫fixi，最后这个i是代表表格第几行，然后添加事件监听，点击button时获取id，然后查看最后一位是多少从而确定是第几行。
这些做法实现起来是挺繁琐的，而且感觉在重复造轮子，我们也做得有点郁闷，因为每个页面基本都要这样做，但是当时没有那么多的时间精力去学习框架，只是想先实现功能（u1s1，上学期的课多到我快吐了）。
放两张界面图
管理系统前端2.0
之前放假，总算有较多空余时间了，我们决定要改下界面，但毕竟自身水平不高，因此需要用一点第三方的东西了。
在跟小程序前端测试了部分功能后，有一天后端同学找到了一个开源的框架然后我们一起看了下说明文档，最后决定：就用它了。
有请layui登场，经典模块化前端框架、低门槛开箱即用。
真正使用之前可以先看看文档https://www.layui.com/doc/，个人感觉上手还是挺快的。layui提供了许多实用的组件包括d出层、表格、表单、文件上传、流加载等等。
就拿表格来说，之前我们用append动态添加数据，现在直接table.render()，设置好参数就行了；之前我们给button设置id进行事件处理，现在绑定工具条，直接table.on()就行了；而且之前我们没实现的分页，现在设置分页参数就行了，然后查询数据库时分页读取。
另外，layui提供了一个页面布局的模板，包括logo、用户名、退出按钮、导航栏以及一些css动画。我们要做的就是按照它的模板来，页面元素的样式也参考它提供的。
有了layui的助攻，我们可以将更多注意力放在业务逻辑上，更多关注用户体验。
测试
后端本地测试
工具：postman
使用：打开一个新窗口，选择请求类型，输入url，设置参数，点击send
这种测试我认为是模拟前端发送数据然后运行后端代码，看结果是否正确，属于白盒测试，但是我们不是专业测试人员，目前这样测试不是做得很规范，只能尽可能想到不同的测试用例。
前后端联合测试
由于放假回家了没办法面对面，只能借助腾讯会议线上测了。
在部署工作完成之后，一般是我们写好接口代码，然后把url和需要的参数告诉前端同学（这里注意下，微信小程序的请求api只允许https开头的url，而且前端必须在微信公众平台配置好合法域名，不然会报错），前端把这些东西填入那个wx.request的api然后运行，他们会查看返回的数据是否正确，我们会查看数据库的情况，如果没问题会测试多几个数据，都可以的话就到下一个功能，这种方式应该是属于软工讲到的V模型的单元测试。
部署
用的是新浪云，实名认证、学生认证后会送一些云豆（新浪云的计费单位，1RMB=100云豆）
跟着之前说的教程把整个thinkphp项目部署到新浪云，具体步骤看https://www.kancloud.cn/cnzxo/sae_thinkphp/1423806
代码
在代码管理那里可上传压缩包，或者在线编辑（跟记事本差不多），改动大的最好在本地写好再贴上去
数据库
开启共享型mysql服务，目前用了phpmyadmin4.9版本，然后建表或导入sql文件
缓存
开启memcached服务，设置容量16MB（省点钱），其实这个服务我不是很清楚干什么的，但如果不打开访问接口时会报致命错误？
文件存储
我们需要保存许多类型的文件包括视频、课件、动画、作业、考试、头像，因此需要存放在服务端。这里开启storage服务，使用方法看https://www.sinacloud.com/doc/sae/php/storage.html#cyberduck，普通用户配额5个bucket，每个容量10G，然后直接当作本地磁盘那样用就行了，控制台或写代码都可上传文件，上传后获得url，然后就可以通过网络访问，关于新浪云环境下php如何 *** 作看官方文档http://apidoc.sinaapp.com/source-class-sinacloud.sae.Storage.html#。
域名
应用信息可查看二级域名，独立域名需要购买且备案
日志
日志中心可查看每次请求的接口、时间、请求方设备等信息
其它
控制台还可以实时查看流量统计、资源使用情况，以及消费情况
总结
这个项目我也算前后端都做了一遍，感觉前端不太适合自己，可能是对页面元素样式、用户体验不够敏感，不过必须承认前端是挺有意思的。至于后端是更加注重逻辑，目前我对后端的了解只停留在数据库、网络、部署层面，其实如果用户数量非常多还要考虑高并发的问题，也就要使用多线程、负载均衡、消息队列等技术了，所以还有很多技术需要学习
微信制作跨年代码小程序怎么弄答案如下:在微信小程序制作之前先去百度搜索微信公众号，在网址里找到小程序，在这个微信公众号官方平台去编辑制作微信小程序，在网址里找到帐号分类中的小程序，点击图标进入，点击“前往注册”按钮。
2、点击导航栏，登录或重新注册一个新账号后新建一个空白模板或者直接套用里面有的模板，通过组合各类功能，组件添加来制作微信小此汪森程序。下载开发者工具，填入APPID并打包以及把里面的文件进行解森亩压、上传。
3、把文件解压、上传好之后，测试这个微信小程序，确定无任何问题后，点击上传。
4、在微信小程序后台提交代码，在开发管理页面把开发版本提交到审核中，等待微信官方的审核，审核通过，发布，这时微信小程序就正式上线。
微信小程序的制作简单，快捷，开发门槛低，成本低，但是赢利点很多。这一点对于企业或者商家来说，无不是一个不错的选择。我们公司东莞十方云分销系统--六度人脉系统，拥有强陵悉大的分销功能，助力企业商家实现价值。
1、下载MD5源文件(JS)2、在漏吵小程序模块中返脊侍使用require引入外部模块；也可以在index.html中直接全局引入md5.js文件。
因为源md5.js中没有队模块因为输出，如果使用require需要export，所以在md5.js中需要加入以下代码：
module.exports = {
hexMD5: hex_md5, //需要输出的加密算法，我这边只野歼写了我需要得两种
b64Md5: b64_md5,
}
在js文件中使用require引入md5:
const md5 = require('../../assets/js/md5/md5.js')
使用：
let b64 = md5.b64Md5(code)//code需要加密的数据
下面是我的文件结构：
md5.js 代码如下
/*
* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
* Digest Algorithm, as defined in RFC 1321.
* Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
* Distributed under the BSD License
* See http://pajhome.org.uk/crypt/md5 for more info.
*/
/*
* Configurable variables. You may need to tweak these to be compatible with
* the server-side, but the defaults work in most cases.
*/
var hexcase =
0
/* hex output format. 0 - lowercase1 - uppercase */
var b64pad =
""
/* base-64 pad character. "=" for strict RFC compliance */
var chrsz =
8
/* bits per input character. 8 - ASCII16 - Unicode */
/*
* These are the functions you'll usually want to call
* They take string arguments and return either hex or base-64 encoded strings
*/
function hex_md5(s){
return binl2hex(core_md5(str2binl(s), s.length * chrsz))}
function b64_md5(s){
return binl2b64(core_md5(str2binl(s), s.length * chrsz))}
function str_md5(s){
return binl2str(core_md5(str2binl(s), s.length * chrsz))}
function hex_hmac_md5(key, data) {
return binl2hex(core_hmac_md5(key, data))}
function b64_hmac_md5(key, data) {
return binl2b64(core_hmac_md5(key, data))}
function str_hmac_md5(key, data) {
return binl2str(core_hmac_md5(key, data))}
/*
* Perform a simple self-test to see if the VM is working
*/
function md5_vm_test()
{
return hex_md5( "abc") ==
"900150983cd24fb0d6963f7d28e17f72"
}
/*
* Calculate the MD5 of an array of little-endian words, and a bit length
*/
function core_md5(x, len)
{
/* append padding */
x[len >>
5] |=
0x80 <<((len) %
32)
x[(((len +
64) >>>
9) <<
4) +
14] = len
var a =
1732584193
var b = - 271733879
var c = - 1732584194
var d =
271733878
for( var i =
0i <x.lengthi +=
16)
{
var olda = a
var oldb = b
var oldc = c
var oldd = d
a = md5_ff(a, b, c, d, x[i+
0],
7 , - 680876936)
d = md5_ff(d, a, b, c, x[i+
1],
12, - 389564586)
c = md5_ff(c, d, a, b, x[i+
2],
17,
606105819)
b = md5_ff(b, c, d, a, x[i+
3],
22, - 1044525330)
a = md5_ff(a, b, c, d, x[i+
4],
7 , - 176418897)
d = md5_ff(d, a, b, c, x[i+
5],
12,
1200080426)
c = md5_ff(c, d, a, b, x[i+
6],
17, - 1473231341)
b = md5_ff(b, c, d, a, x[i+
7],
22, - 45705983)
a = md5_ff(a, b, c, d, x[i+
8],
7 ,
1770035416)
d = md5_ff(d, a, b, c, x[i+
9],
12, - 1958414417)
c = md5_ff(c, d, a, b, x[i+ 10],
17, - 42063)
b = md5_ff(b, c, d, a, x[i+ 11],
22, - 1990404162)
a = md5_ff(a, b, c, d, x[i+ 12],
7 ,
1804603682)
d = md5_ff(d, a, b, c, x[i+ 13],
12, - 40341101)
c = md5_ff(c, d, a, b, x[i+ 14],
17, - 1502002290)
b = md5_ff(b, c, d, a, x[i+ 15],
22,
1236535329)
a = md5_gg(a, b, c, d, x[i+
1],
5 , - 165796510)
d = md5_gg(d, a, b, c, x[i+
6],
9 , - 1069501632)
c = md5_gg(c, d, a, b, x[i+ 11],
14,
643717713)
b = md5_gg(b, c, d, a, x[i+
0],
20, - 373897302)
a = md5_gg(a, b, c, d, x[i+
5],
5 , - 701558691)
d = md5_gg(d, a, b, c, x[i+ 10],
9 ,
38016083)
c = md5_gg(c, d, a, b, x[i+ 15],
14, - 660478335)
b = md5_gg(b, c, d, a, x[i+
4],
20, - 405537848)
a = md5_gg(a, b, c, d, x[i+
9],
5 ,
568446438)
d = md5_gg(d, a, b, c, x[i+ 14],
9 , - 1019803690)
c = md5_gg(c, d, a, b, x[i+
3],
14, - 187363961)
b = md5_gg(b, c, d, a, x[i+
8],
20,
1163531501)
a = md5_gg(a, b, c, d, x[i+ 13],
5 , - 1444681467)
d = md5_gg(d, a, b, c, x[i+
2],
9 , - 51403784)
c = md5_gg(c, d, a, b, x[i+
7],
14,
1735328473)
b = md5_gg(b, c, d, a, x[i+ 12],
20, - 1926607734)
a = md5_hh(a, b, c, d, x[i+
5],
4 , - 378558)
d = md5_hh(d, a, b, c, x[i+
8],
11, - 2022574463)
c = md5_hh(c, d, a, b, x[i+ 11],
16,
1839030562)
b = md5_hh(b, c, d, a, x[i+ 14],
23, - 35309556)
a = md5_hh(a, b, c, d, x[i+
1],
4 , - 1530992060)
d = md5_hh(d, a, b, c, x[i+
4],
11,
1272893353)
c = md5_hh(c, d, a, b, x[i+
7],
16, - 155497632)
b = md5_hh(b, c, d, a, x[i+ 10],
23, - 1094730640)
a = md5_hh(a, b, c, d, x[i+ 13],
4 ,
681279174)
d = md5_hh(d, a, b, c, x[i+
0],
11, - 358537222)
c = md5_hh(c, d, a, b, x[i+
3],
16, - 722521979)
b = md5_hh(b, c, d, a, x[i+
6],
23,
76029189)
a = md5_hh(a, b, c, d, x[i+
9],
4 , - 640364487)
d = md5_hh(d, a, b, c, x[i+ 12],
11, - 421815835)
c = md5_hh(c, d, a, b, x[i+ 15],
16,
530742520)
b = md5_hh(b, c, d, a, x[i+
2],
23, - 995338651)
a = md5_ii(a, b, c, d, x[i+
0],
6 , - 198630844)
d = md5_ii(d, a, b, c, x[i+
7],
10,
1126891415)
c = md5_ii(c, d, a, b, x[i+ 14],
15, - 1416354905)
b = md5_ii(b, c, d, a, x[i+
5],
21, - 57434055)
a = md5_ii(a, b, c, d, x[i+ 12],
6 ,
1700485571)
d = md5_ii(d, a, b, c, x[i+
3],
10, - 1894986606)
c = md5_ii(c, d, a, b, x[i+ 10],
15, - 1051523)
b = md5_ii(b, c, d, a, x[i+
1],
21, - 2054922799)
a = md5_ii(a, b, c, d, x[i+
8],
6 ,
1873313359)
d = md5_ii(d, a, b, c, x[i+ 15],
10, - 30611744)
c = md5_ii(c, d, a, b, x[i+
6],
15, - 1560198380)
b = md5_ii(b, c, d, a, x[i+ 13],
21,
1309151649)
a = md5_ii(a, b, c, d, x[i+
4],
6 , - 145523070)
d = md5_ii(d, a, b, c, x[i+ 11],
10, - 1120210379)
c = md5_ii(c, d, a, b, x[i+
2],
15,
718787259)
b = md5_ii(b, c, d, a, x[i+
9],
21, - 343485551)
a = safe_add(a, olda)
b = safe_add(b, oldb)
c = safe_add(c, oldc)
d = safe_add(d, oldd)
}
return Array(a, b, c, d)
}
/*
* These functions implement the four basic operations the algorithm uses.
*/
function md5_cmn(q, a, b, x, s, t)
{
return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b)
}
function md5_ff(a, b, c, d, x, s, t)
{
return md5_cmn((b &c) | ((~b) &d), a, b, x, s, t)
}
function md5_gg(a, b, c, d, x, s, t)
{
return md5_cmn((b &d) | (c &(~d)), a, b, x, s, t)
}
function md5_hh(a, b, c, d, x, s, t)
{
return md5_cmn(b ^ c ^ d, a, b, x, s, t)
}
function md5_ii(a, b, c, d, x, s, t)
{
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t)
}
/*
* Calculate the HMAC-MD5, of a key and some data
*/
function core_hmac_md5(key, data)
{
var bkey = str2binl(key)
if(bkey.length >
16) bkey = core_md5(bkey, key.length * chrsz)
var ipad = Array( 16), opad = Array( 16)
for( var i =
0i <
16i++)
{
ipad[i] = bkey[i] ^
0x36363636
opad[i] = bkey[i] ^
0x5C5C5C5C
}
var hash = core_md5(ipad.concat(str2binl(data)),
512 + data.length * chrsz)
return core_md5(opad.concat(hash),
512 +
128)
}
/*
* Add integers, wrapping at 2^32. This uses 16-bit operations internally
* to work around bugs in some JS interpreters.
*/
function safe_add(x, y)
{
var lsw = (x &
0xFFFF) + (y &
0xFFFF)
var msw = (x >>
16) + (y >>
16) + (lsw >>
16)
return (msw <<
16) | (lsw &
0xFFFF)
}
/*
* Bitwise rotate a 32-bit number to the left.
*/
function bit_rol(num, cnt)
{
return (num <<cnt) | (num >>>( 32 - cnt))
}
/*
* Convert a string to an array of little-endian words
* If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
*/
function str2binl(str)
{
var bin = Array()
var mask = ( 1 <<chrsz) -
1
for( var i =
0i <str.length * chrszi += chrsz)
bin[i>> 5] |= (str.charCodeAt(i / chrsz) &mask) <<(i% 32)
return bin
}
/*
* Convert an array of little-endian words to a string
*/
function binl2str(bin)
{
var str =
""
var mask = ( 1 <<chrsz) -
1
for( var i =
0i <bin.length *
32i += chrsz)
str += String.fromCharCode((bin[i>> 5] >>>(i %
32)) &mask)
return str
}
/*
* Convert an array of little-endian words to a hex string.
*/
function binl2hex(binarray)
{
var hex_tab = hexcase ?
"0123456789ABCDEF" :
"0123456789abcdef"
var str =
""
for( var i =
0i <binarray.length *
4i++)
{
str += hex_tab.charAt((binarray[i>> 2] >>((i% 4)* 8+ 4)) &
0xF) +
hex_tab.charAt((binarray[i>> 2] >>((i% 4)* 8 )) &
0xF)
}
return str
}
/*
* Convert an array of little-endian words to a base-64 string
*/
function binl2b64(binarray)
{
var tab =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
var str =
""
for( var i =
0i <binarray.length *
4i +=
3)
{
var triplet = (((binarray[i >>
2] >>
8 * ( i % 4)) &
0xFF) <<
16)
| (((binarray[i+ 1 >>
2] >>
8 * ((i+ 1)% 4)) &
0xFF) <<
8 )
| ((binarray[i+ 2 >>
2] >>
8 * ((i+ 2)% 4)) &
0xFF)
for( var j =
0j <
4j++)
{
if(i *
8 + j *
6 >binarray.length *
32) str += b64pad
else str += tab.charAt((triplet >>
6*( 3-j)) &
0x3F)
}
}
return str
}
module.exports = {
hexMD5: hex_md5,
b64Md5: b64_md5,
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）