团队项目2 “安全检查表”的增删改查

一、后端：
1、主类entity

package com.lianxi.safety6.entity;

import jakarta.persistence.*;

import java.util.Date;

@Entity
@Table(name="safetyinspection")
public class Safety {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;

    private String inspector;

    private String accompanying_personnel;

    private String inspection_location;

    private String inspection_type;

    private String issues_found;

    private String inspection_photos;

    private String assigned_to;

    private String assigned_by;

    private Date start_date;

    private Date completion_date;

    private String corrective_actions;

    private String corrective_photos;



    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getInspector() {
        return inspector;
    }

    public void setInspector(String inspector) {
        this.inspector = inspector;
    }

    public String getAccompanying_personnel() {
        return accompanying_personnel;
    }

    public void setAccompanying_personnel(String accompanying_personnel) {
        this.accompanying_personnel = accompanying_personnel;
    }

    public String getInspection_location() {
        return inspection_location;
    }

    public void setInspection_location(String inspection_location) {
        this.inspection_location = inspection_location;
    }

    public String getInspection_type() {
        return inspection_type;
    }

    public void setInspection_type(String inspection_type) {
        this.inspection_type = inspection_type;
    }

    public String getIssues_found() {
        return issues_found;
    }

    public void setIssues_found(String issues_found) {
        this.issues_found = issues_found;
    }

    public String getInspection_photos() {
        return inspection_photos;
    }

    public void setInspection_photos(String inspection_photos) {
        this.inspection_photos = inspection_photos;
    }

    public String getAssigned_to() {
        return assigned_to;
    }

    public void setAssigned_to(String assigned_to) {
        this.assigned_to = assigned_to;
    }

    public String getAssigned_by() {
        return assigned_by;
    }

    public void setAssigned_by(String assigned_by) {
        this.assigned_by = assigned_by;
    }

    public Date getStart_date() {
        return start_date;
    }

    public void setStart_date(Date start_date) {
        this.start_date = start_date;
    }

    public Date getCompletion_date() {
        return completion_date;
    }

    public void setCompletion_date(Date completion_date) {
        this.completion_date = completion_date;
    }

    public String getCorrective_actions() {
        return corrective_actions;
    }

    public void setCorrective_actions(String corrective_actions) {
        this.corrective_actions = corrective_actions;
    }

    public String getCorrective_photos() {
        return corrective_photos;
    }

    public void setCorrective_photos(String corrective_photos) {
        this.corrective_photos = corrective_photos;
    }
}

2、controller层

package com.lianxi.safety6.controller;

import com.lianxi.safety6.entity.Safety;
import com.lianxi.safety6.repository.SafetyRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/safetyinspection")
@CrossOrigin
public class SafetyController {

    @Autowired
    private SafetyRepository repo;

    // 新增安全检查记录
    @PostMapping
    public void save(@RequestBody Safety safety) {
        repo.save(safety);
    }

    // 获取所有安全检查记录
    @GetMapping
    public List<Safety> safetyList() {
        return repo.findAll();
    }

    // 根据ID删除安全检查记录
    @DeleteMapping("/{id}")
    void delete(@PathVariable("id") int id){ // 显式指定参数名（可选，但更健壮）
        repo.deleteById(id);
    }
   /* @DeleteMapping("/{id}")
    public void delete(@PathVariable int id) {
        repo.deleteById(id);
    }*/

    // 根据ID获取单条安全检查记录
    @GetMapping("/{id}")
    public Safety getById(@PathVariable int id) {
        return repo.findById(id).orElse(null);
    }

    // 更新安全检查记录
    @PutMapping("/{id}")
    public void update(@PathVariable("id") int id, @RequestBody Safety updatedSafety) {
        // 先根据id查找要更新的实体
        Safety existingSafety = repo.findById(id).orElseThrow(() -> new IllegalArgumentException("Safety record with id " + id + " not found."));
        // 可以根据需要选择性地更新字段，这里假设更新所有字段
        existingSafety.setInspector(updatedSafety.getInspector());
        existingSafety.setAccompanying_personnel(updatedSafety.getAccompanying_personnel());
        existingSafety.setInspection_location(updatedSafety.getInspection_location());
        existingSafety.setInspection_type(updatedSafety.getInspection_type());
        existingSafety.setIssues_found(updatedSafety.getIssues_found());
        existingSafety.setInspection_photos(updatedSafety.getInspection_photos());
        existingSafety.setAssigned_to(updatedSafety.getAssigned_to());
        existingSafety.setAssigned_by(updatedSafety.getAssigned_by());
        existingSafety.setStart_date(updatedSafety.getStart_date());
        existingSafety.setCompletion_date(updatedSafety.getCompletion_date());
        existingSafety.setCorrective_actions(updatedSafety.getCorrective_actions());
        existingSafety.setCorrective_photos(updatedSafety.getCorrective_photos());

        // 保存更新后的实体
        repo.save(existingSafety);
    }
   /* @PutMapping
    public void update(@RequestBody Safety safety) {
        repo.save(safety);
    }*/
}

3、repository层

package com.lianxi.safety6.repository;

import com.lianxi.safety6.entity.Safety;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface SafetyRepository extends JpaRepository<Safety, Integer> {
    // 基本CRUD方法已由JpaRepository提供，包括：
    // save(), findById(), findAll(), deleteById()等

    // 如果需要自定义查询方法，可以在这里添加，例如：
    // List<Safety> findByRegion(String region);
    // List<Safety> findByNameContaining(String name);
}

4、application.properties（连接数据库）

spring.application.name=Safety6
spring.datasource.url=jdbc:mysql://localhost:3306/data?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=Lhw123456
spring.jpa.hibernate.ddl-auto=update
server.port=9090

5、后端目录

二、前端：
创建一个vue项目
1、HomeView.vue

<template>
  <div>
    <el-button @click="add" type="primary">
      添加数据
    </el-button>
  </div>

  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
  >
    <span>
      <el-form
          :label-position="labelPosition"
          label-width="150px"
          :model="form"
          style="max-width: 600px"
      >
        <!-- 新增ID字段（编辑时显示，新增时隐藏） -->
        <el-form-item v-if="form.id" label="ID">
          <el-input v-model="form.id" disabled />
        </el-form-item>

        <el-form-item label="检查人员">
          <el-input v-model="form.inspector" />
        </el-form-item>
        <el-form-item label="陪同人员">
          <el-input v-model="form.accompanying_personnel" />
        </el-form-item>
        <el-form-item label="检查地点">
          <el-input v-model="form.inspection_location" />
        </el-form-item>
        <el-form-item label="检查类型">
          <el-input v-model="form.inspection_type" />
        </el-form-item>
        <el-form-item label="发现的问题">
          <el-input v-model="form.issues_found" />
        </el-form-item>
        <el-form-item label="检查照片">
          <el-input v-model="form.inspection_photos" />
        </el-form-item>
        <el-form-item label="分配给">
          <el-input v-model="form.assigned_to" />
        </el-form-item>
        <el-form-item label="分配人">
          <el-input v-model="form.assigned_by" />
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker
              v-model="form.start_date"
              type="date"
              placeholder="选择开始日期"
          />
        </el-form-item>
        <el-form-item label="完成日期">
          <el-date-picker
              v-model="form.completion_date"
              type="date"
              placeholder="选择完成日期"
          />
        </el-form-item>
        <el-form-item label="纠正措施">
          <el-input v-model="form.corrective_actions" />
        </el-form-item>
        <el-form-item label="纠正照片">
          <el-input v-model="form.corrective_photos" />
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="save">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-table :data="tableData" stripe style="width: 100%">
    <!-- 新增ID列 -->
    <el-table-column prop="id" label="ID" width="60" />

    <el-table-column prop="inspector" label="检查人员"/>
    <el-table-column prop="accompanying_personnel" label="陪同人员"/>
    <el-table-column prop="inspection_location" label="检查地点"/>
    <el-table-column prop="inspection_type" label="检查类型"/>
    <el-table-column prop="issues_found" label="发现的问题"/>
    <el-table-column prop="inspection_photos" label="检查照片"/>
    <el-table-column prop="assigned_to" label="分配给"/>
    <el-table-column prop="assigned_by" label="分配人"/>
    <el-table-column prop="start_date" label="开始日期" width="120"/>
    <el-table-column prop="completion_date" label="完成日期" width="120"/>
    <el-table-column prop="corrective_actions" label="纠正措施"/>
    <el-table-column prop="corrective_photos" label="纠正照片"/>
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
        <el-popconfirm title="确认删除?" @confirm="handleDelete(scope.row.id)">
          <template #reference>
            <el-button link type="primary" size="small">删除数据</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// @ is an alias to /src
import request from '@/utils/request'

export default {
  name: 'SafetyInspectionView',
  data() {
    return {
      form: {
        id: null, // 用于存储ID（编辑时显示，新增时为null）
        inspector: '',
        accompanying_personnel: '',
        inspection_location: '',
        inspection_type: '',
        issues_found: '',
        inspection_photos: '',
        assigned_to: '',
        assigned_by: '',
        start_date: null,
        completion_date: null,
        corrective_actions: '',
        corrective_photos: ''
      },
      dialogVisible: false,
      tableData: [],
      labelPosition: 'right'
    }
  },
  created() {
    this.load()
  },
  methods: {
    add() {
      // 新增时清空ID
      this.form = {
        id: null,
        inspector: '',
        accompanying_personnel: '',
        inspection_location: '',
        inspection_type: '',
        issues_found: '',
        inspection_photos: '',
        assigned_to: '',
        assigned_by: '',
        start_date: null,
        completion_date: null,
        corrective_actions: '',
        corrective_photos: ''
      };
      this.dialogVisible = true;
    },
    load() {
      request.get("http://localhost:9090/safetyinspection").then(res => {
        this.tableData = res;
      });
    },
    save() {
      // 自动判断新增或更新（根据是否存在ID）
      const api = this.form.id
          ? `http://localhost:9090/safetyinspection/${this.form.id}`
          : "http://localhost:9090/safetyinspection";

      request[this.form.id ? 'put' : 'post'](api, this.form).then(() => {
        this.load();
        this.dialogVisible = false;
      });
    },
    handleEdit(row) {
      // 深拷贝对象并保留ID
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    handleDelete(id) {
      request.delete(`http://localhost:9090/safetyinspection/${id}`).then(() => {
        this.load();
      });
    },
    handleClose(done) {
      done();
    }
  }
}
</script>

2、request.js

import axios from 'axios'

const request = axios.create({
    baseURL: 'http://localhost:8081', // 后端请求端口设置，根据自己的端口进行设置
    timeout: 4000 // 超时时间
})

// request 请求拦截
// 可以在请求发送前对请求做一些处理
// eg.统一加上token，对请求参数统一加密
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 响应拦截
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            // 如果是json字符串，将json字符串转换为json对象
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // 控制台打印错误信息，用于调试
        return Promise.reject(error)
    }
)


export default request

3、router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4、store/jndex.js

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

5、前端目录：

三、成果：