XJTLU ACC 信息收集和社费支付平台

灵感来源

需求

数学社社团每年的新生报名时刻是最最复杂的，收集信息，对号记录社费缴付情况。邮箱统计，群发邮件。如果用手机端信息手机，顺道接口微信支付宝把社费付了，那就很轻松了。

学习

正好之前我自己搞了个阿里云服务器，注册了几个域名想自己建建站，学学nodejs之类的搞搞云服务器，后端前端的事情，这个项目需要实现的就是一个简单的全栈工程，非常适合练手自己玩玩。

前期准备

原料：

• 网页三件套：
  • 阿里云服务器
  • 一个好域名
  • ⬆️两者的备案，审批，绑定域名（天朝流程）
• Linux 初级Debian Ubuntu 或者 CentOS之类的操作系统的纯SSH访问习惯。（非桌面操作系统界面虚拟机）
• 基础Web App原理（前端技术，Nginx/Apache 等Web Server，关系型数据库 SQL基本操作

支付宝微信接口

主要想和大家分享一下这个支付接口。我这项目用了两个平台的支付接口，对两个支付方式的开发有粗略的了解。

• 支付的方式：

  在我们日常的消费中，支付宝和微信的支付的方式我们已经很熟悉了，简单分分类，

  从日常线下支付中的“我扫你？还是你扫我？”。这就是两种方式，二维码支付，和商家扫描条形码支付。

  在线上支付中，也能看到线下的扫码，主要集中在电脑或者电视的支付情景上。而移动端的线上支付主要是在于网页的跳转，直接调用微信或者支付宝手机端App来进行支付，或是指纹或是密码。

  <u>支付宝支付方式:</u>

  zhifbao

  <u>微信支付方式：</u>

  微信支付方式

  区别： 场景决定功能也就是方式，这些支付的方式，都是大同小异的，国内的移动支付那么发达，两家支付大头，当然也都在继续发展，在现有的场景内，两家是竞争关系，所以也都在主要的支付功能上大同小异，我也不再赘述。提一点区别，也是我前期稍微踩的小坑，微信的<u>公众号支付</u>，和<u>H5支付</u> 这两个支付对于开发者来说，都是在做Web app开发，在前端调取的，但是细看其不同，H5支付的表述：

  h5 支付

  “在微信客户端外的移动网页使用微信支付。”

  这里，有两点解释：

  1. 微信的浏览器与其他浏览器都不同。有天然屏障。
  2. 移动端网页，即手机端的浏览器打开网页，然后调用微信的支付接口，打开微信app（这个场景很难遇见，当然也是因为这个功能的申请比较复杂，相对门槛比较高），这个功能需要的是域名的注册人和微信认证的主体得是同一个法人。

  从上面的两个接入支付的方式列表就能看出微信的公能有跟多细分，分了是否在客户端内，或是在外部浏览器上。

学习和编程过程

学习

作为计算机专业的人，建议所有人都开始尝试使用和适应没有图形界面的Linux原生系统终端。熟悉终端命令，这对之后的工作和学习都很有帮助。非计算机专业的同学可以没有不用看终端的东西，但是学习一下前端技术是可以的，HTML、CSS、JavaScript在网页浏览器上的配合，可以用GitHub page制作一个静态的个人博客来记录生活和学习，挺好的。

此次项目实现过程

• node Vs PHP

  一个网页的全栈项目，就是从服务器配置开始（当然现在的云技术很多配置问题能够直接在服务商的控制台网页里用鼠标点点就配置好了，不用自己去配置，这很方便），做到网页前段的展示。我这次的最终实现，用的LNMP（Linux，Nginx，Mysql，PHP），在之前希望用 nodejs 来实现后端，也有一个版本是 node 的，然而，node 的坑太多，需要自己去配置路由，配置整个服务器原理，如果崩了直接就结束进程。所以又用回了 PHP，php 确实挺好用，POST/GET，SESSION 和 COOKIES 都可以直接套用，MySQ L的链接工具我用的是 mysqli。并且，微信和支付宝的支付借口有现成的PHP demo，可以直接在原有demo的基础上修改，不用造轮子了。

• 接口申请

  上文也提到了，其实有了接口之后，写代码的工作量不打，主要是修改修改前端内容，因为数据库什么的连接都比较好弄，不论是第一版的node还是之后的 PHP 都有不少教程说和 MySQL 的调用。支付的接口申请需要企业用户，认证的时间也比较长，大概20天。同时还需要一个备案的域名，域名备案时间用的阿里云，服务确实好，14天就完成了。

• 数据库结构

  之前在微信上看到了一篇说Bitmap的文章，认为很适合这个项目，永续需要选择社团，每个人的社团数量和社团对象是不一样的，这样一来，如果只用一张表格，装下所有信息是非常麻烦的，于是就用 Bitmap 的思想，一共用了五个table。

  ​ - 首先，一个table用于装载用户的基本信息，每个用户有一个订单号，也是primary key，确定唯一的一个人（提交表单，前端JS给的时间戳，保证唯一）

  ​ - 然后，四个社团一个社团一个table，放的是用户的这个订单号，和用户的付款金额（因为涉及了捆绑注册有优惠，所有需要分一下价格）。

  这样一来，所有信息出来只有只需要用一个 JOIN 命令，就可以得到各个社团的所有用户详细信息了，四个社团各一张表。

• 前端

  Bootstrap、font-awsone 还有 jQuery 实现。

成品的功能和亮点介绍

功能就是 <u>收集信息</u> 和 <u>在线支付</u>，其实也是发挥用代码让生活更方便的思想，用写一个程序的方式解决生活中的问题。亮点在于直接一键就可以线上支付，不出意外是西浦社团收发。

Hello 确认信息 image image

然后选择微信或者支付宝就可以啦，（遗憾是微信不能打开支付宝的支付链接，要用支付宝支付只能用支付宝扫码）

image image image

确认支付就可以啦~ 在系统后台数据库内，数学社和G-Master机器人俱乐部的数据库里就会分别增加一个用户信息啦~

给大家日后做小项目提些建议

• 功能调试问题

  我习惯把技术实现先确认，再动手做功能。这样做的时候可以很快，测试技术实现的时候更有针对性，不会做一半发现做不动了。但是有一点非常重要的，基本原理必须要走在前，技术实现是理论的实践。有时候如果理论没有，那么调试的时候就要做到全面，比如个人调试和大面积的面相用户使用可能有出入，后台留好日志文件，调试要趁早要考虑全面

• 跟着项目学习

  我说的是带着项目去学习，就是去现象一个有趣，实用，或者客户要求的功能，然后想法设法把它实现。哪里不会搜哪里，是这样的学习方式的关键，学会用好搜索引擎，同一个问题，你的关键字比别人的关键字搜出来的更有效，那就叫用的比别人好。当然这些碎片化的学习内容，需要整理，也需要有一个大树去承载这些叶子，才能让你的知识结构和技术更扎实。所以记录项目学习的经验很重要，感谢iOS Club 有这样的平台，在西浦校内能分享。

最后

感谢学姐。