Xây dựng hệ thống quản lý sửa chữa cộng đồng sử dụng Vue và Spring Boot

Giới thiệu hệ thống

Trong thời đại công nghệ phát triển, việc quản lý sửa chữa theo phương thức truyền thống gặp nhiều hạn chế về thời gian và độ chính xác. Hệ thống quản lý điện tử ra đời nhằm giải quyết các vấn đề này, mang lại hiệu quả cao và tiết kiệm chi phí cho người dùng.

Công cụ và công nghệ sử dụng

  • IDE phát triển: IntelliJ IDEA, VSCode
  • Quản lý cơ sở dữ liệu: Navicat
  • Framework: Spring Boot, MyBatis, Vue.js
  • Kiến trúc: B/S với Maven quản lý dự án
  • Công nghệ frontend: Vue.js + ElementUI
  • Backend: Spring Boot + MySQL
  • JDK: Phiên bản 1.8 trở lên

Giao diện và tính năng

Hệ thống được thiết kế với giao diện trực quan, dễ sử dụng cùng đầy đủ các tính năng cần thiết cho quản lý sửa chữa cộng đồng.

Kiến trúc kỹ thuật

Spring Boot

Spring Boot cung cấp nền tảng phát triển backend hiệu quả, hỗ trợ xây dựng hệ thống theo kiến trúc B/S với cấu hình đơn giản và triển khai nhanh chóng.

Vue.js

Vue.js là framework JavaScript tiến bộ, tập trung vào xây dựng giao diện người dùng. Với kiến trúc component và hệ thống reactive, Vue.js giúp phát triển frontend linh hoạt và bảo trì dễ dàng.

MySQL

MySQL là hệ quản trị cơ sở dữ liệu quan hệ, đảm bảo lưu trữ và truy xuất dữ liệu ổn định cho hệ thống.

Thiết kế cơ sở dữ liệu

Hệ thống sử dụng mô hình quan hệ với các bảng chính: người dùng, yêu cầu sửa chữa, thiết bị, và lịch sử sửa chữa. Quan hệ giữa các bảng được thiết kế để đảm bảo tính toàn vẹn dữ liệu.

Triển khai hệ thống

Backend API

@RestController
@RequestMapping("/api/repairs")
public class RepairController {
    
    @Autowired
    private RepairService repairService;
    
    @PostMapping
    public ResponseEntity<RepairOrder> createRepair(@RequestBody RepairRequest request) {
        RepairOrder order = repairService.createRepairOrder(request);
        return ResponseEntity.ok(order);
    }
    
    @GetMapping("/{userId}")
    public ResponseEntity<List<RepairOrder>> getUserRepairs(@PathVariable Long userId) {
        List<RepairOrder> orders = repairService.getUserRepairHistory(userId);
        return ResponseEntity.ok(orders);
    }
}

Frontend Component

<template>
  <div class="repair-management">
    <el-form :model="repairForm" :rules="formRules" ref="repairFormRef">
      <el-form-item label="Mô tả sự cố" prop="description">
        <el-input v-model="repairForm.description" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="Thiết bị" prop="deviceId">
        <el-select v-model="repairForm.deviceId" placeholder="Chọn thiết bị">
          <el-option 
            v-for="device in userDevices" 
            :key="device.id" 
            :label="device.name" 
            :value="device.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="submitRepairRequest">Gửi yêu cầu</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      repairForm: {
        description: '',
        deviceId: null
      },
      userDevices: [],
      formRules: {
        description: [
          { required: true, message: 'Vui lòng mô tả sự cố', trigger: 'blur' }
        ],
        deviceId: [
          { required: true, message: 'Vui lòng chọn thiết bị', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    async submitRepairRequest() {
      try {
        await this.$refs.repairFormRef.validate();
        const response = await this.$axios.post('/api/repairs', this.repairForm);
        this.$message.success('Gửi yêu cầu thành công');
        this.resetForm();
      } catch (error) {
        this.$message.error('Gửi yêu cầu thất bại');
      }
    },
    resetForm() {
      this.repairForm = {
        description: '',
        deviceId: null
      };
    }
  }
}
</script>

Kiểm thử hệ thống

Quá trình kiểm thử được thực hiện toàn diện trên các module chức năng, giao diện người dùng, và hiệu năng hệ thống. Các lỗi phát hiện được ghi nhận và khắc phục kịp thời, đảm bảo chất lượng sản phẩm cuối cùng.

Thuật toán đề xuất

Ma trận tương tác người dùng

public class UserRecommendationEngine {
    private Map<String, Map<String, Integer>> userInteractions;
    private Map<String, List<String>> itemUserMap;
    private Map<String, Integer> userMapping;
    private long[][] interactionMatrix;
    
    public UserRecommendationEngine(Map<String, Map<String, Integer>> interactions) {
        this.userInteractions = interactions;
        initializeDataStructures();
        buildInteractionMatrix();
    }
    
    private void initializeDataStructures() {
        this.itemUserMap = new HashMap<>();
        this.userMapping = new HashMap<>();
        int index = 0;
        
        for (String user : userInteractions.keySet()) {
            Map<String, Integer> items = userInteractions.get(user);
            for (String item : items.keySet()) {
                itemUserMap.computeIfAbsent(item, k -> new ArrayList<>()).add(user);
            }
            userMapping.put(user, index++);
        }
    }
    
    private void buildInteractionMatrix() {
        int userCount = userInteractions.size();
        interactionMatrix = new long[userCount][userCount];
        
        for (String item : itemUserMap.keySet()) {
            List<String> users = itemUserMap.get(item);
            for (String user1 : users) {
                for (String user2 : users) {
                    if (!user1.equals(user2)) {
                        int idx1 = userMapping.get(user1);
                        int idx2 = userMapping.get(user2);
                        interactionMatrix[idx1][idx2]++;
                    }
                }
            }
        }
    }
    
    public double computeUserSimilarity(String user1, String user2) {
        Integer idx1 = userMapping.get(user1);
        Integer idx2 = userMapping.get(user2);
        if (idx1 == null || idx2 == null) return 0.0;
        
        long commonInteractions = interactionMatrix[idx1][idx2];
        int user1Count = userInteractions.get(user1).size();
        int user2Count = userInteractions.get(user2).size();
        
        return commonInteractions / Math.sqrt(user1Count * user2Count);
    }
}

Đề xuất dựa trên độ tương đồng

public List<String> generateRecommendations(String targetUser, int recommendationCount) {
    Map<String, Double> similarityScores = new HashMap<>();
    
    for (String user : userInteractions.keySet()) {
        if (!user.equals(targetUser)) {
            double similarity = computeUserSimilarity(targetUser, user);
            similarityScores.put(user, similarity);
        }
    }
    
    List<Map.Entry<String, Double>> sortedUsers = new ArrayList<>(similarityScores.entrySet());
    sortedUsers.sort((a, b) -> Double.compare(b.getValue(), a.getValue()));
    
    Set<String> recommendations = new HashSet<>();
    Map<String, Integer> targetUserItems = userInteractions.getOrDefault(targetUser, new HashMap<>());
    
    for (int i = 0; i < Math.min(recommendationCount, sortedUsers.size()); i++) {
        String similarUser = sortedUsers.get(i).getKey();
        Map<String, Integer> similarUserItems = userInteractions.get(similarUser);
        
        for (String item : similarUserItems.keySet()) {
            if (!targetUserItems.containsKey(item)) {
                recommendations.add(item);
            }
        }
    }
    
    return new ArrayList<>(recommendations);
}

Thẻ: Vue.js Spring Boot mysql ElementUI mybatis

Đăng vào ngày 4 tháng 9 lúc 22:44