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

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

2022-11-15 247
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： .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接口
API解析
web mvc
解析API
.NET API
红目香薰
目录
相关文章
dotNative
|
7月前
|
存储 算法 安全
.NET 平台 SM2 国密算法 License 证书生成深度解析
授权证书文件的后缀通常取决于其编码格式和具体用途。本文档通过一个示例程序展示了如何在 .NET 平台上使用国密 SM2 算法生成和验证许可证（License）文件。该示例不仅详细演示了 SM2 国密算法的实际应用场景，还提供了关于如何高效处理大规模许可证文件生成任务的技术参考。通过对不同并发策略的性能测试，开发者可以更好地理解如何优化许可证生成流程，以满足高并发和大数据量的需求。 希望这段描述更清晰地传达了程序的功能和技术亮点。
dotNative
743 14
.NET 平台 SM2 国密算法 License 证书生成深度解析
爱专研的技术土狗
|
6月前
|
数据采集 JSON API
深入解析：使用 Python 爬虫获取淘宝店铺所有商品接口
本文介绍如何使用Python结合淘宝开放平台API获取指定店铺所有商品数据。首先需注册淘宝开放平台账号、创建应用并获取API密钥，申请接口权限。接着，通过构建请求、生成签名、调用接口（如`taobao.items.search`和`taobao.item.get`）及处理响应，实现数据抓取。代码示例展示了分页处理和错误处理方法，并强调了调用频率限制、数据安全等注意事项。此技能对开发者和数据分析师极具价值。
爱专研的技术土狗
775 3
程序员爱钓鱼
|
3月前
|
JSON 编解码 API
Go语言网络编程：使用 net/http 构建 RESTful API
本章介绍如何使用 Go 语言的 `net/http` 标准库构建 RESTful API。内容涵盖 RESTful API 的基本概念及规范，包括 GET、POST、PUT 和 DELETE 方法的实现。通过定义用户数据结构和模拟数据库，逐步实现获取用户列表、创建用户、更新用户、删除用户的 HTTP 路由处理函数。同时提供辅助函数用于路径参数解析，并展示如何设置路由器启动服务。最后通过 curl 或 Postman 测试接口功能。章节总结了路由分发、JSON 编解码、方法区分、并发安全管理和路径参数解析等关键点，为更复杂需求推荐第三方框架如 Gin、Echo 和 Chi。
程序员爱钓鱼
159 5
一个幽默的程序员
|
8月前
|
数据可视化 前端开发 测试技术
接口测试新选择：Postman替代方案全解析
在软件开发中，接口测试工具至关重要。Postman长期占据主导地位，但随着国产工具的崛起，越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数，还具备强大的可视化操作、自动生成文档和API调试功能，极大简化了开发流程。
一个幽默的程序员
436 2
taro_秋刀鱼
|
3月前
|
自然语言处理 算法 API
阿里云增值税发票识别NET Rest API调用示例
本文介绍了使用NET代码调用阿里云增值税发票识别API的实现方式。通过示例代码，详细展示了如何构造请求、设置签名以及发送HTTP请求的具体步骤。代码中涵盖了请求参数的处理、签名生成逻辑（如HMAC-SHA256算法）以及调用API后的结果处理。此外，还提供了运行结果的截图和参考文档链接，帮助开发者更好地理解和应用该接口。
taro_秋刀鱼
209 4
winx_19970108018
|
6月前
|
数据采集 安全 数据挖掘
淘宝天猫宝贝详情页面商品评论采集接口全解析
淘宝天猫商品评论采集接口为电商数据挖掘提供了重要工具。通过分析海量评论，消费者可获取购买决策参考，商家能优化产品与服务，市场研究者则能洞察行业趋势与竞品表现。该接口支持Python请求，助力开发者构建智能分析应用，推动电商生态中各方价值提升。使用时需遵守平台规则，确保数据安全与合法利用。
winx_19970108018
208 15
dotNative
|
6月前
|
开发框架 .NET 中间件
.net8 使用 license 证书授权案例解析
本文介绍了如何使用 `.NET CLI` 创建并改造一个 `ASP.NET Core Web API` 项目，以实现基于许可证的授权机制。具体步骤包括创建项目、添加必要的 NuGet 包（如 `Standard.Licensing` 和 `Swashbuckle.AspNetCore`），以及修改 `Program.cs` 文件以集成自定义的许可证验证中间件。项目结构中新增了 `LicenseController` 接口用于处理授权相关操作，并通过测试流程验证了默认天气接口在未授权和授权状态下的响应情况。整个过程确保了应用程序能够在启动时正确验证许可证，保障系统的安全性与可控性。
dotNative
312 8
.net8 使用 license 证书授权案例解析
技术交流18179014480
|
6月前
|
机器学习/深度学习 JSON 算法
淘宝拍立淘按图搜索API接口系列的应用与数据解析
淘宝拍立淘按图搜索API接口是阿里巴巴旗下淘宝平台提供的一项基于图像识别技术的创新服务。以下是对该接口系列的应用与数据解析的详细分析
技术交流18179014480
156 4
WBKJ_Noah18870292986
|
6月前
|
存储 缓存 监控
如何高效爬取天猫商品数据？官方API与非官方接口全解析
本文介绍两种天猫商品数据爬取方案：官方API和非官方接口。官方API合法合规，适合企业长期使用，需申请企业资质；非官方接口适合快速验证需求，但需应对反爬机制。详细内容涵盖开发步骤、Python实现示例、反爬策略、数据解析与存储、注意事项及扩展应用场景。推荐工具链包括Playwright、aiohttp、lxml等。如需进一步帮助，请联系作者。
WBKJ_Noah18870292986
533 0
追逐时光者
|
8月前
|
开发框架 数据可视化 .NET
.NET 中管理 Web API 文档的两种方式
.NET 中管理 Web API 文档的两种方式
追逐时光者
138 14

热门文章

最新文章

  • 1
    抖音视频列表API秘籍！轻松获取视频列表数据
  • 2
    IDEA 用户惊叹：API 文档还能这样一键生成？
  • 3
    抖音视频详情API秘籍！轻松获取视频详情数据
  • 4
    深度分析淘宝卖家订单详情API接口，用json返回数据
  • 5
    淘宝/天猫图片搜索API接口，json返回数据。
  • 6
    抖音电商 API 接口：开启抖音小店直播带货数据新洞察
  • 7
    Java Stream API：现代数据处理之道
  • 8
    API文档该怎么写，开发效率能翻几倍？
  • 9
    抖音电商 API 接口：抖音平台电商活动热度实时监测
  • 10
    揭秘抖音电商 API，让抖音小店粉丝增长有迹可循
  • 1
    vue引入axios出现Module parse failed: Unexpected token (5:2)
    434
  • 2
    基于SqlSugar的开发框架循序渐进介绍（10）-- 利用axios组件的封装，实现对后端API数据的访问和基类的统一封装处理
    173
  • 3
    Vue中的axios深度探索：从基础安装到高级功能应用的全面指南
    261
  • 4
    JavaScript 使用axios库发送 post请求给后端， 给定base64格式的字符串数据和一些其他参数， 使用表单方式提交， 并使用onUploadProgress显示进度
    1063
  • 5
    若依修改，若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求，必须用param
    587
  • 6
    axios发送post请求，如何接受和返回一个axios的字段，解决bug的方法，困难的事情先从简单做起，先从发送一个axios的post请求做起，解决方法查别人的资料，查看F12看network就行
    126
  • 7
    文本，前后端数据交互，简单请求,如何去给data数据赋值，在mounted()里赋值,利用axios发送的请求，res就是数据集，就是后端的数据，this.users = res.data.data
    107
  • 8
    Request failed with status code 400，使用axios.post要发送参数，认真比对原项目，看看有没有忘记什么？
    355
  • 9
    vue3 在 watchEffect 里中断未完成的 axios 请求（只保留最后一次请求的方法---连续点击查询按钮的优化）
    253
  • 10
    前后端数据交互.js文件的axios的写法，想要往后端发送数据，页面注入API，await的意思是同步等待服务器数据，并返回，axios注入在其他页面，其他页面调用的时候，同步作用
    138

    • 相关课程

    更多
  • 第八届大学生创新创业大赛阿里命题IoT赛题解析
  • 云计算工程师解析与实战-网络专家篇（体验版）
  • 深入解析Docker容器化技术
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • 阿里云Elasticsearch体系架构与特性解析
  • 架构分析、数据整合、负载均衡，梦想旅行解析云上实践
  • 云解析DNS在安全容灾场景下的应用分享

    • 推荐镜像

    更多
  • DNS
    • 下一篇
    蛋白质语言模型 ProGen：在实验室合成由 AI 预测的蛋白质