目录
概述
课题背景及意义
主要工作
系统开发环境
系统设计
系统概述
系统结构设计
数据库设计
后端项目结构详解
项目文件介绍
界面实现
登录界面的设计
账户管理界面的设计
商品管理界面的设计
测试
结论
参考资料
概述
项目截图展示：
课题背景及意义
电子商务在中国历经二十余年发展，已经逐步成为国民经济支柱，涉及基础3大产业，渗透进入人们的生活。
分析电商优缺点：
·电子商务将传统的商务流程电子化、数字化，一方面以电子流代替了实物流，可以大量减少人力、物力，降低了成本;另一方面突破了时间和空间的限制，使得交易活动可以在任何时间、任何地点进行，从而大大提高了效率。
·电子商务所具有的开放性和全球性的特点，为企业创造了更多的贸易机会。
·配送问题：配送费用高，交货耗时长，缺乏系统、统一化的配送企业，订单和分发的系统不够完善，影响了顾客的电商购物体验。
开发意义
电子商务一方面破除了时空的壁垒，另一方面又提供了丰富的信息资源，为各种社会经济要素的重新组合提供了更多的可能，这将影响到社会的经济布局和结构。开发电商后台管理系统的意义在于，电商管理系统中，最关键的是商品，因为商品是整个电商平台运营的关键所在，很多情况下，我们只要在后台创建内容，再通过前台进行展示即可，只要有了商品，上架就能展示在客户面前。同样的，商品也是电商后台产品的基础，很多电商平台在拥有了电商管理系统后，就能为同类型产品提供标准化的属性，这样一来就能更好的去统一产品。
主要工作
开发适用于电商管理的Web系统应用。用于商品的查询、上架、修改、下架等基础功能。并追求简洁美观的UI界面。
Web网页：基础操作功能，分页功能，增删改查功能。与服务器的对接、发送接收异步请求。用户登录和权限管理功能。
服务器：数据库查询修改功能，分发数据库数据，过滤非法请求、限制数据资源的调用、通过识别用户权限等级进行服务器数据资源的放行。
系统开发环境
IDEA 2022.1 Ultimate
IDEA 是Java编程语言的集成开发环境(IDE)，被业界公认为是最好的Java开发工具，功能强大，符合人体工程学。具有只能选取、丰富的导航模式、优秀的重构能力、以及代码构建辅助功能（代码高亮、自动补充、代码格式化、一键构建重构函数等）。
Tomcat 8.5
Tomcat 服务器是一个隶属于Apache基金会的免费的开放源代码轻量级的Web 应用服务器。当在一台机器上配置好Apache Tomcat服务器，可利用它响应HTML页面的访问请求。
Tomcat主要组件：服务器Server，服务Service，连接器Connector、容器Container。连接器Connector和容器Container是Tomcat的核心。
一个Container容器和一个或多个Connector组合在一起，加上其他一些支持的组件共同组成一个Service服务，有了Service服务便可以对外提供能力了，但是Service服务的生存需要一个环境，这个环境便是Server，Server组件为Service服务的正常使用提供了生存环境，Server组件可以同时管理一个或多个Service服务。
Servlet服务
Java Servlet 是运行在 Web 服务器或应用服务器上的程序，它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。
使用 Servlet，您可以收集来自网页表单的用户输入，呈现来自数据库或者其他源的记录，还可以动态创建网页。
Maven 翻译为"专家"、"内行"，是 Apache 下的一个纯 Java 开发的开源项目。Maven 是一个项目管理工具，可以对 Java 项目进行构建、依赖管理。Maven的强大功能在于对项目的依赖管理和一键构建项目，使得Java项目脱离了jar包依赖的复杂管理，使用Idea自身拥有对Maven项目构建工具的高度支持，使用Maven构建项目可以使得Java的开发工作变得更加高效。
MySQL数据库
MySQL是当下最流行的关系型数据管理系统、其通常被应用于Web应用当中。使用MySQL存储本项目中所使用的数据。
Mybatis 3.5.9
Java语言和数据库的连接需要使用到编程接口JDBC，但JDBC的使用是复杂和不便于管理的，当操作数量和指令数量增大时，代码的维护效率将成倍增加，因此使用框架进行辅助。
MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以对配置和原生Map使用简单的 XML 或注解，将接口和 Java 的 POJOs(Plain Old Java Objects,普通的 Java对象)映射成数据库中的记录。
MyBatis提供了数据库记录数据和Java对象之间的映射，使得数据库操作可以在进行绑定后全然由Java语言进行操作。并且极大的解除了SQL与程序代码的耦合。
Vue2
Vue.js 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
作为前端开发的补充、Vue 非常轻便，并且增强现有的HTML。
Element UI组件库
本项目前端可视化组件的主要来源。Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，其中所包含的组件设计清爽简便，由于基于Vue构建，可以方便快速的完成前端所需的界面设计和逻辑功能设计。
系统设计
系统概述
系统概述
前端UI界面：
通过简单的Vue2基础入门知识，搭配Element组件库进行界面构建。
后端管理系统:
基于JavaEE技术的web开发项目
使用MVC设计模式 对代码进行划分
表现层（servlet）+业务逻辑层（service）+数据访问层（mapper）+DB
系统结构设计
后端结构分层
数据库MySQL储存主要数据，设置主键和自增长限制等
数据库访问层构建DAO (Data Access Object)，通过Mybatis框架实现功能。
业务逻辑层封装DAO中的功能，创建接口生成实现类方便表现层进行业务调用。
表现层（Servlet）接收Tomcat服务器的数据并内部调用进行响应。此过程经过内部的请求分发，过滤器过滤请求，重定向，响应数据等。
数据库设计
设计本系统所需的数据表：
User表格
字段拥有：id、username、password、authority。主键为id，自增长。意义分别为user对象的id序列号、用户名、密码、以及操作权限等级。分为无权限、仅商品可读、商品完全权限、以及超级权限。通过该表提供用户的登录功能，以及访问权限问题、过滤器Filter的拦截问题等。
Brand表格
字段拥有：id、brand_name、company_name、description、status、price、stock。主键为id，自增长。意义分别为商品的id序列号、品牌名称、企业名称、描述信息、商品状态、价格和库存。实现管理的主要功能，商品的增删改查。
Date表格
字段拥有：id、username、date。主键为id，自增长。意义为一次用户登录操作的用户名及登录时间。用于记录该系统被登录的时间和次数以及操作者。实现了一定的数据统计功能。
后端项目结构详解
由maven构建JavaWeb轻量级web应用，workspace中存在子目录src和maven配置文件pom.xml，在项目配置文件xml中记录项目所需的依赖项，以及标注安装部署的打包类型为war包。方便在Tomcat服务器上进行部署。
src项目结构
具体的项目结构为以下形式：
Src
- - - -main
- - - -java
- - - -mapper
<数据访问层，Java类对数据库的映射，记录操作方法>
- - - -pojo
<由数据库表格字段信息映射的java类>
- - - -service
<业务逻辑层，对mapper中的操作进行封装，可采用实现接口(impl)的方法实现逻辑>
- - - -util
<存放工具类，此处有负责生成sqlSessionFactory的工具类>
- - - -web
<表现层，接收和响应用户请求，还包括转发、重定向、过滤等、可通过数据访问的不同再细分为不同的软件包>
- - - -resources
- - - -mapper
<对操作方法映射到数据库操作语句的配置文件，记录包括java方法调用的SQL语句，以及返回的结果集等>
Mybatis-config.xml //mybatis框架的配置文件，主要用于数据库连接信息的配置
- - - -webapp
- - - -WEB-INF
web.xml
pom.xml配置文件
此系统所必须依赖有如下：
javax.servlet javax.servlet-api3.1.0 provided org.mybatis mybatis3.5.9 mysql mysql-connector-java8.0.28 javax.servlet jstl1.2 com.alibaba fastjson1.2.62
并标注项目打包方式为 war包
war
项目文件介绍
pojo包
该包存放了数据库表格中的记录 映射到java对象时的类。以user表格为例，其中存放的每条数据都有多个字段属性，因此在接收查询到的表格数据时，可用java对象来存放，一个对象存放一条记录，对象的每个成员变量存放表格的一条记录的一个字段。有多少条记录，便需要多少java对象储存，在创建了User类时，可接收表格user的查询结果，由于结果通常是多记录的，所以可以搭配List接口，对User进行泛化，List
mapper包
该包存放了表格的映射方法，以查询所有为例，将Select * from table 封装为一个java成员方法，方便调用和代码的维护。因此可以定义mapper接口，返回值为查询结果的映射，即上述List类型的对象。因此该语句的映射书写为
@Select("select * from tb_user")
List selectAll();
@Select()为注解，为方法标注参数。此处可以不使用注解，而是将所有的sql语句参数书写在resources目录下mapper映射文件中，该文件还可以记录结果对应关系，当java承接类的成员变量与数据库变量同名时，不用标注对应关系即可成功赋值，但如果两者不同名（多单词变量时，java采用驼峰命名法，数据库采用下划线_分割）,则可定义ResultMap 变量映射集，将不同名的，记录同一字段的变量进行对接。
以下代码书写在main/java/resrouces/mapper/BrandMapper.xml下
而mapper类中的成员方法的映射语句则直接使用@Select注解方式进行描述了。
Mapper中映射其他表格的操作方式与上述类似。
service包
业务逻辑层，在创建了mapper映射后，如果要进行DAO操作，还需创建sqlsessionfactory对象，再获取特定类的mapper对象，最后调用映射文件中的方法。这些步骤如果书写在表现层过于繁杂，因此在service中进行封装，由于遵守面向接口编程的原则，在这里分别定义每个表格操作服务的接口，然后定义impl实现类，可以在不改变接口的情况下改变操作方式，降低代码的耦合性。
以BrandService接口为例，其中记录了如下方法
public interface BrandService {
List selectAll();
void add(Brand brand);
void delete(int id);
List Query(Brand brand);
void modify(Brand brand);
}
以BrandServiceImpl实现类为例，其实现了Brandservice接口，并且调用util中的工具类创建sqlSessionFactory，再由其获取到具体类的mapper映射，调用映射方法。查询到的结果返回。
此处仅以selectALL方法的重构为例
public class BrandServiceImpl implements BrandService {
SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();
@Override
public List selectAll() {
SqlSession sqlSession = sqlSessionFactory.openSession();
BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
List brands = mapper.selectAll();
sqlSession.close();
return brands;
}
···
}
uilt包
生成sqlsessionfactory的工具类sqlsessionfactoryUtils,其采用了静态代码块防止多次调用生产的数据库多次连接，减少了不必要的资源损耗
public class SqlSessionFactoryUtils {
private static SqlSessionFactory sqlSessionFactory;
static {
//静态代码块会随着类的加载而自动执行，且只执行一次
try {
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
} catch (IOException e) {
e.printStackTrace();
}
}
public static SqlSessionFactory getSqlSessionFactory(){
return sqlSessionFactory;
}
}
web包
表现层，接收请求，处理请求，响应请求或转发，重定向请求。
以../web/brand/SelectALLServlet为例
@WebServlet("/brand/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
private BrandService brandService = new BrandServiceImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.print("Get !!!");
System.out.println("/brand/selectAllServlet");
List brands = brandService.selectAll();
String jsonString = JSON.toJSONString(brands);
resp.setContentType("text/json;charset=UTF-8");
resp.getWriter().write(jsonString);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.print("Post -> ");
this.doGet(req,resp);
}
}
该类通过基础HttpServlet的方式，对请求Get和请求Post进行监听
注解@WebServlet可以描述监听的路径范围。
当拿到Post请求时，直接内部推送给Get进行处理，doGet方法类书写收到请求的处理方法和响应方式，通过多态的方式，调用实现类impl中的方法，进行数据库操作，得到返回集。再向数据库响应结果，响应表格数据则可采用json Javascript对象标记法，将Java对象转换为json对象字符串，再调用resp进行发送。
界面实现
登录界面为简单的单页面效果，进入系统后，操作界面为左侧为导航条的模拟路由效果。
左侧导航条决定了主页面显示的内容。
登录界面的设计
页面简述
登录界面设计为简介的表单，背景以渐变色为主，中心显示登录框，两行text文本输入框用于用户名和密码的输入，一个登录按钮用于表单提交。
表单验证
登录时需要设计到表单验证相关操作，尽可能将用户的非法操作拦截在前端，通过客户端资源进行甄别，以减轻后端服务器的压力。表单验证可以将非法数据拦截在前端
对于用户名限制为长度在4到16个字符之间。对于密码限制为长度在6到18个字符之间。
若提交表单时满足条件限制，在发送给服务器由后端进行处理。当表单信息不合法时，在输入框下弹出消息提示。此操作可由原生JavaScript操作完成，但本项目采用Vue+element进行前端页面的逻辑书写，因此表单验证的逻辑代码如下，由Vue对象接收，date返回，关联到表单属性上。具体操作可参见element官方文档，此处仅作展示。
return {
form:{
username:"",
password:""
},
rules:{
username:[
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
],
password:[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
]
}
};
账户管理界面的设计
仅作展示，页面内不含数据；
页面简述
表格展现由异步请求发送给服务器接收到的数据，包含系统所注册在录的所有账户，用户名和密码信息。增设功能，通过用户名或密码进行精准查询，对单个用户进行数据修改或删除操作。以及表格分页功能。
用户权限修改
在另一子页面中添加了用户权限修改的功能，其拥有下拉框查询指定拥有指定权限的用户的功能。也有修改指定用户权限的功能。
商品管理界面的设计
页面简述
同为表格显示数据，添加批量删除操作，在表格的每一行前拥有多选框，对数据进行多选后发送数组对象至后台，由服务器进行同一删除操作。
新增对话框
添加操作可唤醒对话框，填写需要添加的记录的详细信息后，将表单发送至服务器，进行添加操作并返回操作成功与否。之后对页面进行刷新。
数据分析与统计
用户登录页面由表格记录并显示了每一次用户登录的记录，可以删除某条记录或批量删除多条记录。同时支持以用户名查询方式精准查询指定用户的登录记录。
关于页面记录了该项目的详细信息。
测试
服务器上线
部署
首先需要在服务器中配置数据库，创建项目同名的数据库，并创建该项目所需的所有表格，将所需要访问的表格desc补充完整，设置主键、主键自增长、各个字段的数据类型等。操作完毕后向user表格中添加一条记录，即默认管理账户root，设置权限等级为完全权限。在操作完所有表格后。对项目本身进行打包配置。
通过maven框架，将项目打包为war包发送至服务器tomacat路径下的web目录中，重启tomcat服务，服务器自动解析war包并解包为web页面，此时通过域名方法服务器下的该项目即可成功显示成果。
登录测试
通过域名在线访问到服务器下本项目。资源加载成功，filter正确过滤信息。输入正确的用户名密码后进入管理页面，对表格数据进行操作测试。
项目已实装至个人云端服务器，网站： Titlehttps://echowz.top/E-Commerce/
结论
本项目实现了简易的电商商品信息管理，同时增加了多账户，分权限的功能，以及用户登录记录的功能。可以在页面实现对数据的添加、批量删除、单个删除、对单个数据的修改、对数据的查询、分页查询。
参考资料
Vue.js (vuejs.org)
Element - 网站快速成型工具
tomcat.apache.org
MyBatis中文网
Maven – Welcome to Apache Maven
