springboot前后端分离项目实例

以下是一个使用Spring Boot和Vue实现的前后端分离项目的示例：

1. 项目名称：微人事
- 技术栈：Spring Boot + Vue
- 项目地址：https://gitee.com/mumu-osc/NiceFish
- 项目描述：微人事是一个全栈学习资料，提供了非常详尽的文档，从Spring Boot接口设计到前端Vue的开发思路都有记录在项目的wiki中。

2. 项目名称：美人鱼
- 技术栈：Spring Boot + Vue
- 项目地址：https://gitee.com/mumu-osc/NiceFish
- 项目描述：美人鱼是一个开源的前后端分离项目，它提供了一个完整的前后端分离开发技术栈的示例，帮助开发者快速掌握前后端分离开发技术。

以上两个项目都是使用Spring Boot作为后端框架，Vue作为前端框架，通过提供接口和数据展示实现了前后端分离的开发模式。这些项目的代码和文档都可以在对应的项目地址中找到。

相关问题

springboot vue前后端分离实例代码

这里提供一个简单的基于 Spring Boot 和 Vue.js 的前后端分离项目示例代码。

1. 后端代码

在 Spring Boot 中，我们可以使用 Spring Web 实现 RESTful API。

首先，在 pom.xml 中添加以下依赖：

<dependencies>
    <!-- Spring Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <!-- Spring Data JPA -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    
    <!-- MySQL Connector -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
    
    <!-- Spring Boot DevTools (optional) -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
</dependencies>

然后，创建一个基本的实体类和一个 JPA Repository：

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

    @Column(nullable = false)
    private String name;

    @Column(nullable = false)
    private String email;

    // getters and setters
}

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

接着，创建一个 RESTful Controller：

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

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

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

    @GetMapping("/{id}")
    public ResponseEntity<User> getUserById(@PathVariable Long id) {
        Optional<User> user = userRepository.findById(id);
        return user.map(response -> ResponseEntity.ok().body(response))
                .orElse(new ResponseEntity<>(HttpStatus.NOT_FOUND));
    }

    @PutMapping("/{id}")
    public ResponseEntity<User> updateUser(@PathVariable Long id, @RequestBody User user) {
        Optional<User> existingUser = userRepository.findById(id);
        return existingUser.map(u -> {
            u.setName(user.getName());
            u.setEmail(user.getEmail());
            User updatedUser = userRepository.save(u);
            return ResponseEntity.ok().body(updatedUser);
        }).orElse(new ResponseEntity<>(HttpStatus.NOT_FOUND));
    }

    @DeleteMapping("/{id}")
    public ResponseEntity<?> deleteUser(@PathVariable Long id) {
        return userRepository.findById(id).map(user -> {
            userRepository.delete(user);
            return ResponseEntity.ok().build();
        }).orElse(new ResponseEntity<>(HttpStatus.NOT_FOUND));
    }
}

最后，创建一个 Spring Boot 应用程序类：

@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

2. 前端代码

我们使用 Vue.js 和 axios 来实现前端应用程序。

首先，在 package.json 中添加以下依赖：

"dependencies": {
    "axios": "^0.19.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3"
}

然后，创建一个 Vue 组件：

<template>
  <div>
    <h1>Users</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="editUser(user)">Edit</button>
            <button @click="deleteUser(user.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <form>
      <label>Name:</label>
      <input type="text" v-model="user.name" />
      <label>Email:</label>
      <input type="email" v-model="user.email" />
      <button type="submit" @click.prevent="saveUser()">Save</button>
    </form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      users: [],
      user: { name: "", email: "" },
      editing: false,
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get("/api/users").then((response) => {
        this.users = response.data;
      });
    },
    saveUser() {
      if (this.editing) {
        axios.put("/api/users/" + this.user.id, this.user).then((response) => {
          this.getUsers();
          this.user = { name: "", email: "" };
          this.editing = false;
        });
      } else {
        axios.post("/api/users", this.user).then((response) => {
          this.getUsers();
          this.user = { name: "", email: "" };
        });
      }
    },
    editUser(user) {
      this.user = Object.assign({}, user);
      this.editing = true;
    },
    deleteUser(id) {
      axios.delete("/api/users/" + id).then((response) => {
        this.getUsers();
      });
    },
  },
};
</script>

最后，创建一个 Vue 应用程序类：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import Users from "./components/Users.vue";

export default {
  components: {
    Users,
  },
};
</script>

3. 运行示例

将前端部分代码放在一个名为 `frontend` 的文件夹中，后端部分代码放在一个名为 `backend` 的文件夹中。

在 `frontend` 文件夹中运行以下命令：

npm install
npm run build

然后将生成的 `dist` 文件夹复制到 `backend/src/main/resources/static` 文件夹中。

在 `backend` 文件夹中运行以下命令：

./mvnw spring-boot:run

现在，你可以访问 http://localhost:8080/ 查看示例应用程序。

云服务器Docker部署Vue+SpringBoot前后端分离项目详细教程

当然，我可以为您提供一个详细教程来帮助您部署Vue+SpringBoot前后端分离项目到云服务器上使用Docker。

首先，确保您已经完成以下准备工作：
- 注册一个云服务提供商的账号，并创建一个云服务器实例。
- 在本地环境中安装了Docker，并熟悉Docker的基本操作。
- 本地已经安装了Node.js和npm，以及Vue CLI和Java开发环境。

以下是详细的步骤：

1. 登录到云服务器：
使用SSH工具连接到您的云服务器。例如，使用命令行工具执行以下命令：

   ssh username@server_ip_address

2. 安装Docker：
根据您的云服务器的操作系统，选择对应的安装方式进行Docker安装。以下是一些常见操作系统的安装命令：
- Ubuntu:

     sudo apt-get update
     sudo apt-get install docker.io

- CentOS:

     sudo yum update
     sudo yum install docker

3. 验证Docker安装是否成功：
执行以下命令来验证Docker是否已经成功安装：

   docker version

4. 构建Vue项目：
在本地开发环境中，使用Vue CLI创建Vue项目，并进行开发和测试。确保项目可以正常运行。

   vue create myproject
   cd myproject
   npm run serve

5. 打包Vue项目：
在Vue项目根目录下执行以下命令，将Vue项目打包成静态文件。

   npm run build

6. 创建SpringBoot项目：
使用Spring Initializr创建SpringBoot项目，并进行开发和测试。确保项目可以正常运行。
- 访问Spring Initializr网站：https://start.spring.io/
- 选择项目的基本设置，如使用的编程语言、构建工具、Spring Boot版本等。
- 添加所需的依赖项，如Spring Web、Spring Data JPA等。
- 点击"Generate"按钮下载生成的SpringBoot项目压缩包。
- 解压缩项目压缩包，并使用您喜欢的集成开发环境（IDE）打开项目。

7. 创建Dockerfile：
在SpringBoot项目的根目录下创建一个名为`Dockerfile`的文件，用于定义Docker镜像的构建步骤。在`Dockerfile`中添加以下内容：

   FROM openjdk:8-jdk-alpine
   VOLUME /tmp
   ADD target/myproject.jar app.jar
   ENTRYPOINT ["java", "-jar", "/app.jar"]

8. 构建Docker镜像：
在SpringBoot项目的根目录下执行以下命令，构建Docker镜像：

   docker build -t myproject .

9. 运行Docker容器：
执行以下命令，在Docker中运行SpringBoot项目的Docker容器：

   docker run -d -p 80:8080 myproject

10. 访问应用：
使用浏览器访问您的云服务器的公网IP地址，即可查看部署好的前后端分离项目。

希望这个详细教程能够帮助您成功部署Vue+SpringBoot前后端分离项目到云服务器上使用Docker。如果您有任何问题，请随时提问！