将Vue作为前端框架,Spring作为后端框架,开发一个前后端不分离的项目是很常见的。下面是一个简单的步骤:

1. 创建Spring Boot项目

首先,创建一个Spring Boot项目,可以使用Spring Initializr(https://start.spring.io/)来快速生成一个Spring Boot项目。选择Spring Web作为依赖,生成项目。

2. 开发Spring Boot后端

在生成的Spring Boot项目中,编写后端逻辑,包括控制器、服务、持久层等。

3. 构建前端Vue项目

创建一个Vue项目,你可以使用Vue CLI来创建一个基本的Vue项目。打开终端,运行以下命令:

bash

vue create my-vue-app

然后进入项目目录:

bash

cd my-vue-app

4. 开发Vue前端

在Vue项目中,可以使用Vue Router进行路由管理,Axios进行HTTP请求。编写Vue组件,处理用户界面和用户交互。

5. 整合后端和前端

将前端构建好的静态文件(一般在dist目录下)复制到Spring Boot项目的静态资源目录(比如src/main/resources/static),这样Spring Boot就能够提供前端页面。

6. 跨域问题

由于前后端运行在不同的端口,可能会遇到跨域问题。可以在Spring Boot项目中配置CORS,允许来自前端的跨域请求。

7. 启动项目

分别启动Spring Boot项目和Vue项目。可以使用npm run serve启动Vue项目,使用IDE或者Maven命令启动Spring Boot项目。

8. 访问项目

在浏览器中访问前端Vue项目的地址(一般是http://localhost:8080),即可看到整个项目的效果。

这样,你就完成了一个简单的前后端不分离的Vue和Spring项目。在实际开发中,你可以根据具体需求,添加更多功能和特性。

Logo

前往低代码交流专区

更多推荐