首页 / VUE / vue 学习笔记day10 vue-resource 和java 后端交互

vue 学习笔记day10 vue-resource 和java 后端交互

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue 学习笔记day10 vue-resource 和java 后端交互，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8017字，纯文字阅读大概需要12分钟。

内容图文

一 vue 交互
    1》jquery  =>$ajax
    2》js原生  :es6=>axios
    3>》vue的resource
    get this.$http.get()

        this.$http.get("http://localhost:8080/MyBlogSys/test/run", {
                            params: {
                                act: 1,
                                userName: "zhangsan"
                            }

                        })
                        .then(function(res) {
                            console.log(res)
                        }, function(err) {
                            console.log(err)
                        }) ;
    post  this.$http.post()

        this.$http.post("http://localhost:8080/MyBlogSys/test/run", {
                                act: 1,
                                userName: "zhangsan"
                            }, {
                                emulateJSON: true
                            }

                        )
                        .then(function(res) {
                            console.log(res)
                        }, function(err) {
                            console.log(err)
                        });
    jsonp this.$http.jsonp()

    this.$http({
        url:xxx
        }).then(function(){},function(){})

    下载vue-resource
    bower install vue-resource

例子1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="按钮" @click="run" />
    </div>

    <script src="../vue.js"></script>
    <script src="../vue-resource.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {

            },
            methods: {
                run: function() {
                    this.$http.get("http://localhost:8080/MyBlogSys/test/run").then(function(res) {
                        console.log(res)
                    }, function(err) {
                        console.log(err)
                    })
                }
            }

        })
    </script>
</body>

</html>

例子2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="按钮" @click="run" />
    </div>

    <script src="../vue.js"></script>
    <script src="../vue-resource.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {

            },
            methods: {
                run: function() { //给后台传递数据
                    /*this.$http .get("http://localhost:8080/MyBlogSys/test/run?act=1&userName=zhangsan")
                        .then(function(res) {
                            console.log(res)
                        }, function(err) {
                            console.log(err)
                        }); */
                    /* this.$http.get("http://localhost:8080/MyBlogSys/test/run", {
                            params: {
                                act: 1,
                                userName: "zhangsan"
                            }

                        })
                        .then(function(res) {
                            console.log(res)
                        }, function(err) {
                            console.log(err)
                        }) ;*/
                    this.$http.post("http://localhost:8080/MyBlogSys/test/run", {
                                act: 1,
                                userName: "zhangsan"
                            }, {
                                emulateJSON: true
                            }

                        )
                        .then(function(res) {
                            console.log(res)
                        }, function(err) {
                            console.log(err)
                        });
                }
            }

        })
    </script>
</body>

</html>

例子3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- <input type="text" @keyup="run" v-model="str" /> -->
        <input type="text" @keyup="list" v-model="str" />
        <ul>
            <li v-for="(item , index) in lst">{{item}}--{{index}}</li>
        </ul>
    </div>

    <script src="../vue.js"></script>
    <script src="../vue-resource.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                str: "",
                lst: []
            },
            methods: {
                /* run: function() {
                    // https://sp1.baidu.com/5b11fzupBgM18t7jm9iCKT-xh_/sensearch?wd=Abc&cb=bd_cb_dict3_1582953217616
                    this.$http.jsonp("https://sp1.baidu.com/5b11fzupBgM18t7jm9iCKT-xh_/sensearch", {
                            params: {
                                wd: this.str,
                            },
                            jsonp: "cb"

                        })
                        .then(function(res) {
                            console.log(res)
                        }, function(err) {
                            console.log(err)
                        });
                }, */

                list: function() {
                    this.$http.jsonp("http://localhost:8080/MyBlogSys/test/list", {
                        params: {
                            act: 1,
                            userName: "zhangsan",
                        },
                        jsonp: "cb"
                    }).then(function(res) {
                        console.log(res);
                        this.lst = res.data;
                    }, function(err) {
                        console.log(err)
                    })
                }
            }

        })
    </script>
</body>

</html>

java后端代码

package com.example.demo.controller;

import com.alibaba.fastjson.JSONObject;
import com.fasterxml.jackson.databind.util.JSONPObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController  //@Controller+@ResponstBody
@RequestMapping("test")
@CrossOrigin(origins = "*",maxAge = 3600) //跨域安全问题解决方案
public class TestController {
    private static final Logger logger = LoggerFactory.getLogger(TestController.class);

    @RequestMapping("/run")
    public Object test(HttpServletRequest request, HttpServletResponse response){
//        response.setHeader("Access-Control-Allow-Origin", "*");
        logger.info("打印日志");
        String act = request.getParameter("act");
        String userName = request.getParameter("userName");

        logger.info("act:"+act+",userName:"+userName);
        return 1;
    }

    @RequestMapping("/list")
    public String list(HttpServletRequest request, HttpServletResponse response) throws IOException {
//        response.setHeader("Access-Control-Allow-Origin", "*");
        logger.info("打印日志");
        String act = request.getParameter("act");
        String userName = request.getParameter("userName");
        String cb = request.getParameter("cb");
        logger.info("act:"+act+",userName:"+userName+",cb:"+cb);
        List list = new ArrayList();
        Map map = new HashMap();
        map.put("name","halou");
        map.put("age",18);
//list.add(map);
        list.add("jljlj");
        list.add(222);
//        response.setHeader("content-type", "text/html;charset=UTF-8");
//        PrintWriter out = response.getWriter();
//        out.write(cb);
        String s = JSONObject.toJSONString(list);
        return cb+"("+s+")";
    }
}

application.properties

#访问相关配置
server.port=8080
#项目访问名称，如果不配置直接访问bean就可以
server.servlet.context-path=/MyBlogSys

#数据库配置（我自己的，这个大家自己配置）
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/myblog?useUnicode=true&characterEncoding=utf8&autoReconnect=true&failOverReadOnly=false
spring.datasource.username=myblog
spring.datasource.password=myblog


#静态文件访问配置
spring.mvc.static-path-pattern=/static/**
#热部署生效
spring.devtools.restart.enabled: true
#设置重启的目录
#spring.devtools.restart.additional-paths: src/main/java
#classpath目录下的WEB-INF文件夹内容修改不重启
spring.devtools.restart.exclude: WEB-INF/**

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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.4.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>demo</name>
	<description>Demo project for Spring Boot</description>

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

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>2.1.1</version>
		</dependency>

		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
		</dependency>
		<!-- 引入json处理包 -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.35</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<fork>true</fork>
				</configuration>
			</plugin>
		</plugins>
	</build>

</project>

点赞
收藏
分享
- 文章举报

桑丘紫言发布了172 篇原创文章 · 获赞 38 · 访问量 17万+ 私信关注

内容总结

以上是互联网集市为您收集整理的vue 学习笔记day10 vue-resource 和java 后端交互全部内容，希望文章能够帮你解决vue 学习笔记day10 vue-resource 和java 后端交互所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/640595.html

来源：【匿名】

【上一篇】Vue源码9个基础方法【下一篇】php怎么返回数据给vue

更多 ►

【vue 学习笔记day10 vue-resource 和java 后端交互】教程文章相关的互联网学习教程文章

vue学习笔记18 propsData

propsData 不是和属性有关，他用在全局扩展时进行传递数据。先写一个全局扩展var header_a = Vue.extend({　　template:`{{message}} 传值 {{ a }}`,　　data:function(){　　　　return {　　　　　　message:"内容"　　　　}　　},　　　　props:[‘a‘]}) 挂载 new header_a().$mount(‘header‘) 这时如果想传递值。就要用propsData1.在全局扩展里加入props进行接收。 new header_a(propsData:{a:1}).$mount(‘header‘)...

vue学习笔记9 directive 自定义指令

<div v-laohan="font">元素</div>需要在构造器外执行Vue.directive(‘my‘,function(el,binding,vnode){console.log(el) //<div>元素</div>console.log(binding) //objectconsole.log(binding.name) //laohanconsole.log(binding.expression) //fontconsole.log(binding.value) //red el.style="color:"+binding.value }) data:{font:‘red‘} 自定义指令有五个生命周期（也叫钩子函数）bind inserted update componentUpdated ...

Vue.js学习笔记：指令 v-if【代码】【图】

v-if 完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="example"> <p v-if="greeting">Hello</p> </div><script src="js/vue.js"></script> <script> var vm2 = new Vue({ el:‘#exa...

vue.js学习笔记

1、vue.js的目的Vue的产生主要是解决三个问题1.1、主要解决的是数据绑定的问题1.2、主要是构建大型的单页面程序，解决app页面卡顿的问题1.3、支持组件式开发，采用积木式编程2、Vue.js的特性 1、mvvm模式2、组建化3、指令系统4、vue.js开始支持虚拟dom 虚拟dom可以提升页面的刷新速度原文：http://www.cnblogs.com/bjjjunjie/p/7106579.html

vue学习笔记14【代码】【图】

分步表单和自定义表单控件结合前面所了解到的内容。这里分步分三个路由来实现。先创建一个store的module。保存我们需要数据，然后引入到store的index.js中 form.js 1 import router from "../../router";2 import request from "../../utils/request";3 import { notification } from "ant-design-vue";4 5 const state = {6 step: {7 payAccount: "12345",8 receiverAccount: {9 type: "bank", 10 number: ...

Vue.js 学习笔记第2章数据绑定和第一个Vue应用【代码】【图】

学习任何一种框架，从一个Hello World应用开始是最快了解该框架特性的途径。我们先从一段简单的HTML代码开始，感受Vue.js最核心的功能：<!doctype html> <html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue 示例</title></head><bo...

Vue插槽学习笔记【代码】【图】

目录插槽内容后备内容具名插槽作用域插槽解构插槽Prop具名插槽的缩写slot和slot-scope特性插槽内容创建示例组件slotdemo.vue<template><div class="slotdemo"><slot></slot></div> </template>注册组件import slotdemo from 'slotdemo.vue' Vue.component('slotdemo',slotdemo)使用组件<slotdemo>传入内容</slotdemo>组件标签外内容这样<slot><slot>就会替换为你传入内容(text、html或其他组件)，如果组件没包含<slot>元素,则该组件...

从零开始的vue学习笔记（二）【代码】【图】

数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。data的数据和视图同步更新。实例创建后添加一个新的属性，对这个属性的的改动将不会触发任何视图的更新。如果需要一个属性，但是一开始它为空或不存在，仅需要设置一些初始值。Object.freeze()方法可以阻止修改现有的属性除了数据属性，Vue 实例还包含实例属性与方法，前缀为$，例如：vm.$data，vm.$el，vm.$watch()(这里假设vm是某个...

vue学习笔记1：el 与 data【代码】【图】

一、vue介绍vue是目前三大主流框架之一（React、Angular、Vue）vue特点：易用灵活高效vue官网：官网链接二，知识点vue实例选项： el注：不能让el直接管理html或者body，会报错作用：指定当前vue实例所管理的视图值：可以是id选择器，其他选择器，DOM元素（#div1，.div1等）vue实例选项：data作用：指定当前vue实例所管理的视图中要使用的数据值：可以是一个对象访问方法：实例对象.属性名特点：响应式数据（数据改变时，视图层中的...

vue框架学习笔记1

vue1-2:MVVM 　　M:Model 数据模型,负责数据存储　　V:View 视图,负责页面的显示　　VM:View Model 负责业务处理,对数据进行加工,之后交给视图　　下载地址: 　　 　　 　　vue:1-3:Vue常见指令介绍上 1.插值表达式　　{{}} 　　当模型中的数据改变时,那么视图中的数据也相应发...

Vue学习笔记目录

本文为转载，原文：Vue学习笔记目录Vue介绍Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和...

vue学习笔记概述（一）【代码】

vue里最常见的最普遍的用法应该是var app = new Vue({el: ‘#app‘,data: {message: ‘Hello Vue!‘ }}) 下面把所有使用方法尽可能列出来方便一目了然的参考用法 1<div id="app"> 2<span v-bind:title="message" v-on:click="reverseMessage">{{message}}</span> 3<p v-if="seen">Now you see me</p> 4<ol> 5<li v-for="todo in todos"> 6 {{ todo.text }}7</li> 8</ol> 9</div>1011<script src="https://unpkg.co...

node+webpack环境搭建 vue.js 2.0 基础学习笔记【代码】【图】

npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli //可用淘宝镜像 npm=》cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org生成项目vue init webpack my-first-vue-project //生成项目名为my-first-vue-project的模板了解vue与webpack的关系学习vue装好项目后cd my-first-vue-project //进入目录npm install //下载所需要...

【前端vue开发】vue知识点超链接学习笔记

1、如何去除vue项目中的 # --- History模式：https://www.cnblogs.com/zhuzhenwei918/p/6892066.html2、原文：https://www.cnblogs.com/xiaohuizhang/p/9132662.html

vue学习笔记三：常见的表单绑定【代码】

<template><div id="app"><input type="checkbox" id="checked" v-model="checked"/><label for="checked">{{checked}}</label><br /><input type="checkbox" id="jack" value="jack" v-model="names" /><label for="jack">jack</label><input type="checkbox" id="sim" value="sim" v-model="names" /><label for="sim">sim</label><input type="checkbox" id="tom" value="tom" v-model="names" /><label for="tom">tom</label><...

首页 / VUE / vue 学习笔记day10 vue-resource 和java 后端交互

vue 学习笔记day10 vue-resource 和java 后端交互

内容导读

内容图文

内容总结

内容备注

内容手机端

【vue 学习笔记day10 vue-resource 和java 后端交互】教程文章相关的互联网学习教程文章

vue学习笔记18 propsData

vue学习笔记9 directive 自定义指令

Vue.js学习笔记：指令 v-if【代码】【图】

vue.js学习笔记

vue学习笔记14【代码】【图】

Vue.js 学习笔记第2章数据绑定和第一个Vue应用【代码】【图】

Vue插槽学习笔记【代码】【图】

从零开始的vue学习笔记（二）【代码】【图】

vue学习笔记1：el 与 data【代码】【图】

vue框架学习笔记1

Vue学习笔记目录

vue学习笔记概述（一）【代码】

node+webpack环境搭建 vue.js 2.0 基础学习笔记【代码】【图】

【前端vue开发】vue知识点超链接学习笔记

vue学习笔记三：常见的表单绑定【代码】

JAVA - 相关标签

VUE - 相关标签

后端 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程