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的對外映射路徑，在這里我們要注意的是前端如果發(fā)的是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想要連接前端還需要解決一個跨域問題，不然請求是發(fā)送不到后端的。這里就用到了我們的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注入，就解決掉了跨域問題，這樣前端的請求就可以正常的發(fā)送到了我們的后端。

二、Vue+Element-ui

寫前端還是老樣子，先引入Vue，然后掛載點...這些就都不說了，這里我發(fā)的是axios請求。代碼如下：

   <script>
             new Vue({
				el: "#big",//掛載點
				data: {
					userList: [],//接收數據的數組
				},
				mounted:function(){
					this.show()//頁面加載時執(zhí)行的方法
				},
				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和前端。