目 录
摘 要 I
ABSTRACT II
1绪论 1
1.1 研究的背景、目的和意义 1
1.2 国内外文献综述 2
1.3 研究的主要内容 3
2系统技术 5
2.1 微信小程序 5
2.2 ThinkPHP 5 框架 7
2.3 RESTFul API 8
2.4 微信支付技术 10
2.5 MySQL数据库 12
3需求分析 14
3.1可行性分析 14
3.2系统实现的目标 14
3.3系统功能需求 14
4系统设计 16
4.1 系统分析 16
4.2 系统功能模块设计 16
4.3 数据库需求分析 17
4.3.1数据库实现 17
4.3.2用thinkphp连接数据库 18
5系统实现 20
5.1 小程序端 20
5.1.1 前台总体框架 20
6.1.2 用户注册 21
5.1.3 商品搜索 22
5.1.4 产品列表页 22
5.1.5 我的订单 23
5.1.6 订单详情 24
5.2 后台部分 25
5.2.1 后台登录 25
5.2.2 后台订单管理 25
5.2.3 后台购物车管理 26
5.2.4 后台商品管理 26
5.2.6 商品分类管理 27
5.2.5 后台商品修改 27
6系统测试 28
6.1 测试环境简介 28
6.2 系统的不足及修改方法 28
6.3 系统的评价分析 29
6.3.1 实用性 29
6.3.2 可维护性 29
6.3.3 可扩展性 29
6.3.4 注册测试 29
总 结 30
致 谢 31
参考文献 32
4系统设计
4.1 系统分析
此基于微信小程序的订水商城分前台功能和后台功能：
前台部分由用户使用，主要包括用户注册，购物车管理，订单管理，个人资料管理，留言板管理
后台部分由管理员使用，主要包括管理员身份验证，商品管理，处理订单，用户信息管理，连接信息管理
4.2 系统功能模块设计
功能结构图如下：
图9 功能模块设计图
从图中可以看出，订水商城小程序可以分为前台和后台两个部分，前台部分由用户使用，主要包括用户注册，生成订单，购物车管理，查看购物车，查看留言，订购产品，订单查询和发布留言7个模块；后台部分由管理员使用，主要包括管理员身份验证，商品管理，处理订单，用户信息管理，连接信息管理5个模块。
4.3 数据库需求分析
数据库的设计通常是以一个已经存在的数据库管理系统为基础的，常用的数据库管理系统有MYSQL，MYSQL，Oracle等。我采用了Mysql数据库管理系统，建立的数据库名为db_business。
整个系统功能需要以下数据项：
用户：用户id、用户名称、登录密码、用户真实姓名、性别、邮箱地址、联系地址、联系电话、密码问题、答案、注册时间。
留言：主题id、作者姓名、Email、主题名称、留言内容、发布时间。
商品：商品id、名称、价格、图片路径、类型、简要介绍、存储地址、上传人姓名、发布时间、是否推荐。
订单：订单号、用户名、真实姓名、订购日期、Email、地址、邮编、付款方式、联系方式、运送方式、订单核对、其他。http://www.biyezuopin.vip/onews.asp?id=11987
管理员：管理员id、管理员名称、管理员密码。
公告：公告内容、公告时间。
<!doctype html><html><head> <meta charset="UTF-8"> <title>商品网站</title> <link rel="stylesheet" type="text/css" href="admin/css/common.css"/> <link rel="stylesheet" type="text/css" href="admin/css/main.css"/> <script type="text/javascript" src="admin/js/libs/modernizr.min.js"></script> <script type="text/javascript" src="js/check_input.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> .ppt-container, .ppt-container ul, .ppt-container li, .ppt-container img { margin : 0; padding : 0; border : 0; } .ppt-container { width : 950px; height : 460px; position : relative; } .ppt-container img { width : 100%; height : 100%; } .ppt-container .hide { display : none; } .ppt-container ul.image-list li { position : absolute; top : 0px; left : 100px; } .ppt-container ul.button-list { list-style : none; position : absolute; right : 20px; bottom : 20px; } .ppt-container ul.button-list li { float : left; padding-right : 10px; } .ppt-container ul.button-list span { background : #E5E5E5; padding : 1px 7px; line-height : 20px; font-size : 13px; display : block; cursor : default; } .ppt-container ul.button-list span.selected { color : #FFF; background : #FF7000; } </style> <script type="text/javascript"> $(function() { var iCountOfImage = 7; //共7张图片 var iPreIndex = 0; //上一次索引位置 $(".ppt-container ul.button-list li span").click(function() { var iIndex = $(this).attr("data-index"); if(iIndex == iPreIndex) { return; //点击了当前图片，不切换 } $(".ppt-container .image-list li[data-index="+ iIndex +"]").fadeIn(1500); $(".ppt-container .image-list li[data-index="+ iPreIndex +"]").fadeOut(1500); iPreIndex = iIndex; $(".ppt-container .button-list span").removeClass("selected"); $(this).addClass("selected"); }); setInterval(function() { //自动播放，每5秒触发一次单击事件，来播放幻灯片 var iNextIndex = (iPreIndex + 1) % iCountOfImage; $(".ppt-container ul.button-list li span[data-index="+ iNextIndex +"]").click(); }, 5000); }); </script> </head><body> <div class="topbar-wrap white"> <div class="topbar-inner clearfix"> <div class="topbar-logo-wrap clearfix"> <ul class="top-info-list clearfix"> <li><a class="on" href="index.php">首页</a></li> <!-- <li><a class="on" href="online_fuwufanwei.php">服务范围</a></li>--> <li><a class="on" href="online_reserve.php">留言评价</a></li> </ul> </div> <div class="top-info-wrap"> <ul class="top-info-list clearfix"> <li><a class="on" href="about.php">关于我们</a></li> <li><a class="on" href="admin/index.php">进入后台</a></li> </ul> </div> </div> </div> </div></body></html>
