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

随机推荐

linux 安装jdk （二进制文件安装）
1.下载jdk 此处以1.7 为例 :jdk-7u79-linux-x64.tar.gz 2.通过ssh将安装介质传到服务器我一般放在 /opt 目录下 3.用tar 命令解压缩 tar -zx ...
dubbo工作原理(3)
dubbo主要核心部件 Remoting:网络通信框架,实现了sync-over-async和request-response消息机制. RPC:一个远程过程调用的抽象,支持负载均衡.容灾和集群功能. ...
ABAP常用事务码
开发----------------------------------------------- SE51 屏幕制作 SE91 MESSAGE OBJECT SE80 对象浏览器(可以建开发类 ...
ubuntu 12.04 source.list 源更新
官方源: #deb cdrom:[Ubuntu 12.04 LTS _Precise Pangolin_ - Release i386 (20120423)]/ precise main restri ...
纪念Google Reader—Google Reader的最后一天
从2006年到今天,几乎每天我都会打开Google Reader,但是今天不一样,因为它是最后一天.心情有些依依不舍,像是与一位多年老朋友永别.因此我非常痛恨Google,先给你送来个好朋友,再从你身 ...
设置DIV随滚动条滚动而滚动
有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
<转>Spring 知识点提炼
Spring 知识点提炼 1. Spring框架的作用轻量:Spring是轻量级的,基本的版本大小为2MB 控制反转:Spring通过控制反转实现了松散耦合,对象们给出它们的依赖,而不是创建或查找依 ...
在Windows Server 2012中搭建SQL Server 2012故障转移集群
OK~ WSFC 2012 R2 年度盛宴开始~ 在本文中,老王将用一系列的场景,把动态仲裁,动态见证,票数调整,LowerQuorumPriorityNodeID,阻止仲裁等群集仲裁技术串起来,完成 ...
网站安全webshell扫描
做个记录,使用Detector进行php网站webshell扫描开源项目托管地址:https://github.com/emposha/PHP-Shell-Detector安装使用都很简单
userBean-作用范围session
package com.java1234.model; public class Student { private String name;private int age; public Strin ...

springboot-vue-前后端数据交互

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

随机推荐

热门专题