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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
Javascript - HTML的request类
Jan 09 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 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
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
英国医生在线预约:Top Doctors
2019/10/30 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
Linux开机引导的步骤是什么
2014/02/26 面试题
如何唤起类中的一个方法
2013/11/29 面试题
编程输出如下图形
2013/11/24 面试题
优秀民警事迹材料
2014/01/29 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
《忆江南》教学反思
2014/04/07 职场文书
交通事故私了协议书
2014/04/16 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android