SpringBoot+Vue+Element-ui实现前后端分离

更新时间：2023年06月30日 10:11:17 作者：亚不帅

使用前后端分离的方式，可以减少代码耦合，本文主要介绍了SpringBoot+Vue+Element-ui实现前后端分离，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

大家好！今天来给大家分享一下Springboot+Vue实现前后端分离！

一、Springboot

前后端分离很好理解，就是前端专门写前端，后端专门写后端，写完之后前端调一下后端的接口即可。

我们先从简单的做起，写一个查询，不应传参数的。首先我们要新建一个Springboot项目，配置好我们的pom.xml，注意我这里用的是mysql数据库，以及整合了mybatis。所以需要配置mysql以及mybatis。

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>3.0.0</version>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>

完整的pom.xml如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.0.4</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>springboot_mybatis</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot_mybatis</name>
    <description>springboot_mybatis</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>3.0.0</version>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

配置完之后我们就可以写代码了，首先我们要先分层，在这里我省略了service层，正常的话还学要一个service层，那么其他的不多说了，configuration包是为了解决跨域问题的，我们下面会用到。

建完之后再来配置一下数据库，在yaml文件里，配置好mysql数据的路径以及登录名跟密码，不然连接不上数据库。

接下来我们先在po包建好实体类，属性名最好是跟数据库的列名一致。

有了po我们就可以写mapper层以及controller层，我们先来写mapper层吧。在这里我们建的是一个接口类，然后需要注解声明是mapper层，我在这里用的注解写的sql ，大家也可以用其他方式。

@Mapper
public interface UserMapper {
    @Select("select * from smbms_user")
    public List<User> list();
}

有了mapper层就到了我们的controller层。我们首先要写controller的对外映射路径，在这里我们要注意的是前端如果发的是ajax或者axios请求的话需要写@RestController注解来声明controller，如果用@Controller注解的话需要在每一个方法上面多加一个@ResponseBody注解，这样就可以解决ajax或者axios请求。

@RequestMapping("/user")
@RestController
public class UserController {
    @Autowired
    private UserMapper mapper;
    @RequestMapping("/list")
    public List<User> test(Map map){
        //System.out.println("连接成功!");
        List<User> userList = mapper.list();
        map.put("userList",userList);
        /*model.addAttribute();
        model.addAttribute("userList",userList);*/
        return userList;
    }
}

Controller调mapper，之后再将查出来的数据存到Map或者Model中，再将数据返回到我们的前端页面即可。到了这里很多人都觉得后端写完了。然而不是，Springboot想要连接前端还需要解决一个跨域问题，不然请求是发送不到后端的。这里就用到了我们的configuration包，我们在里面写一个配置文件。

package com.example.springboot_mybatis.configuration;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsFilter(source);
    }
}

我们用@Configuration声明这个类是一个配置文件，然后使用Bean注入，就解决掉了跨域问题，这样前端的请求就可以正常的发送到了我们的后端。

二、Vue+Element-ui

写前端还是老样子，先引入Vue，然后挂载点...这些就都不说了，这里我发的是axios请求。代码如下：

   <script>
             new Vue({
				el: "#big",//挂载点
				data: {
					userList: [],//接收数据的数组
				},
				mounted:function(){
					this.show()//页面加载时执行的方法
				},
				methods:{
					show:function(){
						axios.get("http://localhost:8080/user/list").then(resp=>{
							this.userList = resp.data//接收数据
						})
					}
    </script>

调完接口接收到数据之后就该展示数据了，代码如下

            <el-table :data="userList" >
				<el-table-column prop="id" label="序号"></el-table-column>
				<el-table-column prop="userCode" label="编码"></el-table-column>
				<el-table-column prop="userName" label="姓名"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="danger" @click="del(scope.row.id)">删除</el-button>
						<el-button type="warning"  @click="updateinit(scope.row.id)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>

然后我们同时启动Springboot和前端。

数据展示成功。

总结

到此这篇关于SpringBoot+Vue+Element-ui实现前后端分离的文章就介绍到这了,更多相关SpringBoot Vue 前后端分离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

在Spring项目中引入高版本依赖并解决低版本冲突问题的解决方法
在Spring项目的开发过程中,依赖管理是一个非常重要且复杂的问题,我们可能需要引入更高版本的依赖来使用新特性或修复旧版本的Bug,然而,这些高版本依赖可能会与项目中已有的低版本依赖产生冲突,本文将详细探讨如何在Spring中引入高版本依赖,并解决低版本依赖冲突的问题
2025-03-03
Javaweb基础入门HTML之table与form
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等
2022-03-03
Spring boot项目集成Camel FTP的方法示例
这篇文章主要介绍了Spring boot项目集成Camel FTP的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
Springboot集成jsp及部署服务器实现原理
这篇文章主要介绍了Springboot集成jsp及部署服务器实现原理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
Mybatis配置解析看这一篇就够了
这篇文章主要介绍了详解Mybatis是如何解析配置文件的，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-07-07
空指针HttpSession异常之SpringBoot集成WebSocket的方法
文章介绍了在Spring Boot中集成WebSocket时遇到的HttpSession为空的问题,并探讨了三种解决方法,方法一涉及域名配置,方法二通过监听创建Session,而方法三是从request中获取session并存入数据,感兴趣的朋友一起看看吧
2025-01-01
IDEA关闭SpringBoot程序后仍然占用端口的排查与解决方法
在使用 IntelliJ IDEA 开发 Spring Boot 应用时,有时即使关闭了应用,程序仍然占用端口,这会导致重新启动应用时出现端口被占用的错误,所以本文给大家介绍了IDEA关闭SpringBoot程序后仍然占用端口的排查与解决方法,需要的朋友可以参考下
2025-02-02
基于Java数组实现循环队列的两种方法小结
下面小编就为大家分享一篇基于Java数组实现循环队列的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
java读写excel文件实现POI解析Excel的方法
在日常工作中，我们常常会进行Excel文件读写操作，这篇文章主要介绍了java读写excel文件实现POI解析Excel的方法,实例分析了java读写excel的技巧，非常具有实用价值，需要的朋友可以参考下
2018-10-10
java学习笔记之eclipse+tomcat 配置
俗话说：工欲善其事必先利其器，既然要学习java，首先把java的开发环境捣鼓一下吧，这里我们来谈谈eclipse+tomcat的配置方法。
2014-11-11

SpringBoot+Vue+Element-ui实现前后端分离

一、Springboot

二、Vue+Element-ui

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具