IDEA快速搭建Vue+SpringBoot前后端分离项目

开发环境:

IDEA,MySQL,Navicat(数据库可视化)

一、前端服务搭建

新建一个用于存储项目的文件夹

cmd中切换到该文件夹位置(或直接在该文件夹中右键选择在终端中打开)

 依次运行下面代码

npm install -g @vue/cli
vue create vue

选择最后一项(通过上下键)后回车

通过空格键选择需要安装的组件

选择版本号

输入y

选择package.json

输入y

保存的名字:babal-route

创建完成,依次输入提示的两行命令

创建成功,尝试在浏览器访问 localhost:8080

前端创建完成,在IDEA中直接打开该项目(可以直接把这个文件夹拖进IDEA),选择编辑配置

配置

配置完成后可直接在IDEA中运行

二、后台服务搭建

选择组件

刷新Maven,等待导入完成

最后在springbooot/main/resources/application.yml中配置连接数据库

server:
  port: 9090
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test?serverTimezone=GMT%2b8 # ????
    username: root
    password: 123456

在SpringbootApplication中写一个接口测试

package com.example.springboot;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@SpringBootApplication
public class SpringbootApplication {

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

	@GetMapping
	public String health(){
		return "success";
	}

}

运行后在浏览器中访问 localhost:9090

### 关于 Spring BootVue.js 前后端分离架构的书籍推荐 #### 《Vue+Spring Boot前后端分离开发实战》 这本书籍深入介绍了如何利用 Vue.js 进行前端页面设计以及通过 Spring Boot 实现高效的后端逻辑处理[^1]。书中不仅涵盖了基础理论知识,还提供了大量实际案例分析,帮助读者理解并掌握这两种技术栈的最佳实践方法。 #### 项目构建与集成指南 在具体实施过程中,《springboot+vue前后端分离项目(后台管理系统)》一书给出了详细的指导说明,包括但不限于IDE的选择(如IntelliJ IDEA),数据库连接配置(MySQL8.0配合Navicat Premium作为管理工具),以及第三方组件的应用实例(wangEditor用于实现富文本编辑功能)[^2]。这些内容对于初学者来说非常友好,能够快速上手搭建属于自己的应用平台。 #### 解决常见问题技巧分享 针对开发者可能会遇到的一些棘手难题,《Spring boot+vue前后端分离》也有所涉及。例如,在进行单元测试时如果发现无法正常获取到预期的数据返回值,则可能是由于应用程序入口文件位置不当所引起的错误——应确保main函数位于整个项目的最外层包下以便正确加载所有依赖项和服务资源[^3]。此部分经验总结有助于提高调试效率,减少不必要的麻烦。 #### 技术细节剖析 最后不得不提的是有关持久化层面的设计思路,《Spring Boot+Vue 前后端分离项目架构》中提到采用MyBatis Plus框架来简化Java对象映射关系定义的工作量,并给出了一段典型的接口声明代码片段: ```java @Repository //持久层注解 public interface BookMapper extends BaseMapper<Book> { //所有的CRUD操作都已经编写好了 } ``` 这段代码展示了如何基于继承自`BaseMapper`的方式轻松完成对实体类的基本增删改查等功能扩展[^4]。 综上所述,上述几本专著均能为希望深入了解或从事该领域工作的朋友们提供宝贵的学习资料和技术支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值