简介
本项目采用WEB+Servlet+HTML+CSS+JS实现，模拟收银台实现基本的操作。

重要知识点
1、Java类集的使用
2、Servlet的使用
3、前端部分知识的简单运用。
4、数据库的表的设计，尤其是订单和订单项之间的设计
5、JDBC编程

核心需求
实现如下的操作：
1、上架商品
2、浏览商品
3、更新商品信息
4、购买商品
5、浏览订单

数据库设计
账户表（account）

商品表（goods）

订单表（order）

订单项表（order_item）

创建数据库代码：注意为了避免价格会出现小数，在存入数据库的同时，需要转化为整数
– 数据库
drop database if exists cash;
create database if not exists cash character set utf8;

– 使用数据库
use cash;

– 帐号
drop table if exists account;
create table if not exists account
(
id int primary key auto_increment comment ‘帐号编号’,
username varchar(12) not null comment ‘帐号’,
password varchar(128) not null comment ‘密码’
);
– 商品信息
drop table if exists goods;
create table if not exists goods
(
id int primary key auto_increment comment ‘商品编号’,
name varchar(128) not null comment ‘商品名称’,
introduce varchar(256) default ‘暂无’ not null comment ‘商品简介’,
stock int not null comment ‘商品库存’,
unit varchar(12) not null comment ‘库存单位’,
price int not null comment ‘商品价格，单位：分’,
discount int default 100 not null comment ‘商品折扣，[0,100]’
);

– 订单
drop table if exists order;
create table if not exists order
(
id varchar(32) primary key comment ‘订单编号’,
account_id int not null comment ‘帐号编号’,
account_name varchar(12) not null comment ‘帐号’,
create_time datetime not null comment ‘创建时间’,
finish_time datetime default null comment ‘完成时间’,
actual_amount int not null comment ‘实际金额，单位：分’,
total_money int not null comment ‘总金额，单位：分’,
order_status int not null comment ‘支付状态 1 待支付 2 完成’
);
– 订单项
drop table if exists order_item;
create table if not exists order_item
(
id int primary key auto_increment comment ‘订单条目编号’,
order_id varchar(32) not null comment ‘订单编号’,
goods_id int not null comment ‘商品编号’,
goods_name varchar(128) not null comment ‘商品名称’,
goods_introduce varchar(256) default ‘暂无’ not null comment ‘商品简介’,
goods_num int not null comment ‘商品数量’,
goods_unit varchar(12) not null comment ‘库存单位’,
goods_price int not null comment ‘商品价格，单位：分’,
goods_discount int default 100 not null comment ‘商品折扣，[0,100]’
);

功能展示
用户登陆

功能菜单展示

上架商品

浏览商品

更新商品信息

浏览订单

购买商品

项目整体框架

@WebServlet注解配置Servlet
Servlet配置有两种方式：
1、Servlet类上使用@WebServlet注解进行配置
2、web.xml文件中配置

客户端和服务器通信方式-Servlet
Servlet 是服务器端程序，主要用来交互式地浏览和修改数据，生成动态web内容。web服务器接收到客户端的Servlet 请求后，如果检查到已经装载并创建了该Servlet的实例对象，则会创建一个用于封装HTTP请求消息的HttpServletRequest 对象和一个代表Http响应消息的 HttpServletResponse 对象，然后调用Servlet的service()方法，将请求和响应对象作为参数传递进去，这样客户端通过 HttpServletRequest 对象将请求发送给服务器，服务器通过 HttpServletResponse 对象将响应传递给客户端，达到通信的目的。

项目目录结构

服务器与客户端的交互
get方法一般用于请求服务器数据，post方法一般用于客户端发送数据给服务器
1、登录、注册

2、商品上架

3、商品浏览

js和ajax代码：

$( function() {
    
$.ajax({
    
url: "goods",
type:"get",
dataType: "json",
success: function(data){
    
console.log(data.length);
console.log(data);
var s = "";
for (var i = 0; i < data.length; i++) {
    
s += "<tr >";
s += "<td id = \"infoTr\">" + data[i].id + "</td>";
s += "<td>" + data[i].name + "</td>";
s += "<td>" + data[i]["introduce"] + "</td>";
s += "<td>" + data[i].stock + "</td>";
s += "<td>" + data[i].unit + "</td>";
s += "<td>" + data[i].price + "</td>";
s += "<td>" + data[i].discount + "</td>";
s+="<td class=\"delete\"><button οnclick=\"deleteInfo('"+ data[i].id + "
')\" ><i class=\"icon-trash bigger-120\"></i>下架</button></td>";
s += "</tr>";
} c
onsole.log(s);
$("#tbRecord>tbody").html(s);
},
});
});

4、商品下架

下架商品的ajax代码

function deleteInfo(obj) {
    
console.log(obj);
if (obj != null) {
    
$.ajax({
    
url:"delGoods",
//async: true,
type: "post",
//设置需要请求的参数类型
data: {
    "id": obj},
success: function (data) {
    
alert("删除成功！");
// 删除成功后刷新页面
window.location.reload();
},
error: function () {
    
alert("请求失败");
},
dataType: "text"
});
}
}

5、更新商品信息
更新商品信息与上架商品类型，都是从页面提交表单，通过servlet，更新数据库信息。注意：此时更新商品的时
候，页面输入的数字是元为单位
逻辑：提交表单之后，需要先通过id进行查询该商品是否存在，存在更新数据库，不存在更新失败。

6、购买商品



7、浏览订单
浏览订单与浏览商品类似，也是通过ajax向服务器发送请求，服务器返回一个 json 字符串，客户端进行解析,将信
息插入到HTML页面上。
浏览订单主要是通过当前的用户id进行查询，当前ID对应的所有订单。

$(function() {
    
$.ajax({
    
url: "orderbrowse",
type:"get",
dataType: "json",
success: function(data){
    
console.log(data);
var s = "";
for (var i = 0; i < data.length; i++) {
    
s += "<tr >";
s += "<td>";//默认无序列表
s += "<li > 【订单号】:" + data[i].id+"</li>";
s += "<li > 【订单状态】:" + data[i].order_status+"</li>";
s += "<li > 【订单创建时间】:" + data[i].create_time+"</li>";
s += "<li > 【订单完成时间】:" + data[i].finish_time+"</li>";
s += "</td>";
s += "<td>";
s += "<ol>";
for (var j = 0; j < data[i].orderItemList.length; j++) {
    
s += "<li>" + data[i].orderItemList[j].goodsName +" "+
data[i].orderItemList[j].goodsNum
+ data[i].orderItemList[j].goodsUnit+" "+
data[i].orderItemList[j].goodsPrice * data[i].orderItemList[j].goodsNum+"元</li>";
} s
+= "</ol>";
s += "</td>";
s += "<td>";
s += "<li > 【总金额】:" + data[i].total_money+"元</li>";
s += "<li> 【优惠金额】：" + data[i].discount+"元</li>";
比特科技s += "<li> 【应支付金额】：" + data[i].actual_amount+"元</li>";
s += "<td>";
s += "</td>";
s += "</tr>";
} c
onsole.log(s);
$("#tbRecord>tbody").html(s);
}
});
});

项目总结
优点：界面简洁，使用简单。
扩展：可以增加购物车功能，界面更美观一些。

项目源码：https://github.com/fantasyer/CashDemo