AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

.NET MVC第十章 vue axios解析web api接口

2022-11-15 202
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
云解析 DNS，旗舰版 1个月
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
全局流量管理 GTM，标准版 1个月
简介： .NET MVC第十章 vue axios解析web api接口

数据库

我用的是之前的数据库，用作测试，数据库的名称是【girl1804】


/*
Navicat SQL Server Data Transfer
Source Server         : mysqlserver
Source Server Version : 120000
Source Host           : .:1433
Source Database       : girl1804
Source Schema         : dbo
Target Server Type    : SQL Server
Target Server Version : 120000
File Encoding         : 65001
Date: 2022-10-05 20:24:26
*/
-- ----------------------------
-- Table structure for [dbo].[girlSix]
-- ----------------------------
DROP TABLE [dbo].[girlSix]
GO
CREATE TABLE [dbo].[girlSix] (
[id] varchar(32) NOT NULL DEFAULT (replace(newid(),'-','')) ,
[createDate] datetime NOT NULL DEFAULT (getdate()) ,
[nickName] varchar(30) NOT NULL ,
[introduce] nvarchar(200) NOT NULL 
)
GO
IF ((SELECT COUNT(*) from fn_listextendedproperty('MS_Description', 
'SCHEMA', N'dbo', 
'TABLE', N'girlSix', 
'COLUMN', N'nickName')) > 0) 
EXEC sp_updateextendedproperty @name = N'MS_Description', @value = N'名字'
, @level0type = 'SCHEMA', @level0name = N'dbo'
, @level1type = 'TABLE', @level1name = N'girlSix'
, @level2type = 'COLUMN', @level2name = N'nickName'
ELSE
EXEC sp_addextendedproperty @name = N'MS_Description', @value = N'名字'
, @level0type = 'SCHEMA', @level0name = N'dbo'
, @level1type = 'TABLE', @level1name = N'girlSix'
, @level2type = 'COLUMN', @level2name = N'nickName'
GO
IF ((SELECT COUNT(*) from fn_listextendedproperty('MS_Description', 
'SCHEMA', N'dbo', 
'TABLE', N'girlSix', 
'COLUMN', N'introduce')) > 0) 
EXEC sp_updateextendedproperty @name = N'MS_Description', @value = N'介绍'
, @level0type = 'SCHEMA', @level0name = N'dbo'
, @level1type = 'TABLE', @level1name = N'girlSix'
, @level2type = 'COLUMN', @level2name = N'introduce'
ELSE
EXEC sp_addextendedproperty @name = N'MS_Description', @value = N'介绍'
, @level0type = 'SCHEMA', @level0name = N'dbo'
, @level1type = 'TABLE', @level1name = N'girlSix'
, @level2type = 'COLUMN', @level2name = N'introduce'
GO
-- ----------------------------
-- Records of girlSix
-- ----------------------------
INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'04e3d962adcb4a5b8fefaf8b46995e85', N'2020-05-27 09:05:52.000', N'董新颖', N'郭老师关门弟子之一。');
GO
INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'568fc305930347d3bec1ddd08c71ad29', N'2020-05-27 09:01:09.000', N'王笑涵', N'北方有佳人，绝世而独立。');
GO
INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'7eaa67475f0c4086a5e76ba1731196d2', N'2022-06-12 11:23:16.000', N'夏天', N'保持每天好心情。');
GO
INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'972ec358089042e0bf24fd9efca47bde', N'2020-05-27 08:59:49.000', N'牛龙珠', N'笑若桃花三月开，清风徐徐醉颜来。');
GO
INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'BDFFC6A36A53408281EB8CA242C0E7A3', N'2020-05-27 08:42:31.000', N'闫春娜', N'珠缨旋转星宿摇,花蔓抖擞龙蛇动。');
GO
INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'd1cdd67717e549caba16503787b55877', N'2021-02-17 15:27:41.357', N'小龙女', N'想过过过儿过过的日子');
GO
INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'efb0ca854dac456b9d8c42d4c4b1bce0', N'2020-05-27 09:03:30.000', N'刘梓佳', N'明眸善睐，辅靥承权，瑰姿艳逸，怡静体闲，端的是好一个花王，富贵的牡丹。');
GO
INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'f839343b980e45caafaa9d2c9797294b', N'2020-05-27 09:04:53.000', N'魏慧娟', N'脉脉眼中波，盈盈花盛处。');
GO
-- ----------------------------
-- Indexes structure for table girlSix
-- ----------------------------
-- ----------------------------
-- Primary Key structure for table [dbo].[girlSix]
-- ----------------------------
ALTER TABLE [dbo].[girlSix] ADD PRIMARY KEY ([id])
GO

EF引入数据

image.png


等待完成后即可。


我们需要使用的是girl1804Entities

image.png



创建API控制器

image.png




接口编码

为了方便操作，我都写成HTTPGET请求了


获取信息


/// <summary>
/// 获取信息接口
/// </summary>
/// <returns></returns>
public object GetInfo()
{
    using (girl1804Entities db = new girl1804Entities())
    {
        return db.girlSix.ToList();
    }
}

添加信息


/// <summary>
/// 添加
/// </summary>
/// <param name="nickName"></param>
/// <param name="introduce"></param>
/// <returns></returns>
[HttpGet]
public bool AddInfo(string nickName, string introduce)
{
    using (girl1804Entities db = new girl1804Entities())
    {
        girlSix g = new girlSix();
        g.id = System.Guid.NewGuid().ToString("N");
        g.createDate = DateTime.Now;
        g.nickName = nickName;
        g.introduce = introduce;
        db.girlSix.Add(g);
        return db.SaveChanges() > 0;
    }
}


删除信息


/// <summary>
/// 删除
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpGet]
public object DeleteById(string id)
{
    using (girl1804Entities db = new girl1804Entities())
    {
        girlSix g = db.girlSix.Where(o => o.id == id).SingleOrDefault();
        db.girlSix.Remove(g);
        return db.SaveChanges() > 0;
    }
}

单个查询


/// <summary>
/// 单个查询
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpGet]
public object SelectById(string id)
{
    using (girl1804Entities db = new girl1804Entities())
    {
        return db.girlSix.Where(o => o.id == id).SingleOrDefault();
    }
}

修改方法

/// <summary>
/// 修改方法
/// </summary>
/// <param name="id"></param>
/// <param name="nickName"></param>
/// <param name="introduce"></param>
/// <returns></returns>
[HttpGet]
public bool UpdateById(string id, string nickName, string introduce)
{
    using (girl1804Entities db = new girl1804Entities())
    {
        girlSix girlSix = db.girlSix.Where(o => o.id == id).SingleOrDefault();
        if (girlSix == null)
        {
            return false;
        }
        girlSix.nickName = nickName;
        girlSix.introduce = introduce;
        return db.SaveChanges()>0;
    }
}


获取接口

image.png

接口


http://localhost:1246/api/gril1804/GetInfo
http://localhost:1246/api/gril1804/AddInfo?nickName={nickName}&introduce={introduce}
http://localhost:1246/api/gril1804/DeleteById/{id}
http://localhost:1246/api/gril1804/SelectById/{id}
http://localhost:1246/api/gril1804/UpdateById/{id}?nickName={nickName}&introduce={introduce}

根据接口解析操作即可。


网络js环境

bootstrap-css：【<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">】


JQuery：【<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>】


bootstrap：【<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>】


vue：【<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>】


axios：【<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>】


 

<!--用于bootstrap样式-->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!--用于bootstrap-->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!--用于样式-->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--用于基础操作-->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!--用于数据解析-->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

完整示例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--用于bootstrap样式-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        <div class="input-group">
            <span class="input-group-addon">昵称搜索:</span>
            <input type="text" v-model="selectKey" placeholder="请输入搜索昵称关键字" class="form-control" />
        </div>
        <table class="table table-bordered table-hover">
            <tr class="info">
                <th>编号</th>
                <th>创建时间</th>
                <th>昵称</th>
                <th>介绍</th>
                <th>操作</th>
            </tr>
            <!--遍历过滤后的集合-->
            <tr v-for="item in newlist">
                <td>{{item.id}}</td>
                <td>{{item.createDate}}</td>
                <td>{{item.nickName}}</td>
                <td>{{item.introduce}}</td>
                <td>
                    <button v-on:click="del(item.id)" class="btn btn-info">删除</button>
                    <button v-on:click="SetInfo(item)" class="btn btn-info">修改</button>
                </td>
            </tr>
        </table>
        <hr/>
        <div class="input-group">
            <span class="input-group-addon">编号:</span>
            <input type="text" v-model="id" disabled class="form-control" />
        </div>
        <div class="input-group">
            <span class="input-group-addon">创建时间:</span>
            <input type="text" v-model="createDate" disabled class="form-control" />
        </div>
        <div class="input-group">
            <span class="input-group-addon">昵称:</span>
            <input type="text" v-model="nickName" class="form-control" />
        </div>
        <div class="input-group">
            <span class="input-group-addon">简介:</span>
            <input type="text" v-model="introduce" class="form-control" />
        </div>
        <button v-on:click="Setting()" class="btn btn-info">完成修改</button>
        <button v-on:click="add()" class="btn btn-info">添加</button>
    </div>
    <!--用于bootstrap-->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!--用于样式-->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--用于基础操作-->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!--用于数据解析-->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script>
        var urlBase = "http://localhost:1246/api/gril1804/";
        new Vue({
            el: "#app",
            data: {
                list: [],
                selectKey: "",
                id: "",
                createDate: "",
                nickName: "",
                introduce: ""
            },
            created() { //获取数据
                var _this = this;
                var url = urlBase + "GetInfo";
                axios.get(url).then(function(retult) {
                    console.log(retult.data);
                    _this.list = retult.data;
                })
            },
            computed: { //过滤数据
                newlist: function() {
                    var _this = this;
                    console.log(_this.list);
                    return _this.list.filter(function(o) {
                        return o.nickName.indexOf(_this.selectKey) != -1;
                    });
                }
            },
            methods: { //方法集合
                add: function() {
                    var url = urlBase + "addInfo?nickName=" + this.nickName + "&introduce=" + this.introduce;
                    axios.get(url).then(function(retult) {
                        if (retult.data) {
                            alert("添加成功");
                            location.reload();
                        }
                    })
                },
                del: function(o) {
                    if (confirm("是否删除此行")) {
                        var url = urlBase + "DeleteById?id=" + o;
                        axios.get(url).then(function(retult) {
                            alert("删除成功");
                            location.reload();
                        })
                    }
                },
                SetInfo: function(item) { //修改1
                    this.id = item.id;
                    this.createDate = item.createDate;
                    this.nickName = item.nickName;
                    this.introduce = item.introduce;
                },
                Setting: function() { //修改2
                    var url = urlBase + "UpdateById?id=" + this.id + "&nickName=" + this.nickName + "&introduce=" + this.introduce;
                    axios.get(url).then(function(retult) {
                        if (retult.data) {
                            alert("修改成功");
                            location.reload();
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>


image.png


总结

axios使用方法相对更方便一些，加载数据也只需要在created中处理即可，如果有需要的话就搭建一个脚手架，如果不方便话使用那个都无所谓的，功能是肯定可以实现的，前提是接口一定要跨域啊，如果接口没有跨域是无法进行解析的。

文章标签：
CDN
云解析DNS
JavaScript
前端开发
API
数据库
关键词：
解析API
云解析DNS api
.NET vue
API接口
web解析
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
红目香薰
目录
相关文章
喜欢猪猪
|
11天前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性，极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理，并通过Java代码手写模拟Spring Boot的启动过程，特别是spring.factories文件的解析源码API机制。
喜欢猪猪
39 2
API小知识
|
1月前
|
存储 缓存 搜索推荐
Lazada淘宝详情API的价值与应用解析
在电商行业，数据是驱动业务增长的核心。Lazada作为东南亚知名电商平台，其商品详情API对电商行业影响深远。本文探讨了Lazada商品详情API的重要性，包括提供全面准确的商品信息、增强平台竞争力、促进销售转化、支持用户搜索和发现需求、数据驱动决策、竞品分析、用户行为研究及提升购物体验。文章还介绍了如何通过Lazada提供的API接口、编写代码及使用第三方工具实现实时数据获取。
API小知识
57 3
土木林森
|
1月前
|
XML JSON API
ServiceStack：不仅仅是一个高性能Web API和微服务框架，更是一站式解决方案——深入解析其多协议支持及简便开发流程，带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架，支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程，提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑，安装简单，通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务，包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议，具备自动验证、自动过滤器等丰富功能，适合快速搭建高性能、可扩展的服务端应用。
土木林森
113 3
1461729147809229
|
12天前
|
API 数据安全/隐私保护
抖音视频，图集无水印直链解析免费API接口教程
该接口用于解析抖音视频和图集的无水印直链地址。请求地址为 `https://cn.apihz.cn/api/fun/douyin.php`，支持POST或GET请求。请求参数包括用户ID、用户KEY和视频或图集地址。返回参数包括状态码、信息提示、作者昵称、标题、视频地址、封面、图集和类型。示例请求和返回数据详见文档。
1461729147809229
37 1
游客ady5kpv352g3u
|
18天前
|
JSON JavaScript 前端开发
蓝桥杯web组赛题解析和杯赛技巧
本文作者是一位自学前端两年半的大一学生，在第十五届蓝桥杯Web组比赛中获得省一和国三。文章详细解析了比赛题纲，涵盖HTML、CSS、JavaScript、Echarts和Vue等技术要点，并分享了备赛技巧和比赛经验。作者强调了多写代码和解题思路的重要性，同时提供了省赛和国赛的具体流程及注意事项。希望对参赛者有所帮助。
游客ady5kpv352g3u
41 3
土木林森
|
24天前
|
安全 前端开发 Java
Web安全进阶：XSS与CSRF攻击防御策略深度解析
【10月更文挑战第26天】Web安全是现代软件开发的重要领域，本文深入探讨了XSS和CSRF两种常见攻击的原理及防御策略。针对XSS，介绍了输入验证与转义、使用CSP、WAF、HTTP-only Cookie和代码审查等方法。对于CSRF，提出了启用CSRF保护、设置CSRF Token、使用HTTPS、二次验证和用户教育等措施。通过这些策略，开发者可以构建更安全的Web应用。
土木林森
63 4
土木林森
|
23天前
|
安全 Go PHP
Web安全进阶：XSS与CSRF攻击防御策略深度解析
【10月更文挑战第27天】本文深入解析了Web安全中的XSS和CSRF攻击防御策略。针对XSS，介绍了输入验证与净化、内容安全策略（CSP）和HTTP头部安全配置；针对CSRF，提出了使用CSRF令牌、验证HTTP请求头、限制同源策略和双重提交Cookie等方法，帮助开发者有效保护网站和用户数据安全。
土木林森
51 2
东方睿赢
|
1月前
|
前端开发 开发者 容器
构建响应式Web界面：Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局，探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局，如导航栏；Grid布局则适用于二维布局，如复杂网格。通过示例代码和核心属性介绍，帮助开发者灵活构建响应式Web界面。
东方睿赢
55 5
何雨晨
|
1月前
|
开发框架 .NET API
Windows Forms应用程序中集成一个ASP.NET API服务
Windows Forms应用程序中集成一个ASP.NET API服务
何雨晨
96 9
小王老师呀
|
1月前
|
存储 开发框架 .NET
.NET 8 实现无实体库表 API 部署服务
【10月更文挑战第12天】在.NET 8中，可通过以下步骤实现无实体库表的API部署：首先安装.NET 8 SDK及开发工具，并选用轻量级Web API框架如ASP.NET Core；接着创建新项目并设计API，利用内存数据结构模拟数据存储；最后配置项目设置并进行测试与部署。此方法适用于小型项目或临时解决方案，但对于大规模应用仍需考虑持久化存储以确保数据可靠性与可扩展性。
小王老师呀
35 3

热门文章

最新文章

  • 1
    Vue 入门之项目目录结构介绍
  • 2
    vue之webpack打包原理和用法详解
  • 3
    新建Vue项目
  • 4
    Vue运行时报错：ERROR Failed to compile with 1 errors ，浏览器报错：Cannot GET /
  • 5
    浏览器垃圾回收机制与 Vue 项目内存泄漏分析
  • 6
    Vue3+Vite4+Naive-UI 项目自动导入API和组件
  • 7
    Vue环境下，在单页面中遍历显示出多个Echarts图表
  • 8
    vue使用富文本编辑器wangEditor，且增加附件功能 | 项目复盘
  • 9
    基于springboot+vue的医院预约系统(前后端分离)
  • 10
    Vue的用法二
  • 1
    用 Axios 提升前端异步请求的效率
    114
  • 2
    第十篇 Axios最佳实战：前端HTTP通信的王者之选
    287
  • 3
    axios拦截器：每次请求自动带上 token
    163
  • 4
    axios拦截器的使用？
    47
  • 5
    vue----axios的七大特性
    60
  • 6
    vue3中axios添加请求和响应的拦截器
    178
  • 7
    前端axios传参总结
    174
  • 8
    前端vue3分享——项目封装axios、vite使用env环境变量
    404
  • 9
    ＜ 今日小技巧：Axios封装，接口请求增加防抖功能 ＞
    136
  • 10
    ＜ 每日份知识快餐：axios是什么？如何在Vue中 封装 axios ？ ＞
    117

    • 相关课程

    更多
  • 深入解析Docker容器化技术
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • Spring Boot2.0实战Redis分布式缓存
  • CUDA MATH API
  • API PLAYBOOK

    • 相关实验场景

    更多
  • 基于Assistant Api的旅游助手
  • 快速体验智能体API应用
  • 使用SLB+2ECS+NAS，部署电商web网站的高可用架构
  • 1分钟SAE部署Web在线游戏
  • 通过云拨测对指定服务器进行Ping/DNS监测
  • Html5和Webpack1：Webpack5打包工具介绍

    • 推荐镜像

    更多
  • DNS
  • kali-security
  • wireshark
    • 下一篇
    无影云桌面