JavaWeb.22.MVC购物车第一部分-CFANZ编程社区

数据库讲解、业务结构的搭建、登录功能的实现、首页数据的显示、购物车的添加

数据库的创建

create table car_user
(
    id       number primary key,
    account  varchar2(30) not null,
    password varchar(32)  not null
);

comment on column car_user.ID is '用户编号';
comment on column car_user.account is '用户账户';
comment on column car_user.password is '用户密码(MD5)';

create table car_goods
(
    id       number primary key,
    name     varchar2(20)                        not null,
    describe varchar2(100) default '此商品暂时没有介绍🤣' not null,
    price    number                              not null
);

comment on column car_goods.ID is '商品编号';
comment on column car_goods.name is '商品名称';
comment on column car_goods.describe is '商品描述';
comment on column car_goods.price is '用户价格';

create table car_order
(
    id      number primary key,
    user_id number not null,
    total   number not null
);

comment on column car_order.ID is '订单编号';
comment on column car_order.user_id is '谁的订单!';
comment on column car_order.total is '订单总价';

create table car_order_item
(
    id       number primary key,
    order_id number not null,
    goods_id number not null,
    quantity number not null,
    total    number not null
);

comment on column car_order_item.ID is '订单项编号';
comment on column car_order_item.order_id is '哪个订单!';
comment on column car_order_item.goods_id is '哪个商品!';
comment on column car_order_item.quantity is '下单数量';
comment on column car_order_item.total is '订单项总价';

comment on table car_user is '购物车用户表';
comment on table car_goods is '购物车商品表';
comment on table car_order is '购物车订单表';
comment on table car_order_item is '购物车订单项表';

create unique index car_user_account_idx on car_user (account);

insert into car_user
values (1, '2890@fox.com', 'ff9830c42660c1dd1942844f8069b74a');-- root123

insert into car_user
values (2, '2357@fox.com', 'e10adc3949ba59abbe56e057f20f883e');-- 123456

insert into car_goods
select 1, '丝袜奶茶', '冰冰娘娘,很好喝', 99
from dual
union
select 2, '勃勃奶茶', '啊~,好冰冰', 29
from dual
union
select 3, '蜜雪大补丁', '可以加个桃桃🍑', 59
from dual
union
select 4, '臭🐟咖啡', '人气最高', 88
from dual
union
select 5, '雪王咖啡', 'incredible taste', 999
from dual
union
select 6, '拉稀弹筒', '👌,就亿点点', 1
from dual;

insert into car_order_item
values (1, 1, 1, 2, 99 * 2);
insert into car_order_item
values (2, 1, 2, 3, 29 * 3);
insert into car_order_item
values (3, 1, 6, 100, 100);

insert into car_order
values (1, 1, 99 * 2 + 29 * 3 + 100);

insert into car_order_item
values (4, 2, 3, 2, 59 * 2);
insert into car_order_item
values (5, 2, 4, 3, 88 * 3);
insert into car_order_item
values (6, 2, 5, 100, 999 * 100);

insert into car_order
values (2, 2, 59 * 2 + 88 * 3 + 999 * 100);

select *
from car_user;
select *
from car_order;
select *
from car_order_item;
select *
from car_goods;

界面的显示

业务逻辑的搭建例User：

package com.zking.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

/**
 * 用户实体类
 * @author Janet
 *
 * @date 2022年4月25日 下午3:51:53
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
@Accessors(chain=true)
public class User {

	private Integer id;
	private String account;
	private String password;
	
	
	
}

package com.zking.dao;
/**
 * 数据库访问层
 * @author Janet
 *
 * @date 2022年4月25日 下午3:58:19
 */

import com.zking.pojo.User;

public interface IUserDao {

	User login(User user);
	
	
	
}

package com.zking.biz;

import com.zking.pojo.User;

public interface IUserBiz {

	User login(User user);
	
	
}

登录界面


<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="bootstrap-3.3.7-dist\js\bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>登录界面</title>
<style>
form {
	width: 500px;
	margin:auto;
}
</style>
</head>
<body>
	<form action="login.do" method="post">
		<h1>登录</h1>
		<div class="form-group">
			<input name="account" class="form-control" placeholder="用户名">
		</div>
		<div class="form-group">
			<input name="password" class="form-control" placeholder="密码">
		</div>
		<div class="form-group">
			<button class="btn btn-primary btn-block">登录</button>
		</div>
	</form>

</body></html>



<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="bootstrap-3.3.7-dist\js\bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
	padding: 20px 40px;
}
</style>
</head>
<body>
	<h1>
		您好, <small>这是首页</small>
	</h1>
	<h1>
		<button class="btn btn-primary" onclick="location.href=&#39;myCar.jsp&#39;">点我去购物车🛒</button>
	</h1>
	<table class="table table-bordered table-striped">
		<tbody><tr>
			<th>商品编号</th>
			<th>商品名称</th>
			<th>商品价格</th>
			<th>商品操作</th>
		</tr>
		
		<tr>
			<td>5</td>
			<td>阿西吧</td>
			<td>100.0</td>
			<td><button onclick="location.href=&#39;add.do?gid=5&#39;" class="btn btn-default">加入🚗</button></td>
		</tr>
		
		<tr>
			<td>4</td>
			<td>咕噜咕噜泡泡水</td>
			<td>40.0</td>
			<td><button onclick="location.href=&#39;add.do?gid=4&#39;" class="btn btn-default">加入🚗</button></td>
		</tr>
		
		<tr>
			<td>3</td>
			<td>安眠药</td>
			<td>35.0</td>
			<td><button onclick="location.href=&#39;add.do?gid=3&#39;" class="btn btn-default">加入🚗</button></td>
		</tr>
		
		<tr>
			<td>2</td>
			<td>可乐水</td>
			<td>5.0</td>
			<td><button onclick="location.href=&#39;add.do?gid=2&#39;" class="btn btn-default">加入🚗</button></td>
		</tr>
		
		<tr>
			<td>1</td>
			<td>死肥猪</td>
			<td>1.0</td>
			<td><button onclick="location.href=&#39;add.do?gid=1&#39;" class="btn btn-default">加入🚗</button></td>
		</tr>
		
		<tr>
			<td>6</td>
			<td>摩西摩西</td>
			<td>200.0</td>
			<td><button onclick="location.href=&#39;add.do?gid=6&#39;" class="btn btn-default">加入🚗</button></td>
		</tr>
		
	</tbody></table>

</body></html>

首页数据的显示

购物车的添加


<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="bootstrap-3.3.7-dist\js\bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>我的订单</title>
</head>
<body>
	
	<div class="container">
		
		<h1>
		您好, <small>这是订单界面</small>
	</h1>
	<h1>
		<button onclick="" class="btn btn-default">继续购买</button>
		<button onclick="" class="btn btn-default">返回购物车</button>
	</h1>
	<table class="table table-bordered table-striped">
		<tbody><tr>
			<th>订单编号</th>
			<th>订单总价</th>
			<th>订单操作</th>
		</tr>
		
			<tr>
				<td>1</td>
				<td>320.0</td>
				<td><button onclick="" class="btn btn-default">查看详情</button></td>
			</tr>
		
	</tbody></table>

	</div>

</body></html>