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 errorreturn Promise.reject(error);
});// 响应拦截器axios.interceptors.response.use(response => {// Do something before response is sentreturn response.data;
}, error => {// Do something with response errorreturn 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.pushrouter.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♪(･ω･)

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

Ajax获取数据渲染到页面
<script> $(function () {$.ajax({url:'http://www.hzy.cmdcw.com/index.php/message', type:'post', ...
Ajax获取数据渲染到页面的过程
Ajax 分四步骤: 创建一个Ajax对象: 打开一个链接: 监听请求的数据: 发送请求. 直接贴代码啦 <script>$(function () {$.ajax({url:'http: ...
为什么要通过API接口来获取数据
API接口(应用编程接口 application/programming接口),准许应用程序通过定义的接口标准来访问另一个应用程序或服务的编程方式.简单来说,API就是两个软件或系统之间的通信语言或接 ...
r语言股票接口如何获取数据？
r语言股票接口是有权限的,想从r语言股票接口上获取数据,要先前往其官网进行注册,然后获取你本人的token码,输入R里,与tushare进行连接.相当于token码是你的通行证,在R里输入下述代码,就 ...
通达信下单接口下载获取数据的方法
通达信下单接口下载获取数据的方法,第一步就是通过交易软件来获取数据,介绍下面这种直接获取的方法,如下: 1.通过pytdx获取本地通达信数据: 2.通过requests爬虫爬取腾讯财经数据: 3.通过 ...
JS中的Ajax发送请求获取数据流程
前言: JS两个常用的请求方法 [XMLHttpRequest() .fetch()] XMLHttpRequest() 的使用方法大致可以分为四步: 1.创建XMLHttpRequest的对象成员 ...
vue 中把后台传过来的数据中的数字转换为汉字
一.vue 中把后台传过来的数据中的数字转换为汉字 v-if ="" 冒号里面写遍历到的数据可以直接用代码如下: template <tbody><tr ...
.vue文件转换成html,在vue中把含有html标签转为html渲染页面的实例
在vue中把含有html标签转为html渲染页面的实例在标签内部添加v-html指令即可使用pug的写法: 这个content表示的是一个含标签的变量输入content为: 我是p标签输出结果 ...
vue中后端返回图片流，前端渲染方法
vue中后端返回图片流,前端渲染方法前端登录经常用到图形验证码,后端接口返回的是图片数据流,如下图返回图片流这样效果图如下: 首先封装接口api和uuid[就是一个随机数,防止重复] //获取图形 ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...

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

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

最新文章

热门文章