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

随机推荐

spring boot Filter过滤器的简单使用
springboot使用Filter过滤器有两种方式: 一种是实现Filter接口然后通过@Component注解向项目加入过滤器另一种是通过配置类来配置过滤器 @Component public ...
Kendo MVVM 数据绑定(九) Text
Kendo MVVM 数据绑定(九) Text Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使 ...
JavaScprit30-6 学习笔记
今天学习的是仿即时搜索诗句效果第一个问题: fetch() Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应.它还提供了一个全局 fe ...
javascript结合nodejs实现多文件上传
前端文件上传功能比较依赖后端,所以第一步用nodejs实现一个供文件上传的功能接口. 因为本人对nodejs也是一知半解,所以刚开始的想法是像原始的ajax交互那样,获取上传文件的内容,然后再通过no ...
<Android 应用之路> 天气预报（三）
昨天介绍了基本的载入界面,今天介绍下天气信息显示界面的代码基本ListView显示搜索框,查询城市上一篇文章中,载入界面通过showWeatherInfo()方法跳转到天气信息显示界面 priv ...
LeetCode:103Binary Tree Zigzag Level Order Traversal
真是不容易啊,做这道题的时候脑子一团乱,感觉还是得劳逸结合啊.这道题的思想不难,就是宽搜BFS.通过设置一个flag来判断是否需要逆序输出. 我的做法虽然AC,但是觉得代码还是不好,空间占用较多. / ...
贪心水题。UVA 11636 Hello World，LA 3602 DNA Consensus String，UVA 10970 Big Chocolate，UVA 10340 All in All，UVA 11039 Building Designing
UVA 11636 Hello World 二的幂答案就是二进制长度减1,不是二的幂答案就是是二进制长度. #include<cstdio> int main() { ; ){ ; ) r ...
[转]C++中sizeof（struct）怎么计算？
版权属于原作者,我只是排版. 1. sizeof应用在结构上的情况请看下面的结构: struct MyStruct{ double dda1; char dda; int type;}; 对结构My ...
java中插入myslq的datetime类型的
java.util.Date d = new java.util.Date(); Timestamp tt=new Timestamp(d.getTime()); ps.setTimestamp(4, ...
github：Commit failed - exit code 1 received
问题使用github desktop 将项目提交到github,但提示Commit failed - exit code 1 received 开始以为名称过程,把名称改短,但还是失败. 原因因为 ...

springboot-vue-前后端数据交互

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

随机推荐

热门专题