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的web页面日期格式化插件
Nov 15 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
vue v-model动态生成详解
Jun 30 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
layui动态表头的实现代码
Aug 22 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 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/03/02 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
jQuery的学习步骤
2011/02/23 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
Python中的Numpy入门教程
2014/04/26 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python 实现A*算法的示例代码
2018/08/13 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
生产车间主管岗位职责
2013/12/28 职场文书
股权转让协议书范本
2014/04/12 职场文书
医学生自荐信范文
2015/03/05 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL