1全局安装vue-cli

输入命令:npm install vue-cli -g

2创建项目框架

输入命令:vue init webpack vueapi

3依次按照提示输入,项目名、项目描述、项目作者等等,

4.进入vueapi目录

输入命令: cd vueapi

5.安装element-ui

输入命令:npm i element-ui -S

因为是基于Vue.js和elementUI进行的项目开发,所以当然要导入Vue.j包和elementUI包:

npm install --save vue element-ui

6.安装vue-router

要进行页面跳转,所以要用到vue-router:

输入命令:npm install --save vue-router

7.安装axios

要从后端获取数据,所以要ajax请求,用vue官方推荐的axios:

输入命令:npm install --save axios

启动项目

输入:npm run dev

构建vue项目目录大致如下:

buid:构建脚本目录
config:构建配置目录
node_modules:依赖node工具包目录
src:源码目录
assets:资源目录
components:组件目录
router:
App.vue 页面vue组件
main.js:页面入口js文件
static:静态文件目录
test:测试文件目录
.eslintrc.js:es语法检查配置
index.html:入口页面
package.json :项目描述文件

调用后台接口:需要引入axios

在main.js 引入

import axios from 'axios'
Vue.prototype.$http = axios
Vue.prototype.$http.defaults.baseURL = '' // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL

如下图(编辑前端页面)

<template>
<el-container style="height: 680px; border: 10px solid #eee">
<el-aside width="250px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"
><i class="el-icon-message"></i>导航一</template
>
<el-menu-item-group>
<template slot="title"
>分组一</template
>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title"
>选项4</template
>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"
><i class="el-icon-menu"></i>导航二</template
>
<el-menu-item-group>
<template slot="title"
>分组一</template
>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title"
>选项4</template
>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"
><i class="el-icon-setting"></i>导航三</template
>
<el-menu-item-group>
<template slot="title"
>分组一</template
>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title"
>选项4</template
>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside> <el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header> <el-main>
<el-table :data="list">
<el-table-column prop="datatext" label="日期" width="140">
</el-table-column>
<el-table-column prop="version" label="姓名" width="120">
</el-table-column>
<el-table-column prop="id" label="地址"> </el-table-column>
<el-table-column prop="text" label="描述"> </el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>

template

css js:

<style>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
} .el-aside {
color: #333;
}
</style> <script> export default { data () {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' } return {
list: [],
tableData: Array(20).fill(item)
}
}, created () {
this.getlist()
},
methods: {
getlist () {
let _this = this
_this.$http.get('https://localhost:44314/api/Values').then(res => {
_this.list = res.data
})
}
}
}
</script>

数据填充页面

页面:
<el-main>
<el-table :data="list">
<el-table-column prop="datatext" label="日期" width="140">
</el-table-column>
<el-table-column prop="version" label="姓名" width="120">
</el-table-column>
<el-table-column prop="id" label="地址"> </el-table-column>
<el-table-column prop="text" label="描述"> </el-table-column>
</el-table>
</el-main>

运行如下

vue-Element-axios搭建调用api进行数据展示的更多相关文章

  1. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  2. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  3. 使用Vue.js和Axios从第三方API获取数据 — SitePoint

    更多的往往不是,建立你的JavaScript应用程序时,你会想把数据从远程源或消耗一个[ API ](https:/ /恩.维基百科.org /维基/ application_programming_ ...

  4. vue使用axios提交formdata格式的数据

    参考: https://www.cnblogs.com/qwert1/p/8909455.html https://blog.csdn.net/qq_42984640/article/details/ ...

  5. 大数据技术之_25_手机APP信息统计系统项目_01_APP 数据生成模块 + 数据收集模块 + 数据处理模块框架搭建 + 业务需求处理 + 数据展示模块 +项目总结 + 问题总结

    一 项目概述1.1 角色1.2 业务术语1.3 项目效果展示二 项目需求三 项目概要3.1 项目技术架构3.2 项目目录结构3.3 项目技术选型3.4 项目整体集群规划3.5 创建项目工程四 APP ...

  6. Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  7. laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)

    如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 下图为我动到的文件 1.下载laravel5.4 2.命令行(laravel5.4目录下):composer install 3. ...

  8. 微信小程序如何调用API实现数据请求-wx.request()

    前言 微信小程序不存在ajax,那么它是如何实现数据请求功能的呢?在微信中提供了API的调用wx.request(OBJECT),这个是很不错的.下面就讲一下如何请求数据,简单到不行. wx.requ ...

  9. vue 用axios实现调用接口下载excel

    了解的方式有两种: 1. 用a标签,href设置为后端提供的excel接口 <a href="excel接口">导出</a> 简单方便,缺点就是当有toke ...

随机推荐

  1. 2.GoF 的 23 种设计模式的分类和功能

    1. 根据目的来分 根据模式是用来完成什么工作来划分,这种方式可分为创建型模式.结构型模式和行为型模式 3 种. 创建型模式:用于描述“怎样创建对象”,它的主要特点是“将对象的创建与使用分离”.GoF ...

  2. Python 爬虫之 Beautifulsoup4,爬网站图片

    安装: pip3 install beautifulsoup4 pip install beautifulsoup4 Beautifulsoup4 解析器使用 lxml,原因为,解析速度快,容错能力强 ...

  3. ngx-echarts 图表数据动态更新

    使用echarts绘制图表时,初次赋值数据正常展示,重新获取数据之后,图表没有跟着动态刷新.解决的办法是: html文件 <div echarts [options]="chartOp ...

  4. Hebye 深度学习中Dropout原理解析

    1. Dropout简介 1.1 Dropout出现的原因 在机器学习的模型中,如果模型的参数太多,而训练样本又太少,训练出来的模型很容易产生过拟合的现象. 在训练神经网络的时候经常会遇到过拟合的问题 ...

  5. LCA最近公共祖先-- HDU 2586

    题目链接 Problem Description There are n houses in the village and some bidirectional roads connecting t ...

  6. 多线程(四)多线程同步_Critical Section临界区

    临界区是指一个小代码段,在代码能够执行前,它必须独占对某些共享资源的访问权.和使用mutex一样,它们都是以原子操作方式来对共享资源进行访问. 临界区又叫关键代码段,与上一篇的mutex互斥体实现的功 ...

  7. ReportMachine打印条形码的问题

    ReportMachine打印条形码的问题 最近用RM报表来打印条形码,调试过程非常顺利,扫描枪识别也很正常,唯独斑马打印机的走纸不准确是个问题,正好客户不想用这种纸型,并定制了新纸型,心想等新纸型到 ...

  8. spark写入空值到Oracle

    转自:https://blog.csdn.net/qq_33792843/article/details/83750025 val nullStr = org.apache.spark.sql.fun ...

  9. 01.JAVA语言基础相关解答

    1.首先,第一个问题谈到一个java类文件中真的只能有一个公有类吗?并给出了以下代码.可以看出这个程序里有两个public类: 我进行了不同的调试:                           ...

  10. 虚拟机-Ubuntu

    1.安装 下载iso镜像文件,在VMware中创建时添加即可 2.安装tools,可以复制文件 参考:https://www.cnblogs.com/justaman/p/10545239.html ...