商品管理系统展示示例

商品管理系统展示示例

​

​ 技术栈：react，antpro ，springboot+mybatis

​ 前端：

实现功能点：搜索，加入购物车，删除，添加

前端代码

import {Card,Button,Drawer,Popconfirm, message,Input } from "antd";

import React,{useState,useEffect} from "react";
import style from './Book.less'
import {ShoppingCartOutlined} from '@ant-design/icons'


export default () =>{
  const { Meta } = Card;
  const { Search } = Input;
  const [select,setselect] = useState(0)

  const [visible, setVisible] = useState(false);
  const [cartList,setcartList] = useState([{           // fake data
    id: 2,
    avatar: 'http://img3m8.ddimg.cn/49/9/27874588-1_b_4.jpg',
    bookname: '中国历史精神',
    price:12.70,
    num:0
  }])
  const [bookList,setbook] = useState([ {           // fake data
    id: 2,
    avatar: 'http://img3m8.ddimg.cn/49/9/27874588-1_b_4.jpg',
    bookname: '中国历史精神',
    price:12.70
  },
    {
      id: 3,
      avatar: 'http://img3m6.ddimg.cn/49/35/29171686-1_b_3.jpg',
      bookname: '反思现代',
      price:51.40
    }])

  const showDrawer = () => {
    initcart()                     // add data to my cart
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };
  function confirm(e) {
    console.log(bookList[select-1]);
    addcart()

    message.success('加入成功');
  }

  function cancel(e) {
    console.log(e);
    // message.error('');
  }

  function cartconfirm(e) {
    console.log(select);
    deletcart()   // delete local product

    message.success('删除成功');
  }

  function cartcancel(e) {
    console.log(e);
    // message.error('');
  }
  const onSearch = value => {
    if (value==="") {
      getdata()
      return
    }

    fetch(`/getbook/getByName/${value}`)
      .then(res => res.text())
      .then(data => {

        const table =  JSON.parse(data);
        setbook(table)
      })
      .catch(e => console.log('错误:', e));
  };
  function initcart() {
    fetch("/getcart/queryCartList")
      .then(res => res.text())
      .then(data => {

        const table =  JSON.parse(data);
        setcartList(table)
      })
      .catch(e => console.log('错误:', e));
  }
  function addcart() {

    fetch("/getcart/addCart",{
      method:"POST",
      headers: {
        'Content-Type': 'application/json;charset=utf-8;'
      },
      body: JSON.stringify(
        {
          price: bookList[select-1].price,
          num: 1,
          avatar: bookList[select-1].avatar,
          bookname: bookList[select-1].bookname
        }
       ),

    })
      .then(res => res.text())
      .then(data => {

      })
      .catch(e => console.log('错误:', e));
    message.info('添加成功');
  }

  function deletcart() {

    fetch(`/getcart/deletCart/${select}`)
      .then(res => res.text())
      .then(data => {

        const localist = cartList.filter(cart => cart.id !== select)         // use filter to remove the data,to avoid the time for internet remove
        setcartList(localist)
        // const table =  JSON.parse(data);
        // setcartList(table)
      })
      .catch(e => console.log('错误:', e));

  }

  function getdata() {
    fetch("/getbook/queryBookList")
      .then(res => res.text())
      .then(data => {

        const table =  JSON.parse(data);
        setbook(table)
      })
      .catch(e => console.log('错误:', e));
  }

useState(()=>{
      getdata()
},[])
  return <div>

    <Search placeholder="input search text" className={style.search} onSearch={onSearch} style={{ width: 200 }} />
    <ShoppingCartOutlined   style={{fontSize:28}} className={style.icon} onClick={showDrawer}/>
    <Drawer
      title="My Cart"
      placement="right"
      closable={false}
      onClose={onClose}
      visible={visible}
    >
      {cartList.map((item,index) =>
        <Popconfirm  Key={item.id}
                     title="是否删除？"
                     onConfirm={cartconfirm}
                     onCancel={cartcancel}
                     okText="Yes"
                     cancelText="No" onClick={()=>setselect(item.id)}           // here give local id to symbol select
        >
          <Card hoverable
                style={{ width: 240 }}
                cover={<img alt="example" src={item.avatar} />}
          >
            <Meta title={item.bookname} description={item.book} />
          </Card>
        </Popconfirm>


      )}
    </Drawer>



    <div className={style.container}>

      {bookList.map((item,index) =>
        <Popconfirm  Key={item.id}
                     title="是否加入到购物车？"
                     onConfirm={confirm}
                     onCancel={cancel}
                     okText="Yes"
                     cancelText="No" onClick={()=>setselect(item.id)}
        >
          <Card hoverable
                style={{ width: 240 }}
                cover={<img alt="example" src={item.avatar} />}
          >
            <Meta title={item.bookname} description={item.book} />
          </Card>
        </Popconfirm>


      )}

    </div>


  </div>;

};

后端调用数据库，cartlist表 字段：avatar txt，bookname text，

​ price int，num int ，id Primarykey

book——list表 字段：id int，avatar text，bookname text，price int

数据库内容 ：

后端代码：

control层

购物车：

package com.kai.myformbatis.controller;

import com.kai.myformbatis.mapper.BookMapper;
import com.kai.myformbatis.mapper.CartMapper;
import com.kai.myformbatis.mapper.UserMapper;
import com.kai.myformbatis.pojo.Cart;
import com.kai.myformbatis.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/getcart")
public class Cartcontroller {

    @Autowired
    private CartMapper cartMapper;

    @GetMapping("/queryCartList")
    public List<Cart> queryUserList(){
        List<Cart> cartList = cartMapper.queryCartList();
        for (Cart cart :cartList){
            System.out.println(cart);
        }
        return cartList;
    }


    @RequestMapping(value="/addCart",method= RequestMethod.POST)
    public Cart addCart(@RequestBody Cart cart){
        System.out.println("cart添加进来了"+cart);
        cartMapper.addCart(cart);

        return cart;
    }

    @RequestMapping("/deletCart/{id}")
    public String deleteUser(@PathVariable int id){
        cartMapper.deleteCart(id);
        return "ok";
    }




}

书籍类

package com.kai.myformbatis.controller;

import com.kai.myformbatis.mapper.BookMapper;
import com.kai.myformbatis.mapper.UserMapper;
import com.kai.myformbatis.pojo.Book;
import com.kai.myformbatis.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/getbook")
public class Bookcontroller {

    @Autowired
    private BookMapper bookMapper;

    @GetMapping("/queryBookList")
    public List<Book> queryUserList(){
        List<Book> bookList = bookMapper.queryBookList();
        for (Book book :bookList){
            System.out.println(book);
        }
        return bookList;
    }

    @RequestMapping("getById/{id}")
    public Book queryUserById(@PathVariable int id){
        Book book = bookMapper.selectBookById(id);
        System.out.println(book);
        return book;
    }
    @RequestMapping("getByName/{bookname}")
    public List<Book> selectBookByname(@PathVariable String bookname){

        List<Book> bookList = bookMapper.selectBookByname(bookname);
        System.out.println(bookList);
        return bookList;
    }

}

mapper

购物车：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.kai.myformbatis.mapper.CartMapper">
    <select id="queryCartList" resultType="Cart">
        select * from cartlist
    </select>

    <insert id="addCart" parameterType="Cart">
        insert into cartlist (id,bookname,avatar,price,num) values (#{id},#{bookname},#{avatar},#{price},#{num})
    </insert>


    <delete id="deleteCart" parameterType="int">
        delete  from cartlist  where id = #{id}
    </delete>


</mapper>


//接口：
package com.kai.myformbatis.mapper;

import com.kai.myformbatis.pojo.Cart;
import com.kai.myformbatis.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;

@Mapper
@Repository
public interface CartMapper {
    List<Cart> queryCartList();

    int addCart(Cart cart);

    int deleteCart(int id);

}

书籍mapper：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.kai.myformbatis.mapper.BookMapper">
    <select id="queryBookList" resultType="Book">
        select * from book_list
    </select>

    <select id="selectBookById" resultType="Book">
        select * from book_list where id = #{id}
    </select>

    <select id="selectBookByname" resultType="Book">
           select * from book_list
           <where>
               <if test="bookname !=null">
                    bookname LIKE concat(concat('%',#{bookname}),'%')
               </if>
           </where>
    </select>

</mapper>
                   
 
  //书籍接口
                    package 
                   com.kai.myformbatis.mapper;

import com.kai.myformbatis.pojo.Book;
import com.kai.myformbatis.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.List;
@Mapper
@Repository
public interface BookMapper {

    List<Book> queryBookList();

    Book selectBookById(int id);

    List<Book>  selectBookByname(String name);
}

类

// 购物车
package com.kai.myformbatis.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Cart {
    int id;
    int price;
    int num;
    String avatar;
    String bookname;
}


//book
package com.kai.myformbatis.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Book {
    private int id;
    private int price;
    private String avatar;
    private String bookname;
}

总结：1.前端跨域解决方法

1.antpro proxy代理指定跨域的一类接口

2.加跨域请求头