springboot-vue-前后端数据交互

前端项目：

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-前后端数据交互的更多相关文章

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

随机推荐

在Unity3d中解析Lua脚本的方法
由于近期项目中提出了热更新的需求,因此本周末在Lua的陪伴下度过.对Lua与Unity3d的搭配使用,仅仅达到了一个初窥门径的程度,记录一二于此.水平有限,欢迎批评指正. 网络上关于Lua脚本和Uni ...
一个很好用的侧滑框架ICSDrawerController实现的 QQ 侧滑及换肤功能
使用ICSDrawerController 实现侧滑功能在ICSDrawerController 第三方上做了修改实现,QQ 点击头像打开关抽屉头像渐变的效果 - (void)hiddenHeadV ...
Random类、ThreadLocalRandom类
Random和ThreadLocalRandom类均用于生成伪随机数. Random的构造函数: Random() 默认以系统当前时间为种子,相当于Random(System.currentT ...
ZR#330. 【18 提高 3】矿石(容斥)
题意题目链接 Sol 挺显然的,首先对每个矿排序那么答案就是$2^x - 2^y$ $x$表示能覆盖到它的区间,$y$表示的是能覆盖到它且覆盖到上一个的区间第一个可以差分维护第二个直接vect ...
ABAP区别CLEAR、REFRESH、FREE
CLEAR.REFRESH.FREE 内表:如果使用有表头行的内表,CLEAR 仅清除表格工作区域.例如 clear gs-school 清除工作区. 要重置整个内表而不清除表格工作区域,使用REFR ...
Spring的DI（Dependency Injection)
写在之前,作为正在学习的程序员,对于Spring理解比较差,给两个简单的定义大家看一下. 控制反转(Inversion of Control),是一个重要的面向对象编程的法则来削减计算机程序的耦合问题 ...
.Net平台互操作技术：01. 主要问题
在.Net平台进行程序设计时,经常遇到基于Native C++,已经开发出很多类库,而现在需要用C#语言调用Native C++类库.这种情况在金融公司的量化投资部门经常发生.原因是,金融业务系统的对 ...
filter和map的使使得数组对象变数组
let UnitList = this.paytypeData.filter( item => item.CheckBox === true ).map(axis => axis.Unit ...
POJ Charlie's Change 查理之转换（多重背包，变形）
题意: 给定身上的4种硬币,分别是1 ,5 ,10, 25面额各有多张,要求组成面额p的硬币尽可能多.输出组成p的4种硬币各自的数量. 思路: 多重背包,300+ms.用01背包+二进制的方法.记录下 ...
unity热更新方案对比
Unity应用的iOS热更新 • 什么是热更新 • 为何要热更新 • 怎样在iOS 上对Unity 应用进行热更新 • 支持Unity iOS 热更新的各种Lua 插件的对照什么是热更新 • ...

springboot-vue-前后端数据交互

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

随机推荐

热门专题