開發執行個體：後端Java和前端vue實作網站分類管理功能

使用Java後端架構Spring Boot和前端架構Vue來實作網站分類管理功能。

1、建立基本的項目結構

• 在IntelliJ IDEA開發環境中建立新的Spring Boot項目。
• 再IDEA Terminal或指令行工具中，使用npm安裝Vue.js腳手架并初始化項目。

2、建立後端資料模型、Repository、Service 和 Controller

• 建立資料模型（例如 Java Bean）表示分類資訊
• 建立 Repository 類來處理對資料庫的操作，例如增、删、改、查等操作
• 建立 Service 類來實作類别相關的業務邏輯，例如查詢所有類别、添加類别、删除類别等操作，并注入 Repository
• 建立 Controller 類來處理路由，例如擷取所有類别、添加類别、删除類别等請求，并注入 Service。通過@RestController注解讓 Spring Boot 知道這是一個 RESTful API

3、編寫前端 Vue 元件

• 在src/main/resources/static目錄下建立一個Vue.js項目
• 建立 categories.vue 元件，編寫展示資料的模闆，使用 axios 向背景發送 query 請求，在“created” 生命周期中調用該請求，将 Server 的傳回值儲存到 data 屬性中
• 将 addCategory 和 deleteCategory 方法挂載到 Vue 執行個體下，使用 axios 向後端執行相應的增加/删除請求

下面是一個簡單的開發示例：

1、後端Java實作：

(1) 首先需要建立一個Entity，表示分類的資訊。例如，我們可以定義一個Category類：

public class Category {
    private int id; // 分類ID
    private String name; // 分類名稱
    // getter和setter方法略
}
           

(2) 然後，我們需要編寫一個Controller類來處理請求。在這個示例中，我們需要實作擷取所有分類清單、添加一個新分類、删除一個分類的功能：

@RestController
@RequestMapping("/categories")
public class CategoryController {

    @Autowired
    private CategoryService categoryService;

    // 擷取所有分類清單
    @GetMapping("/")
    public List<Category> getAllCategories() {
        return categoryService.getAllCategories();
    }

    // 添加一個新分類
    @PostMapping("/")
    public void addCategory(@RequestBody Category category) {
        categoryService.addCategory(category);
    }

    // 删除一個分類
    @DeleteMapping("/{id}")
    public void deleteCategory(@PathVariable("id") int categoryId) {
        categoryService.deleteCategory(categoryId);
    }
}
           

(3) 最後，我們需要實作一個Service類來操作資料庫。在這個示例中，我們可以使用Spring Data JPA來實作資料庫通路：

@Service
public class CategoryService {

    @Autowired
    private CategoryRepository categoryRepository;

    // 擷取所有分類清單
    public List<Category> getAllCategories() {
        return categoryRepository.findAll();
    }

    // 添加一個新分類
    public void addCategory(Category category) {
        categoryRepository.save(category);
    }

    // 删除一個分類
    public void deleteCategory(int categoryId) {
        categoryRepository.deleteById(categoryId);
    }
}
           

2、前端Vue實作：

(1) 首先需要安裝Vue.js，并建立一個Vue執行個體：

var app = new Vue({
  el: '#app',
  data: {
    categories: [],
    newCategoryName: ''
  },
  mounted() {
    this.getCategories()
  },
  methods: {
    getCategories() {
      axios.get('/categories/')
        .then(response => { this.categories = response.data; })
    },
    addCategory() {
      axios.post('/categories/', { name: this.newCategoryName })
        .then(response => { this.getCategories() })
    },
    deleteCategory(id) {
      axios.delete('/categories/' + id)
        .then(response => { this.getCategories() })
    }
  }
})
           

(2) 然後，我們需要在HTML代碼中使用Vue來顯示分類清單、添加新分類和删除分類。

<div id="app">
  <ul>
    <li v-for="category in categories" :key="category.id">{{ category.name }}
        <button @click="deleteCategory(category.id)">删除</button></li>
  </ul>
  <input type="text" v-model="newCategoryName"/>
  <button @click="addCategory()">添加</button>
</div>
           

通過這樣的開發方式，我們就可以使用Java後端架構Spring Boot和前端架構Vue來實作網站分類管理功能了。