=人类驯服人工智能实录
以下是基于 Spring Boot 和 Vue 的详细代码实现,涵盖后端 API 和前端界面设计。我们将分模块实现需求,并确保代码简洁、功能完整。
1. 后端 Spring Boot 实现
1.1 项目结构
src
├── main
│ ├── java
│ │ └── com
│ │ └── warehouse
│ │ ├── controller
│ │ ├── service
│ │ ├── repository
│ │ ├── model
│ │ └── WarehouseApplication.java
│ └── resources
│ ├── application.properties
│ └── data.sql
└── test
1.2 数据库配置 (application.properties)
spring.datasource.url=jdbc:mysql://localhost:3306/warehouse_db
spring.datasource.username=root
spring.datasource.password=password
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
1.3 实体类 (model 包)
仓库表实体 (Warehouse.java)
package com.warehouse.model;
import jakarta.persistence.*;
import java.util.Date;
@Entity
public class Warehouse {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long WarehouseID;
private String WarehouseName;
private String Location;
private Integer Capacity;
private Date CreatedDate;
// Getters and Setters
}
物资类别表实体 (MaterialCategory.java)
package com.warehouse.model;
import jakarta.persistence.*;
@Entity
public class MaterialCategory {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long CategoryID;
private String CategoryName;
private String MaterialCode;
private String MaterialName;
private String Specification;
private String Material;
// Getters and Setters
}
物资台账明细表实体 (MaterialLedger.java)
package com.warehouse.model;
import jakarta.persistence.*;
import java.util.Date;
@Entity
public class MaterialLedger {
@Id
private String LedgerID;
private String MaterialCode;
private String MaterialName;
private String Specification;
private String MaterialType;
private String Supplier;
private String Brand;
private Integer Quantity;
private String Unit;
private Long WarehouseID;
private String OperationType;
private Date OperationDate;
// Getters and Setters
}
1.4 仓库管理模块 (controller 和 service 包)
仓库服务接口 (WarehouseService.java)
package com.warehouse.service;
import com.warehouse.model.Warehouse;
import java.util.List;
public interface WarehouseService {
Warehouse addWarehouse(Warehouse warehouse);
void deleteWarehouse(Long warehouseID);
Warehouse updateWarehouse(Long warehouseID, Warehouse warehouse);
List<Warehouse> getAllWarehouses();
}
仓库服务实现 (WarehouseServiceImpl.java)
package com.warehouse.service;
import com.warehouse.model.Warehouse;
import com.warehouse.repository.WarehouseRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class WarehouseServiceImpl implements WarehouseService {
@Autowired
private WarehouseRepository warehouseRepository;
@Override
public Warehouse addWarehouse(Warehouse warehouse) {
return warehouseRepository.save(warehouse);
}
@Override
public void deleteWarehouse(Long warehouseID) {
warehouseRepository.deleteById(warehouseID);
}
@Override
public Warehouse updateWarehouse(Long warehouseID, Warehouse warehouse) {
warehouse.setWarehouseID(warehouseID);
return warehouseRepository.save(warehouse);
}
@Override
public List<Warehouse> getAllWarehouses() {
return warehouseRepository.findAll();
}
}
仓库控制器 (WarehouseController.java)
package com.warehouse.controller;
import com.warehouse.model.Warehouse;
import com.warehouse.service.WarehouseService;
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 WarehouseService warehouseService;
@PostMapping
public Warehouse addWarehouse(@RequestBody Warehouse warehouse) {
return warehouseService.addWarehouse(warehouse);
}
@DeleteMapping("/{id}")
public void deleteWarehouse(@PathVariable Long id) {
warehouseService.deleteWarehouse(id);
}
@PutMapping("/{id}")
public Warehouse updateWarehouse(@PathVariable Long id, @RequestBody Warehouse warehouse) {
return warehouseService.updateWarehouse(id, warehouse);
}
@GetMapping
public List<Warehouse> getAllWarehouses() {
return warehouseService.getAllWarehouses();
}
}
2. 前端 Vue 实现
2.1 项目结构
src
├── assets
├── components
│ ├── WarehouseList.vue
│ ├── WarehouseForm.vue
├── views
│ ├── WarehouseView.vue
├── router
│ └── index.js
├── App.vue
└── main.js
2.2 仓库管理页面 (WarehouseView.vue)
<template>
<div>
<h1>仓库管理</h1>
<WarehouseForm @add-warehouse="addWarehouse" />
<WarehouseList :warehouses="warehouses" @delete-warehouse="deleteWarehouse" />
</div>
</template>
<script>
import WarehouseForm from '@/components/WarehouseForm.vue';
import WarehouseList from '@/components/WarehouseList.vue';
import axios from 'axios';
export default {
components: {
WarehouseForm,
WarehouseList,
},
data() {
return {
warehouses: [],
};
},
created() {
this.fetchWarehouses();
},
methods: {
async fetchWarehouses() {
const response = await axios.get('/api/warehouses');
this.warehouses = response.data;
},
async addWarehouse(warehouse) {
await axios.post('/api/warehouses', warehouse);
this.fetchWarehouses();
},
async deleteWarehouse(id) {
await axios.delete(`/api/warehouses/${id}`);
this.fetchWarehouses();
},
},
};
</script>
2.3 仓库表单组件 (WarehouseForm.vue)
<template>
<form @submit.prevent="submitForm">
<input v-model="warehouse.WarehouseName" placeholder="仓库名称" required />
<input v-model="warehouse.Location" placeholder="仓库位置" required />
<input v-model="warehouse.Capacity" placeholder="仓库容量" type="number" required />
<button type="submit">新增仓库</button>
</form>
</template>
<script>
export default {
data() {
return {
warehouse: {
WarehouseName: '',
Location: '',
Capacity: null,
},
};
},
methods: {
submitForm() {
this.$emit('add-warehouse', this.warehouse);
this.warehouse = { WarehouseName: '', Location: '', Capacity: null };
},
},
};
</script>
2.4 仓库列表组件 (WarehouseList.vue)
<template>
<ul>
<li v-for="warehouse in warehouses" :key="warehouse.WarehouseID">
{{ warehouse.WarehouseName }} - {{ warehouse.Location }}
<button @click="deleteWarehouse(warehouse.WarehouseID)">删除</button>
</li>
</ul>
</template>
<script>
export default {
props: ['warehouses'],
methods: {
deleteWarehouse(id) {
this.$emit('delete-warehouse', id);
},
},
};
</script>
以下是 物资管理模块 的详细代码实现,基于 Spring Boot 和 Vue。我们将按照类似仓库管理模块的方式扩展物资管理功能。
1. 后端 Spring Boot 实现
1.1 实体类 (model 包)
物资类别表实体 (MaterialCategory.java)
package com.warehouse.model;
import jakarta.persistence.*;
@Entity
public class MaterialCategory {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long CategoryID;
private String CategoryName;
private String MaterialCode;
private String MaterialName;
private String Specification;
private String Material;
// Getters and Setters
}
1.2 物资管理模块 (controller 和 service 包)
物资服务接口 (MaterialCategoryService.java)
package com.warehouse.service;
import com.warehouse.model.MaterialCategory;
import java.util.List;
public interface MaterialCategoryService {
MaterialCategory addMaterialCategory(MaterialCategory materialCategory);
void deleteMaterialCategory(Long categoryID);
MaterialCategory updateMaterialCategory(Long categoryID, MaterialCategory materialCategory);
List<MaterialCategory> getAllMaterialCategories();
}
物资服务实现 (MaterialCategoryServiceImpl.java)
package com.warehouse.service;
import com.warehouse.model.MaterialCategory;
import com.warehouse.repository.MaterialCategoryRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class MaterialCategoryServiceImpl implements MaterialCategoryService {
@Autowired
private MaterialCategoryRepository materialCategoryRepository;
@Override
public MaterialCategory addMaterialCategory(MaterialCategory materialCategory) {
return materialCategoryRepository.save(materialCategory);
}
@Override
public void deleteMaterialCategory(Long categoryID) {
materialCategoryRepository.deleteById(categoryID);
}
@Override
public MaterialCategory updateMaterialCategory(Long categoryID, MaterialCategory materialCategory) {
materialCategory.setCategoryID(categoryID);
return materialCategoryRepository.save(materialCategory);
}
@Override
public List<MaterialCategory> getAllMaterialCategories() {
return materialCategoryRepository.findAll();
}
}
物资控制器 (MaterialCategoryController.java)
package com.warehouse.controller;
import com.warehouse.model.MaterialCategory;
import com.warehouse.service.MaterialCategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api/material-categories")
public class MaterialCategoryController {
@Autowired
private MaterialCategoryService materialCategoryService;
@PostMapping
public MaterialCategory addMaterialCategory(@RequestBody MaterialCategory materialCategory) {
return materialCategoryService.addMaterialCategory(materialCategory);
}
@DeleteMapping("/{id}")
public void deleteMaterialCategory(@PathVariable Long id) {
materialCategoryService.deleteMaterialCategory(id);
}
@PutMapping("/{id}")
public MaterialCategory updateMaterialCategory(@PathVariable Long id, @RequestBody MaterialCategory materialCategory) {
return materialCategoryService.updateMaterialCategory(id, materialCategory);
}
@GetMapping
public List<MaterialCategory> getAllMaterialCategories() {
return materialCategoryService.getAllMaterialCategories();
}
}
2. 前端 Vue 实现
2.1 项目结构
src
├── assets
├── components
│ ├── MaterialCategoryList.vue
│ ├── MaterialCategoryForm.vue
├── views
│ ├── MaterialCategoryView.vue
├── router
│ └── index.js
├── App.vue
└── main.js
2.2 物资管理页面 (MaterialCategoryView.vue)
<template>
<div>
<h1>物资管理</h1>
<MaterialCategoryForm @add-material-category="addMaterialCategory" />
<MaterialCategoryList :materialCategories="materialCategories" @delete-material-category="deleteMaterialCategory" />
</div>
</template>
<script>
import MaterialCategoryForm from '@/components/MaterialCategoryForm.vue';
import MaterialCategoryList from '@/components/MaterialCategoryList.vue';
import axios from 'axios';
export default {
components: {
MaterialCategoryForm,
MaterialCategoryList,
},
data() {
return {
materialCategories: [],
};
},
created() {
this.fetchMaterialCategories();
},
methods: {
async fetchMaterialCategories() {
const response = await axios.get('/api/material-categories');
this.materialCategories = response.data;
},
async addMaterialCategory(materialCategory) {
await axios.post('/api/material-categories', materialCategory);
this.fetchMaterialCategories();
},
async deleteMaterialCategory(id) {
await axios.delete(`/api/material-categories/${id}`);
this.fetchMaterialCategories();
},
},
};
</script>
2.3 物资表单组件 (MaterialCategoryForm.vue)
<template>
<form @submit.prevent="submitForm">
<input v-model="materialCategory.CategoryName" placeholder="类别名称" required />
<input v-model="materialCategory.MaterialCode" placeholder="物资编码" required />
<input v-model="materialCategory.MaterialName" placeholder="物资名称" required />
<input v-model="materialCategory.Specification" placeholder="规格" required />
<input v-model="materialCategory.Material" placeholder="材质" required />
<button type="submit">新增物资类别</button>
</form>
</template>
<script>
export default {
data() {
return {
materialCategory: {
CategoryName: '',
MaterialCode: '',
MaterialName: '',
Specification: '',
Material: '',
},
};
},
methods: {
submitForm() {
this.$emit('add-material-category', this.materialCategory);
this.materialCategory = {
CategoryName: '',
MaterialCode: '',
MaterialName: '',
Specification: '',
Material: '',
};
},
},
};
</script>
2.4 物资列表组件 (MaterialCategoryList.vue)
<template>
<ul>
<li v-for="category in materialCategories" :key="category.CategoryID">
{{ category.CategoryName }} - {{ category.MaterialCode }} - {{ category.MaterialName }}
<button @click="deleteMaterialCategory(category.CategoryID)">删除</button>
</li>
</ul>
</template>
<script>
export default {
props: ['materialCategories'],
methods: {
deleteMaterialCategory(id) {
this.$emit('delete-material-category', id);
},
},
};
</script>
3. 路由配置 (router/index.js)
import Vue from 'vue';
import Router from 'vue-router';
import MaterialCategoryView from '@/views/MaterialCategoryView.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/material-categories',
name: 'MaterialCategoryView',
component: MaterialCategoryView,
},
],
});
以下是 入库/出库模块 的详细代码实现,基于 Spring Boot 和 Vue。我们将按照类似仓库管理和物资管理模块的方式扩展入库/出库功能。
1. 后端 Spring Boot 实现
1.1 实体类 (model 包)
物资台账明细表实体 (MaterialLedger.java)
package com.warehouse.model;
import jakarta.persistence.*;
import java.util.Date;
@Entity
public class MaterialLedger {
@Id
private String LedgerID;
private String MaterialCode;
private String MaterialName;
private String Specification;
private String MaterialType;
private String Supplier;
private String Brand;
private Integer Quantity;
private String Unit;
private Long WarehouseID;
private String OperationType; // 入库或出库
private Date OperationDate;
// Getters and Setters
}
1.2 入库/出库模块 (controller 和 service 包)
台账服务接口 (MaterialLedgerService.java)
package com.warehouse.service;
import com.warehouse.model.MaterialLedger;
import java.util.List;
public interface MaterialLedgerService {
MaterialLedger addMaterialLedger(MaterialLedger materialLedger);
List<MaterialLedger> getAllMaterialLedgers();
List<MaterialLedger> getMaterialLedgersByMaterialCode(String materialCode);
List<MaterialLedger> getMaterialLedgersByWarehouseID(Long warehouseID);
}
台账服务实现 (MaterialLedgerServiceImpl.java)
package com.warehouse.service;
import com.warehouse.model.MaterialLedger;
import com.warehouse.repository.MaterialLedgerRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class MaterialLedgerServiceImpl implements MaterialLedgerService {
@Autowired
private MaterialLedgerRepository materialLedgerRepository;
@Override
public MaterialLedger addMaterialLedger(MaterialLedger materialLedger) {
return materialLedgerRepository.save(materialLedger);
}
@Override
public List<MaterialLedger> getAllMaterialLedgers() {
return materialLedgerRepository.findAll();
}
@Override
public List<MaterialLedger> getMaterialLedgersByMaterialCode(String materialCode) {
return materialLedgerRepository.findByMaterialCode(materialCode);
}
@Override
public List<MaterialLedger> getMaterialLedgersByWarehouseID(Long warehouseID) {
return materialLedgerRepository.findByWarehouseID(warehouseID);
}
}
台账控制器 (MaterialLedgerController.java)
package com.warehouse.controller;
import com.warehouse.model.MaterialLedger;
import com.warehouse.service.MaterialLedgerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api/material-ledgers")
public class MaterialLedgerController {
@Autowired
private MaterialLedgerService materialLedgerService;
@PostMapping
public MaterialLedger addMaterialLedger(@RequestBody MaterialLedger materialLedger) {
return materialLedgerService.addMaterialLedger(materialLedger);
}
@GetMapping
public List<MaterialLedger> getAllMaterialLedgers() {
return materialLedgerService.getAllMaterialLedgers();
}
@GetMapping("/material-code/{materialCode}")
public List<MaterialLedger> getMaterialLedgersByMaterialCode(@PathVariable String materialCode) {
return materialLedgerService.getMaterialLedgersByMaterialCode(materialCode);
}
@GetMapping("/warehouse/{warehouseID}")
public List<MaterialLedger> getMaterialLedgersByWarehouseID(@PathVariable Long warehouseID) {
return materialLedgerService.getMaterialLedgersByWarehouseID(warehouseID);
}
}
2. 前端 Vue 实现
2.1 项目结构
src
├── assets
├── components
│ ├── MaterialLedgerList.vue
│ ├── MaterialLedgerForm.vue
├── views
│ ├── MaterialLedgerView.vue
├── router
│ └── index.js
├── App.vue
└── main.js
2.2 入库/出库管理页面 (MaterialLedgerView.vue)
<template>
<div>
<h1>入库/出库管理</h1>
<MaterialLedgerForm @add-material-ledger="addMaterialLedger" />
<MaterialLedgerList :materialLedgers="materialLedgers" />
</div>
</template>
<script>
import MaterialLedgerForm from '@/components/MaterialLedgerForm.vue';
import MaterialLedgerList from '@/components/MaterialLedgerList.vue';
import axios from 'axios';
export default {
components: {
MaterialLedgerForm,
MaterialLedgerList,
},
data() {
return {
materialLedgers: [],
};
},
created() {
this.fetchMaterialLedgers();
},
methods: {
async fetchMaterialLedgers() {
const response = await axios.get('/api/material-ledgers');
this.materialLedgers = response.data;
},
async addMaterialLedger(materialLedger) {
await axios.post('/api/material-ledgers', materialLedger);
this.fetchMaterialLedgers();
},
},
};
</script>
2.3 台账表单组件 (MaterialLedgerForm.vue)
<template>
<form @submit.prevent="submitForm">
<input v-model="materialLedger.MaterialCode" placeholder="物资编码" required />
<input v-model="materialLedger.MaterialName" placeholder="物资名称" required />
<input v-model="materialLedger.Specification" placeholder="规格" required />
<input v-model="materialLedger.MaterialType" placeholder="物资分类" required />
<input v-model="materialLedger.Supplier" placeholder="供应商" required />
<input v-model="materialLedger.Brand" placeholder="品牌" required />
<input v-model="materialLedger.Quantity" placeholder="数量" type="number" required />
<input v-model="materialLedger.Unit" placeholder="计量单位" required />
<input v-model="materialLedger.WarehouseID" placeholder="仓库编号" type="number" required />
<select v-model="materialLedger.OperationType" required>
<option value="入库">入库</option>
<option value="出库">出库</option>
</select>
<input v-model="materialLedger.OperationDate" type="date" required />
<button type="submit">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
materialLedger: {
MaterialCode: '',
MaterialName: '',
Specification: '',
MaterialType: '',
Supplier: '',
Brand: '',
Quantity: 0,
Unit: '',
WarehouseID: null,
OperationType: '入库',
OperationDate: new Date().toISOString().split('T')[0],
},
};
},
methods: {
submitForm() {
this.$emit('add-material-ledger', this.materialLedger);
this.materialLedger = {
MaterialCode: '',
MaterialName: '',
Specification: '',
MaterialType: '',
Supplier: '',
Brand: '',
Quantity: 0,
Unit: '',
WarehouseID: null,
OperationType: '入库',
OperationDate: new Date().toISOString().split('T')[0],
};
},
},
};
</script>
2.4 台账列表组件 (MaterialLedgerList.vue)
<template>
<ul>
<li v-for="ledger in materialLedgers" :key="ledger.LedgerID">
{{ ledger.MaterialCode }} - {{ ledger.MaterialName }} - {{ ledger.Quantity }} {{ ledger.Unit }} - {{ ledger.OperationType }}
</li>
</ul>
</template>
<script>
export default {
props: ['materialLedgers'],
};
</script>
3. 路由配置 (router/index.js)
import Vue from 'vue';
import Router from 'vue-router';
import MaterialLedgerView from '@/views/MaterialLedgerView.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/material-ledgers',
name: 'MaterialLedgerView',
component: MaterialLedgerView,
},
],
});

浙公网安备 33010602011771号