毕业论文——基于AngularJS的手机网上商店系统设计和前端开发

基于AngularJS的手机网上商店系统设计和前端开发摘 要：本毕业设计是基于AngularJS框架制作的手机网上商店的系统设计和前端开发，该项目采用了CSS+DIV、JavaScript、AngularJS、Bootstrap、调用静态的JSON数据技术，用XAMPP虚拟机调试代码，实现了前端商品的展示、产品详情的浏览、产品加入购物车的功能、产品总结算、用户账号管理、管理员管理、用户注册、用户登录模块。关键词：AngularJS； Bootstrap；JavaScript；网页前端；网店Abstract：This graduation design is based on AngularJS framework making system design and front-end development of mobile online store, the project uses a CSS + DIV, JavaScript, AngularJS, Bootstrap, call the static JSON data technology, using XAMPP virtual machine debugging code that implements the front end display of goods, browsing product details, product was added to the shopping cart features, product total billing, user account management, administrator management, user registration, user login module.Key words：AngularJS; Bootstrap; JavaScript; website; online shop AngularJS是一款开源的JavaScript函数库，它克服了HTML在构建上的不足，试图成为WEB应用中的一种端对端的解决方案1，并且它的目标是透过MVC模式功能增加浏览器的应用，使开发和测试变得更加容易，它读取附加自定义的HTML标签，并控制页面中的输入和输出2。现今在前端在开发中AngularJs备受欢迎，因为在前端框架中它是少有在前端MVC框架3，而MVC前端开发必将成为前端开发在一种新模式，经过调查研究目前对该框架的研究人还是存在不足之处4，所以对于研究该框架非常有意义。1 开发环境1.1 前端开发框架AngularJSAngularJS使用简单（1）AngularJS是一款JavaScript库，因此可以通过HTML中的标签引入 引入框架文件 引入控制器文件（2）入口文件index.html中的设置.ng-app指令定义一个angular的应用的开始，在这个标签下的内容可以调使用AngularJS这个库，ng-controller指令可以调用一个名为MainCoontroller的控 制器，ng-view指令的作用是替换并渲染模板。 （3）模块的定义 var app = angular.module(MobileAngular, ngRoute);（4）路由设置app.config(function($routeProvider)$routeProvider.when(/,templateUrl:home.html, reloadOnSearch: false);.);（5） 控制器设置app.controller(MainController,function($rootScope,$scope,$http).)1.2 XAMPP集成软件包xampp由Apache、mySQL、PHP、Perl组成是一个免费的，因此可以降低开发成本5，它具有安装与使用的简单的功能，它支持多种操纵系统比如说windows、OSX、Linux等比较流行的系统6，安装包同时提供phpMyAdmin、Webalizer等搭建Web环境的常用工具，根据系统平台的不同7，还提供ProFTPD、FileZilla FTP Server、OpenLDAP、SQLite、mod_perl等组件。在此项目中通过对XAMPP的使用，安装本地虚拟主机，读取JSON数据用以显示网站中商品的信息内容。2 需求分析2.1 需求分析在快节奏的现代生活中，人们追求的不仅仅是丰富的物质生活，更追求健康的绿色的生活，随着网络的发展，信息化的服务已经成为必须，网上购物已成为现代人购物的一个重要选择，电商俨然成为一种不可或缺的商务渠道。所以通过这次的毕业设计我建立一个手机版的电商网站的前端，该网站具有浏览商品、加入购物车、提交订单、结算功能、用户账号管理、管理员后台管理功能，通过用户新体验模型，我将功能模块设计如下：（1）用户注册功能 用户注册模块用于用户填写用户名，填写密码，确认密码 ，注册成为会员。（2）登录功能 登录模块用于用户登录自己的账号，填写用户名、密码、登录。（3） 用户账号管理功能 用于用户对账号中的订单的查看。（4）管理员登录功能 用于管理员登录管理订单，包括填写登录密码，登录按钮。（5）用户订单管理用户对订单的管理，包括已付款，待付款，待评价的订单的操作。（6） 管理员后台管理 管理员对商品的管理，订单的管理，用户的管理，钱包的管理。（7）商品列表展示功能商品列表展示主要用于展示所有的商品，商品列表分为两列，每种商品包含商品的缩略图，商品的名称、描述、加入购物车按钮。（8）订单填写功能 订单填写用于用户填写收货地址、收货人姓名、电话号码。（9）网站首页 网站首页主要是网站的整个门面奠定网站的基调。3 网站总体设计3.1 网站管理员使用流程管理员使用可以使用该网站的所有功能，具有最高的权限，下面是管理员对后台的管理的流程如图3-1所示。管理员登录后台管理登录后台会员管理商品管理账号管理订单管理图3-1 管理员管理订单图3.2 网站用户使用流程用户使用流程图3-2所示。用户注册用户登录浏览商品用户结算用户购买完成购买非会员图3-2 用户使购买图3.3 网站结果功能设计账号管理天天鲜网站名称网站前台网站后台网站首页用户注册用户登录商品列表关于我们联系我们管理员登录订单管理商品详情加入购物车结算用户登录填写收货信息提交订单已登录会员管理商品管理图3-3 网站结构图3.4 用户注册流程用户注册流程如图3-4所示。否是是否是否是否开始注册填写用户名验证用户名是否可用填写邮箱验证邮箱是否可用填写手机号码验证手机号码是否可用填写密码验证两次密码是否一致再次填写密码注册成功加入数据库图3-4 用户注册流程图4数据表的设计4.1 数据库设计动态网站的关键在于数据库中的数据的存储，数据存储在mySQL数据库中，一个网站的重中之重则是数据库的设计。4.1.1 数据库说明本网站采用mySQL数据库存储数据包括用户信息、商品信息、订单信息、管理员信息,采用Navicate for Mysql可视化操作数据库，其中将网站的数据库的命名为fruitshop,其中包含的数据表如图4-1所示。图4-1 数据库结构图4.2 数据表的设计下面有四张表分别存储了管理员、用户、商品、订单的数据。如表4.1、表4.2、表4.3、表4.4所示。表4.1 fruit_user名类型长度小数点是否空值u_idint110否passwordsmallint60否usernamevarchar2550否表4.2 fruit_manage名类型长度小数点是否空值m_idint110否passwordsmallint60否usernamevarchar2550否表4.3 fruit_fruitgoods名类型长度小数点是否空值idint110否namevarchar2550否numint110否describechar2550是imgsrcchar2550是pricetinyint40否qualitytime00是salepricetinyint40是orginvarchar2550是PDdatetime00是brandvarchar2550是表4.4 fruit_dingdan名类型长度小数点是否空值idint110否namevarchar2550否addressvarchar2550否phonevarchar2550否totalpriceint110否5 网站详细设计5.1 框架介绍网站整体采用了AngularJS前端框架，而AngularJS前端框架采用了MVC（MVC是模型视图控制器）的设计模。MVC设计模式将模型和视图的代码分离，从而在开发系统中各模块的耦合度小，处理问题更方便。（1）Model（模型）负责管理应用程序的数据，它响应来自视图的请求，同时也响应指令从控制器进行自我更新8。通常模型对象负责在数据库中存取数据。（2）View（视图）在一个特定的格式的演示数据，由控制器决定触发显示数据，它们是基于脚本的模板系统，非常容易使用AJAX技术的集成。（3）Controller（控制器）负责响应于用户输入并执行交互数据模型对象，控制器接收到输入，它验证输入，然后执行修改数据模型的状态的业务操作。5.2 MVC模型关系图5-1EventControllerViewModule图5-1 MVC模型5.3 数据库设计E-R图数据库的设计是整个网站的核心内容，结合概念模型的建立方法与特点，构建E-R图5-2所示。(1)实体间关系(1)实体(1)属性图5-2 E-R模型（1）总E-R图，如图5-3所示。图5-3 总E-R图（2)商品E-R，如图5-4所示。图5-4 商品E-R图(3)用户E-R，如图5-5所示。图5-5 用户E-R图(4)管理员E-R，如图5-6所示。图5-6 管理员E-R图(5)订单E-R，如图5-7所示。图5-7 订单E-R图6 网站测试在网站做完后，需要对该网站的每个功能进行测试。通过测试来确定每个功能是否完成了相应的效果，并对未达到理想效果的功能进行问题分析，从中找出问题所在并加以修改，修改后再测试直到达到正确结果为止。6.1 网站页面的测试网站页面样式的测试是最直观的，在运行网站时，测试网页样式的是否达到相应的样式效果，是否在测试功能时部分样式发生未设计中的变化。JavaScrit事件测试是否会正常执行，AngularJS控制器中的方法是否出错，网站的运行是否达到预想中的效果。6.2 网站的功能测试该网站添加了购物车功能，测试能否顺利加入产品，并对产品的数量的添加，计算总价格，提交订单等功能的实现。6.3 网站的MVC的测试对网站的各部分的浏览观察Controller-Model-View之间是否一致。7 实际效果的展示7.1 网站实际效果的展示 图7-1 首页效果(左)产品列表（右） 图7-2 用户账号管理（左）关于我们（右） 图7-3 产品详情页面 图7-4 用户注册（左）用户登录（右） 图7-5 购物车（左）联系我们（右）8 总结该网站实现了网站的基本功能，但还可以有更好的方案，这需要更长的时间进行完善。使网站的功能更加完善，内容更加的丰富。该网站使用了Ajax读取本地上的JSON数据用来展示产品的信息，所以需要使用集成的XAMPP来辅助网站的浏览。 在开发该网站的前端的过程中，遇到了路由的设置出现的问题，多次调试还是没能把路由问题解决，不能把模板文件调用，但是经过的查找资料和向他人请教，最终还是把问题顺利解决，问题的根本出在没有把路由的设置文件引入。另外一个问题就是，手机显示的问题，因为做手机方面的网站的经验不足，导致了，多次调试，还是没能很好的使得版面很好的适应手机的显示，遇到这个问题，也充分的显示了自己的短板所在，促使我不断的探究和学习关于手机网站的学习和研究。我相信遇到问题并不可怕，可怕的是逃避问题。该网站是毕业设计，在做项目的过程中进一步对AngularJS框架有了认识，加强了对该框架的使用熟悉程度，对MVC模式的表现也有了进一步的理解。 但还存在着不足，由于这次制作重点放在了学习使用AngularJS上和学会制作手机网站的前端方面，对于网站的后台方面存在着严重的不足，希望以后可以更加完善该网站的后台以实现网站的前端和后台的整体功能，更进步研究和使用该框架做更多的项目。在整过项目流程中感谢指导老师的谆谆指导，感谢重庆师范大学这个平台的让我有一个展示自己的机会，相信在接下来的日子里会更加努力研究关于前端方面的前沿技术，加强后台的技术，提高自己的综合能力。参考文献：1 Brad Green,Shyam Seshadri. AngularJS开发下一代Web应用M. 北京:电子工业出版社, 2015.2 Ari Lerner. Angularjs权威教程M. 北京:人民邮电出版社, 2013.3 Pawel Kozlowski,Peter Bacon Darwin,李路,王永强,马海波. 精通AngularjsM. 武汉:华中科技大学出版社, 2014.4 Ad