记录---训练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)
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)
CREATE TABLE warehouse (
code VARCHAR(20) PRIMARY KEY COMMENT '仓库编码',
name VARCHAR(100) NOT NULL COMMENT '仓库名称'
) COMMENT '仓库表';1.3 物资类别表 (material_category)
CREATE TABLE material_category (
category_code VARCHAR(20) PRIMARY KEY COMMENT '物资分类编码',
category_name VARCHAR(100) NOT NULL COMMENT '物资分类名称'
) COMMENT '物资类别表';1.4 物资台账明细表 (material_ledger)
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 中添加以下依赖：
<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>2.2 配置数据库连接
在 application.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/*.xml2.3 创建实体类
创建与数据库表对应的实体类。
User.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
package com.example.warehouse.model;
import lombok.Data;
@Data
public class Warehouse {
private String code;
private String name;
}MaterialCategory.java
package com.example.warehouse.model;
import lombok.Data;
@Data
public class MaterialCategory {
private String categoryCode;
private String categoryName;
}MaterialLedger.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
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
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
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
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
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 安装依赖
npm install vue-router axios element-plus3.2 配置路由
在 src/router/index.js 中配置路由：
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 中创建登录页面：
<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
<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
<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
<template>
<div>
<h1>入库出库操作</h1>
<!-- 入库出库操作表单 -->
</div>
</template>
<script>
export default {
// 入库出库操作逻辑
};
</script>StockQuery.vue
<template>
<div>
<h1>统计查询</h1>
<!-- 统计查询表单 -->
</div>
</template>
<script>
export default {
// 统计查询逻辑
};
</script>4. 总结
通过以上步骤，我们完成了前后端分离的仓储管理系统。管理员和仓库管理人员登录后进入不同的路径，分别管理仓库、物资类别、入库出库操作和统计查询功能。数据库表设计符合需求文档要求，后端使用 Spring Boot 提供 API，前端使用 Vue 3 实现页面交互。
posted on 2025-03-04 23:03 Adda...nina 阅读(2) 评论(0) 收藏 举报
浙公网安备 33010602011771号