vue记忆结构(三)

最新推荐文章于 2024-01-18 11:04:59 发布

光头和尚111

最新推荐文章于 2024-01-18 11:04:59 发布

阅读量158

点赞数

分类专栏： vue 文章标签： vue交互及案例

本文链接：https://blog.csdn.net/qq_42838723/article/details/88547767

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.交互

前端和后端(任何一个应用,都有前端和后端前段:客户端,浏览器后端:服务器)

交互的场景应用

(1.)从后端提交一些数据,将其进行展示和计算

(2.)将用户在页面中的数据提交到后端

2.Vue.js交互

(1.)交互需要使用到一个库文件: vue-resource.js库

(2.)交互借助$http完成

(3.)语法要使用promise规范

3.交互类型: get post jsonp类型

get类型语法:

this.$http.get('url',{param1:值1,param2:值2}).then(

function(res){"请求成功返回的东西"},

function(res){"请求失败返回的东西"}

)

post语法类型:

this.$http.post('url',{param1:值1,param2:值2},{emulateJSON:true}).then(

function(res){"请求成功返回的东西"},

function(res){"请求失败返回的东西"}

)

4.交互案例: get

(1.)由于本人用的idea,不用启动项目,可以直接写html文件, 首先第一步先创建交互的目标文件,(这里我先创建一个文本文件mubiao.txt,在创建一个html文件 page6.html,同级),如图所示

111

(2.)进入正式的代码阶段 get类型交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue交互</title>
    <script src="vue.min.js" type="text/javascript"></script>
    <!--交互必须要用到的js文件,由vue自己提供-->
    <script src="vue-resource.js" type="text/javascript"></script>

</head>
<body>
    <div id="jiaohu">
        <button @click="textContent()">点击获取文本内容</button>
        <h1>{{ content }}</h1>
    </div>
    <script type="text/javascript">
        var vm=new Vue({
            el:"#jiaohu",
            data:{
              content:"",
            },
            methods:{
                textContent:function () {
                    this.$http.get('mubiao.txt').then( /*没有参数可以不写*/
                        function (res) { this.content=res.body },/*请求成功返回文本文件的身体*/
                        function (res) { this.content=res.status } /*请求失败返回的是请求的状态码*/
                    )
                }
            }
        })
    </script>
</body>
</html>

(3.)点击右上角的网页就可以进行浏览了(随便选择一个就可以看到文本文件的内容了)

5.post类型交互案例

(1.) post交互,我这里用的是ajax跟控制层(controller)进行交互,所以必须要放在tomcat上,我用的idea内置的启动项,由于我加了mybatis依赖,所以要在属性文件里写上mysql的四大项(如果不知道mysql的四大项,请去百度)

(2.)index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue交互</title>
    <script src="vue.min.js" type="text/javascript"></script>
    <!--交互必须要用到的js文件,由vue自己提供-->
    <script src="vue-resource.js" type="text/javascript"></script>

</head>
<body>
    <div id="jiaohu">
        <button @click="textContent()">点击获取文本内容</button>
        <h1>{{ content }}</h1>
    </div>
    <script type="text/javascript">
        var vm=new Vue({
            el:"#jiaohu",
            data:{
              content:"",
            },
            methods:{
                textContent:function () {
                    this.$http.post('test',{'a':1,'b':4},{emulateJSON:true}).then( /*没有参数可以不写*/
                        function (res) { this.content=res.body },/*请求成功返回文本文件的身体*/
                        function (res) { this.content=res.status } /*请求失败返回的是请求的状态码*/
                    )
                }
            }
        })
    </script>
</body>
</html>

(3.)controller

package com.example.controller;

import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class TestController {

    @RequestMapping(value = "test",method = RequestMethod.POST)
    @ResponseBody
    public Integer test( Integer a,  Integer b){
        System.out.println(a);
        int c=a+b;
        System.out.println(c);
        return c;
    }
}

(4.)直接去启动项里启动