文章目录

• 一、项目介绍
• 二、开发环境
• 三、功能介绍
• 四、核心代码
• 五、效果图
• 六、文章目录

一、项目介绍

本文主要通过对系统的前台系统和后台管理系统进行了功能性需求分析，对系统的安全性和可扩展性进行了非功能性需求分析。在详细的需求分析的基础上，根据系统的功能设计确定了数据库结构，实现完整的代码编写。电商平台系统使用 Dreamweaver、HBuilder代码编辑器、Apache服务器等开发工具，完成了系统的主要模块的页面设计和功能实现。本文展示了首页页面的实现效果图，并通过代码和页面介绍了用户注册功能、商品搜索功能、生成订单和查看我的订单功能、在线付款功能的实现过程。
关键词：电子商务； HBuilder代码编辑器；商品搜索

二、开发环境

开发语言：Java
框架：springboot
JDK版本：JDK1.8
服务器：tomcat7
数据库：mysql
数据库工具：Navicat11
开发软件：eclipse/myeclipse/idea
Maven包：Maven
————————————————

三、功能介绍

前台需求：
（1）用户模块：主要包括用户的注册和登陆、用户个人信息管理和用户帐单查询等功能。
（2）商品模块：主要包括商品浏览、商品信息展示、商品搜索、商品收藏、商品购买等功能。
（3）购买订单模块：主要包括生成订单、我的订单、查看订单详细信息、在线支付、确认收货等功能。
后台需求：
（1）用户管理：主要包括用户列表、用户数据管理等功能。
（2）商城管理：主要包括商城中心、分类列表、订单列表管理等功能。
（3）订单管理：主要包括帮助中心、会员中心、促销管理、运营管理、财务管理等功能。
系统用例图如下所示。

图3-1系统用例图

通过软件的需求分析已经获得了系统的基本功能需求。根据各大功能模块的不同，将系统分为各种功能大块。系统功能结构如下图所示。

图4-2系统功能结构图
注册/登录
游客(未进行注册或登陆的用户)可以浏览、搜索商品，但不能进行收藏和购买。用户注册首先需要进行表单验证，来验证用户名和手机号码是否合法，然后验证用户名和手机号是否已经存在，验证通过即可注册。
注册成功后，用户可以通过输入用户名来登录系统，输入密码后进行验证。登录成功后，用户可以使用商品收藏、商品购买、查看我的订单、个人信息管理等功能。
个人信息管理
用户登录系统后，在账户设置中，可以修改昵称、头像、手机号、登陆密码、收货地址等个人基本信息。
商品搜索
系统首页展示了商品搜索输入框，用户在输入框内输入与商品名称相关的关键字，系统通过模糊查询搜索到用户需要的商品并展示。
商品信息展示
用户在浏览商品时，点击某一个商品，跳转到该商品的信息展示页。在商品信息页面展示了商品的详情信息，比如商品介绍，商品详情，商品销量和收藏量等，用户通过浏览信息了解商品的主要功能和用途，最终决定是否购买。
商品购买
在商品信息页面，用户可以通过点击“购买”进行购买商品，点击后跳转到订单生成页面。订单生成页面会展示商品信息，收货地址，优惠信息等，用户确认后信息无误点击“提交”生成订单，订单生成后跳转到支付页面，支付完成则购买成功。
生成订单
用户在购买商品时，点击商品信息页面的“立即购买”或购买记录页面的“去结算”，跳转到订单生成页面，在订单生成页面用户需要确认收货地址、收货人手机号、收货人姓名等信息，确认无误后点击“提交订单”，订单提交成功，生成一条订单信息。
查看订单详情
用户在查看我的订单列表时，可以点击某一个订单来查看该订单的详细信息，主要包括订单编号、订单状态、订单日期、订单中的商品、交易金额等。订单详情还可以查看商品物流信息，用户通过能够物流信息了解所购买商品的发货状态。
商品列表
管理员可以在“商品列表”中展示商城中需要销售的商品，包含商品名称，商品属性以及类目等商品信息。管理员可以对商品进行搜索，按分类查询商品。
商品添加
添加商品首先需要输入商品基本信息，如商品名称、商品数量、商品分类等；然后需要编辑商品信息详情，如商品规格，商品描述，商品图片等。管理员也可以删除已添加的商品。
商品管理
用户在购买商品时需要选择商品规格，管理员可以设置商品规格的名称以及展示的顺序等。管理员还可以给商品规格添加属性值，也可以删除不需要的属性值。同时，管理员可以编辑商品信息，如商品介绍、商品展示图片等，方便用户浏览。
订单管理
管理员根据订单号、收货人姓名、收货地址、收货人手机号码等基本订单信息进行发货配送。
资讯管理
系统首页可以放置资讯。管理员可以添加、修改资讯的信息，如资讯名称，资讯图片，资讯链接地址等信息。

四、核心代码

部分代码：

package com.fc.v2.controller;

import com.fc.v2.common.base.BaseController;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;

/**
 * 如果有前台这儿写前台访问方法
 * @ClassName: IndexController
 * @author fuce
 * @date 2019-10-21 00:15
 */
@Api(tags = "首页模块")
@Controller
public class IndexController extends BaseController{
	
	/**
	 * 前台访问 域名:端口 例如:localhost:80的get请求
	 * @param map
	 * @return
	 * @author fuce
	 * @Date 2019年11月20日 下午10:55:13
	 */
	@ApiOperation(value="前台",notes="前台")
	@GetMapping("/")
	public String index(ModelMap map) {
		
		//直接访问后台用
		return "redirect:/admin/login";
    	//return "index";
	}
	/**
	 * 前台访问/index的get请求
	 * @param map
	 * @return
	 * @author fuce
	 * @Date 2019年11月20日 下午10:54:56
	 */
	@ApiOperation(value="前台",notes="前台")
	@GetMapping("/index")
	public String index2(ModelMap map) {
		//直接访问后台用
		//return "redirect:/admin/login"
		return "index";
	}
}

五、效果图

六、文章目录

目 录
第1章 绪论 1
1.1 研究背景与意义 1
1.2 开发现状 1
1.3 论文组成结构 2
第2章 开发工具及相关技术介绍 3
2.1 开发技术说明 3
2.2 MVVM模式介绍 3
2.3 Vue.js 主要功能 3
2.4 JavaScript脚本语言 4
2.5 Mysql数据库 4
2.6 AJAX技术 5
第3章 系统分析 6
3.1 可行性分析 6
3.1.1 经济可行性 6
3.1.2 技术可行性 6
3.1.3 操作可行性 6
3.2 功能性需求分析 6
3.3 非功能性需求分析 9
第4章 系统设计 10
4.1 功能模块设计 10
4.2 数据库设计 12
4.2.1 概念模型设计 12
4.2.2 数据库逻辑设计 12
4.2.3 数据库表设计 13
第5章 系统实现 28
5.1 用户登录的实现 28
5.2 系统前台主要功能实现 30
5.2.1 首页的实现 30
5.2.2 用户注册的实现 31
5.2.3 商品展示的实现 35
5.2.4 商品搜索的实现 36
5.2.5 商品购买的实现 36
5.3 系统后台主要功能实现 37
5.3.1 会员管理的实现 37
5.3.2 商品管理的实现 39
5.3.3 订单管理的实现 39
第6章 系统测试 42
6.1 系统可靠性测试 42
6.2 系统功能性测试 42
6.3 系统合格性测试 42
6.4 测试结果 43
第7章 总结与展望 44
参考文献 45
致谢 47