vuejs对接后端踩过的坑记录

一句话概括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，这个是判断作用，可以在标签中做控制。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论