SpringBoot+Vue.js：构建现代化的前后端分离应用

前言

随着互联网的发展，前后端分离的开发模式越来越受到开发者的青睐。前后端分离的开发模式可以让前端和后端的开发人员分别专注于各自的领域，从而提高开发效率和代码质量。本文将介绍如何使用SpringBoot和Vue.js构建现代化的前后端分离应用。

技术栈

• 后端：SpringBoot
• 前端：Vue.js
• 数据库：MySQL

后端开发

1. 创建SpringBoot项目

首先，我们需要创建一个SpringBoot项目。可以使用Spring Initializr来快速创建一个SpringBoot项目。在创建项目时，需要添加以下依赖：

• Spring Web
• Spring Data JPA
• MySQL Driver

2. 配置数据库

在application.properties文件中添加以下配置：

spring.datasource.url=jdbc:mysql://localhost:3306/test
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

3. 创建实体类

创建一个实体类User，用于表示用户信息。代码如下：

@Entity
@Table(name = "user")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name = "name")
    private String name;

    @Column(name = "age")
    private Integer age;

    // 省略getter和setter方法
}

4. 创建Repository

创建一个Repository接口UserRepository，用于操作数据库中的User表。代码如下：

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

5. 创建Controller

创建一个Controller类UserController，用于处理用户相关的请求。代码如下：

@RestController
@RequestMapping("/api/user")
public class UserController {
    @Autowired
    private UserRepository userRepository;

    @GetMapping("")
    public List<User> getAllUsers() {
        return userRepository.findAll();
    }

    @PostMapping("")
    public User addUser(@RequestBody User user) {
        return userRepository.save(user);
    }

    @PutMapping("/{id}")
    public User updateUser(@PathVariable Long id, @RequestBody User user) {
        user.setId(id);
        return userRepository.save(user);
    }

    @DeleteMapping("/{id}")
    public void deleteUser(@PathVariable Long id) {
        userRepository.deleteById(id);
    }
}

6. 运行项目

现在，我们可以运行项目，并访问http://localhost:8080/api/user来测试接口是否正常工作。

前端开发

1. 创建Vue.js项目

使用Vue CLI来创建一个Vue.js项目。在创建项目时，需要选择Manually select features，并选择以下选项：

• Babel
• Router
• Vuex
• CSS Pre-processors

2. 配置代理

由于前端和后端是分离的，因此需要配置代理来解决跨域问题。在vue.config.js文件中添加以下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

3. 创建组件

创建一个组件UserList，用于显示用户列表。代码如下：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>
            <button @click="editUser(user)">编辑</button>
            <button @click="deleteUser(user)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="addUser">添加用户</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    this.getUsers()
  },
  methods: {
    getUsers() {
      this.$http.get('/api/user').then(response => {
        this.users = response.data
      })
    },
    addUser() {
      this.$router.push('/add-user')
    },
    editUser(user) {
      this.$router.push('/edit-user/' + user.id)
    },
    deleteUser(user) {
      this.$http.delete('/api/user/' + user.id).then(() => {
        this.getUsers()
      })
    }
  }
}
</script>

4. 创建路由

创建一个路由文件router.js，用于配置路由。代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import UserList from './components/UserList.vue'
import AddUser from './components/AddUser.vue'
import EditUser from './components/EditUser.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'UserList',
      component: UserList
    },
    {
      path: '/add-user',
      name: 'AddUser',
      component: AddUser
    },
    {
      path: '/edit-user/:id',
      name: 'EditUser',
      component: EditUser
    }
  ]
})

5. 运行项目

现在，我们可以运行项目，并访问http://localhost:8081来测试应用是否正常工作。

总结

本文介绍了如何使用SpringBoot和Vue.js构建现代化的前后端分离应用。通过本文的学习，你可以了解到如何创建SpringBoot项目、配置数据库、创建实体类、创建Repository、创建Controller、创建Vue.js项目、配置代理、创建组件、创建路由等知识点。希望本文能够对你有所帮助。

---