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 相关文章推荐
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
Javascript闭包实例详解
Nov 29 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
vue中使用props传值的方法
May 08 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 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数组查找函数总结
2014/11/18 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python虚拟环境项目实例
2017/11/20 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Django的models模型的具体使用
2019/07/15 Python
python3中eval函数用法使用简介
2019/08/02 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Python tornado上传文件的功能
2020/03/26 Python
python 深度学习中的4种激活函数
2020/09/18 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
大学生毕业的自我鉴定
2013/11/13 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
介绍信怎么写
2015/01/30 职场文书
从事会计工作年限证明
2015/06/23 职场文书
总结会主持词
2015/07/02 职场文书
《灰雀》教学反思
2016/02/19 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL