前后端项目零开发

路x飞

已于 2024-03-09 16:38:22 修改

阅读量210

点赞数

分类专栏： Java web 文章标签： java 开发语言 spring boot mybatis

于 2023-04-26 19:02:58 首次发布

本文链接：https://blog.csdn.net/gxs508843279/article/details/130392587

版权

Java web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前后端项目零开发，使用vue3作为前端，springboot+mybatisplus+rest语法三层架构作为后端，并且前后端分离应该如何写，包括数据库信息，请举一个例子？

对于一个前后端分离的项目，前端和后端是独立的两个部分，它们通过API接口通信。具体实现可以如下：

创建数据库：首先需要创建一个数据库，例如MySQL，并设计相应的表结构和字段。
后端搭建：搭建后端的框架，建议使用Spring Boot框架，并使用MyBatis-Plus作为ORM框架。使用MVCS（Model-View-Controller-Service）模式，将请求分发到不同层进行处理。设计好API接口，使用RESTful风格，根据请求类型、路径、请求参数等信息进行URL设计。
定义实体类：使用Java创建实体类，用于描述数据结构。
后端接口实现：根据URL设计，实现后端API接口，使用MyBatis-Plus进行数据库操作，将读写操作交给Service层完成。
前端搭建：使用VueJS框架搭建前端页面。使用Vue Router进行页面路由跳转，使用Axios库访问后端API接口。
前端页面设计：使用HTML、CSS、JavaScript等技术设计前端页面，使用组件化思想提高代码可复用性。
前后端联调：前后端开发完成后，进行联调，调试接口。

下面是一个简单的示例：

创建数据库：

CREATE DATABASE IF NOT EXISTS demo;
USE demo;

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  `age` int(3) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

后端接口实现：

// UserController.java
@RestController
@RequestMapping("/api/user")
public class UserController {
    @Autowired
    private UserService userService;

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

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

// UserService.java
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}

前端页面设计：

<!-- App.vue -->
<template>
  <div id="app">
    <h2>用户信息</h2>
    <ul>
      <li v-for="user in users">
        {{ user.name }} - {{ user.age }}岁
      </li>
    </ul>
    <form @submit.prevent="submitForm">
      <label for="name">姓名：</label>
      <input type="text" v-model="form.name" required>
      <br>
      <label for="age">年龄：</label>
      <input type="number" v-model="form.age">
      <br>
      <button>提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data() {
    return {
      users: [],
      form: {
        name: '',
        age: null
      }
    }
  },
  mounted() {
    axios.get('/api/user').then(resp => {
      this.users = resp.data
    })
  },
  methods: {
    submitForm() {
      axios.post('/api/user', this.form).then(resp => {
        this.users.push(this.form)
        this.form = {}
      })
    }
  }
}
</script>