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渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
微信小程序实现页面浮动导航
Jan 08 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高手?学会“懒惰”的编程
2006/12/05 PHP
PHP 可阅读随机字符串代码
2010/05/26 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
上海世博会志愿者口号
2014/06/17 职场文书
社区创先争优承诺书
2014/08/30 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
护士心得体会范文
2016/01/25 职场文书
2019年最新借条范本!
2019/07/08 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
mysql sock 文件解析及作用讲解
2022/07/15 MySQL