前端项目：

pom文件：

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>com.tangzhe</groupId>

    <artifactId>springboot-vue-client</artifactId>

    <version>1.0</version>

    <packaging>jar</packaging>

    <name>springboot-vue-client</name>

    <description>this is my springboot vue client</description>

    <parent>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-parent</artifactId>

        <version>1.5.10.RELEASE</version>

    </parent>

    <properties>

        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

        <java.version>1.8</java.version>

    </properties>

    <dependencies>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-web</artifactId>

        </dependency>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-freemarker</artifactId>

        </dependency>

    </dependencies>

    <build>

        <plugins>

            <plugin>

                <groupId>org.springframework.boot</groupId>

                <artifactId>spring-boot-maven-plugin</artifactId>

            </plugin>

        </plugins>

    </build>

</project>

配置文件：



server:
  port: 8888

spring:
  application:
    name: springboot-vue-client
  profiles:
    active: dev


  freemarker:

    suffix: .html




controller：




@Controller

public class IndexController {

    @GetMapping("/test")

    public String test() {

        return "test";

    }

    @GetMapping("/")

    public String index() {

        return "index";

    }

}




index.html:




<!DOCTYPE html>

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- 生产环境版本，优化了尺寸和速度 -->

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

    <div id="app" class="table table-striped">

        <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>

    <script type="text/javascript">

        var app = new Vue({

            el: '#app',

            data: {

                users: [

                    {"id":1, "username":"tangzhe", "password":"123456"},

                    {"id":2, "username":"张三", "password":"666666"}

                    ]

            },

            methods: {

                // 发送ajax请求，获取用户列表

                loadData: function() {

                    var that = this;

                    axios.get('http://localhost:8889/user/list')

                        .then(function (response) {

                            var data = response.data;

                            that.users = data;

                        })

                        .catch(function (error) {

                            console.log(error);

                        });

                }

            },

            mounted: function() {

                // 页面加载执行方法

                this.loadData();

            }

        });

    </script>

</body>

</html>




后端项目：


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 http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>com.tangzhe</groupId>

    <artifactId>springboot-vue-server</artifactId>

    <version>1.0</version>

    <packaging>jar</packaging>

    <name>springboot-vue-server</name>

    <description>this is my springboot vue server</description>

    <parent>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-parent</artifactId>

        <version>1.5.10.RELEASE</version>

    </parent>

    <properties>

        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

        <java.version>1.8</java.version>

    </properties>

    <dependencies>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-web</artifactId>

        </dependency>

        <dependency>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-starter-data-jpa</artifactId>

        </dependency>

        <dependency>

            <groupId>mysql</groupId>

            <artifactId>mysql-connector-java</artifactId>

        </dependency>

        <dependency>

            <groupId>com.alibaba</groupId>

            <artifactId>fastjson</artifactId>

            <version>1.2.47</version>

        </dependency>

        <dependency>

            <groupId>com.alibaba</groupId>

            <artifactId>druid</artifactId>

            <version>1.1.10</version>

        </dependency>

        <dependency>

            <groupId>org.apache.commons</groupId>

            <artifactId>commons-lang3</artifactId>

            <version>3.4</version>

        </dependency>

        <dependency>

            <groupId>org.projectlombok</groupId>

            <artifactId>lombok</artifactId>

            <version>1.16.12</version>

        </dependency>

    </dependencies>

    <build>

        <plugins>

            <plugin>

                <groupId>org.springframework.boot</groupId>

                <artifactId>spring-boot-maven-plugin</artifactId>

            </plugin>

        </plugins>

    </build>

</project>




配置文件：




server:

  port: 8889

spring:

  application:

    name: springboot-vue-server

  profiles:

    active: dev

  datasource:

      type: com.alibaba.druid.pool.DruidDataSource

      driver-class-name: com.mysql.jdbc.Driver

      filters: stat

      maxActive: 20

      initialSize: 1

      maxWait: 60000

      minIdle: 1

      timeBetweenEvictionRunsMillis: 60000

      minEvictableIdleTimeMillis: 300000

      validationQuery: select 'x'

      testWhileIdle: true

      testOnBorrow: false

      testOnReturn: false

      poolPreparedStatements: true

      maxOpenPreparedStatements: 20

spring:

  datasource:

    name: test

    url: jdbc:mysql://localhost:3306/test

    username: root

    password: 123456

  jpa:

    show-sql: true




controller：




　　@GetMapping("/list")

    public List<User> list() {

        return userService.findAll();

    }




启动前端和后端项目：


localhost:8888


localhost:8889


请求页面：




发现出现了跨域请求问题：


显示的是页面的静态数据，并没有显示后端接口返回的数据




在后端项目中添加下面这个类解决跨域请求问题：




package com.tangzhe.config;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;  

@Configuration

public class CorsConfig extends WebMvcConfigurerAdapter {  

    @Override

    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**")

                .allowedOrigins("*")

                .allowedHeaders("*")

                .allowCredentials(true)

                .allowedMethods("*")

                .maxAge(3600);

    }  

}




继续访问前端项目，跨域请求成功：




前端


测试添加用户：




　　　　<!-- 添加用户 -->

        <p>姓名：<input v-model="name" /></p>

        <p>密码：<input v-model="pass" /></p>

        <p>年龄：<input v-model="age" /></p>

        <p>手机：<input v-model="mobile" /></p>

        <button @click="save">提交</button>

...


save: function() {
    axios.post('http://localhost:8889/user/save', {
            name: this.name,
            pass: this.pass,
            age: this.age,
            mobile: this.mobile
        })
        .then(function (response) {
            alert(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });
}






后端




@PostMapping("/save")

    public String save(@RequestBody LoginInfo loginInfo) {

        System.out.println(loginInfo);

        return "success";

    }


												


											
springboot-vue-前后端数据交互的更多相关文章
	

    
						
  1. vue  前后端数据交互问题解决
		
    先在vue项目中配置好路由组件路由 然后写相应组件 2 后端 写接口赔路由 第三  解决跨域问题 处理数据交互 这样前端就拿到了数据
    
		
    2. 
						
  2. SpringBoot实现前后端数据交互、json数据交互、Controller接收参数的几种常用方式
		
    1.获取参数的集中常见注解 @PathVariable:一般我们使用URI template样式映射使用,即url/{param}这种形式,也就是一般我们使用的GET,DELETE,PUT方法会使用到 ...
    
		
    3. 
						
  3. vue-resource的使用，前后端数据交互
		
    vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载:   https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...
    
		
    4. 
						
  4. SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题
		
    原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...
    
		
    5. 
						
  5. 对GraphQL-BFF：微服务背景下的前后端数据交互方案的研究-------引用
		
    随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...
    
		
    6. 
						
  6. Springboot+vue前后端分离项目，poi导出excel提供用户下载的解决方案
		
    因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...
    
		
    7. 
						
  7. 两种方法实现asp.net方案的前后端数据交互（aspx文件、html+ashx+ajax）
		
    一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...
    
		
    8. 
						
  8. 前后端数据交互处理基于原生JS模板引擎开发
		
    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...
    
		
    9. 
						
  9. web前后端数据交互
		
    前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...
    
		
    10. 
						
  10. 前后端数据交互利器--Protobuf
		
    Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. MoinMoin install in apache (win)
			
    一:下载环境 xampp:http://sourceforge.net/projects/xampp/files/XAMPP%20Windows/1.8.1/xampp-win32-1.8.1-VC9 ...
    
			
    2. 
						
  2. this的那点事
			
    对于很多初学者,this总是搞得我们晕头转向. 现在,我就简单的总结一下关于this的那点事. this在函数定义时经常是不能确定的,只有在函数执行的时候才能最终确定this的归属.this总是指向最 ...
    
			
    3. 
						
  3. Linux下软件安装的四种方式
			
    一.源码安装 步骤: 下载,解压源码(常见的源码打包格式:.tar.gz/.tar.bz2); 可以直接下载源码再上传至linux服务器,或者在联网状态下,直接通过wget等命令获取源码安装包;源码解 ...
    
			
    4. 
						
  4. 带你零基础入门redis【一】
			
    本篇文章介绍在CentOS7系统安装redis,以及redis的简单操作   我们把redis安装在/usr/local目录下.分别执行以下命令 [root@VM_6_102_centos ~]# c ...
    
			
    5. 
						
  5. CentOS 7安装Docker服务详细过程
			
    ---恢复内容开始--- Docker 简介 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟 ...
    
			
    6. 
						
  6. SQLServer 2012 报表服务部署配置(2)
			
    2.当系统打开"SQL Server安装中心",则说明我们可以开始正常的安装SQL Server 2012,可以通过"计划"."安装".&q ...
    
			
    7. 
						
  7. iOS Automated Tests with UIAutomation
			
    参照:http://blog.manbolo.com/2012/04/08/ios-automated-tests-with-uiautomation#1 UI Automation JavaScri ...
    
			
    8. 
						
  8. JavaScript空假值及其判断
			
    一.javaScript五种空值和假值 分别为undefined,null,false,"",0,这五个值的共同点是在执行if语句时都会执行false分支,执行对应的非语句的时候都 ...
    
			
    9. 
						
  9. 51nod 1572 宝岛地图
			
    题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 勇敢的水手们到达了一个小岛,在这个小岛上,曾经有海盗在这里埋下了一些宝藏.然而,我 ...
    
			
    10. 
						
  10. group - 用户组文件
			
    DESCRIPTION(描述) /etc/group 是一个ASCII码的文件,它定义了用户所属的组.文件中每行包括一条记录,其格式如下: group_name:passwd:GID:user_lis ...
    
			
    11.