订单管理系统从入门到入土
-
下载Maven，Nodejs
-
创建一个数据库sql_end，创建四个数据库表，并确保用户名为root用户密码为123456
-
再IDEA中加载Springboot依赖（可以直接新建一个任意名称的文件夹，项目导入spring的框架），启动spring项目
-
打开index.html
-
输入用户名和密码，点击注册，再点击登录
-
点击个人中心，点击修改用户信息，修改自己的余额
-
点击逛店铺，选择一个商城点击进入按钮
-
选择一个商品点击订单按钮
-
点击个人订单，查看订单信息
-
返回index.html
-
用户名和密码都输入admin
-
点击订单管理，选择刚刚下单的订单，点击未完成，点击确定
数据库
建立了用户表，订单表，商铺表，商品表
用户表user
username：用户名 char(20)
password：用户密码 char(20)
user_id：用户编号(int)（主键，非空，自动增加，与订单表的user_id建立外键约束）
usertel：用户电话 char(10)
address：用户地址 char(20)
money：用户余额
商品表shop
name:商铺名称（char）
shop_id：商铺编号(int)(主键，非空，自动增加，与订单表的shop_id建立外键约束）
price：价格（int）
inventory：库存(int)
store_id：商铺编号
订单表shoporder
order_id：商铺ID（int）
user_id：用户ID（int）
shop_id:订单ID （主键，非空，自动增加）
orderdate：订单日期(date)
status：订单状态 int （0表示未送达 1 表示已送达）
商铺表store
name：商铺名称 char(20)
address：商铺地址 char(20)
store_id：商铺编号 （int）（主键，非空，自动增加）
store_tel：商铺电话 char(20)
接口
用户
http://localhost:8080
注册
/usersign
接收两个参数 username(String) password(String)
无返回值
登录
/userlog
接收两个参数 username(String) password(String)
返回值：(String) False / userid
更改信息
/changeuser
接受五个参数 username usertel address money userid
无返回值
用户信息
/user
无接受参数
返回值： String
商品
部分商品
/shop
接受一个参数： store_id
返回值： ArrayList String(shopping)
全部商品
/allshop
无接受参数
返回值：ArrayList String shop
点店铺###已废弃
/shopupdate
接收两个参数： String userid shopid
返回值：String order
用下面那个
买商品
/buyshop
接收两个参数： String userid shopid
返回值：String order
本接口基本等同于点店铺
增加库存
/shopaddinventory
接收一个参数： name(商品名称)
返回值： YES
增加商品
/shopadd
接收四个参数 name price inventory store（商铺id）
返回值：YES
订单
展示订单#
/order
无接收参数
返回值： ArrList String Order
完成订单
/completeorder
接收一个参数： String orderid
返回值： String YES
用户订单
接收一个参数：userid
返回值：ArrayList String order
商铺
/store
无接受参数
范湖只：ArrayList String store
页面实现
登录界面
用户可以在用户名，密码输入框中输入数据，并点击登录按钮，前端通过axios框架将用户名和密码上传后端，后端连接数据库中用户表，将用户名和密码进行匹配，当查询到结果后，后端返回一个用户id，前端接收数据并跳转到对应的界面（请注意，前端页面会将用户id作为查询参数传给下一个界面），当查询不到结果，后端返回一个False，前端接收数据并通过alter进行提示，(请注意，当用户名为admin时会跳转到管理员界面，管理员界面不会传递用户id)
当用户点击注册按钮时，前端通过axios框架将用户名和密码上传后端，后端连接数据库中用户表，插入一条数据到用户表中
普通用户界面
逛店铺
在逛店铺界面中，当页面加载时(onload)，前端通过axios框架请求后端数据，后端连接数据查询店铺表，并将查询到的数据进行封装，再传回前端，前端接收数据并通过appebdChild对商铺进行渲染
用户可以选择商城，当用户点击商城中的+进入按钮后，前端通过axios框架将商城id上传后端，后端连接数据查询店铺表和商品表，将商品表中store_id和商城id进行连接查询，并将商品信息进行封装，将数据返回前端，前端接收数据并通过appebdChild对商铺进行渲染
并在商城中的商品列表中购买物品，点击订单按钮，会弹出config确认框，点击确认后会通过axios将用户id和商品id传递到后端，在后端，根据用户id，商品id查询用户余额商品价格，当用户余额大于商品价格时，会将数据库中的商品库存-1用户的余额减少商品的价格，并且在订单表中添加一组新的数据。
个人订单
在个人订单界面中，用户可以查看订单的状态，当页面加载时(onload)，前端通过axios将用户id传递到后端，后端将连接数据库，查询订单表并通过用户id进行信息过滤，仅传输和用户id相同的订单
再次查询订单表，通过用户id和订单表中的user_id对应，并调用商品表，将商品表中的信息通过Mao进行映射
最后将订单信息进行封装，前端接收数据，并通过appebdChild的方法对数据进行渲染
个人中心
在个人中心界面中，用户可以查询自己的信息，页面加载时(onload)，前端通过axios将用户id传递到后端，后端将连接数据库，查询用户表并通过用户id进行信息过滤，并将信息进行封装并返回给前端，前端通过appebdChild对数据进行渲染
当用户点击修改用户信息按钮时，会弹出一个模态框，用户可以输入全部/部分信息，当用户在输入框中输入信息，并点击提交按钮时，前端会收集输入框中的数据，没有填写的信息会通过用户原本的数据进行填充，并将数据上传后端，后端连接用户表，并通过用户id进行信息选择，并且将上传的数据进行更新
管理员界面
店铺管理
在店铺管理界面中，管理员可以点击添加店铺按钮，在弹出的模态框中，填写数据（请注意商品名称需要和商铺名称对应），当填写无误后点击提交按钮将数据通过axios方法上传到后端，后端连接数据库中的订单表，并将数据插入到订单表中。
| 商铺名称 | 商铺ID |
|---|---|
| 数码城 | 2 |
| 文具超市 | 3 |
| 零食商店 | 4 |
订单管理
在订单管理界面中，管理员可以点击订单状态中的未完成按钮，在弹出的config中点击是否确认，当点击确认后数据通过axios方法上传到后端，后端连接数据库中的订单表，并将订单的状态更新为1(其中0代表未送达1表示已送达)。
用户管理
在个人中心界面中，管理员可以查询所有用户的信息，页面加载时(onload)，前端通过axios将连接后端，后端将连接数据库，查询用户表，并将用户信息全部返回，前端接收数据，并通过appebdChild的方法对数据进行渲染
当用户点击修改用户信息按钮时，会弹出一个模态框，管理可以输入全部/部分信息（请注意，用户id项是必填项，且不能是没有出现过的用户），当管理员在输入框中输入信息，并点击提交按钮时，前端会收集输入框中的数据，没有填写的信息会通过用户原本的数据进行填充，并将数据上传后端，后端连接用户表，并通过用户id进行信息选择，并且将上传的数据进行更新
本次项目通过原生html+axios+springboot+mysql实现，本来最开始想用vue来整的，但是最开始没想能写这么多，而且vue也好久没写了，甚至springboot也是刚看几节课.......
上次传的C语言大作业好像也是这个题目来着，这次不用在局限在终端实现了（虽然自己这次做的也很菜.......）这次的项目做了整整两天，期间报了非常多的bug，也学到了很多东西，而且做的时候也感觉挺兴奋的
一些没有做的：功能单调，用户头像，权限控制，token，网络协议控制，一些基本的判断（商品库存不能为负等），git版本控制（最近突然连不上github了），页面应该用vue进行设计，点击按钮时，会弹出多次，（感觉和事件冒泡有点关系），有些问题可以解决，但是快期末了就先不考虑了那么多了
反省到的：一个人做确实好累，代码没有考虑封装，导致代码重复性非常的高，这也是我感觉到累的主要原因，前端页面做的好丑，springboot会的太少了，通过@RequestBody传递参数，并用Map<String,String>接收值的时候，如果参数只有一个那么会提示用不了Map（postman可以，后面单参数我传了个没用的参数防止报错），没用promise，感觉有点回调地狱了
学习到的，学习到了如何设置springboot的注解，学习到了如何使用postman等等。
项目结构
store
CREATE TABLE `store` (
`name` char(20) DEFAULT NULL,
`adddress` char(20) DEFAULT NULL,
`store_id` int NOT NULL AUTO_INCREMENT,
`store_tel` char(20) DEFAULT NULL,
PRIMARY KEY (`store_id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;shop
CREATE TABLE `shop` (
`name` char(20) DEFAULT NULL,
`shop_id` int NOT NULL AUTO_INCREMENT,
`price` int DEFAULT NULL,
`inventory` int DEFAULT NULL,
`store_id` int DEFAULT NULL,
`info` char(20) DEFAULT NULL,
PRIMARY KEY (`shop_id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;shoporder
CREATE TABLE `shoporder` (
`order_id` int NOT NULL AUTO_INCREMENT,
`user_id` int DEFAULT NULL,
`shop_id` int DEFAULT NULL,
`orderdate` date DEFAULT NULL,
`status` int DEFAULT NULL,
PRIMARY KEY (`order_id`),
KEY `fk_uid` (`user_id`),
KEY `fk_sid` (`shop_id`),
CONSTRAINT `fk_sid` FOREIGN KEY (`shop_id`) REFERENCES `shop` (`shop_id`),
CONSTRAINT `fk_uid` FOREIGN KEY (`user_id`) REFERENCES `user` (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=39 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;user
CREATE TABLE `user` (
`username` char(20) NOT NULL,
`password` char(20) NOT NULL,
`user_id` int NOT NULL AUTO_INCREMENT,
`usertel` char(10) DEFAULT NULL,
`address` char(20) DEFAULT NULL,
`money` int DEFAULT NULL,
PRIMARY KEY (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;userController :
package com.gouzi666.spring.demos.web;
import org.springframework.web.bind.annotation.*;
import java.sql.*;
import java.util.ArrayList;
import java.util.Map;
@RestController
public class userController {
@RequestMapping("/usersign")
@CrossOrigin
public String usersign(@RequestBody Map<String,String> user) throws SQLException {
System.out.println(user);
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end","root","123456");
PreparedStatement preparedStatement = connection.prepareStatement("insert into user values(?,?,null,?,?,0)");
preparedStatement.setString(1,user.get("username"));
preparedStatement.setString(2,user.get("password"));
preparedStatement.setString(3,user.get("tel"));
preparedStatement.setString(4,user.get("address"));
int i = preparedStatement.executeUpdate();
preparedStatement.close();
connection.close();
if (i>0) {
System.out.println("yes");
} else{
System.out.println("no");
}
return "YES";
}
@RequestMapping("/userlog")
@CrossOrigin
public String userlog(@RequestBody Map<String,String> user) throws SQLException {
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end","root","123456");
PreparedStatement preparedStatement = connection.prepareStatement("select * from user where username = ? and password = ?");
preparedStatement.setString(1,user.get("username"));
preparedStatement.setString(2,user.get("password"));
ResultSet resultSet = preparedStatement.executeQuery();
if (resultSet.next()){
int id = resultSet.getInt("user_id");
preparedStatement.close();
connection.close();
return String.valueOf(id);
}
else{
preparedStatement.close();
connection.close();
return "False";
}
}
@PostMapping("/changeuser")
@CrossOrigin
public void changeuser(@RequestBody Map<String,String> user) throws SQLException{
System.out.println(user);
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end","root","123456");
String sql = "update user set username = ? , usertel = ? , address = ? where user_id = ?";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1,user.get("username"));
preparedStatement.setString(2,user.get("usertel"));
preparedStatement.setString(3,user.get("address"));
String ud = user.get("userid");
int userid = Integer.parseInt(ud);
preparedStatement.setInt(4,userid);
int i = preparedStatement.executeUpdate();
if (i > 0){
System.out.println("YES");
} else{
System.out.println("NO");
}
preparedStatement.close();
connection.close();
}
@RequestMapping("/user")
@CrossOrigin
public String user() throws SQLException {
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end","root","123456");
PreparedStatement preparedStatement = connection.prepareStatement("select * from user");
ResultSet resultSet = preparedStatement.executeQuery();
ArrayList<User> users = new ArrayList<>();
while(resultSet.next()){
String username = resultSet.getString("username");
String address = resultSet.getString("address");
int userid = resultSet.getInt("user_id");
String usertel = resultSet.getString("usertel");
int monery = resultSet.getInt("money");
PreparedStatement preparedStatementnum = connection.prepareStatement("select count(*) as num from shoporder where user_id = ?");
preparedStatementnum.setInt(1,userid);
ResultSet resultSet1 = preparedStatementnum.executeQuery();
int num = 0;
if (resultSet1.next()){
num = resultSet1.getInt("num");
}
resultSet1.close();
preparedStatementnum.close();
User cur = new User(username,address,userid,usertel,num,monery);
users.add(cur);
}
return users.toString();
}
}
class User{
String username;
String password;
String address;
int userid;
String usertel;
int monery;
int num;
public User(String username, String address, int userid, String usertel, int num,int monery) {
this.username = username;
this.address = address;
this.userid = userid;
this.usertel = usertel;
this.num = num;
this.monery = monery;
}
@Override
public String toString() {
return "{" + "\"username\": \"" + username +"\""+ ','+"\"num\": \"" + num +"\""+ ',' +"\"monery\": \"" + monery +"\""+ ',' + "\"address\" :\"" + address + "\",\"userid\":\""
+ userid + "\",\"usertel\":\"" + usertel +"\"" +'}';
}
}
orderController :
package com.gouzi666.spring.demos.web;
//import com.sun.org.apache.xpath.internal.operations.Or;
//import com.sun.org.apache.xpath.internal.operations.Or;
import org.springframework.web.bind.annotation.*;
import java.sql.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
@RestController
public class orderController {
@RequestMapping("/order")
@CrossOrigin
public String order(@RequestBody @RequestParam Map<String,String> order) throws Exception {
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="select * from shoporder";
PreparedStatement preparedStatementorder = connection.prepareStatement(sql);
ResultSet resultSetorder = preparedStatementorder.executeQuery();
sql = "select * from shop";
PreparedStatement preparedStatementshop = connection.prepareStatement(sql);
ResultSet resultSetshop = preparedStatementshop.executeQuery();
sql = "select * from user";
PreparedStatement preparedStatementuser = connection.prepareStatement(sql);
ResultSet resultSetuser = preparedStatementuser.executeQuery();
Map<Integer,String> shop = new HashMap<>(),user = new HashMap<>();
while (resultSetshop.next()){
String name = resultSetshop.getString("name");
int id = resultSetshop.getInt("shop_id");
shop.put(id,name);
}
while (resultSetuser.next()){
String name = resultSetuser.getString("username");
int id = resultSetuser.getInt("user_id");
// System.out.println(name+"\t"+id);
user.put(id,name);
}
ArrayList<Order> orders = new ArrayList<>();
while (resultSetorder.next()){
int order_id = resultSetorder.getInt("order_id");
int user_id = resultSetorder.getInt("user_id");
int shop_id = resultSetorder.getInt("shop_id");
Date orderdate = resultSetorder.getDate("orderdate");
Order o = new Order(user.get(user_id),shop.get(shop_id),orderdate,resultSetorder.getInt("status"),resultSetorder.getInt("order_id"));
orders.add(o);
}
return orders.toString();
}
@PostMapping("/completeorder")
@CrossOrigin
public String completeorder(@RequestBody Map<String,String> order) throws SQLException {
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="update shoporder set status = 1 where order_id = ?";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
String shop_id = order.get("orderid");
int sd = Integer.parseInt(shop_id);
preparedStatement.setInt(1,sd);
int i = preparedStatement.executeUpdate();
// ResultSet resultSet = (ResultSet) i;
return "YES";
}
@PostMapping("/deleteorder")
@CrossOrigin
public String deleteorder(@RequestBody Map<String,String> order) throws SQLException {
System.out.println(order);
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="delete from shoporder where order_id = ?";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
String shop_id = order.get("orderid");
int sd = Integer.parseInt(shop_id);
preparedStatement.setInt(1,sd);
int i = preparedStatement.executeUpdate();
// ResultSet resultSet = (ResultSet) i;
return "YES";
}
@RequestMapping("/userorder")
@CrossOrigin
public String userorder(@RequestBody Map<String,String> order) throws SQLException {
System.out.println(order);
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="select * from shoporder where user_id = ?";
PreparedStatement preparedStatementuser = connection.prepareStatement(sql);
String ud = order.get("userid");
int userid = Integer.parseInt(ud);
preparedStatementuser.setInt(1,userid);
ResultSet resultSet = preparedStatementuser.executeQuery();//获取用户订单
sql = "select * from shop";
PreparedStatement preparedStatementshop = connection.prepareStatement(sql);
ResultSet resultSet1 = preparedStatementshop.executeQuery();
Map<Integer,String> shop = new HashMap<>();
while (resultSet1.next()){
shop.put(resultSet1.getInt("shop_id"),resultSet1.getString("name"));
}
ArrayList<Order> s = new ArrayList<>();
while (resultSet.next()){
Order o = new Order("二狗",shop.get(resultSet.getInt("shop_id")),resultSet.getDate("orderdate"),resultSet.getInt("status"),resultSet.getInt("order_id"));
s.add(o);
}
return s.toString();
}
public class Order{
String username;
String shopname;
Date date;
int status;
int orderid;
public Order(String username, String shopname, Date date,int status,int orderid) {
this.username = username;
this.shopname = shopname;
this.date = date;
this.status = status;
this.orderid = orderid;
}
@Override
public String toString() {
return "{" + "\"username\": \"" + username +"\""+ ','+"\"orderid\": \"" + orderid +"\""+ ','+"\"status\": \"" + status +"\""+ ',' + "\"shopname\" :\"" + shopname + "\",\"date\":\""
+ date + "\""+'}';
}
}
}
shopController :
package com.gouzi666.spring.demos.web;
import com.fasterxml.jackson.databind.util.JSONPObject;
import org.springframework.web.bind.annotation.*;
import java.sql.*;
import java.text.DateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.Map;
@RestController
public class shopController {
class shopping{
private String name;
private int shop_id;
private int price;
private int inventory;
private String info;
@Override
public String toString() {
return "{" + "\"name\": \"" + name +"\""+ ','+"\"info\": \"" + info +"\""+ ',' + "\"shop_id\" :\"" + shop_id + "\",\"price\":\""
+ price + "\",\"inventory\":\"" + inventory +"\"" +'}';
}
public shopping(String name, int shop_id, int price, int inventory,String info) {
this.name = name;
this.shop_id = shop_id;
this.price = price;
this.inventory = inventory;
this.info = info;
}
}
//JSON
@PostMapping ("/shop")
@CrossOrigin
public String shop(@RequestBody String store) throws SQLException {
System.out.println(store);
int storeid=0;
int flag = 0;
for (int i = 0;i<store.length();i++){
if (store.charAt(i)==':'){
flag = 1;
continue;
}
if (flag>=1&&store.charAt(i)=='\"'){
flag++;
continue;
}
if (flag==3){
break;
}
if (flag>=1){
storeid = storeid * 10 + (store.charAt(i)-'0');
}
}
System.out.println(storeid);
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="select * from shop where store_id = ?";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
// String sp = shop.get("storeid");
// int storeid = Integer.parseInt(store.get("storeid"));
preparedStatement.setInt(1,storeid);
ResultSet resultSet = preparedStatement.executeQuery();
// JSON
ArrayList<shopping> arr = new ArrayList<>();
while (resultSet.next()){
String name = resultSet.getString("name");
int id = resultSet.getInt("shop_id");
int price = resultSet.getInt("price");
int inventory = resultSet.getInt("inventory");
String info = resultSet.getString("info");
shopping s = new shopping(name,id,price,inventory,info);
arr.add(s);
}
resultSet.close();
preparedStatement.close();
connection.close();
System.out.println(arr.toString());
return arr.toString();
// return "STRING";
}
@PostMapping("/changeshop")
@CrossOrigin
public String changeshop(@RequestBody Map<String,String> shop) throws SQLException {
System.out.println(shop);
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="update shop set name = ? , price = ? , inventory = ? , info = ? where shop_id = ?";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1,shop.get("name"));
int price = Integer.parseInt(shop.get("price"));
preparedStatement.setInt(2,price);
int inventory = Integer.parseInt(shop.get("inventory"));
preparedStatement.setInt(3,inventory);
preparedStatement.setString(4,shop.get("info"));
int shopid = Integer.parseInt(shop.get("shopid"));
System.out.println(shopid);
preparedStatement.setInt(5,shopid);
int i = preparedStatement.executeUpdate();
if (i>1){
return "YES\n";
}
else{
return "NO\n";
}
/*
* `name` char(20) DEFAULT NULL,
`shop_id` int NOT NULL AUTO_INCREMENT,
`price` int DEFAULT NULL,
`inventory` int DEFAULT NULL,
`store_id` int DEFAULT NULL,
`info` char(20) DEFAULT NULL,*/
}
@RequestMapping ("/allshop")
@CrossOrigin
public String allshop() throws SQLException {
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="select * from shop";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
ResultSet resultSet = preparedStatement.executeQuery();
ArrayList<shopping> arr = new ArrayList<>();
while (resultSet.next()){
String name = resultSet.getString("name");
int id = resultSet.getInt("shop_id");
int price = resultSet.getInt("price");
int inventory = resultSet.getInt("inventory");
String info = resultSet.getString("info");
shopping s = new shopping(name,id,price,inventory,info);
arr.add(s);
}
resultSet.close();
preparedStatement.close();
connection.close();
System.out.println(arr.toString());
return arr.toString();
// return "STRING";
}
// @RequestMapping("/shopupdate")
// @CrossOrigin
// public String shopupdate(@RequestBody @RequestParam Map<String,String> shop) throws SQLException {
// System.out.println(shop);
// Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
// String sql="update shop set inventory = inventory - 1 where shop_id = ?";
// PreparedStatement preparedStatement = connection.prepareStatement(sql);
// String s = shop.get("shopid");
// int shopid = Integer.parseInt(s);
// preparedStatement.setInt(1,shopid);
// int resultSet = preparedStatement.executeUpdate();
// preparedStatement.close();
//
//
connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
// sql="insert into shoporder values(null,?,?,?)";
// PreparedStatement preparedStatementorder = connection.prepareStatement(sql);
// String ud = shop.get("userid");
// int userid = Integer.parseInt(ud);
// java.util.Date utildate = new java.util.Date();
// java.sql.Date sqldate = new java.sql.Date(utildate.getTime());
// preparedStatementorder.setInt(1,userid);
// preparedStatementorder.setInt((2),shopid);
// preparedStatementorder.setDate((3),sqldate);
//
// preparedStatementorder.executeUpdate();
//
// preparedStatementorder.close();
// connection.close();
// return "Hello";
// }
@RequestMapping("/buyshop")
@CrossOrigin
public String buyshop (@RequestBody Map<String,String> shop) throws SQLException{
System.out.println(shop);
String ud = shop.get("userid"),sd = shop.get("shopid");
int umoney = usermoney(Integer.parseInt(ud)),smoney = shopmoney(Integer.parseInt(sd));
if (umoney<smoney){
return "False";
}
descusermonery(Integer.parseInt(ud),smoney);
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="insert into shoporder values (null,?,?,?,0)";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
int orderId = Integer.parseInt(shop.get("userid"));
int userId = Integer.parseInt(shop.get("shopid"));
java.util.Date utildate = new java.util.Date();
java.sql.Date sqldate = new java.sql.Date(utildate.getTime());
preparedStatement.setInt(1,orderId);
preparedStatement.setInt(2,userId);
preparedStatement.setDate(3, sqldate);
int i = preparedStatement.executeUpdate();
preparedStatement.close();
sql = "update shop set inventory = inventory - 1 where shop_id = ?";
PreparedStatement preparedStatement1 = connection.prepareStatement(sql);
preparedStatement1.setInt(1,userId);
int i1 = preparedStatement1.executeUpdate();
preparedStatement1.close();
connection.close();
// preparedStatement = connection.prepareStatement(sql);
// preparedStatement.setInt(1,userId);
// preparedStatement.executeUpdate();
// preparedStatement.close();
// connection.close();
// }
return "YES";
}
@PostMapping("/shopaddinventory")
@CrossOrigin
public String shopaddinventory(@RequestBody Map<String,String> shop) throws SQLException{
System.out.println(shop);
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="update shop set inventory = inventory + 1 where name = ?";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1,shop.get("name"));
int i = preparedStatement.executeUpdate();
preparedStatement.close();
connection.close();
return "YES";
}
@PostMapping("/shopadd")
@CrossOrigin
public String shopadd(@RequestBody Map<String,String> shop) throws SQLException {
System.out.println(shop);
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="insert into shop values(?,null,?,?,?,?)";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1,shop.get("name"));
int price = Integer.parseInt(shop.get("price"));
int inventory = Integer.parseInt(shop.get("inventory"));
int storeid = Integer.parseInt(shop.get("store"));
String info = shop.get("info");
preparedStatement.setInt(2,price);
preparedStatement.setInt(3,inventory);
preparedStatement.setInt(4,storeid);
preparedStatement.setString(5,info);
int i = preparedStatement.executeUpdate();
return "YES";
}
public int usermoney(int userid) throws SQLException {
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="select * from user where user_id = ?";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
preparedStatement.setInt(1,userid);
ResultSet resultSet = preparedStatement.executeQuery();
int cur = 0;
while(resultSet.next()){
cur = resultSet.getInt("money");
}
preparedStatement.close();
connection.close();
return cur;
}
public void descusermonery(int userid,int money) throws SQLException {
System.out.println(userid+"\t"+money);
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="update user set money = money - ? where user_id = ?";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
preparedStatement.setInt(1,money);
preparedStatement.setInt(2,userid);
int i = preparedStatement.executeUpdate();
// int rel = i;
preparedStatement.close();
connection.close();
}
public int shopmoney(int shopid) throws SQLException {
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="select * from shop where shop_id = ?";
PreparedStatement preparedStatement = connection.prepareStatement(sql);
preparedStatement.setInt(1,shopid);
ResultSet resultSet = preparedStatement.executeQuery();
int cur = 0;
while(resultSet.next()){
cur = resultSet.getInt("price");
}
return cur;
}
}
stroeController
package com.gouzi666.spring.demos.web;
import org.springframework.web.bind.annotation.*;
import java.sql.*;
import java.util.ArrayList;
import java.util.Map;
@RestController
@CrossOrigin
public class stroeController {
@RequestMapping("/store")
public String store() throws SQLException {
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="select * from store";
PreparedStatement preparedStatementorder = connection.prepareStatement(sql);
ResultSet resultSet = preparedStatementorder.executeQuery();
ArrayList<Stroe> s = new ArrayList<>();
while(resultSet.next()){
String name = resultSet.getString("name");
String address = resultSet.getString("adddress");
String tel = resultSet.getString("store_tel");
int store_id = resultSet.getInt("store_id");
Stroe cur = new Stroe(name,address,tel,store_id);
s.add(cur);
}
return s.toString();
}
@PostMapping("/addstore")
public String addstore(@RequestBody Map<String,String> store) throws SQLException {
Connection connection = DriverManager.getConnection("jdbc:mysql:///sql_end", "root", "123456");
String sql="insert into store values(?,?,null, ?)";
// name address store_tel
PreparedStatement preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1,store.get("name"));
preparedStatement.setString(2,store.get("address"));
preparedStatement.setString(3,store.get("store_tel"));
int i = preparedStatement.executeUpdate();
preparedStatement.close();
connection.close();
return "YES";
}
}
class Stroe{
public String name;
public String address;
public String tel;
public int store_id;
public Stroe(String name, String address, String tel,int id) {
this.name = name;
this.address = address;
this.tel = tel;
this.store_id = id;
}
@Override
public String toString() {
return "{" + "\"name\": \"" + name +"\""+ ',' + "\"address\" :\"" + address + "\",\"tel\":\""
+ tel + "\",\"store_id\":\"" + store_id +"\"" +'}';
// return "{" + "\"name\": \"" + name +"\""+ ',' + "\"address\" :\"" + address + "\",\"tel\":\""
// + tel + "\""+'}';
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="ccloud">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<title>用户登录</title>
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bd {
border: 1px transparent solid;
width: 400px;
height: 400px;
margin: 100px auto;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 10px 10px 150px black;
text-align: center;
}
.bd .bd-it {
margin-top: 40px;
/* margin: 0 auto; */
width: 400px;
height: 200px;
/* background-color: red; */
}
.bd .bd-it button {
padding: 10px 50px 10px 50px;
margin-right: 20px;
background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
border: transparent;
font-weight: 700;
font-size: 16px;
cursor: pointer;
}
.bd .bd-it input {
border: 0;
width: 60%;
font-size: 15px;
color: black;
font-weight: 700;
background: transparent;
border-bottom: 2px solid purple;
padding: 5px 10px;
outline: none;
margin-top: 10px;
}
.bd .bd-it input:focus {
/* cursor: none; */
border-bottom: skyblue 3px solid;
}
button {
box-shadow: -6px 6px 8px inset rgba(255, 255, 255, 0.6),
6px -6px 8px inset rgba(0, 0, 0, 0.2);
}
button:active {
box-shadow: -6px 6px 8px inset rgba(0, 0, 0, 0.2),
6px -6px 8px inset rgba(255, 255, 255, 0.6);
}
.container {
margin-top: 10px;
margin-bottom: 10px;
/* border-radius: 50px; */
}
.toggleModal {
padding: 10px 50px 10px 50px;
color: white;
background: #409EFF;
border: none;
box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.2);
/* position: absolute; */
/* left: 50%; */
/* top: 50%; */
/* transform: translate(-50%, -50%); */
}
.mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 100;
display: none;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
transform: translate(-50%, -50%);
border-radius: 5px;
background: #fff;
box-shadow: 2px 3px 100px black;
z-index: 120;
display: none;
}
.modal .modal-header {
height: 50px;
border-bottom: 1px solid #f5f5f5;
padding: 0 15px;
}
.modal .modal-header p {
line-height: 50px;
display: inline-block;
}
.modal .modal-header .title {
font-size: 18px;
color: #333;
}
.modal .modal-header .close {
float: right;
font-size: 26px;
margin-top: -2px;
color: #9C9FA4;
cursor: default;
}
.modal .modal-content {
min-height: 100px;
}
.modal-content input {
padding: 10px 20px 10px 20px;
}
.modal .modal-footer .btn {
padding: 0 20px;
height: 36px;
line-height: 36px;
color: white;
background: #409EFF;
border: none;
}
.modal .modal-footer {
border-top: 1px solid #f5f5f5;
padding: 15px;
text-align: right;
}
.container::after {
content: "";
/* opacity: 0; */
display: block;
clear: both;
}
</style>
</head>
<body style="background-image: linear-gradient(to right, #999999, #330867);">
<div class="bdb">
<div class="bd">
<h2 style="margin-top: 20px; color: rgba(255,255,255,0.8);">订单管理系统</h2>
<div class="bd-it">
<input placeholder="请输入用户名">
<br>
<br>
<input placeholder="请输入用户密码">
<br><br>
<div style=" margin-top: 40px;">
<button class="toggleModal" id="login" style="margin-bottom: 20px;">登录</button>
<div class="container">
<div style="text-align: center;">
<button class="toggleModal sign" id="toggleModal">注册</button>
</div>
<div class="modal">
<div class="modal-header">
<p class="title" id="addstore" style="font-weight: 700;">用户注册</p>
<p class="close">×</p>
</div>
<div class="modal-content" style="text-align: center;">
<input placeholder="请输入用户名称" class="it">
<br><br>
<input placeholder="请输入用户密码" class="it">
<br><br>
<input placeholder="请再次输入密码" class="it">
<br><br>
<input placeholder="请输入用户电话" class="it">
<br><br>
<input placeholder="请输入用户地址" class="it">
<br><br>
</div>
<div class="modal-footer">
<button class="close btn" id="sub">提交</button>
</div>
</div>
<div class="mask"></div>
</div>
</div>
</div>
</div>
</div>
<script>
window.onload = function () {
let user;
axios({
method: "get",
url: "http://localhost:8080/user"
}).then((req) => {
user = req.data;
console.log(user)
})
// 获取需要使用到的元素
var toggleModal = document.getElementById("toggleModal");
var container = document.getElementsByClassName("container")[0];
var mask = document.getElementsByClassName("mask")[0];
var modal = document.getElementsByClassName("modal")[0];
var closes = document.getElementsByClassName("close");
toggleModal.onclick = show;
closes[0].onclick = close;
closes[1].onclick = close;
function stop(e) {
e.preventDefault();
}
function show() {
mask.style.display = "block";
modal.style.display = "block";
document.addEventListener("mousewheel", stop, { passive: false })
}
function close() {
mask.style.display = "none";
modal.style.display = "none";
document.removeEventListener("mousewheel", stop, { passive: false })
}
const sub = document.querySelector("#sub")
sub.addEventListener("click", () => {
const it = document.querySelectorAll(".it")
for (let i = 0; i < it.length; i++) {
if (it[i].value == "") {
alert("请完整输入！")
return;
}
}
if (it[1].value != it[2].value) {
alert("密码不一致请重试")
return;
}
console.log(user)
for (let i = 0; i < user.length; i++) {
if (it[0].value == user[i].username) {
alert("当前用户名已重复，请重试")
return;
}
}
axios.post(
"http://localhost:8080/usersign",
{
username: it[0].value,
password: it[1].value,
tel: it[3].value,
address: it[4].value
}
).then((req) => {
alert("已完成注册！")
})
})
}
const login = document.querySelector("#login")
login.addEventListener("click", () => {
const it = document.querySelectorAll("input")
axios.post(
"http://localhost:8080/userlog",
{
username: it[0].value,
password: it[1].value
}
).then((req) => {
console.log(req)
if (req.data == "False") {
alert("当前用户没有注册或密码错误")
} else {
alert("登录成功")
if (it[0].value == "admin") {
location.href = `http://127.0.0.1:5500/web/admin.html`;
}
else {
location.href = `http://127.0.0.1:5500/web/main.html?userid=${req.data}`;
}
}
})
})
</script>
</body>
</html>main.index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户界面</title>
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: white;
}
.hd {
height: 60px;
background-color: #333;
line-height: 60px;
color: rgba(255, 255, 255, 0.6);
text-indent: 2em;
}
.hd>:hover {
color: rgba(255, 255, 255, 0.8);
}
.bd-l {
/* position: fixed; */
height: 100%;
width: 30%;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.bd-l ul li:hover {
background-color: purple;
}
.bd-l ul li {
text-align: center;
padding: 20px;
font-size: 20px;
color: white;
}
.bd {
display: flex;
}
.bd-r {
/* display: flex; */
height: 1000px;
width: 100%;
}
.bd-r h1 {
text-align: center;
}
.user_shop {
width: 70%;
margin: auto;
}
.user_shop li {
/* border: 1px solid black; */
display: flex;
justify-content: space-between;
margin-top: 0px;
}
.user_shop li div {
border: 1px solid black;
/* padding: 10px 65px 10px 70px; */
width: 25%;
text-align: center;
height: 60px;
line-height: 60px;
color: cadetblue;
font-weight: 700;
}
.user_shop li div button {
border: transparent;
padding: 10px 20px 10px 20px;
background-color: skyblue;
color: white;
font-weight: 700;
cursor: pointer;
}
button {
box-shadow: -6px 6px 8px inset rgba(255, 255, 255, 0.6),
6px -6px 8px inset rgba(0, 0, 0, 0.2);
}
button:active {
box-shadow: -6px 6px 8px inset rgba(0, 0, 0, 0.2),
6px -6px 8px inset rgba(255, 255, 255, 0.6);
}
.msg {
width: 300px;
height: 30px;
background-color: aquamarine;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 0 auto;
line-height: 30px;
text-align: center;
font-weight: 700;
animation: key 3s ease;
position: absolute;
box-shadow: 1px 1px 50px aquamarine;
}
.msg-err {
width: 300px;
height: 30px;
background-color: red;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 0 auto;
line-height: 30px;
text-align: center;
font-weight: 700;
animation: key 3s ease;
position: absolute;
box-shadow: 1px 1px 50px red;
}
@keyframes key {
0% {
transform: translateY(100px);
opacity: 0;
display: block;
}
40% {
opacity: 1;
transform: translateY(50px);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
</style>
</head>
<body>
<div class="hd" style="display: flex; justify-content: space-between;">
<h1 class="tt">
山东原神大学 订单管理系统
</h1>
<div style="cursor: pointer;margin-right:20px">
<a href="./index.html">退出系统</a>
</div>
</div>
<div class="bd">
<div class="bd-l">
<ul>
<li style="color:yellow" id="ss">逛店铺</li>
<li style="cursor: pointer;" id="dd">个人订单</li>
<li id="zz">个人中心</li>
</ul>
</div>
<div class="bd-r">
<!-- <div style="width: 30%;"></div> -->
<h1>欢迎下单</h1>
<ul class="user_shop">
<li>
<div>商城名称 </div>
<div>商城地址</div>
<div>商城联系方式</div>
<div>操作</div>
</li>
</ul>
</div>
</div>
<script>
const url = window.location.href
console.log(url);
const ul = document.querySelector(".user_shop");
let userid = "";
for (let i = 43; i < url.length; i++) {
// console.log(url[i]);
userid = userid + parseInt(url[i]);
}
console.log(userid)
const dd = document.querySelector("#dd")
const ss = document.querySelector("#ss")
const zz = document.querySelector("#zz")
dd.addEventListener("click", () => {
location.href = `http://127.0.0.1:5500/web/user-order.html?userid=${userid}`;
})
ss.addEventListener("click", () => {
location.href = `http://127.0.0.1:5500/web/main.html?userid=${userid}`;
})
zz.addEventListener("click", () => {
location.href = `http://127.0.0.1:5500/web/user.html?userid=${userid}`;
})
// console.log(userid);
let btn
window.onload = () => {
axios({
method: 'GET',
url: "http://localhost:8080/store",
}).then((req) => {
console.log(req.data);
let cnt = 0
for (let i = 0; i < req.data.length; i++) {
let li = document.createElement('li')
li.innerHTML = `
<div>${req.data[i].name}</div>
<div>${req.data[i].address}</div>
<div>${req.data[i].tel}</div>
<div><button id="${req.data[i].store_id}">+进入</button></div>
`
ul.appendChild(li)
btn = document.querySelectorAll("button");
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
// console.log(btn[i])
const storeid = btn[i].id;
let div = document.createElement("div")
div.innerHTML = `√ 已进入商城`
div.className = "msg"
const bd = document.body;
bd.appendChild(div)
setTimeout(() => {
div.remove()
}, 2000)
axios({
url: "http://localhost:8080/shop",
method: "post",
data: {
storeid
},
headers: {
"Content-Type": 'application/x-www-from-urlencoded'
}
}).then((reqq) => {
// console.log(reqq);
ul.innerHTML = `<li>
<div>商品名称</div>
<div>商品单价</div>
<div>库存</div>
<div>商品信息</div>
<div>操作</div>
</li>`;
for (let j = 0; j < reqq.data.length; j++) {
let lli = document.createElement("li");
lli.innerHTML = `
<div>${reqq.data[j].name}</div>
<div>${reqq.data[j].price}</div>
<div>${reqq.data[j].inventory}</div>
<div>${reqq.data[j].info}</div>
<div><button id="${reqq.data[j].shop_id}">+订单</button></div>
`
ul.appendChild(lli)
}
console.log("????");
const shopbtn = document.querySelectorAll("button");
console.log(shopbtn)
for (let i = 0; i < shopbtn.length; i++) {
shopbtn[i].addEventListener("click", () => {
console.log(shopbtn[i])
axios({
method: "post",
url: "http://localhost:8080/buyshop",
data: {
userid,
shopid: shopbtn[i].id
},
headers: {
"Content-Type": 'application/json'
}
}).then((buyreq) => {
// console.log(req);
if (buyreq.data == "False") {
let div = document.createElement("div")
div.innerHTML = `当前余额不足`
div.className = "msg-err"
const bd = document.body;
bd.appendChild(div)
setTimeout(() => {
div.remove()
}, 2000)
} else {
let div = document.createElement("div")
div.innerHTML = `√ 已完成购买！`
div.className = "msg"
const bd = document.body;
bd.appendChild(div)
setTimeout(() => {
div.remove()
}, 2000)
// alert("购买成功")
}
})
})
}
})
})
}
}
})
}
function buyshop() {
}
</script>
</body>
</html>user-order.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人订单</title>
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
color: white;
}
.hd {
height: 60px;
background-color: #333;
line-height: 60px;
color: rgba(255, 255, 255, 0.6);
text-indent: 2em;
}
.hd>:hover {
color: rgba(255, 255, 255, 0.8);
}
.bd-l {
/* position: fixed; */
height: 100%;
width: 30%;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.bd-l ul li:hover {
background-color: purple;
}
.bd-l ul li {
text-align: center;
padding: 20px;
font-size: 20px;
color: white;
}
.bd {
display: flex;
}
.bd-r {
/* display: flex; */
height: 1000px;
width: 100%;
}
.bd-r h1 {
text-align: center;
}
.user_shop {
width: 70%;
margin: auto;
}
.user_shop li {
/* border: 1px solid black; */
display: flex;
justify-content: space-between;
margin-top: 0px;
}
.user_shop li div {
border: 1px solid black;
/* padding: 10px 65px 10px 70px; */
width: 33%;
text-align: center;
height: 60px;
line-height: 60px;
color: cadetblue;
font-weight: 700;
}
/* .user_shop li div button {
border: transparent;
padding: 10px 20px 10px 20px;
background-color: skyblue;
color: white;
font-weight: 700;
cursor: pointer;
margin-right: 5px;
} */
.addshop {
background-color: green;
border: transparent;
padding: 10px 20px 10px 20px;
color: white;
cursor: pointer;
}
button {
box-shadow: -6px 6px 8px inset rgba(255, 255, 255, 0.6),
6px -6px 8px inset rgba(0, 0, 0, 0.2);
}
button:active {
box-shadow: -6px 6px 8px inset rgba(0, 0, 0, 0.2),
6px -6px 8px inset rgba(255, 255, 255, 0.6);
}
.completed {
border: transparent;
padding: 10px 20px 10px 20px;
font-weight: 700;
margin-right: 5px;
background-color: green;
padding: 10px 20px 10px 20px;
color: white;
}
.uncompleted {
border: transparent;
cursor: pointer;
padding: 10px 20px 10px 20px;
font-weight: 700;
margin-right: 5px;
background-color: red;
padding: 10px 20px 10px 20px;
color: white;
}
.msg-err {
width: 300px;
height: 30px;
background-color: red;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 0 auto;
line-height: 30px;
text-align: center;
font-weight: 700;
animation: key 3s ease;
position: absolute;
box-shadow: 1px 1px 50px red;
}
.msg {
width: 300px;
height: 30px;
background-color: aquamarine;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 0 auto;
line-height: 30px;
text-align: center;
font-weight: 700;
animation: key 3s ease;
position: absolute;
box-shadow: 1px 1px 50px aquamarine;
}
@keyframes key {
0% {
transform: translateY(100px);
opacity: 0;
display: block;
}
40% {
opacity: 1;
transform: translateY(50px);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
</style>
</head>
<body>
<div class="hd" style="display: flex; justify-content: space-between;">
<h1 class="tt">
山东原神大学 订单管理系统
</h1>
<div style="cursor: pointer;margin-right:20px">
<a href="./index.html">退出系统</a>
</div>
</div>
<div class="bd">
<div class="bd-l">
<ul>
<li id="dd">逛店铺</li>
<li style="color:yellow">个人订单</li>
<li id="zz">个人中心</li>
</ul>
</div>
<div class="bd-r">
<!-- <div style="width: 30%;"></div> -->
<h1>店铺管理</h1>
<!-- <div style="text-align: center;margin-top: 10px;margin-bottom: 10px;">
<button class="addshop">添加店铺</button>
</div> -->
<ul class="user_shop">
<li>
<div style="width: 34%;">商品名称</div>
<!-- <div>商品单价</div> -->
<div>下单日期</div>
<div>物流状态</div>
</li>
</ul>
</div>
</div>
<script>
const url = window.location.href
console.log(url);
// const ul = document.querySelector(".user_shop");
let userid = "";
for (let i = 49; i < url.length; i++) {
// console.log(url[i]);
userid = userid + parseInt(url[i]);
}
console.log(userid)
const dd = document.querySelector("#dd")
dd.addEventListener("click", () => {
location.href = `http://127.0.0.1:5500/web/main.html?userid=${userid}`;
})
const zz = document.querySelector("#zz")
zz.addEventListener("click", () => {
location.href = `http://127.0.0.1:5500/web/user.html?userid=${userid}`;
})
const ul = document.querySelector(".user_shop");
axios({
method: 'POST',
url: "http://localhost:8080/userorder",
data: {
userid: userid
}
}).then((req) => {
console.log(req.data);
let cnt = 0
for (let i = 0; i < req.data.length; i++) {
let li = document.createElement('li')
li.innerHTML = `
<div style="width:34%">${req.data[i].shopname
}</div>
<div>${req.data[i].date}</div>
`
if (req.data[i].status == 1)
li.innerHTML += `<div><button class="completed" id = "${req.data[i].orderid}">已送达</button></div>`
else
li.innerHTML += `<div><button class="uncompleted" id = "${req.data[i].orderid}">未送达</button></div>`
ul.appendChild(li)
btn = document.querySelectorAll("button");
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", () => {
if (btn[i].className == "uncompleted") {
let div = document.createElement("div")
div.innerHTML = `当前商品未送达，请稍等`
div.className = "msg-err"
const bd = document.body;
bd.appendChild(div)
setTimeout(() => {
div.remove()
}, 2000)
return;
} else {
// if (!confirm("确认删除订单？")) {
// retunrn;
// }
let div = document.createElement("div")
div.innerHTML = `√ 已删除该订单!`
div.className = "msg"
const bd = document.body;
bd.appendChild(div)
setTimeout(() => {
div.remove()
}, 2000)
axios({
method: "post",
url: "http://localhost:8080/deleteorder",
data: {
orderid: btn[i].id,
xx: "xxx"
},
headers: {
"Content-Type": 'application/json'
}
})
}
})
}
}
})
</script>
</body>
</html>admin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户界面</title>
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: white;
text-decoration: none;
}
.hd {
height: 60px;
background-color: #333;
line-height: 60px;
color: rgba(255, 255, 255, 0.6);
text-indent: 2em;
}
.hd>:hover {
color: rgba(255, 255, 255, 0.8);
}
.bd-l {
/* position: fixed; */
height: 100%;
width: 30%;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.bd-l ul li:hover {
background-color: purple;
}
.bd-l ul li {
text-align: center;
padding: 20px;
font-size: 20px;
color: white;
}
.bd {
display: flex;
}
.bd-r {
/* display: flex; */
height: 1000px;
width: 100%;
}
.bd-r h1 {
text-align: center;
}
.user_shop {
width: 70%;
margin: auto;
}
.user_shop li {
/* border: 1px solid black; */
display: flex;
justify-content: space-between;
margin-top: 0px;
}
.user_shop li div {
border: 1px solid black;
/* padding: 10px 65px 10px 70px; */
width: 25%;
text-align: center;
height: 60px;
line-height: 60px;
color: cadetblue;
font-weight: 700;
}
.user_shop li div button {
border: transparent;
padding: 10px 20px 10px 20px;
background-color: skyblue;
color: white;
font-weight: 700;
cursor: pointer;
margin-right: 5px;
}
.addshop {
background-color: green;
border: transparent;
padding: 10px 20px 10px 20px;
color: white;
cursor: pointer;
}
.container {
margin-top: 10px;
margin-bottom: 10px;
}
.toggleModal {
padding: 10px 20px;
color: white;
background: #409EFF;
border: none;
box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.2);
/* position: absolute; */
/* left: 50%; */
/* top: 50%; */
/* transform: translate(-50%, -50%); */
}
.mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 100;
display: none;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
transform: translate(-50%, -50%);
border-radius: 5px;
background: #fff;
box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.2);
z-index: 120;
display: none;
}
.modal .modal-header {
height: 50px;
border-bottom: 1px solid #f5f5f5;
padding: 0 15px;
}
.modal .modal-header p {
line-height: 50px;
display: inline-block;
}
.modal .modal-header .title {
font-size: 18px;
color: #333;
}
.modal .modal-header .close {
float: right;
font-size: 26px;
margin-top: -2px;
color: #9C9FA4;
cursor: default;
}
.modal .modal-content {
min-height: 100px;
}
.modal-content input {
padding: 10px 20px 10px 20px;
}
.modal .modal-footer .btn {
padding: 0 20px;
height: 36px;
line-height: 36px;
color: white;
background: #409EFF;
border: none;
}
.modal .modal-footer {
border-top: 1px solid #f5f5f5;
padding: 15px;
text-align: right;
}
.container::after {
content: "";
/* opacity: 0; */
display: block;
clear: both;
}
button {
box-shadow: -6px 6px 8px inset rgba(255, 255, 255, 0.6),
6px -6px 8px inset rgba(0, 0, 0, 0.2);
}
button:active {
box-shadow: -6px 6px 8px inset rgba(0, 0, 0, 0.2),
6px -6px 8px inset #ffffff99;
}
.msg {
width: 300px;
height: 30px;
background-color: aquamarine;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 0 auto;
line-height: 30px;
text-align: center;
font-weight: 700;
animation: key 3s ease;
position: absolute;
box-shadow: 1px 1px 50px aquamarine;
}
@keyframes key {
0% {
transform: translateY(100px);
opacity: 0;
display: block;
}
40% {
opacity: 1;
transform: translateY(50px);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
input {
border: 0;
width: 60%;
font-size: 15px;
color: black;
background: transparent;
border-bottom: 2px solid black;
padding: 5px 10px;
outline: none;
margin-top: 10px;
}
input:focus {
/* cursor: none; */
border-bottom: skyblue 3px solid;
}
</style>
</head>
<body>
<div class="hd" style="display: flex; justify-content: space-between;">
<h1 class="tt">
山东原神大学 订单管理系统
</h1>
<div style="cursor: pointer;margin-right:20px">
<a href="./index.html">退出系统</a>
</div>
</div>
<div class="bd">
<div class="bd-l">
<ul>
<li><a href="./admin-add.html">修改商品信息</li>
<li style="color:yellow">店铺管理</li>
<li><a href="./admin-order.html">订单管理</a></li>
<li><a href="./admin-user.html">用户管理</a></li>
</ul>
</div>
<div class="bd-r">
<!-- <div style="width: 30%;"></div> -->
<h1>商品管理</h1>
<div class="container">
<div style="text-align: center;">
<button class="toggleModal" id="toggleModal">添加商品</button>
</div>
<div class="modal">
<div class="modal-header">
<p class="title" id="addstore" style="font-weight: 700;">添加商品</p>
<p class="close">×</p>
</div>
<div class="modal-content" style="text-align: center;">
<!-- <p>??????????????</p> -->
<input placeholder="请输入商品名称" class="it">
<br><br>
<input placeholder="请输入商品单价" class="it">
<br><br>
<input placeholder="请输入商品库存" class="it">
<br><br>
<input placeholder="请输入商品所属商店" class="it">
<br><br>
</div>
<div class="modal-footer">
<button class="close btn" id="sub">提交</button>
</div>
</div>
<div class="mask"></div>
</div>
<ul class="user_shop">
<li>
<div>商品名称</div>
<div>商品单价</div>
<div>库存</div>
<div>商品信息</div>
<div>操作</div>
</li>
</ul>
</div>
</div>
<script>
const ul = document.querySelector(".user_shop");
let btn
axios({
method: 'GET',
url: "http://localhost:8080/allshop",
}).then((req) => {
console.log(req.data);
let cnt = 0
for (let i = 0; i < req.data.length; i++) {
let li = document.createElement('li')
li.innerHTML = `
<div>${req.data[i].name}</div>
<div>${req.data[i].price}</div>
<div>${req.data[i].inventory}</div>
<div>${req.data[i].info}</div>
<div id="${cnt++}">
<button id = ${req.data[i].name}>添加库存</button>
</div>
`
ul.appendChild(li)
btn = document.querySelectorAll("button");
let flag = 0
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", (e) => {
if (btn[i].className == "toggleModal")
return;
e.preventDefault();
e.stopPropagation();
if (flag === 1)
return;
flag = 1;
// if (!confirm("是否确认提交库存")) {
// return;
// }
let div = document.createElement("div")
div.innerHTML = `√ 已完成添加`
div.className = "msg"
const bd = document.body;
bd.appendChild(div)
setTimeout(() => {
div.remove()
}, 2000)
axios({
data: {
name: btn[i].id,
xxx: "xxxx"
},
method: "post",
url: "http://localhost:8080/shopaddinventory",
headers: {
"Content-Type": 'application/json'
}
}).then(() => { flag = 0 })
})
}
}
})
window.onload = function () {
// 获取需要使用到的元素
var toggleModal = document.getElementById("toggleModal");
var container = document.getElementsByClassName("container")[0];
var mask = document.getElementsByClassName("mask")[0];
var modal = document.getElementsByClassName("modal")[0];
var closes = document.getElementsByClassName("close");
toggleModal.onclick = show;
closes[0].onclick = close;
closes[1].onclick = close;
function stop(e) {
e.preventDefault();
}
function show() {
mask.style.display = "block";
modal.style.display = "block";
document.addEventListener("mousewheel", stop, { passive: false })
}
function close() {
mask.style.display = "none";
modal.style.display = "none";
document.removeEventListener("mousewheel", stop, { passive: false })
}
const it = document.querySelectorAll(".it")
const sub = document.querySelector("#sub")
sub.addEventListener("click", () => {
axios({
data: {
name: it[0].value,
price: it[1].value,
inventory: it[2].value,
store: it[3].value
},
method: "post",
url: "http://localhost:8080/shopadd",
headers: {
"Content-Type": 'application/json'
}
}).then((req) => {
let div = document.createElement("div")
div.innerHTML = `√ 已完成添加`
div.className = "msg"
const bd = document.body;
bd.appendChild(div)
setTimeout(() => {
div.remove()
}, 2000)
})
})
}
</script>
</body>
</html>admin-user.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户管理</title>
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: white;
text-decoration: none;
}
.hd {
height: 60px;
background-color: #333;
line-height: 60px;
color: rgba(255, 255, 255, 0.6);
text-indent: 2em;
}
.hd>:hover {
color: rgba(255, 255, 255, 0.8);
}
.bd-l {
/* position: fixed; */
height: 100%;
width: 30%;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.bd-l ul li:hover {
background-color: purple;
}
.bd-l ul li {
text-align: center;
padding: 20px;
font-size: 20px;
color: white;
}
.bd {
display: flex;
}
.bd-r {
/* display: flex; */
height: 1000px;
width: 100%;
}
.bd-r h1 {
text-align: center;
}
.user_shop {
width: 70%;
margin: auto;
}
.user_shop li {
/* border: 1px solid black; */
display: flex;
justify-content: space-between;
margin-top: 0px;
}
.user_shop li div {
border: 1px solid black;
/* padding: 10px 65px 10px 70px; */
width: 25%;
text-align: center;
height: 60px;
line-height: 60px;
color: cadetblue;
font-weight: 700;
}
.addshop {
background-color: green;
border: transparent;
padding: 10px 20px 10px 20px;
color: white;
cursor: pointer;
}
.w34 {
width: 34%;
}
.container {
margin-top: 10px;
margin-bottom: 10px;
/* border-radius: 50px; */
}
.toggleModal {
padding: 10px 20px;
color: white;
background: #409EFF;
border: none;
box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.2);
/* position: absolute; */
/* left: 50%; */
/* top: 50%; */
/* transform: translate(-50%, -50%); */
}
.mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 100;
display: none;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
transform: translate(-50%, -50%);
border-radius: 5px;
background: #fff;
box-shadow: 2px 3px 100px black;
z-index: 120;
display: none;
}
.modal .modal-header {
height: 50px;
border-bottom: 1px solid #f5f5f5;
padding: 0 15px;
}
.modal .modal-header p {
line-height: 50px;
display: inline-block;
}
.modal .modal-header .title {
font-size: 18px;
color: #333;
}
.modal .modal-header .close {
float: right;
font-size: 26px;
margin-top: -2px;
color: #9C9FA4;
cursor: default;
}
.modal .modal-content {
min-height: 100px;
}
.modal-content input {
padding: 10px 20px 10px 20px;
}
.modal .modal-footer .btn {
padding: 0 20px;
height: 36px;
line-height: 36px;
color: white;
background: #409EFF;
border: none;
}
.modal .modal-footer {
border-top: 1px solid #f5f5f5;
padding: 15px;
text-align: right;
}
.container::after {
content: "";
/* opacity: 0; */
display: block;
clear: both;
}
button {
box-shadow: -6px 6px 8px inset rgba(255, 255, 255, 0.6),
6px -6px 8px inset rgba(0, 0, 0, 0.2);
}
button:active {
box-shadow: -6px 6px 8px inset rgba(0, 0, 0, 0.2),
6px -6px 8px inset rgba(255, 255, 255, 0.6);
}
input {
border: 0;
width: 60%;
font-size: 15px;
color: black;
background: transparent;
border-bottom: 2px solid black;
padding: 5px 10px;
outline: none;
margin-top: 10px;
}
input:focus {
/* cursor: none; */
border-bottom: skyblue 3px solid;
}
</style>
</head>
<body>
<div class="hd" style="display: flex; justify-content: space-between;">
<h1 class="tt">
山东原神大学 订单管理系统
</h1>
<div style="cursor: pointer;margin-right:20px">
<a href="./index.html">退出系统</a>
</div>
</div>
<div class="bd">
<div class="bd-l">
<ul>
<li><a href="./admin-add.html">修改商品信息</li>
<li><a href="./admin.html">店铺管理</a></li>
<li><a href="./admin-order.html">订单管理</a></li>
<li style="color:yellow">用户管理</li>
</ul>
</div>
<div class="bd-r">
<h1>用户管理</h1>
<div class="container">
<div style="text-align: center;">
<button class="toggleModal" id="toggleModal">修改用户信息</button>
</div>
<div class="modal">
<div class="modal-header">
<p class="title" id="addstore" style="font-weight: 700;">用户管理</p>
<p class="close">×</p>
</div>
<div class="modal-content" style="text-align: center;">
<input placeholder="请输入用户编号" class="it">
<br><br>
<input placeholder="请修改用户名称" class="it">
<br><br>
<input placeholder="请修改用户电话" class="it">
<br><br>
<input placeholder="请修改用户地址" class="it">
<br><br>
</div>
<div class="modal-footer">
<button class="close btn" id="sub">提交</button>
</div>
</div>
<div class="mask"></div>
</div>
<!-- <div style="text-align: center;margin-top: 10px;margin-bottom: 10px;">
<button class="addshop">添加店铺</button>
</div> -->
<ul class="user_shop">
<li>
<div>用户名</div>
<div>用户电话</div>
<div>用户地址</div>
<div>用户订单数</div>
</li>
</ul>
</div>
</div>
<script>
// window.onload = function () {
let user;
axios({
method: 'GET',
url: "http://localhost:8080/user"
}).then((req) => {
console.log(req.data)
user = req.data;
const ul = document.querySelector(".user_shop")
for (let i = 0; i < req.data.length; i++) {
let li = document.createElement("li")
li.innerHTML = `
<div>${req.data[i].userid + "\t" + req.data[i].username}</div>
<div>${req.data[i].usertel}</div>
<div>${req.data[i].address}</div>
<div>${req.data[i].num}</div>
`
ul.appendChild(li)
}
})
// }
window.onload = function () {
// 获取需要使用到的元素
var toggleModal = document.getElementById("toggleModal");
var container = document.getElementsByClassName("container")[0];
var mask = document.getElementsByClassName("mask")[0];
var modal = document.getElementsByClassName("modal")[0];
var closes = document.getElementsByClassName("close");
toggleModal.onclick = show;
closes[0].onclick = close;
closes[1].onclick = close;
function stop(e) {
e.preventDefault();
}
function show() {
mask.style.display = "block";
modal.style.display = "block";
document.addEventListener("mousewheel", stop, { passive: false })
}
function close() {
mask.style.display = "none";
modal.style.display = "none";
document.removeEventListener("mousewheel", stop, { passive: false })
}
const btn = document.querySelector("#sub")
btn.addEventListener("click", () => {
const it = document.querySelectorAll(".it")
// const itv = document.querySelectorAll("input").value
let flag = -1
for (let i = 0; i < user.length; i++) {
if (user[i].userid == it[0].value) {
flag = i
break
}
}
if (flag == -1) {
alert("不存在当前编号的用户")
for (let i = 0; i < it.length; i++) {
it[i].value = ""
}
return;
}
axios({
method: "post",
headers: {
"Content-Type": 'application/json'
},
url: "http://localhost:8080/changeuser",
data: {
userid: it[0].value,
username: it[1].value || user[flag].username,
usertel: it[2].value || user[flag].usertel,
address: it[3].value || user[flag].address
}
})
})
}
</script>
</body>
</html>admin-order.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>订单管理</title>
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: white;
text-decoration: none;
}
.hd {
height: 60px;
background-color: #333;
line-height: 60px;
color: rgba(255, 255, 255, 0.6);
text-indent: 2em;
}
.hd>:hover {
color: rgba(255, 255, 255, 0.8);
}
.bd-l {
/* position: fixed; */
height: 100%;
width: 30%;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.bd-l ul li:hover {
background-color: purple;
}
.bd-l ul li {
text-align: center;
padding: 20px;
font-size: 20px;
color: white;
}
.bd {
display: flex;
}
.bd-r {
/* display: flex; */
/* height: 1000px; */
width: 100%;
}
.bd-r h1 {
text-align: center;
}
.user_shop {
width: 70%;
margin: auto;
}
.user_shop li {
/* border: 1px solid black; */
display: flex;
justify-content: space-between;
margin-top: 0px;
}
.user_shop li div {
border: 1px solid black;
/* padding: 10px 65px 10px 70px; */
width: 25%;
text-align: center;
height: 60px;
line-height: 60px;
color: cadetblue;
font-weight: 700;
}
.addshop {
background-color: green;
border: transparent;
padding: 10px 20px 10px 20px;
color: white;
cursor: pointer;
}
.w34 {
width: 34%;
}
.completed {
border: transparent;
padding: 10px 20px 10px 20px;
font-weight: 700;
margin-right: 5px;
background-color: green;
padding: 10px 20px 10px 20px;
color: white;
}
.uncompleted {
border: transparent;
cursor: pointer;
padding: 10px 20px 10px 20px;
font-weight: 700;
margin-right: 5px;
background-color: red;
padding: 10px 20px 10px 20px;
color: white;
}
button {
box-shadow: -6px 6px 8px inset rgba(255, 255, 255, 0.6),
6px -6px 8px inset rgba(0, 0, 0, 0.2);
}
button:active {
box-shadow: -6px 6px 8px inset rgba(0, 0, 0, 0.2),
6px -6px 8px inset rgba(255, 255, 255, 0.6);
}
.msg {
width: 300px;
height: 30px;
background-color: aquamarine;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 0 auto;
line-height: 30px;
text-align: center;
font-weight: 700;
animation: key 3s ease;
position: absolute;
box-shadow: 1px 1px 50px aquamarine;
}
@keyframes key {
0% {
transform: translateY(100px);
opacity: 0;
display: block;
}
40% {
opacity: 1;
transform: translateY(50px);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
</style>
</head>
<body>
<div class="hd" style="display: flex; justify-content: space-between;">
<h1 class="tt">
山东原神大学 订单管理系统
</h1>
<div style="cursor: pointer;margin-right:20px">
<a href="./index.html">退出系统</a>
</div>
</div>
<div class="bd">
<div class="bd-l">
<ul>
<li><a href="./admin-add.html">修改商品信息</li>
<li><a href="./admin.html">店铺管理</a></li>
<li style="color:yellow">订单管理</li>
<li><a href="./admin-user.html">用户管理</a></li>
</ul>
</div>
<div class="bd-r">
<h1>店铺管理</h1>
<ul class="user_shop">
<li>
<div>用户名</div>
<div>商品名</div>
<div>下单日期</div>
<div>订单状态</div>
</li>
</ul>
</div>
</div>
<script>
const ul = document.querySelector(".user_shop");
axios({
method: 'GET',
url: "http://localhost:8080/order",
}).then((req) => {
console.log(req.data);
let cnt = 0
for (let i = 0; i < req.data.length; i++) {
let li = document.createElement('li')
li.innerHTML = `
<div>${req.data[i].username}</div>
<div>${req.data[i].shopname}</div>
<div>${req.data[i].date}</div>
`
if (req.data[i].status == "1") {
li.innerHTML += `<div>
<button class="completed" id = ${req.data[i].orderid}>已完成</button>
<button class="uncompleted" data-orderid = ${req.data[i].orderid}>删除订单</button>
</div>`
}
else {
li.innerHTML += `
<div><button class="uncompleted" id = ${req.data[i].orderid}>未完成</button>
<button class="uncompleted" data-orderid = ${req.data[i].orderid}>删除订单</button></div>`
}
// li.innerHTML+=`<div></div>`
ul.appendChild(li)
}
const btn = document.querySelectorAll("button");
console.log(btn)
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", () => {
if (btn[i].className === "completed") {
return;
}
if (!confirm("是否确认该操作")) {
return;
}
// console.log("???")
let div = document.createElement("div")
div.innerHTML = `√ 已完成该操作`
div.className = "msg"
const bd = document.body;
bd.appendChild(div)
setTimeout(() => {
div.remove()
}, 2000)
if (btn[i].innerHTML == "未完成") {
console.log(1)
axios({
method: "post",
url: "http://localhost:8080/completeorder",
data: {
orderid: btn[i].id,
xx: "xxx"
},
headers: {
"Content-Type": 'application/json'
}
})
}
else {
console.log(btn[i].dataset.orderid)
axios({
method: "post",
url: "http://localhost:8080/deleteorder",
data: {
orderid: btn[i].dataset.orderid,
xx: "xxx"
},
headers: {
"Content-Type": 'application/json'
}
})
}
})
}
})
</script>
</body>
</html>admin-add.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户界面</title>
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: white;
text-decoration: none;
}
.hd {
height: 60px;
background-color: #333;
line-height: 60px;
color: rgba(255, 255, 255, 0.6);
text-indent: 2em;
}
.hd>:hover {
color: rgba(255, 255, 255, 0.8);
}
.bd-l {
/* position: fixed; */
height: 100%;
width: 30%;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.bd-l ul li:hover {
background-color: purple;
}
.bd-l ul li {
text-align: center;
padding: 20px;
font-size: 20px;
color: white;
}
.bd {
display: flex;
}
.bd-r {
/* display: flex; */
height: 1000px;
width: 100%;
}
.bd-r h1 {
text-align: center;
}
.user_shop {
width: 70%;
margin: auto;
}
.user_shop li {
/* border: 1px solid black; */
display: flex;
justify-content: space-between;
margin-top: 0px;
}
.user_shop li div {
border: 1px solid black;
/* padding: 10px 65px 10px 70px; */
width: 25%;
text-align: center;
height: 60px;
line-height: 60px;
color: cadetblue;
font-weight: 700;
}
.user_shop li div button {
border: transparent;
padding: 10px 20px 10px 20px;
background-color: skyblue;
color: white;
font-weight: 700;
cursor: pointer;
margin-right: 5px;
}
.addshop {
background-color: green;
border: transparent;
padding: 10px 20px 10px 20px;
color: white;
cursor: pointer;
}
.container {
margin-top: 10px;
margin-bottom: 10px;
}
.toggleModal {
padding: 10px 20px;
color: white;
background: #409EFF;
border: none;
box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.2);
/* position: absolute; */
/* left: 50%; */
/* top: 50%; */
/* transform: translate(-50%, -50%); */
}
.mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 100;
display: none;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
transform: translate(-50%, -50%);
border-radius: 5px;
background: #fff;
box-shadow: 2px 3px 20px rgba(0, 0, 0, 0.2);
z-index: 120;
display: none;
}
.modal .modal-header {
height: 50px;
border-bottom: 1px solid #f5f5f5;
padding: 0 15px;
}
.modal .modal-header p {
line-height: 50px;
display: inline-block;
}
.modal .modal-header .title {
font-size: 18px;
color: #333;
}
.modal .modal-header .close {
float: right;
font-size: 26px;
margin-top: -2px;
color: #9C9FA4;
cursor: default;
}
.modal .modal-content {
min-height: 100px;
}
.modal-content input {
padding: 10px 20px 10px 20px;
}
.modal .modal-footer .btn {
padding: 0 20px;
height: 36px;
line-height: 36px;
color: white;
background: #409EFF;
border: none;
}
.modal .modal-footer {
border-top: 1px solid #f5f5f5;
padding: 15px;
text-align: right;
}
.container::after {
content: "";
/* opacity: 0; */
display: block;
clear: both;
}
button {
box-shadow: -6px 6px 8px inset rgba(255, 255, 255, 0.6),
6px -6px 8px inset rgba(0, 0, 0, 0.2);
}
button:active {
box-shadow: -6px 6px 8px inset rgba(0, 0, 0, 0.2),
6px -6px 8px inset #ffffff99;
}
.msg {
width: 300px;
height: 30px;
background-color: aquamarine;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: 0 auto;
line-height: 30px;
text-align: center;
font-weight: 700;
animation: key 3s ease;
position: absolute;
box-shadow: 1px 1px 50px aquamarine;
}
@keyframes key {
0% {
transform: translateY(100px);
opacity: 0;
display: block;
}
40% {
opacity: 1;
transform: translateY(50px);
}
100% {
opacity: 0;
transform: translateY(-100px);
}
}
input {
border: 0;
width: 60%;
font-size: 15px;
color: black;
background: transparent;
border-bottom: 2px solid black;
padding: 5px 10px;
outline: none;
margin-top: 10px;
}
input:focus {
/* cursor: none; */
border-bottom: skyblue 3px solid;
}
</style>
</head>
<body>
<div class="hd" style="display: flex; justify-content: space-between;">
<h1 class="tt">
山东原神大学 订单管理系统
</h1>
<div style="cursor: pointer;margin-right:20px">
<a href="./index.html">退出系统</a>
</div>
</div>
<div class="bd">
<div class="bd-l">
<ul>
<li style="color:yellow">修改商品信息</li>
<li><a href="./admin.html">店铺管理</a></li>
<li><a href="./admin-order.html">订单管理</a></li>
<li><a href="./admin-user.html">用户管理</a></li>
</ul>
</div>
<div class="bd-r">
<!-- <div style="width: 30%;"></div> -->
<h1>商品修改</h1>
<div class="container">
<div style="text-align: center;">
<button class="toggleModal" id="toggleModal">修改商品</button>
</div>
<div class="modal">
<div class="modal-header">
<p class="title" id="addstore" style="font-weight: 700;">修改商品</p>
<p class="close">×</p>
</div>
<div class="modal-content" style="text-align: center;">
<!-- <p>??????????????</p> -->
<input placeholder="请输入商品编号" class="it">
<br><br>
<input placeholder="请修改商品名称" class="it">
<br><br>
<input placeholder="请修改商品单价" class="it">
<br><br>
<input placeholder="请修改商品库存" class="it">
<br><br>
<input placeholder="请修改商品描述信息" class="it">
<br><br>
</div>
<div class="modal-footer">
<button class="close btn" id="sub">提交</button>
</div>
</div>
<div class="mask"></div>
</div>
<ul class="user_shop">
<li>
<div>商品名称</div>
<div>商品单价</div>
<div>库存</div>
<div>商品信息</div>
</li>
</ul>
</div>
</div>
<script>
const ul = document.querySelector(".user_shop");
let btn
let shop;
axios({
method: 'GET',
url: "http://localhost:8080/allshop",
}).then((req) => {
console.log(req.data);
shop = req.data;
let cnt = 0
for (let i = 0; i < req.data.length; i++) {
let li = document.createElement('li')
li.innerHTML = `
<div>${req.data[i].shop_id + req.data[i].name}</div>
<div>${req.data[i].price}</div>
<div>${req.data[i].inventory}</div>
<div>${req.data[i].info}</div>
`
ul.appendChild(li)
}
})
window.onload = function () {
// 获取需要使用到的元素
var toggleModal = document.getElementById("toggleModal");
var container = document.getElementsByClassName("container")[0];
var mask = document.getElementsByClassName("mask")[0];
var modal = document.getElementsByClassName("modal")[0];
var closes = document.getElementsByClassName("close");
toggleModal.onclick = show;
closes[0].onclick = close;
closes[1].onclick = close;
function stop(e) {
e.preventDefault();
}
function show() {
mask.style.display = "block";
modal.style.display = "block";
document.addEventListener("mousewheel", stop, { passive: false })
}
function close() {
mask.style.display = "none";
modal.style.display = "none";
document.removeEventListener("mousewheel", stop, { passive: false })
}
const it = document.querySelectorAll(".it")
const sub = document.querySelector("#sub")
sub.addEventListener("click", () => {
let flag = -1;
for (let i = 0; i < shop.length; i++) {
if (shop[i].shop_id == it[0].value) {
flag = i;
break;
}
}
if (flag == -1) {
alert("不存在当前编号的商品，请重试")
return;
}
axios({
data: {
shopid: it[0].value
, name: it[1].value || shop[flag].name
, price: it[2].value || shop[flag].price
, inventory: it[3].value || shop[flag].inventory
, info: it[4].value || shop[flag].info
},
method: "post",
url: "http://localhost:8080/changeshop",
headers: {
"Content-Type": 'application/json'
}
}).then((req) => {
let div = document.createElement("div")
div.innerHTML = `√ 已完成修改`
div.className = "msg"
const bd = document.body;
bd.appendChild(div)
setTimeout(() => {
div.remove()
}, 2000)
})
})
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
