文章目录
前言
该项目后端使用Servlet + MyBatis + MySQL,前端使用Vue + ElementUI + axios,这框架远没有SpringBoot的方便好用,但是可以作为基础学习,了解其原理也有很大的收获。
1 使用步骤
1.1 创建数据库表
1.1.1 tb_uer(用户表)
-- auto-generated definition
create table tb_user
(
account int not null,
id int auto_increment,
username varchar(20) null,
password varchar(32) null,
constraint tb_user_id_uindex
unique (id),
constraint username
unique (username)
);
alter table tb_user
add primary key (id);
1.1.2 tb_product(商品表)
-- auto-generated definition
create table tb_product
(
type int not null,
id int auto_increment comment '商品id',
number varchar(8) null comment '编号',
trade_name varchar(20) null comment '商品名',
date datetime null comment '生产日期',
quality varchar(4) null comment '保质期',
stock double null comment '库存',
unit varchar(8) null comment '单位',
constraint tb_product_id_uindex
unique (id),
constraint tb_product_number_uindex
unique (number)
);
1.1.3 tb_type(商品类表)
-- auto-generated definition
create table tb_type
(
id int auto_increment,
typename varchar(10) not null,
`dec` int not null,
constraint tb_type_id_uindex
unique (id)
);
alter table tb_type
add primary key (id);
1.2 连接数据库
找到文件mian/src/resources/mybatis-config.xml,在标注地方更改上自己的东西即可。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<typeAliases>
<package name="com.deodeo.pojo"/>
</typeAliases>
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<!--数据库驱动-->
<property name="driver" value="com.mysql.jdbc.Driver"/>
<!--数据库url-->
<property name="url" value="jdbc:mysql:///itrui?useSSL=false"/>
<!--数据库用户账号和密码-->
<property name="username" value="root"/>
<property name="password" value="123456"/>
</dataSource>
</environment>
</environments>
<mappers>
<!--扫描mapper-->
<package name="com.deodeo.mapper"/>
</mappers>
</configuration>
1.3 Tomcat
Tomcat安装和使用在这里不在赘述,网上有很多资料可供读者查阅。
1.4 项目结构
①在mapper中书写sql语句操作数据库;
②实体类,一个数据库表对应一个实体类,类中的属性对应表中的列;
③service调用mapper层接口,这里面向接口编程,当功能有改变的时候不会更改太多地方;
④工具类,这里用来创建SqlSessionFactory 工厂对象,方便service获取SqlSession对象;
⑤相当于业务层,处理从Vue前端接收到的数据。
⑥mapper配置文件,用来书写比较复杂的sql语句,当数据库中列名与实体类中的属性不一致是,定义数据库表的列映射实体类的属性。
⑦导入项目依赖,如mysql驱动等
2 项目展示
2.1 启动项目
右键项目,选择Run Maven,再点击Tomcat7:run
启动成功如下图,http://localhost:8080/brand-case/+你的HTML文件名(带后缀)就可以访问到页面。
2.2 管理员登录
点击中间登录按钮进行管理员登录。
点击后输入账号密码,若密码或者账号有误,系统会进行提示。
若登录成功则进入商品列表界面。
2.3 管理员注册界面
点击注册按钮可以进入到管理员注册界面。
输入信息后点击提交,返回登录界面进行登录。
2.4 商品列表界面
商品列表(主页面)如下所示,管理员可以点击按钮进行增加、删除、查找、修改操作。
2.5 查找全部商品
进入页面之初系统自动查找全部的商品。
2.6 模糊查找商品
在搜索框输入单个字即可搜索到商品名中带有输入字的商品,如下图所示输入“糖”,商品列表中出现商品名中有“糖”字的商品。
2.7 修改商品
点击修改按钮后,弹出商品属性窗口,修改商品中的属性后点提交即可修改成功。
修改成功!
2.8 增加商品
点击新增按钮,在弹出的窗口中输入商品属性,如图所示,点击提交后商品新增成功。
新增成功!
2.9 删除单个商品
点击删除按钮即可删除商品。
2.10 批量删除商品
点击多选框,选择多个商品,点击批量删除按钮,弹出对话框咨询是否继续删除,点击确认后即可成功删除商品。
弹出对话框。
成功删除商品。
总结
在做这个项目的时候时间比较赶,还有许多地方可以完善升级,例如:注册时可以添加验证码功能防止后端数据库“裂开”,在查找商品的时候可以多设置几个查找条件实现更加精确的查找,在商品的信息列表中显示商品的照片让商品信息更加完善等等。
GitHub源码链接