真正掌握vuex的使用方法（五）

希望每一位同学可以亲自将每行代码进行一次尝试！记得对于学习代码来讲慢慢来才会更快！

现在咱们先抛开vuex，一起来做一个如上图一样的切换案例：




    #app input,#app p{
 margin:5px;
 padding:5px;
    }
    #app input.active{
 background:red;
    }
    #app div{
 border:1px solid red;
    }

上面的代码并不复杂，相信大家也都可以看的明白。通过以上代码咱们可以实现一个简单的切换，通过这种形式来完成的切换可以称其为乞丐版的切换。因为里面的数据都被写死了！所以咱们可以将代码进行一些优化，将数据单独存放起来进行管理：
首先将所有的数据放到data中：

data(){
    return {
 tagList:[
     {
  tagName:"vue",//按钮的名字
  newList:[//vue新闻的内容列表
      {
   newTitle:"利用Vue-cli中的proxyTable解决开发环境的跨域问题",
   newHref:"https://zhangpeiyue.com/archives/101"
      },
      {
   newTitle:"真正掌握vuex的使用方法（一）",
   newHref:"https://zhangpeiyue.com/archives/120"
      },
      {
   newTitle:"真正掌握vuex的使用方法（二）",
   newHref:"https://zhangpeiyue.com/archives/122"
      },
      {
   newTitle:"真正掌握vuex的使用方法（三）",
   newHref:"https://zhangpeiyue.com/archives/126"
      },
      {
   newTitle:"真正掌握vuex的使用方法（四）",
   newHref:"https://zhangpeiyue.com/archives/127"
      }
  ]
     },
     {
  tagName:"es6",//按钮的名字
  newList:[//es6新闻的内容列表
      {
   newTitle:"es6箭头函数的理解及面试题",
   newHref:"https://zhangpeiyue.com/archives/92"
      },
      {
   newTitle:"es6中class类的全方面理解（三）——静态方法",
   newHref:"https://zhangpeiyue.com/archives/88"
      },
      {
   newTitle:"es6中class类的全方面理解（二）——继承",
   newHref:"https://zhangpeiyue.com/archives/86"
      },
      {
   newTitle:"es6中class类的全方面理解（一）",
   newHref:"https://zhangpeiyue.com/archives/83"
      },
      {
   newTitle:"es6中的模块化",
   newHref:"https://zhangpeiyue.com/archives/72"
      }
  ]
     },
     {
  tagName:"node",//按钮的名字
  newList:[//node新闻的内容列表
      {
   newTitle:"如何通过node.js对数据进行MD5加密",
   newHref:"https://zhangpeiyue.com/archives/118"
      }
  ]
     }
 ],
 //index用于记录当前所选按钮的位置，值会根据点击按钮的不同而变化
 index:0
    }
}

然后再将template进行修改

    
   
    
    
 {{info.newTitle}}

最后运行项目，如你所愿，正常运行，一切都是那么美好！
就目前来讲这些数据都已经被单独存放起来了，不过做到这样还远远不够，因为不管是按钮的文字还是新闻的内容正常来讲都是来自于后台人员提供的接口。所以咱们还要继续调整！
首先创建一个server.js，创建一个基于express的node服务来提供接口：

var express=require("express");
var app=express();
app.get("/getTagList",function(req,res){
    res.json([
 {
     tagName:"vue",
     newList:[
  {
      newTitle:"利用Vue-cli中的proxyTable解决开发环境的跨域问题",
      newHref:"https://zhangpeiyue.com/archives/101"
  },
  {
      newTitle:"真正掌握vuex的使用方法（一）",
      newHref:"https://zhangpeiyue.com/archives/120"
  },
  {
      newTitle:"真正掌握vuex的使用方法（二）",
      newHref:"https://zhangpeiyue.com/archives/122"
  },
  {
      newTitle:"真正掌握vuex的使用方法（三）",
      newHref:"https://zhangpeiyue.com/archives/126"
  },
  {
      newTitle:"真正掌握vuex的使用方法（四）",
      newHref:"https://zhangpeiyue.com/archives/127"
  }
     ]
 },
 {
     tagName:"es6",
     newList:[
  {
      newTitle:"es6箭头函数的理解及面试题",
      newHref:"https://zhangpeiyue.com/archives/92"
  },
  {
      newTitle:"es6中class类的全方面理解（三）——静态方法",
      newHref:"https://zhangpeiyue.com/archives/88"
  },
  {
      newTitle:"es6中class类的全方面理解（二）——继承",
      newHref:"https://zhangpeiyue.com/archives/86"
  },
  {
      newTitle:"es6中class类的全方面理解（一）",
      newHref:"https://zhangpeiyue.com/archives/83"
  },
  {
      newTitle:"es6中的模块化",
      newHref:"https://zhangpeiyue.com/archives/72"
  }
     ]
 },
 {
     tagName:"node",
     newList:[
  {
      newTitle:"如何通过node.js对数据进行MD5加密",
      newHref:"https://zhangpeiyue.com/archives/118"
  }
     ]
 }
    ]);
});
app.listen(80,function(){
    console.log("开启服务成功");
})

node server.js将服务开启。
通过设置proxyTable来解决开发环境中的跨域问题：

proxyTable: {
    "/api":{
 target:"http://127.0.0.1",//访问的服务器地址
 changeOrigin:true,//true为开启代理
 pathRewrite:{
     '^/api': ''//路径的替换规则
 }
    }
},

在App.vue中引入axios：

import axios from "axios";

在mounted周期函数中，通过axios来调用接口，改变tagList的值：

mounted(){
    axios.get("api/getTagList")
 .then(data=>{
     this.tagList=data.data;
 })
}

最后App.vue的内容：




    #app input,#app p{
 margin:5px;
 padding:5px;
    }
    #app input.active{
 background:red;
    }
    #app div{
 border:1px solid red;
    }

一切都是那么的自然！
如果对node不是特别了解的同学，可以在static文件夹内创建一个名字叫tagList的json文件，用于存储数据值。

[
    {
 "tagName": "vue",
 "newList": [
     {
  "newTitle": "利用Vue-cli中的proxyTable解决开发环境的跨域问题",
  "newHref": "https://zhangpeiyue.com/archives/101"
     },
     {
  "newTitle": "真正掌握vuex的使用方法（一）",
  "newHref": "https://zhangpeiyue.com/archives/120"
     },
     {
  "newTitle": "真正掌握vuex的使用方法（二）",
  "newHref": "https://zhangpeiyue.com/archives/122"
     },
     {
  "newHref": "https://zhangpeiyue.com/archives/126"
     },
     {
  "newTitle": "真正掌握vuex的使用方法（四）",
  "newHref": "https://zhangpeiyue.com/archives/127"
     }
 ]
    },
    {
 "tagName": "es6",
 "newList": [
     {
  "newTitle": "es6箭头函数的理解及面试题",
  "newHref": "https://zhangpeiyue.com/archives/92"
     },
     {
  "newTitle": "es6中class类的全方面理解（三）——静态方法",
  "newHref": "https://zhangpeiyue.com/archives/88"
     },
     {
  "newTitle": "es6中class类的全方面理解（二）——继承",
  "newHref": "https://zhangpeiyue.com/archives/86"
     },
     {
  "newTitle": "es6中class类的全方面理解（一）",
  "newHref": "https://zhangpeiyue.com/archives/83"
     },
     {
  "newTitle": "es6中的模块化",
  "newHref": "https://zhangpeiyue.com/archives/72"
     }
 ]},
    {
 "tagName":"node",
 "newList":[
     {
  "newTitle":"如何通过node.js对数据进行MD5加密",
  "newHref":"https://zhangpeiyue.com/archives/118"
     }
 ]
    }
]

然后将mounted函数中调取的接口地址调整为"/static/tagList.json"即可：

mounted(){
    axios.get("/static/tagList.json")
 .then(data=>{
     this.tagList=data.data;
 })
}

今天就到这里吧，在下篇文章当中将会针对于这个案例咱们采用vuex来实现！

真正掌握vuex的使用方法（五）

Vue.js相关栏目本月热门文章