从零开始Web App尝试（一）

 这次软件工程课设成功的做了一个手机Android系统Web APP，虽然有些功能并没有完全实现出来，而且也没有清晰明了的企业级框架系统，但是作为一次编程小白的初次体验，还是有一些基础的心得与体会，个人觉得还是比较适合于新手的入门尝试，在此抛砖引玉，希望能给同为茫然的小白一点经验，更希望获得众多大佬的提点与批评。

我这次设计实现的APP相对来说还是比较简单的，开始尝试了Android Stdio制作原生app的念头，但是繁杂的框架与体系结构让我眼花缭乱，而且由于时间只有两周，所以还是暂时放弃了利用AS制作原生app的念头，通过在网上的一些检索，我决定采用前端+ajax+servlet这种较为简单的框架，这种框架的主要设计区域在前端，前端用html制作网页的大体框架，用CSS框定较为美观的样式，再用js语言通过ajax与服务器进行信息传输与交流，服务器端以Java语言为基础的eclipse工作台上编码，主要采用servlet接收前端传来的请求，再通过sql语句对数据库进行增删改查操作，再将结果打包成json传回前端，前端js接收信息并展现在html中。前端代码主要写在Hbulider中，Hbuilder的主要好处是可以实时连接手机进行测试，并且打包成apk直接安装在手机上。

话不多说，先展示一下我的成果吧。

 

这是登录前的浏览界面，只能对商品进行浏览，不能加入购物车进行购买，此时顾客为游客身份。

这是登录界面，输入账号后，前端js代码将信息传送到后端，后端用servlet进行接收，然后查询数据库mysql中的onlineshopp表中的user列，如果查询到该账号再将其密码返回与顾客输入的密码进行比对，两个都相同则记录该顾客账号并跳转到首页。如下：

主界面的左上角区域为记录游客状态区域，如果游客未登录，则展示登录按钮，供游客注册账号或登录，否则展示欢迎语再加上顾客昵称，体现该顾客已登录。

如上，则是商品展示界面，可以进行分类浏览或全部商品查询以及模糊查询，该商品都是从数据库中进行检索返回的，因此数据库里面的内容反应了页面的整体情况。

如上，则为单品展示页面，展示了单个商品的图片，购买数量以及详细信息，该页面可以将商品加入购物车，并前往购物车对商品进行提交购买。

如图，则是购物车页面，该页面展示了你将要购买物品的数量以及总价格，左下角的删除按钮可以将此商品进行删除操作，最下角的提交订单则可以将购物车清空，提交订单是本app中最复杂的操作，其中需要传送顾客信息，商品信息以及购物车信息，返回到服务器中，服务器将按照传送上来的信息对顾客表，商品表，购物车表以及订单表进行相应的增删改查操作。最后返回结果。

上图则为个人中心页面，能对用户信息进行修改以及查看操作，如完善信息，账户充值，以及订单查询操作。

上图为设置界面，可以对顾客本身信息进行查看以及退出登录系统，回到游客状态。

这是我的app下载链接:NewShop下载

自此，Web App基本展示完成，下面就展示一下如何设计实现这样一个较为简单的Web App吧。