手把手带你快速搭建一个SpringBoot+Vue前后端分离项目

您所在的位置：网站首页 › springboot做项目怎么写文档 › 手把手带你快速搭建一个SpringBoot+Vue前后端分离项目

手把手带你快速搭建一个SpringBoot+Vue前后端分离项目

2023-11-08 13:53| 来源: 网络整理| 查看: 265

开发环境

IDEA,MySQL,Navicat

1.创建数据库并添加一些数据

在这里插入图片描述

2.创建前端项目

1.cmd 创建项目，注意这里需要Vue3或者以上，不是的同学可以用其它方式创建前端项目，或者更新到Vue3以上也行。在这里插入图片描述

进入到如下页面：在这里插入图片描述我先运行了一下之前的例子确保环境没问题， 2.点击项目管理进入创建页面 3.选择文件夹创建该项目，选择好了点击创建

在这里插入图片描述 3.出现这里只需要等它创建就好了（可能需要等30秒左右） 4.可以看到已经创建好了 4.点击“任务”–“serve”–“运行”（这里也要等一小会儿） 5.点击输出就可以看到地址 6.点击地址进去进到这个页面恭喜你已经成功将前端项目创建好了。现在把前端项目在IDEA中打开（直接把这个文件夹拖进IDEA就可以）

在这里插入图片描述 7.现在我们创建一个Person.vue

这是Person

8.进入App.vue添加如下代码

Person

在这里插入图片描述 9.进入router -> index.js中添加以下代码：（注意有个逗号）

, { path:'/person', name:'About', component: () => import('../views/Person') }

在这里插入图片描述再进入App.vue添加一个竖线（刚刚忘了）

10.运行程序（需要有npm）,终端输入如下代码：

npm run serve

在这里插入图片描述 11.运行结果：完美！！！前端就准备好了，现在我们去创建Spring Boot项目

3.创建SpringBoot项目

在这里插入图片描述

在这里插入图片描述点击next 点击finsh完成创建

2.创建实体代码如下：

package com.sadhu.entity; import lombok.Data; import javax.persistence.Entity; import javax.persistence.Id; /** * @author wang */ //与数据库表绑定 @Entity //自动生成setter 和getter @Data public class Person { @Id private Long id; private String name; private String sex; private int age; }

在这里插入图片描述这里需要测试一下，先直接跳过直接创建controller

3.创建repository 文件结构：在这里插入图片描述代码：

public interface PersonRepositroy extends JpaRepository { }

4.创建controller 文件结构：在这里插入图片描述代码：

@RestController @RequestMapping("/person") public class PersonController { private PersonRepositroy personRepositroy; @GetMapping("/findAll") public List findAll(){ return personRepositroy.findAll(); } }

5.创建yml文件先删掉Application.properties 在这里插入图片描述添加如下代码：（数据库账号密码记得改）

spring: datasource: driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/test username: root password: 123456 jpa: show-sql: true properties: hibernate: format_sql: true server: port: 8182

需要再pom.xml中添加依赖

mysql mysql-connector-java runtime

在这里插入图片描述

运行一下：在这里插入图片描述

现在后端的也写好了

4.前后端连再一起

1.先在前端中添加如下代码代码：

这是Person {{persons[0].id}} {{persons[0].name}} {{persons[0].sex}} {{persons[0].age}} {{item.id}} {{item.name}} {{item.sex}} {{item.age}} export default { name: "Person", data() { return { persons: [ { id: 1, name: 'wang', sex: '男', age: 18 } ] } }, created() { const _this = this; axios.get('http://localhost:8182/person/findAll').then(function (resp){ _this.persons=resp.data; console.log(resp.data) }) } }

在这里插入图片描述注意：开发环境中应该有axios 如果没有请在终端输入

vue add axios

他会自动安装在这里插入图片描述这这个情况就是没有管理员权限，把IDEA以管理员身份运行就可以，如下图

2.然后去配置后端新建如下文件并添加代码：代码如下：

package com.sadhu.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CrosConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry){ WebMvcConfigurer.super.addCorsMappings(registry); registry.addMapping("/**") .allowedOriginPatterns("*") .allowedMethods("GET", "HEAD" ,"POST","PUT" , "DELETE") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } }

在这里插入图片描述

5.最后把前后端都启动起来看看

在这里插入图片描述 OK 和完美

6.总结，有问题可以评论或者私信

这是我学习是做的笔记，按照步骤来能跑通，中途会遇到一些问题，通常百度就能解决。冲冲冲！！！

【本文地址】

公司简介

联系我们