摘要：本文针对现在网络的快速发展、移动设备的的快速普及。移动应用的大量增加， 人们对网上商城系统的欲求两增加。而微信存在着大量的移动用户， 而且还在不断的增加。随着微信用户的增加， 在微信平台上进行搭建自己应用的上家越来越多。 商城系统就是几句微信公众平台的移动商城系统的实现。 其主要开发包括：数据库的建立，其那台上屏购物系统和后台管理系统。采用php， Mysql，Apache服务器实现的。
关键词：微信商城；php Mysql Apache Html
引言：微信是我国主流的移动应用，因为它的用户量大， 支持的手机大部分的手机种类个各种功能。微信商城就是基于这样一个移动社交的应用， 主要作用就是满足商家在微信开商城的用户需求。微信作为一个庞大的社交平台， 拥有大量的消费者，基于微信的商城系统在微信这个平台下会被跟多的人接受并且使用。
本系统中的构建了简单的实现逻辑功能的微信商城系统。改系统能够实现用户的注册、 登陆、密码以及个人字了得修改；实现商品的展示，查询订单订购等功能。
相关技术介绍
本系统使用的是PHP作为服务器端的开发语言，使用Mysql作为后台数据库， html+css+javascript进行页面的展示，使用Apache作为Web服务器。
系统业务流程分析也设计
用户在注册登陆后可以浏览网站和选购商品。可以、将已经选好的商品放到购物车里， 也可以在购物车里修改商品，直到用户自己满意。最后对商品进行结算，形成订单。 后台的管理员可以查看订单，根据订单发货。 管理员可以对相关的产品进行增删改查的操作。
系统的详细设计与实现
系统总体这几通过制定统一的操作流程，完成需求分析中的所有功能。确定实施方案。 整体操作流程为用户进行登陆判断用户是否为管理员， 管理员与 用户的操作区权限是不相同的，管理员拥有整个系统的完整功能， 而用户只能查看浏览购买商品。两种用户的性质完全不同。
注册、登记模块的设计实现
本系统的因为考虑到权限的问题所以登录分为两个部分，一种为前台用户登录， 另一种为管理员用户登录。管理员身份唯一不可注册，用户登入系统前需要进行注册、 登录操作。前台登录界面引用了Weui样式库。用户注册时验证了注册信息， 主要验证的有用户是否已经存在，密码长度是否符合要求，两次输入的密码是否 相同。 然后将数据写入数据库，跳转到登录界面。登录功能：对用户输入的信息进行检验， 验证用户名和密码是否匹配。登录成功或将用户信息存储到SESSION中，方便后续的调用。
前台注册界面的结构代码：
<form method="post" action="{:U('Home/login')}">
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell hd"><label class="weui-label">用户名: </label></div>
<div class="weui-cell bd">
<input class="weui-input" type="text" id="username" name="username" placeholder="请输入用户名">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell hd"><label class="weui-label">密码: </label></div>
<div class="weui-cell bd">
<input class="weui-input" name="password" type="password" id="password" placeholder="请输入密码">
</div>
</div>
<button class="weui-btn weui-btn_plain-primary" type="submit" id="btn">登录 </button>
</div>
</form>
商品展示设计
用户登录后跳转到商品查看界面，商品浏览界面展示了商品的总体信息， 包括了商品图片展示、商品价格、商品名， 让用户了解商品的信息能够根据条件选购商品。添加了搜索功能， 可以根据用户输入信息查找符合条件的商品。
浏览商品页面结构代码：
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar form" action="{: U('Store/store')}" method="post">
<div class="weui-search-bar box">
<i class="weui-icon-search"></i>
<input type="search" class="weui-search-bar input" id="searchInput" name="store_name" value="{$formget. store_name|default=''}" placeholder="搜索"/>
<a href="javascript: " class="weui-icon-clear" id="searchClear"></a>
</div>
<label for="search_input" class="weui-search-bar label" id="searchText">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript: " class="weui-search-bar cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-panel weui-panel_access">
<div class="weui-panel hd">商品展示</div>
<div class="weui-panel bd">
<foreach name="kind" item="vo">
<a href="{:U('Store/detail', array('id'=>$vo['sid']))}" class="weui-media-box weui- media-box_appmsg">
<div class="col-md-4 col-sm-4 col-xs-12">
<img src=" ROOT /Uploads/{$vo. storeimage}" class="img-responsive">
<div class="weui-media-box bd store-show">
<h4 class="weui-media-box title">{$vo. storename}</h4>
<p class="weui-media-box desc">商品价格: {$vo.storeprice}</p>
<p class="weui-media-box desc">商品描述: {$vo.storedescription}</p>
</div>
</div>
</a>
</foreach>
</div>
</div>
商品购物车设计
购物车设计方便用户选购商品，一次性购买多个商品。方便用户操作， 在购物车中用户可以对购物车中已有商品进行结算，继续选购商品， 删除购物车中已经存在但不喜欢的商品。结算后跳转到结算页面。
购物车界面结构代码：
<foreach name="kind" item="vo">
<div class="weui-form-preview">
<div class="weui-form-preview hd">
<label class="weui-form-preview label">商品价</label> <em >class="weui-form- preview value">￥{$vo. storeprice}</em></div>
<div class="weui-form-preview bd">
<div class="weui-form-preview item">
<label class="weui-form-preview label">商品名</label> <spanclass="weui-form- preview value">{$vo. storename}</span></div>
<div class="weui-form-preview item">
<label class="weui-form-preview label">用户名</label>
<span class="weui-form-preview value">{$vo. username}</span></div>
<div class="weui-form-preview item">
<label class="weui-form-preview label">商品描述</label>
<span class="weui-form-preview value">{$vo. storedescription}</span></div></div>
<div class="weui-form-preview ft"><a class="weui-form-preview btn weui-form- preview btn_default" href="{: U('Store/delete', array('id'=>$vo['bid']))}">从购物车中移除</a>
</div> </div></foreach>
<a class="weui-btn weui-btn_plain-primary" href="{: U('Store/exchange')}">结算</a>
订单界面
用户购物后选择自己喜欢的商品进行结算，结算生成订单， 订单内容主要包括了订购的商品名，商品总价，还有用户输入的订单地址、订单电话、 订单备注等，所有数据都会存入数据库中，方便以后查看。以及管理。
订单界面结构代码：
<foreach name="kind" item="vo">
<div class="weui-form-preview">
<div class="weui-form-preview hd">
<label class="weui-form-preview label">订单价格</label>
<em class="weui-form-preview value">￥{$vo.e_price}</em>
</div>
<div class="weui-form-preview bd">
<div class="weui-form-preview item">
<label class="weui-form-preview label">订单号</label>
<span class="weui-form-preview value">{$vo. e_order}</span>
</div>
<div class="weui-form-preview item">
<label class="weui-form-preview label">下单时间</label>
<span class="weui-form-preview value">{$vo. e_time}</span>
</div>
<div class="weui-form-preview item">
<label class="weui-form-preview label">订单地址</label>
<span class="weui-form-preview value">{$vo. e_address}</span>
</div>
<div class="weui-form-preview item">
<label class="weui-form-preview label">订单备注</label>
<span class="weui-form-preview value">{$vo. e_notice}</span>
</div>
<div class="weui-form-preview item">
<label class="weui-form-preview label">订单状态</label>
<span class="weui-form-preview value"><?php OrderStatus($vo['status']);?></span>
<span hidden="hidden" class="order_status">{$vo. status}</span>
</div>
</div>
<div class="weui-form-preview ft order_cannel">
<a class="weui-form-preview btn weui-form-preview btn_default" href="{: U('Store/orderCannel', array('id'=>$vo['e_id']))}">取消订单</a>
</div>
</div>
</foreach>
后台用户管理
后台的所有的功能大多都为敏感操作所以涉及到权限问题，只允许管理员进行登录。 用户管理功能主要是管理员对用户进行管理，本系统注重的是删除用户操作。 管理员查看用户的基本信息，包括用户名，但其他敏感信息例如用户密码不会展示出来。 可以根据用户的用户名，用户id对用户进行筛选。
用户管理页面结构代码：
<form action="{: U('Index/home')}" method="post" role="form" class="form-inline store- form">
<div class="form-group">
<input type="text" name="user_id" value="{$formget. store_id|default=''}" placeholder="用户id" class="form-control search-input">
<input type="text" name="user_name" value="{$formget. store_name|default=''}" placeholder="用户名称" class="form-control search-input">
<input type="submit" class="btn" value="搜索" />
<a class="btn btn-danger" href="{: U('Index/home')}">清空</a>
</div>
</form>
<div class="table-responsive store-table">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>用户手机号</th>
<th>用户邮箱</th>
<th>用户注册时间</th>
<th>用户最后登录时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<foreach name="kind" item="vo">
<tr>
<td>{$vo.uid}</td>
<td>{$vo.username}</td>
<td>{$vo.mobile}</td>
<td>{$vo.email}</td>
<td>{$vo.regtime}</td>
<td>{$vo.lasttime}</td>
<td>
<a href="{: U('Index/userDelete', array('id'=>$vo['uid']))}">删除</a>
</td>
</tr>
</foreach>
</tbody>
</table>
</div>
<div class="pagination">{$page}</div>
后台商品管理
管理员需要更新商城内的商品，包括数量，商品名称商品所属的种类等， 对商品进行添加，删除不需要的产品，编辑改变商品的信息等。 商品后台的筛选条件主要包括了商品名，商品所属品牌。 通过以下条件选取出需要操作的商品。
商品管理界面结构代码：
<form action="{: U('Index/add')}" method="post" role="form" class="edit-form" enctype="multipart/form-data">
<div class="form-group">
<label for="storename">商品名称:</label>
<input type="text" class="form-control" value="" name="store_name">
<label for="storename">商品种类:</label>
<select class="form-control add-select" name="kind_id">
<foreach name="kind" item="vo">
<option value="{$vo[kid]}">{$vo[kname]}</option>
</foreach>
</select>
<label for="storename">商品价格(单位 元): <span id="checkNum"></span></label>
<input type="text" class="form-control" value="" name="store_price" id="storePrice">
<label for="storename">商品数量<span id="checkAmount"></span></label>
<input type="text" class="form-control" value="" name="store_amount" id="storeNum">
<label for="storename">商品描述:</label>
<input type="text" class="form-control" value="" name="store_description">
<input type="file" class="form-control]" name="photo1">
<input type="submit" class="btn" name="submit" value="提交">
</div>
</form>
后台查看功能
前台用户购买商品生成了订单，管理员需要查看订单的具体信息。 同时起到了对订单核对的作用，订单可以根据订单号和订单生成的时间区间来筛选订单。 针对订单管理员只有查看操作，不可以进行更多操作。
订单展示页面结构代码：
<form action="{: U('Exchange/exchange')}" method="post" role="form" class="form-inline store-form">
<div class="form-group">
<input type="text" name="exchange_id" value="{$formget. exchange_id|default=''}" placeholder="订单ID" class="form-control search-input">
<input type="text" name="exchange_order" value="{$formget. exchange_order|default=''}" placeholder="订单号" class="form-control search-input">
<span class="input-append date form_datetime">
<input type="text" name="start_time" value="{$formget. start_time|default=''}" placeholder="起始时间" class="form-control search-input" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</span>
<span class="input-append date form_datetime">
<input type="text" name="end_time" value="{$formget. end_time|default=''}" placeholder="结束时间" class="form-control search-input" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</span>
<input type="submit" class="btn" value="搜索" />
<a class="btn btn-danger" href="{: U('Exchange/exchange')}">清空</a>
</div>
</form>
<div class="table-responsive store-table">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>订单号</th>
<th>下单用户</th>
<th>下单时间</th>
<th>订单价格</th>
<th>订单地址</th>
<th>订单备注</th>
</tr>
</thead>
<tbody>
<foreach name="exchange" item="vo">
<tr>
<td>{$vo.e_id}</td>
<td>{$vo.e_order}</td>
<td>{$vo.username}</td>
<td>{$vo.e_time}</td>
<td>{$vo.e_price}</td>
<td>{$vo.e_address}</td>
<td>{$vo.e_notice}</td>
</tr>
</foreach>
</tbody>
</table>
</div>
<div class="pagination">{$page}</div>
实现的功能总结
以上为本系统的主要的功能，与用户界面，展示的代码为部分的核心代码， 结构代码为html代码没有引用样式，只是页面的结构。逻辑代码为php代码， 逻辑代码中进行了数据处理，大部分的数据为数据库中数据，部分为用户输入的数据。 用户输入的数据需要先对信息进行信息验证。具体验证过程需要在测试模块中进行。
参考文献：
[1]温昱.软件架构设计：程序员向架构师转型必备[M].北京：电子工业出版社， 2012:13-14,
[2]温昱.软件架构设计：程序员向架构师转型必备[M].北京：电子工业出版社， 2012:19-20.
作者简介：李兴麟，男，汉族，籍贯：福建省莆田市，学历：本科，研究方向：java。