（三）前后端分离模式的实现

最新推荐文章于 2024-08-01 08:30:00 发布

原创最新推荐文章于 2024-08-01 08:30:00 发布 · 705 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前后端 #分离 #springboot #vue.js #spring

java 同时被 3 个专栏收录

9 篇文章

订阅专栏

SpringBoot

6 篇文章

订阅专栏

教程

6 篇文章

订阅专栏

本文介绍了一种前后端分离的模式，通过Spring Boot实现跨域访问配置，展示了如何从前端页面查询后端数据并显示在列表中，同时提供了数据提交功能，实现与后端的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前后端分离的模式简单来说就是前段页面可以和后端的服务分开部署在不同的服务器。
首先非常重要的是要解决跨域访问问题（不解释什么叫跨域访问）
加入下面CorsConfig类

package com.mytest.simple.springboot;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;  
/**
 * 跨域访问配置
 * @author Administrator
 *
 */
@Configuration  
public class CorsConfig extends WebMvcConfigurerAdapter {  

    @Override  
    public void addCorsMappings(CorsRegistry registry) {  
        registry.addMapping("/**")  
                .allowedOrigins("*")  
                .allowedHeaders("*")
                .allowCredentials(true)  
                .allowedMethods("*")  
                .maxAge(3600);  
    }  
}

开始正式的代码，数据查询功能，从后台获取数据显示在列表中

package com.mytest.simple.springboot.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import com.mytest.simple.springboot.entity.User;
import java.util.ArrayList;
import java.util.List;


@RestController
public class UserController {
	@GetMapping("/list")
	public List<User> list() {
		List<User> list = new ArrayList<User>();
		User user = new User();
		user.setId("1");
		user.setUsername("张三");
		user.setPassword("123456");
		list.add(user);
		return list;
	}
@PostMapping("/save")
public String save(@RequestBody User user) {
        System.out.println(user.getId()+"  "+user.getUsername()+"  "+user.getPassword());
        return "success";
    }
}

页面

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link
	href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"
	rel="stylesheet">
</head>
<body>
	<div id="app-7" class="table table-striped">
		<h4>第七个例子：加载后台数据</h4>
		<p>此次调用后台com/mytest/simple/springboot/hello/UserController.java
		<p>调用list()方法
		<p>还需要解决跨域访问问题，所以需要编写配置类com/mytest/simple/springboot/CorsConfig.java
		<p>@RestController <--要用这个注解--><p>
        public class UserController
        
		<table>
            <tr>
                <td>ID</td>
                <td>用户名</td>
                <td>密码</td>
                <td>操作</td>
            </tr>
            <tr v-for="user in users">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.password}}</td>
                <td><a href="#">删除</a></td>
            </tr>
        </table>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script language="javascript">

var app7 = new Vue({
    el: '#app-7',
    data: {
        users: [
            {"id":1, "username":"tangzhe", "password":"123456"},
            {"id":2, "username":"张三", "password":"666666"}
            ]
    },
    methods: {
        // 发送ajax请求，获取用户列表
        loadData: function() {
            var that = this;
            axios.get('http://localhost/list')
                .then(function (response) {
                    var data = response.data;
                    that.users = data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    },
    mounted: function() {
        // 页面加载执行方法
        this.loadData();
    }
});
</script>
</html>

数据提交功能，提交到后台，并打印输出
页面

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link
	href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"
	rel="stylesheet">
</head>
<body>
   <div id="app-8">
		<h4>第八个例子：向后台提交数据</h4>
		<p>调用UserController类的save()方法　<!-- 添加用户 -->
		<p>ID：<input v-model="id" /></p>
		<p>姓名：<input v-model="username" /></p>
		<p>密码：<input v-model="password" /></p>
		<button v-on:click="save">提交</button>
	</div>    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script language="javascript">
var app8 = new Vue({
    el: '#app-8',
    data: {
        
    },
    methods: {
    	save: function() {
    	    axios.post('http://localhost/save', {
    	            id: this.id,
    	            username: this.username,
    	            password: this.password
    	        })
    	        .then(function (response) {
    	            alert(response.data);
    	        })
    	        .catch(function (error) {
    	            console.log(error);
    	        });
    	}
    }
});
</script>
</html>