基JQuery移动网页设计实现─电脑销售购物例
基JQuery移动网页设计实现─电脑销售购物例
摘
着智手机发展仅电脑浏览网页已足满足日常需求智手机品牌品牌系统(IOSAndroidWindows
Phone华正研发鸿蒙系统)型号尺寸尺寸系统做界面相麻烦件事解决问题jQuery推出新函数库jQuery Mobile目希统前移动设备户界面(UI)基jQuery框架JSP动态网页技术标准MySQL关系型数库理系统设计出精美高效移动网页系统
关键词:jQueryjQuery mobile电脑销售购物系统
Design and implementation of mobile web page based on jQuery Take computer sales and shopping system as an example
Abstract
With the development of smart phones browsing web pages on computers alone is not enough to meet people's daily needs There are so many brands of smart phones Different brands have different systems (such as IOS Android Windows Phone and the Hongmeng system that Huawei is developing) different models and sizes It's quite a hassle to make an interface for different sizes of systems To solve this problem jQuery has launched a new function library jQuery mobile which aims to unify the user interface (UI) of current mobile devices So based on jQuery framework JSP dynamic web page technology standard and MySQL relational database management system we can design a beautiful and efficient mobile web page system
Keywords jQueryjQuery mobileComputer sales and shopping system
目录
1 前言 1
11研究背景 1
12 课题研究目意义 2
121 文研究目 2
122 文研究意义 2
13 国外发展概况存问题 3
2 移动电脑购物销售系统技术选型 4
21 jQuery mobile框架介绍 4
22 JSP介绍 4
23 MVC模式介绍 5
3 系统分析设计 6
31 系统需求分析 6
311 系统功性需求 6
312 系统非功性需求 7
313 系统建模 8
32 系统功模块设计 9
321 户注册模块 10
322 户登录模块 11
323 购物车模块 11
324 订单填写模块 12
325 订单理模块 12
326 系统理模块 12
33 系统数库设计 13
331 数库需求分析 13
332 数库概念结构设计 13
333 数库表结构设计 13
4 移动电脑购物销售系统实现 16
41 户注册模块 16
411 功描述 16
412 核心代码 16
413 模块界面 17
42 户登录模块 18
421 功描述 18
422 核心代码 18
423 模块界面 18
43 购物车模块 20
431 功描述 20
432 核心代码 20
433 模块界面 20
44 订单填写模块 22
441 功描述 22
442 核心代码 22
443 模块界面 22
5 移动电脑购物销售系统测试 23
51 移动电脑购物销售系统测试容 24
52 移动电脑购物销售系统测试方法 24
53 移动电脑购物销售系统测试 24
参考文献 26
致谢 27
1 前言
11研究背景
购物日常生活中缺部分着电子信息技术发展购物形式着发生改变开始实体店挑选商品付款变线浏览商品介绍选购商品精美高效网络购物网站传统电脑端网络购物网站需电脑电脑连接互联网情况登陆购物网站想购物时必须先进行注册电脑端账号注册需设定户名密码绑定邮箱老年说时常会记忆忘记账号密码定会邮箱账号密码遗忘找回户说件非常麻烦事情电脑非常容易病毒入侵选购完商品付款时候容易黑客窃取支付密码造成户损失电脑端钓鱼网站层出穷电脑熟悉中老年非常容易电脑网络密密麻麻讯息欺骗进入错误购物网站造成济损失
智手机发展次改变购物方式智手机移动端相电脑端更便捷时手机受时间点限制点线购物体现尤明显想线购物电脑网络环境情况电脑进行线购物现手机运营商信号范围时进行购物点电脑端法拟户移动端购物网站进行注册时候手机号接收短信进行账号注册遗忘密码时通短信验证方式找回密码非常方便手机端尤苹果手机端系统安全性远远高电脑端少会发生支付密码盗窃事手机端购物网站入口相电脑端相唯部分购物网站会移动端app难进入钓鱼网站电脑端说优点
电商发展越越快电商量吸引消费者甚会强迫卖家台合理折扣卖家说利益损失某电商某电脑供应商种折扣协商官司供应商需移动端购物网站系统
12 课题研究目意义
121 文研究目
文研究目分三方面:提高户便捷性二减少户支付风险三供应商提供销售台
122 文研究意义
首先作日常生活重组成部分线购物必须足够高效便捷更高效便捷进行网络购物移动端手机购物网站系统极重购物行涉户注册户登录选购商品放置购物车支付生成订单卖家销售行涉添加删商品设定商品价格处理订单理员负责处理订单异常商品户成分信息进行增删改查三者间关系密分确保三者功均准确进行交互时候出意外户说功齐全起舒服系统基求试想买家新系统进行购物时候系统会卡顿现象光商品挑选页面流畅进行会接着进行购物理卖家说商品信息进行修改时步骤非常繁琐肯定会系统产生厌烦感系统说简洁高效精美系统体现开发者者种尊重
文研究意义买家销售者实际需求出发偏重实际应充分考虑系统性技术先进性户体验性系统数安全性做买家卖家便捷进行买卖商品
13 国外发展概况存问题
国外移动页面开发已相成熟亚马逊公司电商台历许变化初亚马逊两层架构变成分布式中心化服务台够者提供许应开始亚马逊应端交互时C++实现着亚马逊发展亚马逊开始加强端数库开发数库容纳更数
国少基jQuery移动网页开发文献[1]教学质量评价系统题基jQuery mobile开发框架研发出移动终端系统jQuery mobile专门开发移动页面前端开发框架种品牌型号尺寸智手机板电脑中jQuery mobile框架系统开发提供屏幕适应力时提供丰富动画特效强控件库数库进行交互方面种通开源脚语言PHP(超文预处理器)PHP系统中处服务器端运行程序会影响系统前端页面设计实现负责台数库进行连接数交换前端设计方面系统界面简洁达户界面美感求文献[2]教师工作量理系统题目基jQuery mobilePHP研发出系统前端设计干练精美台方面PHP脚语言然PHP做层结构支持较系统负荷站点说采分布计算PHP法做种支持PHP提供数库接口统数库数进行统非常麻烦Java通JDBC访问数库通数库厂商提供数库驱动非常轻松访问数库访问数库接口较统PHP说Java效率更高开发系统JSP作服务器端脚语言开发效率非常高优点JSPJavaBeansEJB(Enterprise JavaBeans)更复杂应程序需求进行处理样写出架构会业务规代码页面代码混团维护起方便适合处理型系统求MVCWeb架构解决问题MVC思想系统分模型(model)视图(view)控制器(controller)模型系统程序数视图指UI(户界面)控制器进行户界面程序数间步通MVCWeb架构弱化模块间耦合关系业务逻辑处理页面实现数相分离样做处模块需进行改动会影响模块正常进行工作基jQueryMVCWeb架构目前国外型移动网页设计趋势
2 移动电脑购物销售系统技术选型
21 jQuery mobile框架介绍
jQuery mobile实jQuery移动互联网设备扩展封装UI组件库jQuery移动互联网设备开发者提供手机板电脑品牌胜繁品牌手机板电脑尺寸设计标准想尺寸移动互联网设备设计尺寸移动网页非常现实jQuery mobile提供统移动UI框架样开发者jQuery mobile框架移动设备进行移动网页开发jQuery mobile优点:
(1)jQuery mobile类似html标记语言开发曲线较JavaScript求较低
(2)jQuery mobile兼容iPadiPhoneAndroidWindows phone等移动设备开发者需学针系统台编程应开发降低开发者开发成
(3)jQuery mobile开发出移动网页系统交应商店审批直接部署服务器进行访问运行应商店审批程麻烦调试起非常方便jQuery mobile开发更具操作性灵活性升级维护时候会户产生太影响
22 JSP介绍
JSPHTML+JavaJava编写类XMLtagsscriptlets封装产生动态网页处理逻辑JSP网页逻辑网页设计相分离支持重基组件设计Web应程序开发变迅速容易JSP优点:
(1)编写次处运行JSP基JavaJSP具Java优点——台关性次编写处运行
(2)系统台支持JSP基台意环境中开发意环境中进行系统部署意环境中扩展
(3)JSP样化功强开发工具支持Java已许非常优秀开发工具中部分免费开源种台间运行
图21 JSP原理图
23 MVC模式介绍
MVC模式模型(Model)视图(View)控制器(Control)流程首先视图控制器发送请求控制器接收请求请求发送模型模型会处理请求然结果发送回控制器控制器根接收结果选择视图MVC模式三层相互关联相互独立部发生变动会相互影响MVC模式优点:
(1)低耦合性视图层业务层相互分离样果想需修改视图层代码时候重新编译模型控制器代码理单独修改外两代码时会影响模块代码
(2)高重性适性MVC模式开发者视图访问服务器端代码包含Web(Http)浏览器线浏览器
(3)较低生命周期成MVC模式降低开发者开发维护户接口技术含量
(4)快速部署MVC模式开发极减少开发时间样开发者更精力放业务逻辑页面设计
3 系统分析设计
31 系统需求分析
311 系统功性需求
移动电脑购物销售系统买家提供购买卖家提供销售电脑移动端系统系统理员户资料订单数进行增删改查
买家说买家需方便移动电脑购物销售系统进行电脑选购买家想移动电脑购物销售系统进行购物时首先进行买家户注册登录买家户进行账号注册登录样该买家信息保存系统数库中买家户信息数库记录买家户系统行系统数库记录移动电脑购物销售系统进行交互户注册登录户便移动电脑购物销售系统中进行电脑选购电脑品牌众品牌式样价格性型号电脑买家户角度出发够货三家够暂时保存心仪型号电脑信息必移动电脑购物销售系统需购物车功购物车功便满足求户心仪型号电脑时便该型号电脑加入购物车中然继续进行电脑选购买家户种型号电脑放进购物车便进行价格性较进行购买时候会买家需购买许台电脑情况类买家户说需购买电脑进行购买非常麻烦购物车功需购买电脑数量进行增减功模块买家户确定电脑需提交订单功提交订单功记录买家电脑选购信息买家户填写址信息信息保存数库卖家户系统理员便买家户购买订单信息
卖家户说卖家需发布卖电脑信息商品发布功卖家户需销售电脑时通商品发布功电脑信息展现移动电脑购物销售系统供买家选购卖家户收买家户订单信息需买家户订单进行处理买家户满足购买求卖家户意订单求买家户满足购买求卖家户拒绝订单求卖家户需订单处理功
系统理员说买家户购物卖家户销售程中果出现问题时系统理员需买家户卖家户户信息商品信息订单信息进行增删改查买家户卖家户进行电脑商品交易时某方出现正交易行时系统理员接举报查证该订单进行删严重者正方户信息加入黑名单公示出视情节进行户信息删
综述功性需求方面需功:
(1)供买家户卖家户注册登录功
(2)供买家户购物时数量进行增减购物车功
(3)供买家户订单提交功
(4)供卖家户商品发布功
312 系统非功性需求
移动电脑购物销售系统重点移动系统初衷便够买家户卖家户时手机进行电脑商品买卖非功性需求方面需满足求:
(1)支持移动设备:移动电脑购物销售系统需支持型号手机板电脑满足买家户卖家户移动设备进行电脑买卖需
(2)界面需简洁美观操作需简单易懂:买家户卖家户说需简洁美观操作简单系统界面样界面提升户体验
(3)数库中数足够安全:移动电脑购物销售系统会涉买家姓名电话电脑收货址信息卖家信息电话店铺信息信息涉户隐私数库中敏感数进行增添删修改查询时候需数加密做出合理设计
313 系统建模
(1)系统角色分析
移动电脑购物销售系统整体需求进行分析详细调研仔细类分析终确定系统三基角色分买家户卖家户系统理员
图31 系统角色划分图
(2)买家户涉例图示图32 买家户例图
(3)卖家户涉例图示
图33 卖家例图
图34 系统理员例图
(4)系统理员涉例图示
32 系统功模块设计
根进行系统分析设计移动电脑购物销售系统划分6功模块:
(1) 户注册模块
(2) 户登录模块
(3) 购物车模块
(4) 订单填写模块
(5) 订单理模块
(6) 系统理模块
系统功模块示意图图示:
图35 系统功模块图
321 户注册模块
移动电脑购物销售系统户说定数库登记户名登录系统中系统符合条件户户注册功模块信息登记服务器端中买家户系统进行购物前需通户注册模块注册属购物账号卖家户说提高卖家户注册门槛卖家户直接通简单户注册模块进行注册需卖家户具销售资质等资料交系统理员认证确认通系统理员数库中直接增加卖家户户信息户信息发卖家户
买家户:指需购买电脑类户
卖家户:指系统中销售电脑类户
系统理员户:指理系统数信息类户
322 户登录模块
系统户合法身份便需通户登录模块进行登录登陆移动电脑购物销售系统功模块户说需系统功模块进入系统中接触UI界面(户界面)户登录系统需力识区分出登录户身份样够身份户进入UI界面(户界面)中需CookieSession机制区分户目前较频繁踪技术CookieSession中Cookie客户端记录信息确认户身份Session服务器端记录信息确认户身份户登录模块需满足求:
(1) 户名明文显示
(2) 密码密文显示
(3) 区分出户身份
(4) 账号密码正确登陆系统
323 购物车模块
时商城购物时候心仪商品时会想先手逛商城久商品手里头购物车购物时候推着购物车挑选商品喜欢商品放进购物车根济情况购物车选择买商品互联网进行购物移动电脑购物销售系统中挑选电脑时候常常需货三家电脑端电脑销售购物系统中没购物车功模块通浏览器开电脑标签页进行电脑性价点手机非常方便移动端电脑销售购物系统中法电脑端样时开标签页购物车功模块移动电脑购物销售系统中尤重系统买家户心仪电脑放进购物车购物车中进行电脑性价购物车模块需满足求:
(1) 够增加删选购电脑信息
(2) 够购物车选购电脑数量进行修改
324 订单填写模块
买家户终确定想购买电脑时需购买需求通订单填写模块提交服务器通服务器买家订单信息发卖家订单填写模块中需满足求:
(1) 填写户买家户
(2) 记录买家收货信息
(3) 记录买家收货址
325 订单理模块
买家卖家提交购物订单卖家需够订单进行理卖家电脑库存满足某买家订单需求意买家订单进行发货果卖家电脑库存出特殊原法满足某买家订单需求意订单需求卖家遇寻衅滋事买家时恶意订单进行删订单理模块需满足求:
(1) 卖家意通订单需求
(2) 卖家拒绝取消订单需求
(3) 卖家删异常订单
326 系统理模块
系统需系统理员样买家户卖家户进行交易程中出现什异常够解决例买家户中出现卖家户进行刷单卖家户进行恶意评时合法买家户账号进行删卖家户接订单直买家户进行发货时候系统理员删该效订单系统理模块需满足求:
(1) 系统理员买家卖家户信息进行增删改查
(2) 系统理员违规订单信息进行增删改查
33 系统数库设计
系统数库移动电脑购物销售系统重组成部分数库作系统中模块数保存物理数库文件里数库表结构设计会移动电脑购物销售系统运行速度造成影响提高运行速度合理数库进行设计
331 数库需求分析
移动电脑购物销售系统进行需求分析纳出系统实体实体拥属性:
(1) 买家户:买家名称登录名称登陆密码收货址联系电话
(2) 卖家户:卖家名称登录名称登陆密码店铺名称店铺址联系电话
(3) 系统理员:理员编号登录名称登陆密码
(4) 电脑商品:电脑名称电脑价格电脑介绍电脑参数库存数量
(5) 购物车:购物车编号买家名称电脑名称选购商品数量
(6) 订单:订单商品名称订单商品价格订单收货址订单买家名称订单卖家名称订单买家电话订单卖家电话订单状态
332 数库概念结构设计
根移动电脑购物销售系统需求分析出实体间关联:买家户订单:买家户订单:系统理员订单:买家户购物车:
333 数库表结构设计
表31 系统表总体说明
名称
代码
注释
买家户
Customer
数系统导入
卖家户
Seller
系统理员台输入
系统理员
Admin
数系统导入
电脑商品
Computer
购物车
Shopping Cart
订单
Order
面表详细设计:
(1) 买家户表:
表32 买家户表
名称
代码
数类型
注释
买家名称
Cname
Varchar(50)
键
登录名称
Clname
Varchar(50)
登陆密码
Clcode
Varchar(50)
收货址
Cadress
Varchar(50)
联系电话
Cnumber
Int(20)
(2) 卖家户表:
表33 卖家户表
名称
代码
数类型
注释
卖家名称
Sname
Varchar(50)
键
登陆名称
Slname
Varchar(50)
登陆密码
Slcode
Varchar(50)
店铺名称
Sshop
Varchar(50)
店铺址
Sadress
Varchar(50)
联系电话
Snumber
Int(20)
(3) 系统理员表:
表34 系统理员表
名称
代码
数类型
注释
理员编号
Ano
Int(20)
键
登录名称
Alname
Varchar(50)
登陆密码
Alcode
Varchar(50)
(4) 电脑商品表:
表35 电脑商品表
名称
代码
数类型
注释
电脑名称
PCname
Varchar(50)
键
电脑价格
PCprice
Int(20)
电脑介绍
PCintroduction
Varchar(100)
电脑参数
PCparameter
Varchar(100)
库存数量
PCstock
Int(20)
(5) 购物车表:
表36 购物车表
名称
代码
数类型
注释
购物车编号
SCno
Int(20)
键
买家名称
Cname
Varchar(50)
外键
电脑名称
PCname
Varchar(50)
外键
电脑数量
PChowmuch
Int(20)
(6) 订单表:
表37 订单表
名称
代码
数类型
注释
订单编号
Onumber
Int(20)
键
电脑名称
PCname
Varchar(50)
外键
电脑价格
PCprice
Int(20)
外键
收货址
Cadress
Varchar(50)
外键
买家名称
Cname
Varchar(50)
外键
卖家名称
Sname
Varchar(50)
外键
买家电话
Cnumber
Varchar(50)
外键
卖家电话
Snumber
Varchar(50)
外键
订单状态
Ostatus
char(1)
0已提交1通
4 移动电脑购物销售系统实现
41 户注册模块
411 功描述
户注册模块新买家户接触移动电脑购物销售系统时需接触第功买家户通户注册模块注册专属户接着户会数库分配买家户户表中便系统理员买家户信息进行理
412 核心代码
户注册模块核心代码:
图41 户注册核心代码
413 模块界面
户注册模块界面:
图42 户注册模块界面
42 户登录模块
421 功描述
户登录模块户登录移动电脑购物销售系统必须程户需登陆界面输入已注册户名密码通系统验证方登陆进系统移动电脑购物销售系统功
422 核心代码
户登录模块核心代码:
图43 户登录核心代码
423 模块界面
户登录模块界面:
图44 户登录模块界面
43 购物车模块
431 功描述
购物车模块移动电脑购物销售系统重功方便记录顾客想购买电脑型号包括电脑名称价格数量首先户需购物界面心仪电脑点击加入购物车钮然点击购物车键购物车页面点击刷新购物车添加商品购物车清空购物车删商品功
432 核心代码
购物车模块核心代码:
图45 购物车模块核心代码
433 模块界面
购物车模块界面:
图46 购物车模块界面
44 订单填写模块
441 功描述
买家确定购买电脑需填写关收货信息订单信息表中需买家输入收货姓名收货址收货电话点击提交订单信息发送卖家卖家决定否意订单
442 核心代码
订单填写模块核心代码:
图47 订单填写模块核心代码
443 模块界面
订单填写模块界面:
图48 订单填写模块界面
5 移动电脑购物销售系统测试
软件测试系统开发程中必须程开发者通软件测试时找出系统中出现种错误测试系统否正常运行软件测试软件性保障起极重作数开发者希限力物力进行更高效率开发果没进行充分软件测试开发出软件会带着潜错误投入运行者程中出现错误户体验造成巨伤害开发者说续寻找错误维护会开发者带更开发成软件测试尤重
51 移动电脑购物销售系统测试容
测试验证移动电脑购物销售系统否正确完成模块负责功
52 移动电脑购物销售系统测试方法
测试系统功模块功需求设计适合测试例进行测试
53 移动电脑购物销售系统测试
表51 测试例结果
序号
测试目
操作程预期结果
测试结果
1
户注册模块中注册功否正确
步骤1点击注册钮
步骤2输入需注册名称密码
步骤3点击提交数保存数库
通
2
户登录模块中登录功否正确
步骤1选择登陆身份
步骤2输入户登录名密码
步骤3点击登录
步骤4根选择登陆身份进入相应界面
通
3
购物车模块否正确增加删商品
步骤1点击商品购物车钮
步骤2进入购物车点击数量+钮
步骤3购物车点击商品旁删钮
步骤4数状态保存数库中
通
4
订单填写模块中数否正确保存数库中
步骤1购物车中点击填写订单钮
步骤2输入买家户信息
步骤3点击提交
步骤4数状态保存数库中
通
5
订单理系统中状态修改功否正确
步骤1登录理员身份进入订单理页面
步骤2选择需修改订单状态
步骤3数状态保存数库中
通
6
系统理模块
步骤1登陆理员身份进入系统理页面
步骤2户信息进行修改
步骤3订单信息进行修改
步骤4数状态保存数库中
通
参考文献
[1]杨寅Jquery Mobile框架教学质量评价系统中研究应[J]太原学院学报201836(3):5964
[2]易扬扬基Jquery Mobile教师工作量理系统设计实现[D]吉林:吉林学2015
[3][美] Jon DuckettHTML & CSS设计构建网站[M]清华学出版社20131
[4][美] Adam FreemanHTML5权威指南[M]民邮电出版社20141
[5][美]达克特(DuckettJ)JavaScript & jQuery交互式Web前端开发[M]清华学出版社201569
[6][美]Nicholas C Zakas深入理解ES6[M]电子工业出版社201771
[7][美] 尔德完美网页设计艺术[M]民邮电出版社2008
[8]阮峰ECMAScript6入门[M]电子工业出版社20148
[9][英] Andy Budd [英] Simon Collison [英] Cameron Moll精通CSS(第2版) 高级Web标准解决方案[M]民邮电出版社20105
[10][英] Peter Gasston移动网页设计开发[M]民邮电出版社20144
[11]布鲁林克jQuery Mobile快速入门[M]民邮电出版社20125
[12]陶国荣jQuery Mobile权威指南[M]机械工业出版社20128
[13] 李兆锋张生Java Web项目开发案例精粹[M]电子工业出版社2010
[14] 汪赵强网页制作JSP技术[M]机械工业出版社2010
[15] 孙卫琴TomcatJava Web开发技术详解[M]电子工业出版社2009
[16] 钱雪忠MySQL数库技术实验指导[M]清华学出版社2012
[17] 姜承尧MySQL技术幕[M]机械工业出版社2011
[18] (美)戴尔 李红军(译)MySQL核心技术手册 第2版[M]机械工业出版社2009
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容,不代表《香当网》观点或立场,请自行判断内容的真实性和可靠性!
该内容是文档的文本内容,更好的格式请下载文档