前端:
HTML(超文本编辑,定义网页的内容)
CSS(对HTML进行一个美化,规定网页的布局)
JS(对网页的行为进行一个编程)
AJAX
□ 不刷新页面更新网页
□ 在页面加载后从服务器请求数据
□ 在页面加载后从服务器接收数据
□ 在后台向服务器发送数据
后端:
Java类集的使用
Servlet的使用
数据库:
数据库的表的设计,尤其是订单和订单项之间的设计
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]'
);
整体框架:
客户端(html页面)通过tomact服务器连接到服务端,服务端接收对应servlet的请求,拿到请求之后,处理sevlert的请求,通过请求内容操作数据库,拿到数据后,通过返回一个json数据,来告诉前端操作成功或者失败。
而整个前端和后端的交互是通过Ajax,前端发送一个Ajax请求到Tomcat服务器,对应的servlet接收到这个请求,处理这个请求,然后数据库进行一个增删查改的操作,然后返回增删改查后的一个结果,成功或者失败,返回一个json数据到前端,前端根据后端结果的不同,给出相应的展示
客户端通过post方法向服务器提交一个请求,服务器对应的servlet接收到请求之后,操作mysql,用户名,密码插入到mysql中,如果插入成功,mysql返回给服务器添加成功的响应,服务器会通过sendRedirect直接转到登录界面
跳转到login.html,输入用户名和密码,客户端向服务器提交一个登录的请求,服务端收到请求去mysql查询,是不是有这个用户,密码是否无误,如果查询成功,服务器跳转到index.html,前端页面跳转到主界面,表明登录成功,如果没有查询到或用户名密码错误,前端页面会给出相应的错误
登录成功之后,点击商品上架,进入商品上架界面,输入需要上架商品的基本信息,点击提交,向服务端发起一个post请求,服务器操作mysql,进行插入操作,插入成功,跳转到指定的页面。
前端(goodsbrowse.html)发起get请求,请求服务器从mysql当中查询到所有商品信息,将后端服务器查询到的数据转化成一个json(一个字符串),将json字符串发送到前端页面,前端进行解析json里面的数据,然后把数据提取出来,存放在前端浏览商品界面
更新商品信息与上架商品类似,都是从页面提交表单,通过servlet,更新数据库信息。注意:此时更新商品的时候,页面输入的数字是元为单位
逻辑:提交表单之后,需要先通过id进行查询该商品是否存在,存在更新数据库,不存在更新失败。
进入到商品浏览页面,通过下架按钮,获取当前商品的id,通过ajax发送给后端,服务器收到相应的servlet请求,去mysql查询到相应的商品id,对数据库进行该商品的删除操作,删除成功后,返回给前端页面,通过ajax加载页面,显示商品已经删除成功
前端(支付页面)输入购买的id和数量,以1-2这样的方式表达,提交表单信息到服务器,服务器中对应的servlet收到相应的订单项数据,分别将订单中的数据写入mysql中的订单表和订单项表。购买成功, 服务器返回给前端页面,显示购买成功。
客服端进入浏览订单页面,通过ajax向后端发送一个get请求,服务器相应的servlet收到请求后,去mysql查询,查询成功之后,将查询的数据写入list当中,转换成json字符串,发送到前端页面,前端页面收到字符串,通过ajax,整理到页面上
(1)从idea的database面板打开数据库驱动配置。
(2)配置数据库驱动
(3)打开数据库连接配置
(4)配置数据库连接
4.0.0
com.bit
CashDemo
1.0-SNAPSHOT
war
UTF-8
1.8
1.8
javax.servlet
javax.servlet-api
3.1.0
provided
mysql
mysql-connector-java
5.1.47
commons-codec
commons-codec
1.11
org.projectlombok
lombok
1.18.6
com.fasterxml.jackson.core
jackson-databind
2.8.9
hello-bit-idea
maven-clean-plugin
3.1.0
maven-resources-plugin
3.0.2
maven-compiler-plugin
3.8.0
maven-surefire-plugin
2.22.1
maven-war-plugin
3.2.2
maven-install-plugin
2.5.2
maven-deploy-plugin
2.8.2
org.apache.maven.plugins
maven-compiler-plugin
3.6.1
- 浏览商品
-
编号
商品名称
商品介绍
上架数量
商品单位
商品价格(元)
商品折扣
下架商品
//商品浏览
package servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import entity.Goods;
import util.DBUtil;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.Writer;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/goods")
public class GoodsBrowseServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html; charset=utf-8");
//1、先从数据库当中 找到所有的商品信息
Connection connection = null;
PreparedStatement ps = null;
ResultSet rs = null;
List goodsList = new ArrayList<>();
try {
String sql = "select id,name,introduce,stock,unit,price,discount from goods";
connection = DBUtil.getConnection(true);
ps = connection.prepareStatement(sql);
rs = ps.executeQuery();
while (rs.next()) {
Goods goods = new Goods();
goods.setId(rs.getInt("id"));
goods.setName(rs.getString("name"));
goods.setIntroduce(rs.getString("introduce"));
goods.setStock(rs.getInt("stock"));
goods.setUnit(rs.getString("unit"));
goods.setPrice(rs.getInt("price"));
goods.setDiscount(rs.getInt("discount"));
goodsList.add(goods);
}
System.out.println("商品列表:");
System.out.println(goodsList);
//将后端的数据 转换为json字符串
ObjectMapper objectMapper = new ObjectMapper();
Writer writer = resp.getWriter();
//将list转换为json字符串,并将该字符串写到流当中
objectMapper.writeValue(writer,goodsList);
//推到前端
writer.write(writer.toString());
}catch (SQLException e) {
e.printStackTrace();
}finally {
DBUtil.close(connection,ps,rs);
}
}
}
- 浏览订单
-
订单信息
订单明细
订单金额
//订单浏览代码
package servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import commen.OrderStatus;
import entity.Account;
import entity.Order;
import entity.OrderItem;
import util.DBUtil;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.Writer;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/orderbrowse")
public class OrderBrowseServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("application/json; charset=utf-8");
Writer writer = resp.getWriter();
HttpSession session=req.getSession();
Account account = (Account) session.getAttribute("user");
List orders = queryOrderByAccount(account.getId());
System.out.println("订单明细:"+orders);
if(orders == null || orders.isEmpty()) {
System.out.println("你还没有产生订单!"+account.getId());
writer.write(" 你还没有产生订单!"+account.getId()+"
");
}else {
System.out.println("===========fsafasfafaf===================");
//将后端的数据 转换为json字符串
ObjectMapper objectMapper = new ObjectMapper();
try {
//将list转换为json字符串,并将该字符串写到流当中
objectMapper.writeValue(writer,orders);
System.out.println("json字符串:"+writer.toString());
//推到前端
writer.write(writer.toString());
}catch (Exception e) {
e.printStackTrace();
}
/* //将后端的数据 转换为json字符串
ObjectMapper objectMapper = new ObjectMapper();
//将list转换为json字符串,并将该字符串写到流当中
objectMapper.writeValue(writer,orders);
//推到前端
writer.write(writer.toString());*/
}
}
public List queryOrderByAccount(Integer accountId) {
Connection connection = null;
PreparedStatement preparedStatement = null;
ResultSet resultSet = null;
List orderList = new ArrayList<>();
try {
String sql = "select o1.id as order_id,\n" +
" o1.account_id as account_id,\n" +
" o1.create_time as create_time,\n" +
" o1.finish_time as finish_time,\n" +
" o1.actual_amount as actual_amount,\n" +
" o1.total_money as total_money,\n" +
" o1.order_status as order_status,\n" +
" o1.account_name as account_name,\n" +
" o2.id as item_id,\n" +
" o2.goods_id as goods_id,\n" +
" o2.goods_name as goods_name,\n" +
" o2.goods_introduce as goods_introduce,\n" +
" o2.goods_num as goods_num,\n" +
" o2.goods_unit as goods_unit,\n" +
" o2.goods_price as goods_price,\n" +
" o2.goods_discount as goods_discount\n" +
"from `order` as o1\n" +
" left join order_item as o2 on\n" +
" o1.id = o2.order_id\n" +
"where o1.account_id = ? order by order_id;";
connection = DBUtil.getConnection(true);
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setInt(1,accountId);
resultSet = preparedStatement.executeQuery();
Order order = null;
//组织订单内容
while (resultSet.next()) {
if(order == null) {
order = new Order();
extractOrder(order,resultSet);
orderList.add(order);
}
String orderId = resultSet.getString("order_id");
if(!orderId.equals(order.getId())) {
order = new Order();
extractOrder(order,resultSet);
orderList.add(order);
}
OrderItem orderItem = extractOrderItem(resultSet);
order.getOrderItemList().add(orderItem);
}
}catch (SQLException e) {
e.printStackTrace();
}finally {
DBUtil.close(connection,preparedStatement,resultSet);
}
return orderList;
}
public OrderItem extractOrderItem(ResultSet resultSet) throws SQLException {
OrderItem orderItem = new OrderItem();
orderItem.setId(resultSet.getInt("item_id"));
orderItem.setGoodsId(resultSet.getInt("goods_id"));
orderItem.setGoodsName(resultSet.getString("goods_name"));
orderItem.setGoodsIntroduce(resultSet.getString("goods_introduce"));
orderItem.setGoodsNum(resultSet.getInt("goods_num"));
orderItem.setGoodsUnit(resultSet.getString("goods_unit"));
orderItem.setGoodsPrice(resultSet.getInt("goods_price"));
orderItem.setGoodsDiscount(resultSet.getInt("goods_discount"));
return orderItem;
}
public void extractOrder(Order order,ResultSet resultSet) throws SQLException{
order.setId(resultSet.getString("order_id"));
order.setAccount_id(resultSet.getInt("account_id"));
order.setAccount_name(resultSet.getString("account_name"));
order.setCreate_time(resultSet.getString("create_time"));
order.setFinish_time(resultSet.getString("finish_time"));
order.setActual_amount(resultSet.getInt("actual_amount"));
order.setTotal_money(resultSet.getInt("total_money"));
order.setOrder_status(OrderStatus.valueOf(resultSet.getInt("order_status")));
}
}