1、第 1 页 （共 16 页）基于 AngularJS 的手机网上商店系统设计和前端开发摘 要：本毕业设计是基于 AngularJS 框架制作的手机网上商店的系统设计和前端开发，该项目采用了 CSS+DIV、JavaScript、AngularJS、Bootstrap、调用静态的 JSON 数据技术，用 XAMPP 虚拟机调试代码，实现了前端商品的展示、产品详情的浏览、产品加入购物车的功能、产品总结算、用户账号管理、管理员管理、用户注册、用户登录模块。关键词：AngularJS； Bootstrap；JavaScript；网页前端；网店Abstract：This graduation desig
2、n 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, br
3、owsing 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 shopAngularJS 是一款开源的 JavaScript 函数库，它克服了 HTML 在构建上的不足，试
4、图成为 WEB 应用中的一种端对端的解决方案 1，并且它的目标是透过 MVC模式功能增加浏览器的应用，使开发和测试变得更加容易，它读取附加自定义的HTML 标签，并控制页面中的输入和输出 2。现今在前端在开发中 AngularJs 备受欢迎，因为在前端框架中它是少有在前端 MVC 框架 3，而 MVC 前端开发必将成为前端开发在一种新模式，经过调查研究目前对该框架的研究人还是存在不足之处4，所以对于研究该框架非常有意义。1 开发环境第 2 页 （共 16 页）1.1 前端开发框架 AngularJSAngularJS 使用简单（1）AngularJS 是一款 JavaScript 库，因此可以
5、通过 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(/,
6、templateUrl:home.html, reloadOnSearch: false);.);（5）控制器设置app.controller(MainController,function($rootScope,$scope,$http).第 3 页 （共 16 页）.)1.2 XAMPP 集成软件包xampp 由 Apache、mySQL、PHP、Perl 组成是一个免费的，因此可以降低开发成本 5，它具有安装与使用的简单的功能，它支持多种操纵系统比如说windows、OSX、Linux 等比较流行的系统 6，安装包同时提供phpMyAdmin、Webalizer 等搭建 Web 环境的常
7、用工具，根据系统平台的不同 7，还提供 ProFTPD、FileZilla FTP Server、OpenLDAP、SQLite、mod_perl 等组件。在此项目中通过对 XAMPP 的使用，安装本地虚拟主机，读取 JSON 数据用以显示网站中商品的信息内容。2 需求分析2.1 需求分析在快节奏的现代生活中，人们追求的不仅仅是丰富的物质生活，更追求健康的绿色的生活，随着网络的发展，信息化的服务已经成为必须，网上购物已成为现代人购物的一个重要选择，电商俨然成为一种不可或缺的商务渠道。所以通过这次的毕业设计我建立一个手机版的电商网站的前端，该网站具有浏览商品、加入购物车、提交订单、结算功能、用户
8、账号管理、管理员后台管理功能，通过用户新体验模型，我将功能模块设计如下：（1）用户注册功能用户注册模块用于用户填写用户名，填写密码，确认密码 ，注册成为会员。（2）登录功能登录模块用于用户登录自己的账号，填写用户名、密码、登录。（3）用户账号管理功能第 4 页 （共 16 页）用于用户对账号中的订单的查看。（4）管理员登录功能用于管理员登录管理订单，包括填写登录密码，登录按钮。（5）用户订单管理用户对订单的管理，包括已付款，待付款，待评价的订单的操作。（6）管理员后台管理管理员对商品的管理，订单的管理，用户的管理，钱包的管理。（7）商品列表展示功能商品列表展示主要用于展示所有的商品，商品列表分
9、为两列，每种商品包含商品的缩略图，商品的名称、描述、加入购物车按钮。（8）订单填写功能订单填写用于用户填写收货地址、收货人姓名、电话号码。（9）网站首页网站首页主要是网站的整个门面奠定网站的基调。3 网站总体设计3.1 网站管理员使用流程管理员使用可以使用该网站的所有功能，具有最高的权限，下面是管理员对后台的管理的流程如图 3-1 所示。图 3-1 管理员管理订单图管理员登录 后台管理登录后台 会员管理商品管理账号管理订单管理第 5 页 （共 16 页）3.2 网站用户使用流程用户使用流程图 3-2 所示。图 3-2 用户使购买图3.3 网站结果功能设计图 3-3 网站结构图账号管理天天鲜网站
10、名称网站前台 网站后台网站首页用户注册用户登录商品列表关于我们联系我们管理员登录 订单管理商品详情加入购物车结算用户登录填写收货信息 提交订单 已登录会员管理商品管理用户注册 用户登录 浏览商品 用户结算用户购买完成购买 非会员第 6 页 （共 16 页）3.4 用户注册流程用户注册流程如图 3-4 所示。图 3-4 用户注册流程图4 数据表的设计4.1 数据库设计动态网站的关键在于数据库中的数据的存储，数据存储在 mySQL 数据库中，一个网站的重中之重则是数据库的设计。4.1.1 数据库说明本网站采用 mySQL 数据库存储数据包括用户信息、商品信息、订单信息、管理员信息,采用 Navic
11、ate for Mysql 可视化操作数据库，其中将网站的数据库的命名为 fruitshop,其中包含的数据表如图 4-1 所示。否是 是 否 是 否是 否开始注册填写用户名验证用户名是否可用填写邮箱验证邮箱是否可用填写手机号码 验证手机号码是否可用填写密码验证两次密码是否一致再次填写密码 注册成功加入数据库第 7 页 （共 16 页）图 4-1 数据库结构图4.2 数据表的设计下面有四张表分别存储了管理员、用户、商品、订单的数据。如表 4.1、表4.2、表 4.3、表 4.4 所示。表 4.1 fruit_user名 类型 长度 小数点 是否空值u_id int 11 0 否password
12、 smallint 6 0 否username varchar 255 0 否表 4.2 fruit_manage名 类型 长度 小数点 是否空值m_id int 11 0 否password smallint 6 0 否username varchar 255 0 否第 8 页 （共 16 页）表 4.3 fruit_fruitgoods名 类型 长度 小数点 是否空值id int 11 0 否name varchar 255 0 否num int 11 0 否describe char 255 0 是imgsrc char 255 0 是price tinyint 4 0 否quality
13、 time 0 0 是saleprice tinyint 4 0 是orgin varchar 255 0 是PD datetime 0 0 是brand varchar 255 0 是表 4.4 fruit_dingdan名 类型 长度 小数点 是否空值id int 11 0 否name varchar 255 0 否address varchar 255 0 否phone varchar 255 0 否totalprice int 11 0 否5 网站详细设计5.1 框架介绍网站整体采用了 AngularJS 前端框架，而 AngularJS 前端框架采用了MVC（MVC 是模型视图控制器
14、）的设计模。MVC 设计模式将模型和视图的代码第 9 页 （共 16 页）分离，从而在开发系统中各模块的耦合度小，处理问题更方便。（1）Model（模型）负责管理应用程序的数据，它响应来自视图的请求，同时也响应指令从控制器进行自我更新 8。通常模型对象负责在数据库中存取数据。（2）View（视图）在一个特定的格式的演示数据，由控制器决定触发显示数据，它们是基于脚本的模板系统，非常容易使用 AJAX 技术的集成。（3）Controller（控制器）负责响应于用户输入并执行交互数据模型对象，控制器接收到输入，它验证输入，然后执行修改数据模型的状态的业务操作。5.2 MVC 模型关系图 5-1图 5-1 MVC 模型5.3 数据库设计 E-R 图数据库的设计是整个网站的核心内容，结合概念模型的建立方法与特点，构建 E-R 图 5-2 所示。图 5-2 E-R 模型(1)实体间关系 (1)实体 (1)属性EventControllerViewModule第 10 页 （共 16 页）（1）总 E-R 图，如图 5-3 所示。图 5-3 总 E-R 图（2)商品 E-R，如图 5-4 所示。图 5-4 商品 E-R 图(3)用户 E-R，如图 5-5 所示。
