初学Vue(三) -- 前后端数据交互

Ethan815 发布于2019-08-23 18:29 / 835人阅读

摘要：而我们自定义的对应的是，对应的是，获得到的前端数据是用户输入双向绑定到了实例的内的，获取到的数据是用户输入双向绑定到的假设用户输入了是，是，那么判断条件的代码就是

推荐学了node.js、vue.js入门或了解普通js与node传输数据的观看

在vue实例中用vue的方式将数据传递到后台

完整html代码

完整js代码

利用插件vue-resource

在vue中并没有方法让我们进行前后端数据交互，但是有个人写了个插件叫vue-resource，这个插件可以让我们正常的进行前后端数据交互

vue-resource下载

用cnpm/npm/bower 都可以下载这个插件

用cmd 进入想要安装的目录底下后下载

下载代码：

cnpm/npm/bower install vue-resource

$http 方法

下载完之后就可以设定一个事件让登陆注册触发

首先要使用当然是要先将插件的代码链入

利用双向绑定将前端数据在vue 实例中绑定

html部分：
用户名：

密码：



js部分：
new Vue({
    el:"body",
    data:{
        user:"",
        password:"",
    },
    methods:{
        login:function(){
            console.log(this.$http);
        }
    }
})

可以尝试去掉vue-resource插件的链入，那么console.log(this.$http);就会失效，控制台显示undefined，因为$http方法是由这个插件赋予的

vue-resource插件的用法

这个插件主要就是提供了个方法可以传递前后端数据，而这个方法也就是$http

方法后面接传输方式get/post

第一个参数放入node 写的地址

第二个参数以json 的形式放入数据名与数据

示范代码接上文，默认在方法内开始写：

login():function{
    this.$http.get("http://localhost:****",{
        user:this.user,
        pass:this.pass
    });
}

在方法后面还能用then方法加入一个报错判断，方法内传入两个处理函数

第一个处理函数有个形参，形参是后台定义的传入信息，自定义的，根据你想要的可以更改判断信息为任何条件，假设我们从后台传入的信息为一个json{"ok":1}

第一个函数的形参是后端发送给前端的一个数据包，里面包含了所有后端发送过来的数据，有一个data属性是我们所需要的，是我们自定义send过来的，ok则是我们自定义的内容

第二个处理函数则是如果信息无法传入给后端的话怎么处理

login():function{
    this.$http.get("http://localhost:****",{
        user:this.user,
        pass:this.pass
    }).then(function(dat){
        if(dat.data.ok==1){
        alert("登陆成功");
        }else{
        alert("登陆失败");
        }
    },function(){
        console.log("传输失败");
    });
}

第二个函数也可以不要，因为这是一个错误处理函数，我们也可以用then方法的catch方法，效果一样

login():function{
    this.$http.get("http://localhost:****",{
        user:this.user,
        pass:this.pass
    }).then(function(dat){
        if(dat.data.ok==1){
        alert("登陆成功");
        }else{
        alert("登陆失败");
        }
    }).catch(functino(){
        console.log("传输失败");
    });
}

下面是后台node 部分的代码书写

要导入的模块有：

express，body-parser

当然，要先下载才能导入使用，下载方法也是用 cnpm/npm/bower 这几个包管理器

var express=require("express");
var bodyParser=require("body-parser");
var server = express();

导入完毕后设定一个接口号，前端$http方法内的地址用到

server.listen(****);

再通过express() 的use 设定bodyparser 模块解析方式为urlencoded()

server.use(bodyParser.urlencoded());

设定一个静态访问路径，用于本地服务器访问前端前端页面

server.use(express.static("./"));

自定义一个用户信息

var json = {
    "bill":"111"
}

将登陆代码模块我们设立一个特别的路径来和注册区分

因为前端设定的传输方式是get，所以这里通过req.query来解析前端发送到后端的数据

判断条件是，如果前端的user值作为json的key值或得到的json.user的value值恒等于前端的pass值则发送一个json数据，否则发送另一个json数据，这里发送的数据将在前端then方法的第一个参数传入使用

server.use("/a",function(req,res){
    console.log(req.query);
    if(json[req.query.user]==req.query.pass){
        res.send({ok:1,"msg":"登陆成功"});
    }else{
        res.send({ok:0,"msg":"用户名或密码错误"});
    }
})

判断条件详解

首先要知道json是键值对的形式key:value，可以用中括号[]代替.来访问到key所对应的value。

而我们自定义的json key对应的是bill，value对应的是111，req.query.user获得到的前端数据是用户输入双向绑定到了vue实例的data内的user，req.query.pass获取到的数据是用户输入双向绑定到data 的pass

假设用户输入了user是bill，pass是111，那么判断条件的代码就是

json[bill]==111 =》111==111

云服务器 GPU云服务器 webrtc前后端交互 json数据前后交互 js前后台数据交互 java 前后交互

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105325.html

react-redux-express异步前后端数据交互(面向初学者,高手勿进)

摘要：花了整整三天的时间来解决一个非常非常小的问题想要把一点心得体会记录下来首先是问题的提出前端如果是后端是如何进行数据的交互总体思路以前接触的时候前端模板用的是那时候就有些不理解的地方最为不理解的几个问题是前端和后端怎么配合特别是前端特别复杂的花了整整三天的时间来解决一个非常非常小的问题.想要把一点心得体会记录下来.首先是问题的提出:前端如果是react,后端是express,如何进行数...

KaltZK 2019-08-19 18:44 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

awesome23 2019-08-20 18:23 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

antyiwei 2019-08-29 13:03 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

KavenFan 2019-08-01 17:16 评论0 收藏0
浅谈前后端分离与实践（一）

摘要：前后端的界限是按照浏览器和服务器的划分。前后端彼此互不关联。关于作者本文部分图片段落参考文章实践中的前后端分离。淘宝前后端分离实践本文源码详见服务端代码。一、起源（故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Des...

dantezhao 2019-08-01 17:46 评论0 收藏0