【壹言分享网站】开发经历

前言

五个月前，自己的微信公众号 Worldhello 在没有怎么宣传推广的情况下粉丝数量到了400+。公众号都开了两年粉丝数量这么少，想想自己真不争气啊(主要是因为缺少Money && Time && Talent)！

但是为了我这大四百粉也应该认真写文章，分享优质资源啊。百度云盘上面的资源挺多，而且杂五花八门。如果简单的在后台设置上关键字回复，管理起来是非常麻烦的。还有很大一部分人是来“偷”资源的，反正就是有各种各样的不方便。面对日益增长的用户和使用中不断的用户反馈，决定做一个兼顾微信后台管理和资源分享的网站。

面临问题

1. 资源内容较多，公众号关键字回复设置操作比较麻烦。
2. 很多人得到需要资源后就取关，用户流失严重
3. 资源分享推广难：直接分享公众号图文容易被踢出群聊
4. 用户消息只能保存五天以内
5. 自己的存储空间有限
6. 获取方式有问题，很多用户关键字输不对
7. 用户看不到哪些资源热度高（下载量高）
8. 对资源介绍只能放到公众号的图文中，操作的灵活性、便捷性较差
9. 可能某些用户有好的资源，没有分享渠道

需求分析

功能需求

根据上面的问题，可以大概确定需要做的主要功能如下：

• 资源展示
  展示资源名称、热度、获取关键字、资源链接等

• 资源搜索
  在搜索框输入关键词，进行实时检索并展示结果

• 资源分类
  对每种资源类型进行归类，方便用户查看

• 留言功能
  方便用户询问有关问题和留言交流，当有用户新留言时会系统通过设定邮箱自动向自己的常用邮箱发送通知。对于审核通过的留言，会像弹幕一样在留言板界面滚动。

• 提供资源
  如果用户有一些好的资源想要分享，可以通过表单提交到后台（系统会自动发送邮件通知管理员），等管理员审核同过后，便可以展示到前台。系统根据提供资源用户的用户名，会在特定的表中创建一条以用户名为主键的记录，并且会记录用户的贡献次数，按其大小进行排名展示。（现在感觉应该对提供的每条资源的质量进行打分然后累积到用户记录的一个字段上按其大小进行排名更加合适）

• 贡献排行
  对提供资源的用户会按照贡献资源多少进行排名展示其昵称、数量、网址等。（相当于添加友链）

• 资源详情
  通过点击资源列表页的资源名称，可以查看资源的详细内容

• 资源管理
  进行增、删、改、查、审(可以放到‘改’中)。增加资源，填上资源链接、名称、类型、关键词、简介等。删除资源，更改资源状态使其不再显示。修改资源，可以修改其各项信息（不包括提供者）。查找资源，在搜索框中输入查找内容。审核资源，对管理员或者用户提交的资源进行审核。

• 关键词管理
  关键词的增、更改状态。增加新的关键词，更改其状态（删除 or 正常）。由于微信公众号后台改成开发者模式，原来的关键词回复功能不能使用，所以自己进行开发此功能。

• 留言管理
  对用户的留言，进行删、改、查、审。如果是鼓励的话就审核通过让其以弹幕的方式滚动在留言板。

• 粉丝管理
  查看对话，停止服务，备注信息等。每一个关注者对应一个公众号都会有一个固定的 OpenID ，点击其 OpenID 查看对话内容。

• 提供资源者管理
  对提供资源用户的信息进行删、改、查。

• 公众号消息
  查看所有的消息，分页查询

• 自动停止服务
  当有用户取消关注时，系统自动将其 OpenID 状态变成暂停服务。当用户再次关注时便不再提供资源服务。

• 关键词回复
  根据后台设置，用户可以回复特定关键词得到特定的后台回复。

• 获取资源
  通过在微信后台回复资源名称前的序号或者资源名称得到资源链接、密码和简介。（因为序号有规律为防止“偷”资源的，我已经做了数字加密和解密功能模块，即将1-6位数的数字加密成含字母数字的六位数密码再从密码解密成数字。但是最终感觉对用户来说太麻烦，所以为了良好体验最后放弃了加密）

技术需求

为提高用户体验：

• 使用 ajax 异步提交表单
• 使用 ajax 异步请求进行首页的分页查询
• 使用 ajax 异步请求在搜索框进行实时检索
• 响应式设计，同时支持移动端和 PC 端。
• PHP 实现分页查询且加密URL

安全需求

因为此网站中多处地方涉及到与用户进行交互所以安全尤为重要：

• 未经审核的提交内容绝不展示，防止 XSS 攻击
• 有提交表单的地方，前端对全部数据进行验证，过滤掉 SQL 与 PHP 中的关键字后提交到后台。后台存储之前再进行过滤一遍，将不合法的字符串进行转换。
• 提交表单时输入验证码
• 加密URL，为了跳转分页查询时不暴露其关键字和URL格式，防止 SQL 注入攻击。（纯属为了体验 【加密／解密URL】技术，可以全部使用 ajax 异步请求数据进行分页）
• 对用户公众号后台回复的消息进行分析过滤危险字符后在进行处理

数据库设计

1.共享资源表（content）

列名	数据类型	备注
contentId	int（4）	资源id（主键）
contentName	varchar(120)	资源名称
contentLink	varchar(120)	资源链接
pwd	varchar(5)	资源密码
sign	int(1)	资源类型
keyWords	varchar(100)	关键词（标签）
downloadNum	int(4)	下载次数
proUserId	int(11)	提供者ID（外键）
isChecked	int(1)	是否审核通过（0:未通过；1:通过）

2.访问者信息表（visit_information）

列名	数据类型	备注
visitId	int(11)	id(主键)
ip	varchar(15)	访问者ip
visitTime	varchar(10)	访问时间
dateTime	varchar(12)	访问日期

3.管理员表（user）

列名	数据类型	备注
userName	varchar(20)	用户名
password	varchar(20)	密码

4.关注用户表（fansUser）

列名	数据类型	备注
fansUid	int(11)	粉丝ID（主键）
fansOpenid	varchar(100)	用户OpenID
attractDate	varchar(12)	关注日期
serviceStatus	int(1)	1:正常 0:拉黑
remarks	varchar(16)	备注

5.用户消息表（fansInformation）

列名	数据类型	备注
inforId	int(11)	消息id（主键）
fansOpenid	varchar(100)	用户OpenID
information	varchar(512)	消息内容
inforDate	varchar(12)	收到日期

6.提供资源用户表（provideUser）

列名	数据类型	备注
proUserId	int(11)	提供资源用户ID（主键）
proUserName	varchar(30)	昵称（主键）备注：提交资源时使用ajax异步请求，判断用户名是否已存在
proUserWeb	varchar(60)	个人站点
proUserEmail	varchar(50)	邮箱
proNum	int(4)	贡献次数

7.关键词回复表（resKeyWord）

列名	数据类型	备注
keyWordsId	int(4)	关键词id
keyWord	varchar(20)	关键词
responseInfor	varchar(512)	回复内容
keyStatus	int(1)	状态 1:正常 0:删除

8.留言区（bbs）

列名	数据类型	备注
bbsId	int(4)	留言ID（主键）
bbsText	varchar(255)	留言内容
bbsUser	varchar(20)	昵称
bbsWeb	varchar(30)	博客站点
bbsEmail	varchar(30)	邮箱
bbsStates	int(1)	状态

功能流程图（部分）

• 添加资源功能

• 获取资源功能

开发环境

• macOS Sierra 10.12.1
• Sublime Text2
• MAMP（php7.0.15、mysql5.6.35）
• Google Browser

服务器环境

• CentOS Linux release 7.4.1708 (Core)
• PHP 5.4.16
• mysql 5.6.39
• Apache/2.4.6

使用技术

基本技术

• php
• H5、CSS、Javascript
• ajax
• sql

开源框架（软件）

感谢大牛提供的开源作品(排名不分先后）：

• bootstrap
• JQuery
• php
• mysql
• apache
• Centos

开发过程

因为之前和自己同学一起做过一个【铛铛打卡】系统，采用的前后端分离，开发起来感觉还是不错的。我在空闲时间也了解了下bootstrap、JQuery等前端框架知识并且用PHP+ajax做了几个小Demo。

当时已经在准备考研复习了，所以这些事情都是在上机课或者上完晚自习后在宿舍又鼓捣的。数据库设计还是比较顺利的，按着自己的思路来的。不知道自己设计的水平好不好（估计不咋地），反正就这几张表用起来也很顺手。

感觉这次正式编码之前准备的都很充分，一些没做过的技术都提前列好单子抽空做了Demo。比如，php 分页查询，ajax 异步请求数据进行分页查询，URL 加密／解密等。（比较遗憾的是当时对于资源的管理想用 ajax 做成可动态编辑表格。无奈前端太渣，没做出来。不过现在会了，点击查看 Demo，但是没精力去重构了。）

界面设计开始就是想的简约风格，基本上没有什么花里胡哨的东西。毕竟考虑到时间有限，设计目标就是还能看过去就行。微信公众号后台开发，大一的时候留下来了一个Demo就省了好多时间，我最后只重新整理了下代码，写了几个函数就可以了。

感觉基本上准备充分后，我就开始编码了！时间是特定的，每天晚上十一点到十二点（可能会多一点）。前两天写的前端界面，后两天写的后台。当时怕拖延时间，为了提高效率出了解决不了的问题都是直接记备忘录。然后第二天白天有空的时候就搜搜、查查、想想。就这样一共用了四天时间竟然可以上线了（贡献排行榜没做，其实到现在也没人给我提供资源…）！

项目展示

图1-PC 端首页

图2-移动端首页

图3-PC 端资源详情页面

图4-移动端资源详情页面

图5-PC 端视频教程页面

图6-PC 端留言板页面

图7-移动端留言板页面

遇到的坑

• ajax 提交数据，后台也正常执行但是前端收不到执行结果
  原因：在其php代码中 include 的一个php文件不知什么时候的一行设置utf-8编码的代码。在网上查询相关知识后，知道ajax相当于抓取 php 文件执行后显示的所有内容，遇到不认识的数据就会出错。这就是为什么会一直收不到结果的原因。
• 将代码部署到服务器上之后，mysql不能用，数据显示不出来
  原因：开发环境和服务器环境中的php版本不同，对于mysql的配置文件格式也不同。
• 微信公众号后台绑定URL，token验证失败！
  原因：不知道，可能是网络延迟什么的吧！但是在确保代码没错，token没错的情况下多尝试几次就行了。

结束

现在网站都运行好几个月了，就是这个「壹言分享」,人烟稀少，“虫子”不少。在站长统计上每天平均也就20几个PV，7、8个UV，但是自己的后台统计的有上百个虫子。大家都来捧个场，多来逛逛。