cuteaddanina

 

记录---训练AI帮我完成开学考试试卷的过程

我的完整过程很长，属于一步一步完善，一开始很不完整，我一步一步引导deepseek 补充完整。应该还不是很完整，但是已经很好了

下面是过程：

1.给deepseek我的考试文件，并说明：采用前后端分离的方法，前端使用vue3,用vscode。

2.补充：在上述的基础上，管理员页面和仓库管理人员页面每个功能单开一页，实现分页，

3.补充：在上述基础上，对于管理员页面，仓库的增删改查归为一个页面内，物质类别的增删改查规划为一个页面，。对于仓库管理人员页面，入库和出库归于同一个页面，统计查询自成一个页面

4.补充：对于上述代码，数据库用mysql和navicat，后端用idea,请随意编出10个数据，并写出数据库代码和后端代码

5.补充：现在对上述所有做一个总结，创建一个前后端分离项目，前端使用vue3,开发工具使用vscode，后端使用java，开发工具使用idea,数据库用mysql和navicat,对于两个角色，管理员和仓库管理人员，登陆时进入不同路径，并且，登陆时要使用密码,其中，管理员路径的分为两个页面，第一个页面是：仓库的增删改查，第二个页面：物质类别的增删改查，仓库管理人员路径也分为两个页面，第一个页面是入库和出库，第二个页面：统计查询，数据库表必须含有人员表，其中，1表示管理人员，2表示仓库管理人员。其他表根据文件内容创造。

6.总结：

创建一个前后端分离项目，前端使用vue3,开发工具使用vscode，后端使用java，开发工具使用idea,数据库用mysql和navicat。

对于两个角色，管理员和仓库管理人员，登陆时进入不同路径，并且，登陆时要使用密码,其中，管理员路径的分为两个页面，第一个页面是：仓库的增删改查，第二个页面：物质类别的增删改查，仓库管理人员路径也分为两个页面，第一个页面是入库和出库，第二个页面：统计查询。

数据库表必须含有人员表，其中，1表示管理人员，2表示仓库管理人员。其他表根据文件内容创造。    

前端下面'/admin   '/manager',下面各自生成两个vue文件

后端

最后得出：

项目实现步骤

我们将基于需求文档，创建一个前后端分离的仓储管理系统。前端使用 Vue 3（开发工具为 VSCode），后端使用 Java（开发工具为 IDEA），数据库使用 MySQL 和 Navicat。系统分为两个角色：管理员和仓库管理人员，登录时根据角色进入不同的路径，且登录时需要验证密码。

1. 数据库设计

根据需求文档，设计以下数据库表：

1.1 人员表 (user)

sql
复制
CREATE TABLE user (
    id INT AUTO_INCREMENT PRIMARY KEY COMMENT '用户ID',
    username VARCHAR(50) NOT NULL COMMENT '用户名',
    password VARCHAR(100) NOT NULL COMMENT '密码',
    role ENUM('1', '2') NOT NULL COMMENT '角色（1: 管理员，2: 仓库管理人员）'
) COMMENT '人员表';

1.2 仓库表 (warehouse)

sql
复制
CREATE TABLE warehouse (
    code VARCHAR(20) PRIMARY KEY COMMENT '仓库编码',
    name VARCHAR(100) NOT NULL COMMENT '仓库名称'
) COMMENT '仓库表';

1.3 物资类别表 (material_category)

sql
复制
CREATE TABLE material_category (
    category_code VARCHAR(20) PRIMARY KEY COMMENT '物资分类编码',
    category_name VARCHAR(100) NOT NULL COMMENT '物资分类名称'
) COMMENT '物资类别表';

1.4 物资台账明细表 (material_ledger)

sql
复制
CREATE TABLE material_ledger (
    ledger_id VARCHAR(20) PRIMARY KEY COMMENT '台账编号（格式：YYYYMMDD + 流水号）',
    material_code VARCHAR(20) NOT NULL COMMENT '物资编码',
    material_name VARCHAR(100) NOT NULL COMMENT '物资名称',
    specification VARCHAR(100) COMMENT '规格',
    material_type VARCHAR(50) COMMENT '物资分类',
    operation_type ENUM('IN', 'OUT') NOT NULL COMMENT '操作类型（入库/出库）',
    quantity INT NOT NULL COMMENT '数量',
    unit VARCHAR(20) COMMENT '计量单位',
    warehouse_code VARCHAR(20) COMMENT '仓库编码',
    operation_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '操作时间',
    FOREIGN KEY (warehouse_code) REFERENCES warehouse(code)
) COMMENT '物资台账明细表';

2. 后端实现（Java + Spring Boot）

使用 Spring Boot 实现后端 API。

2.1 添加依赖

在 pom.xml 中添加以下依赖：

xml
复制
<dependencies>
    <!-- Spring Boot Starter Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- MySQL Driver -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
    <!-- MyBatis -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.2.0</version>
    </dependency>
    <!-- Lombok -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <scope>provided</scope>
    </dependency>
    <!-- Spring Security -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
</dependencies>
 
运行 HTML

2.2 配置数据库连接

在 application.properties 中配置数据库连接：

properties
复制
spring.datasource.url=jdbc:mysql://localhost:3306/warehouse_db?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
mybatis.mapper-locations=classpath:mapper/*.xml

2.3 创建实体类

创建与数据库表对应的实体类。

User.java
java
复制
package com.example.warehouse.model;
 
import lombok.Data;
 
@Data
public class User {
    private Integer id;
    private String username;
    private String password;
    private String role; // 1: 管理员，2: 仓库管理人员
}
Warehouse.java
java
复制
package com.example.warehouse.model;
 
import lombok.Data;
 
@Data
public class Warehouse {
    private String code;
    private String name;
}
MaterialCategory.java
java
复制
package com.example.warehouse.model;
 
import lombok.Data;
 
@Data
public class MaterialCategory {
    private String categoryCode;
    private String categoryName;
}
MaterialLedger.java
java
复制
package com.example.warehouse.model;
 
import lombok.Data;
import java.util.Date;
 
@Data
public class MaterialLedger {
    private String ledgerId;
    private String materialCode;
    private String materialName;
    private String specification;
    private String materialType;
    private String operationType;
    private Integer quantity;
    private String unit;
    private String warehouseCode;
    private Date operationTime;
}

2.4 创建 Mapper 接口

创建 MyBatis 的 Mapper 接口。

UserMapper.java
java
复制
package com.example.warehouse.mapper;
 
import com.example.warehouse.model.User;
import org.apache.ibatis.annotations.*;
 
@Mapper
public interface UserMapper {
    @Select("SELECT * FROM user WHERE username = #{username}")
    User findByUsername(String username);
}
WarehouseMapper.java
java
复制
package com.example.warehouse.mapper;
 
import com.example.warehouse.model.Warehouse;
import org.apache.ibatis.annotations.*;
 
import java.util.List;
 
@Mapper
public interface WarehouseMapper {
    @Select("SELECT * FROM warehouse")
    List<Warehouse> findAll();
 
    @Insert("INSERT INTO warehouse (code, name) VALUES (#{code}, #{name})")
    void insert(Warehouse warehouse);
 
    @Update("UPDATE warehouse SET name = #{name} WHERE code = #{code}")
    void update(Warehouse warehouse);
 
    @Delete("DELETE FROM warehouse WHERE code = #{code}")
    void delete(String code);
}
MaterialCategoryMapper.java
java
复制
package com.example.warehouse.mapper;
 
import com.example.warehouse.model.MaterialCategory;
import org.apache.ibatis.annotations.*;
 
import java.util.List;
 
@Mapper
public interface MaterialCategoryMapper {
    @Select("SELECT * FROM material_category")
    List<MaterialCategory> findAll();
 
    @Insert("INSERT INTO material_category (category_code, category_name) VALUES (#{categoryCode}, #{categoryName})")
    void insert(MaterialCategory category);
 
    @Update("UPDATE material_category SET category_name = #{categoryName} WHERE category_code = #{categoryCode}")
    void update(MaterialCategory category);
 
    @Delete("DELETE FROM material_category WHERE category_code = #{categoryCode}")
    void delete(String categoryCode);
}

2.5 创建 Controller

创建 RESTful API 控制器。

AuthController.java
java
复制
package com.example.warehouse.controller;
 
import com.example.warehouse.model.User;
import com.example.warehouse.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
 
@RestController
@RequestMapping("/api/auth")
public class AuthController {
    @Autowired
    private UserMapper userMapper;
 
    @PostMapping("/login")
    public String login(@RequestBody User user) {
        User dbUser = userMapper.findByUsername(user.getUsername());
        if (dbUser != null && dbUser.getPassword().equals(user.getPassword())) {
            return dbUser.getRole(); // 返回用户角色
        }
        return "登录失败";
    }
}
WarehouseController.java
java
复制
package com.example.warehouse.controller;
 
import com.example.warehouse.model.Warehouse;
import com.example.warehouse.mapper.WarehouseMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
 
import java.util.List;
 
@RestController
@RequestMapping("/api/warehouses")
public class WarehouseController {
    @Autowired
    private WarehouseMapper warehouseMapper;
 
    @GetMapping
    public List<Warehouse> findAll() {
        return warehouseMapper.findAll();
    }
 
    @PostMapping
    public void addWarehouse(@RequestBody Warehouse warehouse) {
        warehouseMapper.insert(warehouse);
    }
 
    @PutMapping("/{code}")
    public void updateWarehouse(@PathVariable String code, @RequestBody Warehouse warehouse) {
        warehouse.setCode(code);
        warehouseMapper.update(warehouse);
    }
 
    @DeleteMapping("/{code}")
    public void deleteWarehouse(@PathVariable String code) {
        warehouseMapper.delete(code);
    }
}

3. 前端实现（Vue 3 + VSCode）

使用 Vue 3 实现前端页面。

3.1 安装依赖

bash
复制
npm install vue-router axios element-plus

3.2 配置路由

在 src/router/index.js 中配置路由：

javascript
复制
import { createRouter, createWebHistory } from 'vue-router';
import Login from '@/views/Login.vue';
import AdminWarehouse from '@/views/admin/Warehouse.vue';
import AdminMaterialCategory from '@/views/admin/MaterialCategory.vue';
import ManagerInboundOutbound from '@/views/manager/InboundOutbound.vue';
import ManagerStockQuery from '@/views/manager/StockQuery.vue';
 
const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  {
    path: '/admin',
    children: [
      { path: 'warehouse', component: AdminWarehouse },
      { path: 'material-category', component: AdminMaterialCategory },
    ],
  },
  {
    path: '/manager',
    children: [
      { path: 'inbound-outbound', component: ManagerInboundOutbound },
      { path: 'stock-query', component: ManagerStockQuery },
    ],
  },
];
 
const router = createRouter({
  history: createWebHistory(),
  routes,
});
 
export default router;

3.3 创建登录页面

在 src/views/Login.vue 中创建登录页面：

vue
复制
<template>
  <el-form :model="loginForm" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="loginForm.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">登录</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    onSubmit() {
      axios.post('/api/auth/login', this.loginForm)
        .then(response => {
          const role = response.data;
          if (role === '1') {
            this.$router.push('/admin/warehouse');
          } else if (role === '2') {
            this.$router.push('/manager/inbound-outbound');
          } else {
            alert('登录失败');
          }
        })
        .catch(error => {
          alert('登录失败');
        });
    },
  },
};
</script>

3.4 创建管理员页面

在 src/views/admin/ 目录下创建管理员相关的功能页面。

Warehouse.vue
vue
复制
<template>
  <div>
    <h1>仓库管理</h1>
    <el-button type="primary" @click="addWarehouse">新增仓库</el-button>
    <el-table :data="warehouses">
      <el-table-column prop="code" label="仓库编码"></el-table-column>
      <el-table-column prop="name" label="仓库名称"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="editWarehouse(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteWarehouse(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      warehouses: [],
    };
  },
  methods: {
    fetchWarehouses() {
      axios.get('/api/warehouses')
        .then(response => {
          this.warehouses = response.data;
        })
        .catch(error => {
          alert('获取仓库列表失败');
        });
    },
    addWarehouse() {
      this.$router.push('/admin/warehouse/add');
    },
    editWarehouse(warehouse) {
      this.$router.push(`/admin/warehouse/edit/${warehouse.code}`);
    },
    deleteWarehouse(warehouse) {
      axios.delete(`/api/warehouses/${warehouse.code}`)
        .then(response => {
          this.fetchWarehouses();
        })
        .catch(error => {
          alert('删除仓库失败');
        });
    },
  },
  mounted() {
    this.fetchWarehouses();
  },
};
</script>
MaterialCategory.vue
vue
复制
<template>
  <div>
    <h1>物资类别管理</h1>
    <el-button type="primary" @click="addMaterialCategory">新增物资类别</el-button>
    <el-table :data="materialCategories">
      <el-table-column prop="categoryCode" label="物资分类编码"></el-table-column>
      <el-table-column prop="categoryName" label="物资分类名称"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="editMaterialCategory(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteMaterialCategory(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      materialCategories: [],
    };
  },
  methods: {
    fetchMaterialCategories() {
      axios.get('/api/material-categories')
        .then(response => {
          this.materialCategories = response.data;
        })
        .catch(error => {
          alert('获取物资类别列表失败');
        });
    },
    addMaterialCategory() {
      this.$router.push('/admin/material-category/add');
    },
    editMaterialCategory(category) {
      this.$router.push(`/admin/material-category/edit/${category.categoryCode}`);
    },
    deleteMaterialCategory(category) {
      axios.delete(`/api/material-categories/${category.categoryCode}`)
        .then(response => {
          this.fetchMaterialCategories();
        })
        .catch(error => {
          alert('删除物资类别失败');
        });
    },
  },
  mounted() {
    this.fetchMaterialCategories();
  },
};
</script>

3.5 创建仓库管理人员页面

在 src/views/manager/ 目录下创建仓库管理人员相关的功能页面。

InboundOutbound.vue
vue
复制
<template>
  <div>
    <h1>入库出库操作</h1>
    <!-- 入库出库操作表单 -->
  </div>
</template>
 
<script>
export default {
  // 入库出库操作逻辑
};
</script>
StockQuery.vue
vue
复制
<template>
  <div>
    <h1>统计查询</h1>
    <!-- 统计查询表单 -->
  </div>
</template>
 
<script>
export default {
  // 统计查询逻辑
};
</script>

4. 总结

通过以上步骤，我们完成了前后端分离的仓储管理系统。管理员和仓库管理人员登录后进入不同的路径，分别管理仓库、物资类别、入库出库操作和统计查询功能。数据库表设计符合需求文档要求，后端使用 Spring Boot 提供 API，前端使用 Vue 3 实现页面交互。

 
 
 
 
 
 

 

posted on   Adda...nina  阅读(1)  评论(0)  编辑  收藏  举报

相关博文：
·  大二上java期末的备考准备
·  寒假vue增删改查001(初始化项目及登陆页面)
·  使用AI训练，实现课前测试
·  SpringBoot + Vue + Element 前后端分离的管理后台项目简单入门
·  开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？

导航

统计

点击右上角即可分享
微信分享提示