本科生毕业设计（论文）外文翻译

Design and Implementation of E-commerce Platform based on Vue.js and MySQL

基于Vue.js和MySQL的电子商务平台的设计与实现

设计（论文）题目：基于微信平台的轻音乐系统的设计与实现

2020 年 3 月 4 日

第三届计算机工程、信息科学与应用技术国际会议（ICCIA2019）

基于Vue.js和MySQL的电子商务平台的设计与实现

Yun Quan

The General Education College of Xian Eurasia University, Xirsquo;an, Shaanxi 710065, China.

quanyun@eurasia.edu

摘要. 随着信息技术日新月异，对电子商务平台的需求也越来越大。开发高效、高质量的电子商务平台系统具有重要的研究价值。本项目是基于主流最新的前端开发框架Vue.js构建前端部分的技术开发平台。后端采用主流的Java SSM框架和MySQL数据库进行设计和实现。该系统使运营商能够更好地管理和维护自己的平台，给企业和用户带来极大的便利。

关键词: Vue.js，MySQL, 电子商务，电子原器件选择。

1. 背景

在网络信息时代，信息技术广泛应用于各行各业，电子商务网站已成为重要的销售渠道。电子商务网站的建设不仅实现了服务的信息化，而且开放了网络交易和支付功能，在提高服务质量的同时方便了人们的日常工作和生活。

提到网上购物，很多人立刻想到淘宝、天猫、京东等主流电子商务平台。许多品牌、各类企业门店和官方旗舰店都希望在大平台上分享“流量”。除了依托天猫、京东等大型电子商务平台外，越来越多的商家开始为自己的产品打造合适的网店，为了积累的客户基础而打造更加便捷的购物平台。

科技改变了人们的生活，电子商务网站也成为这一变化最直接的载体。如何高效、快速地开发网站成为公司成功的关键。由于网上开展的电子商务业务不尽相同，每个电子商务网站都有不同的实现功能。本项目是建立在电子商务平台上的电器元器件选型。下图为网站登录界面。

图1 系统登陆界面

2. 主要技术介绍

2.1 Vue.js.

传统的开发方法是将前端代码和后端代码混合在一起，如ASP、JSP技术等，这种开发模式需要在前端和后端穿插，导致代码可读性差，开发效率低。鉴于上述原因，前后分离的开发结构应运而生。

本项目采用基于主流最新前端开发框架的Vue.js技术开发平台前端部分，提高了网站的开发效率，代码逻辑更清晰，更容易应对不断变化的需求，系统易于维护和集成，降低了开发成本。

2.2 Java SSM 框架.

SSM是由Spring SpringMVC MyBatis三个开源框架的集成框架。

SSM通常用作数据源的简单Web项目的框架。Spring是一个轻量级控制反转（IoC）和面向方面（AOP）的容器框架。SpringMVC分离了控制器、模型对象、分派器和处理程序对象的角色，使得定制更加容易。MyBatis是一个优秀的持久层框架，它支持常见的SQL查询、存储过程和高级映射。

2.3 MySQL

MySQL是目前最流行的关系型开源数据库管理系统之一。它将数据保存在不同的表中，速度快、灵活。系统采用MySQL实现数据的存储、修改、删除和查询功能，使数据管理更加系统化、科学化。

前台和后台是系统设计的两个方面：买方对应前台设计，后台对应系统用户。系统前台为用户实现网上购物，前台为用户提供动态浏览、信息查看、用户注册、登录、网上订购、购物车等功能。管理员权限包括数据维护、订单处理、产品信息管理等。通过后台的开发，电子元器件产品在网站上得到了有效的展示。前端、后端和数据库构成一个完整的电子商务网站。网站的结构如图2所示。

图2 网站结构

3. 系统功能模块的设计与实现

根据需求，电子商务电子元器件选择网站可分为用户管理、元器件后台维护、元器件订购、在线支付等几个主要功能模块，如图3所示。

图3 系统功能模块

3.1 用户模块

用户管理模块主要包括会员注册、登录、会员个人信息管理、会员历史信息管理等功能。在管理个人相关资料、历史信息和在线信息的过程中，系统需要确保会员个人信息的安全。

3.2 组件维护

这个企业有很多种产品。网站利用数据库为浏览者提供准确、快捷的信息查询服务，使用户能够方便、快捷地在电子商务数据库中找到所需信息。这是一个功能，反映了网站的能力，组织信息，扩大信息的交流和传递方式。

3.3 组件命令

当用户找到感兴趣的项时，单击该项将显示描述性信息，如该项的文本、图像和属性。用户也可以随意点击某个属性，项目下面的参数也会相应更新，这也是项目的一个亮点。购物车管理中有很多辅助功能，如购物车订单的修改、删除、添加等相关功能。当用户想要购买时，可以将产品放入购物车中。客户填写订单时，系统会回复确认信息单，确保收到订单信息。下面的图4显示了产品属性和订购界面。

图4 产品属性和订购界面

3.4 支付模块

除了交易之外，网上支付也是一个重要的组成部分。网上直接使用电子支付方式，使网上购物更加方便，也使电子商务成为一个完整的过程。网上支付必须有电子金融的支持，即银行或信用卡公司等金融机构必须提供网上操作的金融服务。

3.5 其他功能

客户信息管理是反映网站主体能否以客户为中心，充分利用客户信息挖掘市场潜力的重要增值功能。成功的网站必须是互动的。企业可以利用网站收集信息，然后根据这些数据分析的结果给管理者提供决策支持。

4. 创新

4.1 纵向数据存储

产品信息的维护是后台的重要功能之一。电气元件具有大量的数据、许多属性以及属性之间的许多交互。传统的水平数据库设计很难满足数据库应用系统的参数要求。因此，为了更好地适应组件属性的变化，我们在数据库中采用了垂直存储。

图5 表结构窗口

4.2 二叉树遍历

元件参数之间的影响是非常复杂的。上层的一个参数影响下层的参数，有时多个参数影响下层的参数。为了实现这种变化，我们使用二叉树的遍历来完成参数之间的影响。

图6 参数设置

图7 参数管理窗口

@RequestMapping(value = '/addCompParam.action',method = RequestMethod.POST,produces

= 'application/json') @ResponseBody

public JSONObject addCompParam(CompParam compParam){

JSONObject ret =new JSONObject(); try {

String beforeId= compParam.getBeforeId();

CompParam afterId= compParamService.getAfterId(beforeId); if(null==afterId){ compParam.setCreateDate(MyDateUtils.getDate('yyyy-MM-dd HH:mm:ss'));

String userId = ShiroUtils.getUserId(); compParam.setUserId(userId); compParamService.addEntity(compParam); ret.put(Constant.RTN_CODE, Constant.SUCC_CODE); ret.put(Constant.RTN_MSG, Constant.SUCC_MSG);

}else {

ret.put(Constant.RTN_CODE, Constant.DEFAULT_ERROR_CODE);

ret.put(Constant.RTN_MSG, ' This parameter is configured!!!'); }

} catch (Exception e) {

e.printStackTrace();

ret.put(Constant.RTN_CODE, Constant.DEFAULT_EXCEPTION_CODE); ret.put(Constant.RTN_MSG, Constant.DEFAULT_EXCEPTION_MSG);

}

5. 结论

随着网络信息技术的逐步发展和普及，企业已经意识到利用互联网进行品牌建设和市场拓展的重要性。网络消费已成为网络营销的主战场，高品质的网络营销将给企业带来更多的效益。电子商务网站的功能有着相同的目标。他们充分利用信息传播范围广、互联网信息传播速度快的优势，扩大线下交易，建立网上展示交易平台。电子商务电子元器件的选择降低了成本，增加了销售额。网站运行速度快，管理方便，提高了运营商、商家和用户的体验。表结构的建立方法不够简单，需要进一步的研究和优化。

参考文献

[1]. 张耀春，黄毅，王静等. Vue.js权威指南[M]. 北京：电子工业出版社，2016。

[2]. 邹红霆. 基于SSM框架的Web系统研究与应用[J]. 湖南理工学院学报:自然科学版, 2017(1):39-43..

[3]. 塞拉科维奇M.普拉德尔M. JavaScript中的性能问题与优化：一项实证研究[C] //Ieee/acm，软件工程国际会议.IEEE，2017:61-72。

[4]. 黄文娟. 基于Java和MySQL的图书馆信息化管理系统设计[J]. 电子设计工程, 2019, 027(002):20-24.

本科生毕业设计（论文）外文翻译

<stro

剩余内容已隐藏，支付完成后下载完整资料</stro

---

资料编号：[234347]，资料为PDF文档或Word文档，PDF文档可免费转换为Word