那些年，我们踩过的坑---vuejs对接后端

r囧r小猫 2022-03-12 15:23 452阅读 0赞

一句话概括vue，小巧而不失优雅。如果说你在的公司用vue开发，在对接后端接口时，没有前端人员给你对接口，需要你自己来写js进行对接，那么是不是有很多人也和博主一样苦恼呢？

会vue的人当然会觉得，对个接口有什么 ？很简单嘛，然而对于一个做后端写接口的程序猿来说，那就很有问题，如果说这个程序猿以前不知道vue这个使用，那么问题就更大了。好了，开始说重点。

（一）首先看一下vue中的参数

<script>

export default \{

name: 'demo',

data () \{

return\{

name:'demo',

password:'demo123456',

\}

\}

\}

\},

methods: \{

checkForm()\{

\}

\},

mounted()\{

\},

beforeMount()\{

\}

\}

</script>

从上面可以看出来vue中写的一些基本的内容。下面来一一介绍一下：

首先可以看到上面中的data里面我写了两个参数：一个是name，一个是password。这两个数据是表单数据绑定的，在标签页中用v-model进行绑定。

这样就可以实现数据绑定了，然后可以看到有methods，这个里面主要是写一些方法的，一般对接接口就在这里面进行写代码，

beforeMount这里面主要是声明方法的什么，在这个页面加载前对初试化这里面的内容，一般会在路由的时候接受参数，mounted这个里面和beforeMount里面的差不多，不过这里面的方法是在加载这个页面时初试化的。

data中return\{\}中，主要就是数据初始化，return里面可以进行数据绑定，变量声明等等。上例中:name和password为例，说明一下：

<input class="phone" type="number" name="phone" placeholder="请输入手机号" v-model="phone">

<input class="password" type="password" name="password" placeholder="请输入密码" v-model="password">

可以看到上面两行的vue代码，出现了一个v-model属性，这个里面就是把phone和password与return中的那两个值进行绑定。当input中输入了值，vue会自动复制到这两个变量中，这就实现了数据绑定。

说到这里vue的基本操作就是这样，至于怎么对接接口，那就是可以建一个文件夹，专门用来写api，但是需要在这个页面中进行导入，下面简单举例：

这个就是在<script></script>标签中导入这个js，在上一级目录的api目录下的

这里面就是写对接后台的接口url：

export const login = (params) => post(controller + "/login.dj",params,null);这里面可以分为post和get，这个是请求方式 ，post里面写的（后端地址url，后端参数用@requestBody标记的参数，后端用@requestparam标记的参数）  
在页面中对接接口代码：

userApi.login(param).then(data => \{

if (data.success) \{请求成功后，下面数据回显都可以在这里面进行\}

\});

\},

对接接口就是这些。

下面讲述一下几个属性的作用。v-for，v-model，v-if

v-for，这个和我们java中的foreach很像，就是遍历数组元素

v-model，这个上面讲述过，参考上面

v-if，这个是判断作用，可以在标签中做控制。

原文：https://blog.csdn.net/dengzhy\_/article/details/80134723

发表评论取消回复

表情：

评论列表（有 0 条评论，452人围观）

还没有评论，来说两句吧...

相关阅读

相关 kafka两年,踩过那些坑

大家好，我是苏三，又和大家见面了。前言我的上家公司是做餐饮系统的，每天中午和晚上用餐高峰期，系统的并发量不容小觑。为了保险起见，公司规定各部门都要在吃饭的时间轮流值

妖狐艹你老母/ 2022年11月12日 13:44/ 0 赞/ 226 阅读

相关那些年，我们一起踩过的坑（前端防翻车指南）

javascript做为一门脚本语言，由于缺乏约束，以及各种自动容错机制和隐式转换，产生了很多容易误解和容易引发问题的地方，《javascript语言精髓》一书中，有很大一部

骑猪看日落/ 2022年10月01日 05:47/ 0 赞/ 213 阅读

相关那些年踩过的mysql的坑

这篇文章都是平时使用的时候踩到的坑，以后估计坑越来越多，有时间会继续补坑当然有些问题可能不仅仅是mysql的问题，有些具有普适性～～ 1. 锁机制带来的锁死 1.

叁歲伎倆/ 2022年08月05日 11:15/ 0 赞/ 326 阅读

相关 C语音基础-----那些年我们踩过的坑（一）

一、宏的使用 1.1 宏的展开替换 include <stdio.h> define PING_FANG(x) x x

偏执的太偏执、/ 2022年06月17日 07:26/ 0 赞/ 226 阅读

相关架构真经 | 那些年，我们踩过的缓存坑

　　在码农的世界里，一直以来都有一个信仰：只要使用了缓存，性能就会翻倍；用上缓存的应用就像是打通任督二脉的武林高手，内力生生不息。但是今天我想跟各位猿类朋友聊一聊自己在使用缓存

野性酷女/ 2022年06月10日 13:20/ 0 赞/ 242 阅读

相关那些年我们踩过的Hive坑

原文地址：[https://blog.csdn.net/sunnyyoona/article/details/51648871][https_blog.csdn.net_sun

我会带着你远行/ 2022年05月16日 05:16/ 0 赞/ 394 阅读

相关那些年踩过的CSS坑

1、img 标签中的alt 与title的区别： alt ：alt属性的实质作用是在图片无法正确显示时起到文本替代的作用，不过在IE6下还起到了title的作用。 titl

傷城~/ 2022年03月12日 15:46/ 0 赞/ 388 阅读

相关那些年，我们踩过的坑---vuejs对接后端

一句话概括vue，小巧而不失优雅。如果说你在的公司用vue开发，在对接后端接口时，没有前端人员给你对接口，需要你自己来写js进行对接，那么是不是有很多人也和博主一样苦恼呢？

r囧r小猫/ 2022年03月12日 15:23/ 0 赞/ 453 阅读

相关那些年，我们踩过的Batch_normlization的坑

先说一下batch\_normlization的原理吧，我就不复制粘贴了，大家可以去这个博客看一下，原理讲的挺好的 [https://blog.csdn.net/hjimce

桃扇骨/ 2022年01月22日 12:05/ 0 赞/ 491 阅读

相关 Python开发系列课程(10) - 那些年我们踩过的那些坑(上)

那些年我们踩过的那些坑 ![这里写图片描述][70] 坑01 - 整数比较的坑在 Python 中一切都是对象，整数也是对象，在比较两个整数时有两个运算符`==

向右看齐/ 2021年09月22日 10:48/ 0 赞/ 400 阅读