1.项目用到了哪些技术
前端：
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]'
);
2、业务逻辑
整体框架：
客户端（html页面）通过tomact服务器连接到服务端，服务端接收对应servlet的请求，拿到请求之后，处理sevlert的请求，通过请求内容操作数据库，拿到数据后，通过返回一个json数据，来告诉前端操作成功或者失败。
而整个前端和后端的交互是通过Ajax，前端发送一个Ajax请求到Tomcat服务器，对应的servlet接收到这个请求，处理这个请求，然后数据库进行一个增删查改的操作，然后返回增删改查后的一个结果，成功或者失败，返回一个json数据到前端，前端根据后端结果的不同，给出相应的展示
1、注册：
客户端通过post方法向服务器提交一个请求，服务器对应的servlet接收到请求之后，操作mysql，用户名，密码插入到mysql中，如果插入成功，mysql返回给服务器添加成功的响应，服务器会通过sendRedirect直接转到登录界面
2、登录:
跳转到login.html，输入用户名和密码，客户端向服务器提交一个登录的请求，服务端收到请求去mysql查询，是不是有这个用户，密码是否无误，如果查询成功，服务器跳转到index.html，前端页面跳转到主界面，表明登录成功，如果没有查询到或用户名密码错误，前端页面会给出相应的错误
3、商品上架：
登录成功之后，点击商品上架，进入商品上架界面，输入需要上架商品的基本信息，点击提交，向服务端发起一个post请求，服务器操作mysql，进行插入操作，插入成功，跳转到指定的页面。
4、商品游览
前端(goodsbrowse.html)发起get请求，请求服务器从mysql当中查询到所有商品信息，将后端服务器查询到的数据转化成一个json（一个字符串），将json字符串发送到前端页面，前端进行解析json里面的数据，然后把数据提取出来，存放在前端浏览商品界面
5、商品更新
更新商品信息与上架商品类似，都是从页面提交表单，通过servlet，更新数据库信息。注意：此时更新商品的时候，页面输入的数字是元为单位
逻辑：提交表单之后，需要先通过id进行查询该商品是否存在，存在更新数据库，不存在更新失败。
6、商品下架
进入到商品浏览页面，通过下架按钮，获取当前商品的id，通过ajax发送给后端，服务器收到相应的servlet请求，去mysql查询到相应的商品id，对数据库进行该商品的删除操作，删除成功后，返回给前端页面，通过ajax加载页面，显示商品已经删除成功
7、购买商品
前端（支付页面）输入购买的id和数量，以1-2这样的方式表达，提交表单信息到服务器，服务器中对应的servlet收到相应的订单项数据，分别将订单中的数据写入mysql中的订单表和订单项表。购买成功， 服务器返回给前端页面，显示购买成功。
8、浏览订单
客服端进入浏览订单页面，通过ajax向后端发送一个get请求，服务器相应的servlet收到请求后，去mysql查询，查询成功之后，将查询的数据写入list当中，转换成json字符串，发送到前端页面，前端页面收到字符串，通过ajax，整理到页面上
9、得到的部分效果图
10、项目结构
11、项目的搭建
- 在IDEA中，点击 File -> New -> Module，选择Maven -> Next。
- 在GroupId和ArtifactId中分别输入组织名和项目名，注意上面的两项Add as module to和Parent都设置为none。完成以后Next。
- 设置项目名和本地保存路径，完成后点击Finish
- idea 安装 lombok插件 https://blog.csdn.net/wochunyang/article/details/81736354
12、配置数据库
（1）从idea的database面板打开数据库驱动配置。
（2）配置数据库驱动
（3）打开数据库连接配置
（4）配置数据库连接
13、在弹出的pom.xml文件中的配置
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.bit</groupId>
<artifactId>CashDemo</artifactId>
<version>1.0-SNAPSHOT</version>
<!-- 打包方式是 war 包，一种用于 web 应用的包，原理类似 jar 包 -->
<packaging>war</packaging>
<!-- 指定属性信息 -->
<properties>
<encoding>UTF-8</encoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
</properties>
<dependencies>
<!-- 加入 servlet 依赖 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<!-- servlet 版本和 tomcat 版本有对应关系，切记 -->
<version>3.1.0</version>
<!-- 这个意思是我们只在开发阶段需要这个依赖，部署到 tomcat 上时就不需要了 -->
<scope>provided</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.11</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.6</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.9</version>
</dependency>
</dependencies>
<build>
<!-- 指定最终 war 包的名称 -->
<finalName>hello-bit-idea</finalName>
<!-- 明确指定一些插件的版本，以免受到 maven 版本的影响 -->
<pluginManagement>
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.6.1</version>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
14、项目的web.xml生成
15、部分代码展示
<!--商品浏览前端页面展示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet"/>
<link rel="stylesheet" href="css/Site.css"/>
<link rel="stylesheet" href="css/zy.all.css"/>
<link rel="stylesheet" href="css/amazeui.min.css"/>
<!--<script src = "https://code.jquery.com/jquery-3.3.1.min.js"> </script>-->
<script src = "js/jquery-1.7.2.min.js"> </script>
<!--js代码 要被执行 需要导入上面的库-->
<script>
//进入此页面 该函数立即执行
</script>
</head>
<body>
<div class="dvcontent">
<div>
<!--tab start-->
<div class="tabs" style="height: 800px; overflow:scroll">
<div class="hd">
<ul>
<li class="on" style="box-sizing: initial;-webkit-box-sizing: initial;">浏览商品</li>
</ul>
</div>
<div class="bd">
<ul style="display: block;padding: 20px;">
<li>
<!--分页显示角色信息 start-->
<div id="dv1">
<!-- 规定元素的类名（classname） 规定元素的唯一 id-->
<table class="table" id="tbRecord">
<thead><!--<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。-->
<tr><!--tr 元素包含一个或多个 th 或 td 元素。-->
<th>编号</th><!--表头单元格 - 包含表头信息-->
<th>商品名称</th>
<th>商品介绍</th>
<th>上架数量</th>
<th>商品单位</th>
<th>商品价格(元)</th>
<th>商品折扣</th>
<th>下架商品</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--分页显示角色信息 end-->
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
//商品浏览
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<Goods> 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);
}
}
}
<!--订单浏览前端页面展示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet"/>
<!--<link rel="stylesheet" href="css/Site.css"/>-->
<link rel="stylesheet" href="css/zy.all.css"/>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/amazeui.min.css"/>
<link rel="stylesheet" href="css/admin.css"/>
<script src = "https://code.jquery.com/jquery-3.3.1.min.js"> </script>
<script>
</script>
</head>
<body>
<div class="dvcontent">
<div>
<!--tab start-->
<div class="tabs" style="height: 800px; overflow:scroll">
<div class="hd">
<ul>
<li class="on" style="box-sizing: initial;-webkit-box-sizing: initial;">浏览订单</li>
</ul>
</div>
<div class="bd">
<ul style="display: block;padding: 20px;">
<li>
<!--分页显示角色信息 start-->
<div id="dv1">
<!-- 规定元素的类名（classname） 规定元素的唯一 id-->
<table class="table" id="tbRecord">
<thead><!--<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。-->
<tr><!--tr 元素包含一个或多个 th 或 td 元素。-->
<th>订单信息</th>
<th>订单明细</th>
<th>订单金额</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--分页显示角色信息 end-->
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
//订单浏览代码
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<Order> orders = queryOrderByAccount(account.getId());
System.out.println("订单明细："+orders);
if(orders == null || orders.isEmpty()) {
System.out.println("你还没有产生订单！"+account.getId());
writer.write("<h2> 你还没有产生订单！"+account.getId()+"</h2>");
}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<Order> queryOrderByAccount(Integer accountId) {
Connection connection = null;
PreparedStatement preparedStatement = null;
ResultSet resultSet = null;
List<Order> 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")));
}
}
转载：https://blog.csdn.net/zxjkl123/article/details/116463084
查看评论