vue2.0 获取从http接口中获取数据,组件开发,路由配置方式


Posted in Javascript onNovember 04, 2019

vue 2.0 从接口中获取数据

<template>
 <div id="admins">
  <h1>I am a title.</h1>
  <a> written by {{ author }} </a>
  <div v-for="admin in users">
   {{admin.name}}<br>{{admin.password}}
  </div>
 </div>
</template>

<script type="text/javascript">
import axios from 'axios'
export default {
 name: 'admins',
 data () {
  return {
   author: "there is nonthing",
   users:[]
  }
 },
 mounted(){
  this.getAdminList()
 },
 methods:{
   getAdminList(){
   var vm=this; 
   axios.get('/api/admins')
   .then(function(response){
     vm.users=response.data
   })
  }
 } 
}
</script>

<style>
</style>

解决axios发起http请求遇到跨域的问题

修改 config/index.js

proxyTable: {
    '/api': {
    target: 'http://127.0.0.1:8080',//设置你调用的接口域名和端口号 别忘了加http
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''//这里理解成用‘/api'代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add'即可
    }
   }
  },

配置router

new Router({
 mode:'history',
 base:__dirname,
 routes: [
  {
   path: '/HelloWorld',
   name: 'HelloWorld',
   component: HelloWorld
  },
  {
   path: '/admins',
   name: 'admins',
   component: admins
  }
 ]
})

加载组件

import admins from '@/components/HelloWorld'
export default {
 name: 'App',
 data () {
  return {
   Msg: "there is nonthing",
   seen:false
  }
 },
 componets:{
  HelloWorld
 }
}

心得:vue相当于 和可以自定义html中的标签 和 属性。

在开发过程中,首先容易出现的是标点符号问题,其次是缺少引用的js,或者组件。

感觉看视频中的写法和网络上流传的写法有些地方差别很大,特别是调用http接口获取数据,还是参考网上使用axios解决跨域问题,比较好,此外,官网视频中使用的是在create里面发请求获取数据,但是会报错,使用mounted不会报错。当然使用npm进行管理的话,首先要了解一下整个项目的目录结构。了解完之后再进行开发,才会避免摸不着头脑的情况

以上这篇vue2.0 获取从http接口中获取数据,组件开发,路由配置方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery版仿Path菜单效果
Dec 15 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
vue-router单页面路由
Jun 17 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
JavaScript原型链详解
Nov 07 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 #Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 #Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 #Javascript
element-ui table组件如何使用render属性的实现
Nov 04 #Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 #Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 #Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 #Javascript
You might like
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
jQuery列表拖动排列具体实现
2013/11/04 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
高分子材料与工程专业个人求职信
2013/12/15 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
产品质量承诺书范文
2014/03/27 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
擅自离岗检讨书
2014/09/12 职场文书
2014年新教师工作总结
2014/11/08 职场文书
英文投诉信格式
2015/07/03 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书