正文

新手必看！SpringBoot+Vue轻松搭建前后端分离框架全攻略

/0 浏览量
0603

在当前Web开发领域，前后端分离已经成为一种主流的开发模式。这种模式不仅提高了开发效率，还让项目结构更加清晰。本文将带你从零开始，使用SpringBoot和Vue搭建一个简单的前后端分离框架。

一、环境准备

在开始搭建框架之前，我们需要准备以下环境：

  1. Java开发环境：推荐使用JDK 1.8及以上版本。
  2. IDE：推荐使用IntelliJ IDEA或Eclipse。
  3. Node.js：推荐使用Node.js 10.0及以上版本。
  4. Vue CLI：Vue CLI是Vue.js官方提供的一个基于Vue.js的命令行工具，用于快速搭建Vue.js项目。

二、创建SpringBoot项目

  1. 创建SpringBoot项目：使用IDE创建一个新的SpringBoot项目，可以参考以下步骤：

    • 打开IDE，选择创建新项目。
    • 选择Spring Initializr（Spring Boot项目启动器）。
    • 选择Java版本和项目名称。
    • 添加依赖，这里我们需要添加Web依赖、MySQL依赖和Thymeleaf依赖。
    • 创建项目。

  2. 配置数据库：在application.properties文件中配置数据库连接信息。

spring.datasource.url=jdbc:mysql://localhost:3306/your_database?useSSL=false&serverTimezone=UTC
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.jpa.hibernate.ddl-auto=update
  1. 创建实体类和Mapper接口：根据数据库表结构创建实体类和Mapper接口。
public class User {
    private Integer id;
    private String username;
    private String password;
    // ... getter和setter方法
}

@Mapper
public interface UserMapper {
    List<User> findAll();
    User findUserById(Integer id);
    void addUser(User user);
    void updateUser(User user);
    void deleteUser(Integer id);
}
  1. 创建Controller类：创建一个Controller类来处理请求。
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserMapper userMapper;

    @GetMapping("/list")
    public List<User> list() {
        return userMapper.findAll();
    }

    @GetMapping("/detail/{id}")
    public User detail(@PathVariable Integer id) {
        return userMapper.findUserById(id);
    }

    @PostMapping("/add")
    public User add(@RequestBody User user) {
        userMapper.addUser(user);
        return user;
    }

    @PutMapping("/update")
    public User update(@RequestBody User user) {
        userMapper.updateUser(user);
        return user;
    }

    @DeleteMapping("/delete/{id}")
    public void delete(@PathVariable Integer id) {
        userMapper.deleteUser(id);
    }
}

三、创建Vue项目

  1. 创建Vue项目：使用Vue CLI创建一个新的Vue项目。
vue create vue-project
  1. 安装依赖：在项目根目录下，运行以下命令安装依赖。
cd vue-project
npm install axios vue-router element-ui --save
  1. 配置路由：在src/router/index.js文件中配置路由。
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import UserList from '@/components/UserList'
import UserDetail from '@/components/UserDetail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/user/list',
      name: 'userList',
      component: UserList
    },
    {
      path: '/user/detail/:id',
      name: 'userDetail',
      component: UserDetail
    }
  ]
})
  1. 创建组件：根据需要创建相应的组件，例如UserList.vue、UserDetail.vue等。
<template>
  <div>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="username" label="用户名" width="180"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    this.fetchUsers()
  },
  methods: {
    fetchUsers() {
      axios.get('/user/list').then(response => {
        this.users = response.data
      })
    }
  }
}
</script>

四、整合前后端

  1. 配置Vue项目：在src/main.js文件中引入Element UI。
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
  1. 启动项目：分别启动SpringBoot项目和Vue项目。

五、总结

通过本文的介绍，相信你已经掌握了使用SpringBoot和Vue搭建前后端分离框架的方法。在实际开发过程中，你可以根据自己的需求进行扩展和优化。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --