访问vue_一起学Vue：访问API(axios)

目标

使用Vue+ElementUI+axios构建一个非常简单CRUD应用程序，以便您更好地了解它的工作方式。

什么是 axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装axios

我们使用 NPM 进行安装

npm install axios

查询

setTodos() {const url = "https://localhost:44399/api/todo?pageIndex=1&pageSize=100";axios.get(url).then((response) => {console.log(response);if (response.data.Code === 0) {this.Todos = response.data.Result;}});
},

新增

createTodo(item) {const url = "https://localhost:44399/api/todo";axios.post(url, item).then((response) => {console.log(response);if (response.data.Code === 0) {this.setTodos();}});this.selectedIndex = -1;this.selectedItem = {};this.addDialogVisible = false;
},

更新

updateTodo(item) {const url = `https://localhost:44399/api/todo/${item.Id}`;axios.put(url, item).then((response) => {console.log(response);if (response.data.Code === 0) {this.setTodos();}});this.selectedIndex = -1;this.selectedItem = {};this.editDialogVisible = false;
},

删除

deleteTodo(index) {const url = `https://localhost:44399/api/todo/${this.Todos[index].Id}`;axios.delete(url).then((response) => {console.log(response);if (response.data.Code === 0) {this.setTodos();}});this.selectedIndex = -1;this.selectedItem = {};
},

完整代码：

<template>
<div style="text-align: left"><el-button type="text" @click="addTodo()">新增</el-button><el-table :data="Todos" style="width: 100%"><el-table-column type="index" width="50"> </el-table-column><el-table-column prop="Name" label="名称"> </el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="editTodo(scope.$index)" type="text" size="small">编辑</el-button><el-button @click="deleteTodo(scope.$index)" type="text" size="small">删除</el-button></template></el-table-column></el-table><TodoAddWithUI :dialogVisible="addDialogVisible" :selectedItem="selectedItem" @save="createTodo" @cancel="cancel"></TodoAddWithUI><TodoEditWithUI :dialogVisible="editDialogVisible" :selectedItem="selectedItem" @save="updateTodo" @cancel="cancel"></TodoEditWithUI>
</div>
</template><script>
import axios from "axios";
import TodoAddWithUI from "./TodoAddWithUI.vue";
import TodoEditWithUI from "./TodoEditWithUI.vue";
export default {components: {TodoAddWithUI,TodoEditWithUI,},data() {return {selectedIndex: -1, // 选择了哪条记录selectedItem: {}, // 选中的信息addDialogVisible: false,editDialogVisible: false,Todos: [],};},created: function () {this.setTodos();},methods: {setTodos() {const url = "https://localhost:44399/api/todo?pageIndex=1&pageSize=100";axios.get(url).then((response) => {console.log(response);if (response.data.Code === 0) {this.Todos = response.data.Result;}});},addTodo() {this.addDialogVisible = true;},createTodo(item) {const url = "https://localhost:44399/api/todo";axios.post(url, item).then((response) => {console.log(response);if (response.data.Code === 0) {this.setTodos();}});this.selectedIndex = -1;this.selectedItem = {};this.addDialogVisible = false;},editTodo(index) {this.selectedIndex = index;this.selectedItem = JSON.parse(JSON.stringify(this.Todos[index]));this.editDialogVisible = true;},updateTodo(item) {const url = `https://localhost:44399/api/todo/${item.Id}`;axios.put(url, item).then((response) => {console.log(response);if (response.data.Code === 0) {this.setTodos();}});this.selectedIndex = -1;this.selectedItem = {};this.editDialogVisible = false;},deleteTodo(index) {const url = `https://localhost:44399/api/todo/${this.Todos[index].Id}`;axios.delete(url).then((response) => {console.log(response);if (response.data.Code === 0) {this.setTodos();}});this.selectedIndex = -1;this.selectedItem = {};},cancel() {this.addDialogVisible = false;this.editDialogVisible = false;},},
};
</script>

TodoAddWithUI.vue和TodoEditWithUI.vue代码没有需要访问的Api，在这里就不贴了，其他代码：

小结

目前为止，我们完成了Vue+ElementUI+axios的CRUD，是不是还是挺简单的呀。其实你也可以使用Fetch API，Fetch API 是一个用于此类请求的强大的原生 API。你可能听说过 Fetch API 其中的一个好处，就是你不需要在使用它的时候额外加载一个外部资源。具体的用法跟axios基本上没有区别。

文中用到的代码我们放在：https://github.com/zcqiand/miscellaneous/tree/master/vue

访问vue_一起学Vue：访问API(axios)相关推荐

vue访问php时做增删改查,node连接mysql生成接口，vue通过接口实现数据的增删改查（一）...
武汉加油遇新是直朋能到分览支体调!中国加油! 想必许多干用是处框它观有理近货框万理架是察放是近学vue的小伙伴想连接数据库,对数据进行增删改查吧,奈何不知道怎么实现.作为一路踩坑的我,为大家带来我的一 ...
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流
输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue 中使用防抖和节流参考文章: (1)输入防抖 vue # 输入搜索的时候及时搜索的快速访问接口的解决方案 vue ...
出国访学｜访问学者申请成功的两大注意事项
据51访学网了解,每年差不多有十万左右的人争报公派访问学者名额,而最终被国家留学基金委录取的也只有其中的十分之一,残酷低下的淘汰率,让很多人的准备付之东流.失去出国基金委的公派机会就意味着失去公派出国 ...
深入浅出学 Vue 开发
课程介绍前端技术日新月异,每一种新的思想出现,都代表了一种技术的跃进.架构的变化,那么对于目前的前端技术而言,MVVM 的思想已经可以代表当今前端领域的前沿思想理念,Angular.React.Vu ...
vue配置api代理详解与使用方法
创建的vue框架中,在自动生成的config目录下dev.env.js 'use strict' const merge = require('webpack-merge') const prodEn ...
vue如何解决axios请求前端跨域问题
一.为什么会出现跨域的问题? 跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域. 在前后端分离的模式下,前后端的域名是不一致的,此时就会发生跨域访问问题.跨域问 ...
springboot+Vue项目使用axios实现跨域(CROS)
springboot+Vue项目使用axios实现(CROS)跨域一.项目背景二.跨域资源共享 CORS 详解三.axios跨域实现 3.1 安装qs模块 3.2 axios使用四.sprin ...
Vue路由之axios配置JWT身份验证
前言: 认证和授权,其实吧简单来说就是:认证就是让服务器知道你是谁,授权就是服务器让你知道你什么能干,什么不能干(例如下面meta元信息),认证授权俩种方式:Session-Cookie与JWT,下面 ...
深入浅出学Vue开发：导读
如果你看了这一篇文章,那么相信你对这次的课程是有兴趣的,同时作为撰写者的我,也感到非常的荣幸. 程序人生程序人生,我们选择了这个行业,自然希望能够在这里走的更远.我相信没有任何一个人会甘于平庸,大家 ...

访问vue_一起学Vue：访问API(axios)

目标

什么是 axios？

安装axios

查询

新增

更新

删除

完整代码：

小结

访问vue_一起学Vue：访问API(axios)相关推荐

最新文章

热门文章