前端带参数访问接口

      可能看这篇文章的大多数都是新手，毕竟我也是才刚刚工作一个月，给不了有着深厚底蕴基础的前端大佬写出博客的那种感动，只能从一个前端入门工作者的角度来说明前端是做什么的，需要了解哪些技术，以及给出一些前端工作所必须掌握的几个技术点。

      刚刚步入公司，最需要了解的就是公司环境以及你即将接手项目的代码，接下来就是敲代码了，那么你肯定会接触到的知识点有

      怎么通过后端接口信息进行数据展示，首先，给出一个例子，

localhost/Items/userInformation//queryUserInformation.go?UserId=123456
{
    "data": {
        "UserName": "兵锅锅",
        "UserId": 123456,
        "address": "浙江省|杭州市",
        "isDevelopment": true                 //是否研发人员
    },
    "success": true
}

 

       这个接口能够通过查询用户Id（UserId）得到相应的用户信息，对于前端人员而言肯定是不陌生的。但是对于刚开始做前端的小伙伴就需要知道了，localhost表示的是这个本地，也就是你启动项目的地址。因为一个项目往往是协同开发，需要在部门分支（如部门分支名字为Dev）上新建属于自己的分支（如Dev_bingguoguo），然后把gitlab上的项目通过git下载到本地,并通过在本地上操作自己的代码，然后启动服务器进行调试，一般而言，只有在自己本地调试好了才会上传代码，写下备注（备注是个好东西，能让别人知道你这次做了哪些改动，但是不要写中文，因为可能会遭遇莫须有的bug，虽然可以查询日志，看看哪些地方改动了，但是没事少去查那玩意儿，浪费宝贵的撸代码时间）。接下来请求合并，然后由测试小哥（小姐姐）来处理请求，只有通过了测试，才能够把你的代码合并上去，感谢测试小伙伴们吧，没有他（她）们检查一下，可能你的代码就直接合并到分支上，到时候别人拉取了你的分支，出了隐藏BUG很麻烦的。咳咳，扯远了，那么我们是如何通过这个接口来模拟数据进行操作呢？

      首先，建议大家在使用的时候，在自己的代码上给出两套url，这样会有助于你的开发，主要是看上去也一目了然，如下：

isMock: true,
url:{
      //1.通过查询用户Id获取用户信息
      queryUserInformation:'userInformation/queryUserInformation.go',
    },
mockUrl:{
      queryUserInformation:'mock/queryUserInformation.json',
    }

         很显然，第一套url是真实的url地址，就是屁股后面可以带参数进行请求资源的。只要在vue实例的mounted（自行查看vue的生命周期）加入一个判断，是否使用mockUrl即可

mounted(){
        if(this.isMock){
            this.url = this.mockUrl
        }
    }

        因为后端开发往往比前端需要更多的逻辑和基于数据的操作，因此，他们往往只给出一两个模拟数据，不可能给你完整的，就算给你完整的，你也用不了那么多，哈哈！然后你就可以拿着这些给出的数据去做mock数据了，那么怎么使用呢？大家可以在页面下新建一个mock文件夹，并给出json文件的相对地址，然后在mock文件夹下新建queryUserInformation.json文件，然后把邮件里面的数据放进去就可以了，因为我现在做项目是基于vue框架的，因此我是用的axios进行请求和提交数据。因为vue是一个渐进式框架，可用可不用，手撸AJAX也行，哈哈！因此axios的好处建议大家去官网自行查看，毕竟vue的生态圈还是非常丰富滴，在这里就不得不感谢一下尤雨溪大大了，给我们创造了如此好用的框架，最关键文档还是全中文的，让你舒舒服服撸代码，高高兴兴来搬砖。

     不过我使用的是axios，因此，通过带参数请求接口的方式如下：

queryUserInformationService(){
      const _this = this;
      var params = {
           userId = this.userId    //在vue实例的data中初始化这个参数即可
      }
      axios.get("mock/queryUserInformation.json",{
           parmas : params     //这个地方考虑到可能参数不止一个，因此用对象表示好一些
      }).then((res)=>{
      if(res.data.data && res.data.success == true){
     //在vue实例的data中初始化这个参数即可，这个一般是对象或者数组的格式，用来在页面中显示数值
           _this.userInformation = res.data.data;    
      }else{
           alert('暂无数据');
      }
      }).catch((error)=>{
           console.log(error,"错误---");
      })
}

      因此，当你需要使用真实url时，只需将isMock变成true即可。如果数据都弄完了，调试的话，如果是vue框架，建议在Chrome浏览器上安装一个VueDeltools插件，虽然PC端和移动端效果可以通过谷歌浏览器查看，但是一旦mock的数据和页面显示的数据匹配出错，F12的console是不会报错和警告的（当然，不是那些太低级的错误，低级错误这种小BUG一两分钟足够解决了），因为这仅仅是自己绑定的数据出错了，系统会以为这就是你需要的效果，如果想要看到最真实的数据显示，建议用VueDeltools这款插件，效果如下（当然，数据还有其他接口的，并不仅限于当前的json文件）：

       因为这个是基于移动端开发的，因此这个界面是基于Flex弹性布局进行开发的，用以适配于各种PC和mobile端，可以通过点击涂红圈圈的部分进行查看页面在各种设备下的效果。因此，合理的使用工具也能够让我们更好的进行开发，接下来我将介绍怎么从URL上获取参数，然后根据参数的数值对页面进行动态渲染，加油，奥里给！