开发实例：后端Java和前端vue实现网站分类管理功能

用户1289394

发布于 2024-01-17 09:55:57

5010

文章被收录于专栏：Java学习网Java学习网

使用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来实现网站分类管理功能了。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-01-16，如有侵权请联系 cloudcommunity@tencent.com 删除

开发