springboot vue3 进销存管理系统设计与实现手把手带敲适合小白学习的项目

本文链接：https://blog.csdn.net/qq_41221322/article/details/148381638

博主介绍：专注于Java（springboot ssm 等开发框架） vue .net php phython node.js uniapp 微信小程序等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了2000+毕设题目方便大家学习使用

18springboot进销存系统库存预警实现适合小白带敲教程手把手编程

手把手带敲适合小白学习的项目

项目基本信息介绍

springboot3 VUE3进销存管理系统是一套完善的完整企业信息管理类型系统，结合springboot框架和VUE完成本系统，对理解springboot3编程以及vue3前端开发有帮助系统采用springboot框架（MVC模式开发），系统具有完整的源代码和数据库，系统主要采用B/S模式开发。

比较典型业务类型，对于某一个商品进行出入库（还有其他的销售报损等）

基于商品的话，入库和出库操作 1:N （就是一对多关系）

企业上是多对多，仓库商品库存情况，多对多关系

技术栈

前端主要技术 vue 3.2
后端主要技术 Springboot 3.x java 持久层mybatis
数据库 mysql 8.0 客户端工具 Navicat for Mysql
开发工具 IDEA 2021 JDK17

运行环境

1.运行环境：最好是java jdk 17，我们在这个平台上运行的。其他版本理论上也可以不建议。

2.IDE环境：推荐IDEA;

3.硬件环境：windows 8/10/11 8G内存以上；；

5.数据库：mysql8.0等版本均可如 MySql 5.0 到 5.5 需要修改数据连接配置，以及maven中的mysql 驱动包；

6.是否Maven项目: 是；查看源码目录中是否包含pom.xml；若包含，则为maven项目，否则为非maven项目

7 服务端接口测试采用的Apifox 进行测试

使用说明

1. 使用Navicat或者其它工具，在mysql中创建对应sql文件名称的数据库，并导入项目的sql文件；

2. 使用IDEA导入项目;

3. 将项目中jxc\src\main\resources 下的 application.properties 配置文件中的数据库配置改为自己的配置;

数据库支持 mysql8.0 ，如果需要5.0 到5.5需要二次转换升级

4.vscode 开vue项目工程

5.vue 项目启动 npm run dev

vue 版本 3.2

node 版本 18

搭建好的基础框架前端+后端基本框架

基本业务上肯定 crud 表的增删改查（查询和查看心啊公顷）

功能介绍

1）管理员管理包括增加、删除、列表、查看详情

2）员工管理包括增加、删除、列表、查看详情

3）公告管理包括添加、删除、列表、查看详情

4）供应商管理包括添加、删除、列表、查看详情

5）商品管理包括添加、删除、列表、查看详情（有个属性记录商品库存量这个理想的情况，对于毕业设计可以设计，但是如果实际上大型企业多库）

这个业务模型给大家复杂的！数据有名录的概念

6）入库管理包括列表显示、详情查看、删除（增加时候会更新商品库存量）

7）出库管理包括列表显示，详情查看、（删除可以删除数据不调整库存，增加会减少商品库存量）

8）数据统计（库存，操作等）

9）个人信息修改、登录

系统功能（visio来画）

系统ER图（visio来画）

根据系统功能梳理处理包括以下几个实体：

管理员，员工，公告，供应商，商品，商品类别，入库，出库！

最基本的实体，最底层基础的业务框架

实体和实体之间的关系是什么

公告和管理员关系：管理员发布公告，那么 1:N

商品和供应商关系：1:N 一个供应商对多个商品

商品和商品类别关系：1一个商品类别对个商品也是 1:N

商品和入库关系：一个商品多次入库1:N

商品和出库关系：一个商品多次出库1：N

绘制成ER图实体关系图

核心的业务功能

库存变化，库存预警怎么做，来设计

注意事项

1、管理员账号：admin密码：admin 数据库配置文件 application.properties

2、开发环境为IDEA开发，数据库为mysql，使用java语言开发。

3、数据库文件名是javajxc.sql 系统名称jxc

4、地址：http://127.0.0.1:8080/login

数据库设计

管理员 adminuser

用户名username，密码userpwd，姓名realname

员工staff

用户名username，密码userpwd，姓名realname，联系电话telephone，联系地址address

供应商supplier

供应商名称suppliername，联系电话telephone，经营范围bscope，联系地址address

商品类别 goodstype

类别typename

商品goods

商品名称goodsname，类别goodstype，供应商supplier，规格 models，介绍 gdesc，库存量num，预警量ynum，添加时间addtime

入库store

入库号ordernum，商品goods，入库数量innum，入库时间intime，操作人pername，备注note

出库outbound

出库号ordernum，商品goods，出库量outnum，出库时间outtime，操作人pername，备注note

系统实现

主要后端代码：

public Result findPage(HttpServletRequest req) {
        Map map= new HashMap();
        Integer currentPage =Integer.parseInt((String) req.getParameter("currentPage"));
        Integer pageSize =  Integer.parseInt((String)req.getParameter("pageSize"));;
        if (currentPage == null || currentPage <= 0 || pageSize == null || pageSize < 1) {
            return Result.error("参数错误");
        }
        String id = (String)req.getParameter("id");//id 查询参数
	  if (id != null && !id .equals("")) {
            map.put("id", id );//拼接查询参数
        }
        String username = (String)req.getParameter("username");//username 查询参数
	  if (username != null && !username .equals("")) {
            map.put("username", username );//拼接查询参数
        }
        String userpwd = (String)req.getParameter("userpwd");//userpwd 查询参数
	  if (userpwd != null && !userpwd .equals("")) {
            map.put("userpwd", userpwd );//拼接查询参数
        }
        String realname = (String)req.getParameter("realname");//realname 查询参数
	  if (realname != null && !realname .equals("")) {
            map.put("realname", realname );//拼接查询参数
        }


        // 使用 pageHelper
        PageHelper.startPage(currentPage, pageSize);
      
        List list = adminuserdao.getAll(map);
        return Result.success(new PageInfo<>(list));
    }


	    @GetMapping("/findAll")  //  管理员查询列表

    public Result findAll(HttpServletRequest req) {
        Map map= new HashMap();

        String id = (String)req.getParameter("id");//id 查询参数
	  if (id != null && !id .equals("")) {
            map.put("id", id );//拼接查询参数
        }
        String username = (String)req.getParameter("username");//username 查询参数
	  if (username != null && !username .equals("")) {
            map.put("username", username );//拼接查询参数
        }
        String userpwd = (String)req.getParameter("userpwd");//userpwd 查询参数
	  if (userpwd != null && !userpwd .equals("")) {
            map.put("userpwd", userpwd );//拼接查询参数
        }
        String realname = (String)req.getParameter("realname");//realname 查询参数
	  if (realname != null && !realname .equals("")) {
            map.put("realname", realname );//拼接查询参数
        }




        List list = adminuserdao.getAll(map);
        return Result.success(list);
    }



    @GetMapping("/findById/{id}") // 管理员根据id查询
    public Result findById(@PathVariable Integer id) {
        return Result.success(adminuserdao.getadminuserByID(id));
    }
    @PostMapping(value = "add") // 管理员新增
    public Result add(@RequestBody adminuser bean) {
        System.out.println("add");



	  Map map= new HashMap();


        map.put("username", bean.getUsername());//用户名

        adminuser adminuserbean= adminuserdao.getadminuserByMap(map);
        if(adminuserbean!=null){
            return Result.error("该用户名已存在");
        }else{
            adminuserdao.add(bean);
            return Result.success("成功");  // 返回
        }









       
   
    }

入库vue代码

const load = () => {
  request.get("/store/findPage", {
    params: {
      currentPage: currentPage.value,
      pageSize: pageSize.value,
      ordernum: ordernum.value,
  
    }
  }).then(res => {
    if (res.code === '200') {
      state.tableData = res.data.list
      total.value = res.data.total
    }
  })
  request.get("/goods/findAll").then(res => {
    if (res.code === '200') {
      state.goodslist = res.data
    }
  })

}

load();

const handleSearch = () => {
  currentPage.value = 1
  load()
}

const handleDelete = (id) => {
  request.delete("/store/delete/" + id).then(res => {
    if (res.code === '200') {
      ElMessage.success("删除成功")
      load()
    } else {
    }
  })
}

      load();



const handleSizeChange = (val) => {
  console.log(val)
  pageSize.value = val
  load()
}

const handleCurrentChange = (val) => {
  console.log(val)
  currentPage.value = val
  load()
}

const dialogFormVisible = ref(false)
const DetailFormVisible=ref(false)
const uploadRef = ref(null); // 创建一个 ref 引用来访问 el-upload 的实例


const handleAdd = () => {
  dialogFormVisible.value = true
  state.form = {intime: getTime(),pername:localStorage.getItem("yhm"),ordernum:generateNumber()}  // 初始化数据
}