vue中拿到接口，并获取数据，渲染到页面

首先index.html完成的是单页面展示，app.vue里面已经写了视图出口，
例如;先新建一个role.vue页面，写上相应的布局和内容，然后在路由中添加这个页面。

然后开始写渲染数据的方法
前提，封装好了获取数据的api接口,并在main,js中注册到了原型。

然后在
1，首先在api中获取接口，

2，在utils中封装http请求的get 和post方法，并注册到原型

import axios from "axios"


// 添加一个请求拦截器，回调函数会在发出请求时执行
// config:请求配置
axios.interceptors.request.use(config => {
    // Do something before request is sent

    // console.log(config)
    let token = sessionStorage.getItem("token") ? sessionStorage.getItem("token") : "";
    config.headers.Authorization = token;
    return config;
}, error => {
    // Do something with request error
    return Promise.reject(error);
});


// 响应拦截器

axios.interceptors.response.use(response => {
    // Do something before response is sent
    return response.data;
}, error => {
    // Do something with response error
    return Promise.reject(error);
});


function get(url,params={}){

    return new Promise((resolve,reject)=>{
        axios({
            method: 'get',
            url,
            params
          }).then((data)=>{
              resolve(data)
          }).catch(err=>{
              reject(err);
          })
    })
}

function post(url,data={}){

    return new Promise((resolve,reject)=>{
        axios({
            method: 'post',
            url,
            data
          }).then((data)=>{
              resolve(data)
          }).catch(err=>{
              reject(err);
          })
    })
}

export {get,post}

然后在main.js中注册

然后在store中的index.js获取数据存储

import Vue from "vue";
import Vuex from "vuex";

import { post } from "./../utils/http";
import api from "./../API/index";
import router from "./../router"

import {Message} from 'element-ui';

Vue.use(Vuex);

let store = new Vuex.Store({
  state: {
    // 相当于sessionStorage是永久仓库，数据拿进拿出都很方便，vuex是临时仓库，两者需要建立联系。
    // 刷新后,vuex的数据会消失，需要从sessionStorage中重新获取。
    token: sessionStorage.getItem("token")
      ? sessionStorage.getItem("token")
      : "",
    info: sessionStorage.getItem("info")
      ? JSON.parse(sessionStorage.getItem("info"))
      : {}
  },
  mutations: {
    setInfo(state, payload) {
      state.token = payload.token;
      state.info = payload.info;
    },
    clearInfo(state){
     state.token="";
     state.info="" 
    }
  },
  actions: {
    //   context的话就相当于state的父亲，上一级，包含着state中的所有属性,也就是mutation?
    login(contxt, payload) {
        // console.log(contxt.commit,'999')
    //   this.$http.post(this.$api.userlogin, this.ruleForm).then(res => {
    post(api.userlogin, payload).then(res => {
    console.log(res, "---");
        //验证通过，登录成功，要将数据保存到vuex中和缓存中
        if (res.code == 200) {
          // 路由传值this.$router.push()，这个方法会向history栈添加一个新纪录，所以当浏览器点击后退按钮时，会返回之前的url
          // 登录成功之后要把整个list都保存起来，
          //因为下面这里面存的是对象，要转化成字符串，才能存到store中index.js的state中
          // 放在本地存储中，
          sessionStorage.setItem("token", res.list.token);
          sessionStorage.setItem("info", JSON.stringify(res.list));
          // console.log(typeof res.list)
          // 保存在vuex中
         contxt.commit("setInfo",{token:res.list.token,info:res.list})
          // this.$router.push("/")
        //   因为引入了Router,所以可以直接用Router.push
        router.push("/");
        } else {
        //   this.$message.error(res.msg);
        Message.error(res.msg)
        }
      });
    }
  }
});
// 需要暴露和注册到main.js中，貌似自己写的文件夹里面写的东西，最好都是注册到main.js中
export default store;

然后在main.vue中的script标签中的data中，return一个data空数组用来存数据

在methods里面封装请求的方法

然后在mounted里面调用这个方法,

然后数据就被渲染出来了

觉得这篇文章对您有帮助，可以动动发财小手指帮忙点个赞呦 Thanks♪(･ω･)