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的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
jquery等待效果示例
May 01 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
基于redis的小程序登录实现方法流程分析
May 25 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的配置文件php.ini
2006/10/09 PHP
php&amp;java(二)
2006/10/09 PHP
PHP导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
JS实现手风琴特效
2020/11/08 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
django 将model转换为字典的方法示例
2018/10/16 Python
Python File(文件) 方法整理
2019/02/18 Python
python3对接mysql数据库实例详解
2019/04/30 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
介绍一下gcc特性
2015/10/31 面试题
高中自我鉴定
2013/12/20 职场文书
体操比赛口号
2014/06/10 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
Win11软件图标固定到任务栏
2022/04/19 数码科技