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

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

    目录

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

    数据库

    EF引入数据

    创建API控制器

    接口编码

    获取接口

    网络js环境

    总结

    数据库

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

    1. /*
    2. Navicat SQL Server Data Transfer
    4. Source Server         : mysqlserver
    5. Source Server Version : 120000
    6. Source Host           : .:1433
    7. Source Database       : girl1804
    8. Source Schema         : dbo
    10. Target Server Type    : SQL Server
    11. Target Server Version : 120000
    12. File Encoding         : 65001
    14. Date: 2022-10-05 20:24:26
    15. */
    16.  
    17.  
    18. -- ----------------------------
    19. -- Table structure for [dbo].[girlSix]
    20. -- ----------------------------
    21. DROP TABLE [dbo].[girlSix]
    22. GO
    23. CREATE TABLE [dbo].[girlSix] (
    24. [id] varchar(32) NOT NULL DEFAULT (replace(newid(),'-','')) ,
    25. [createDate] datetime NOT NULL DEFAULT (getdate()) ,
    26. [nickName] varchar(30) NOT NULL ,
    27. [introduce] nvarchar(200) NOT NULL 
    28. )
    29.  
    30.  
    31. GO
    32. IF ((SELECT COUNT(*) from fn_listextendedproperty('MS_Description', 
    33. 'SCHEMA', N'dbo', 
    34. 'TABLE', N'girlSix', 
    35. 'COLUMN', N'nickName')) > 0) 
    36. EXEC sp_updateextendedproperty @name = N'MS_Description', @value = N'名字'
    37. , @level0type = 'SCHEMA', @level0name = N'dbo'
    38. , @level1type = 'TABLE', @level1name = N'girlSix'
    39. , @level2type = 'COLUMN', @level2name = N'nickName'
    40. ELSE
    41. EXEC sp_addextendedproperty @name = N'MS_Description', @value = N'名字'
    42. , @level0type = 'SCHEMA', @level0name = N'dbo'
    43. , @level1type = 'TABLE', @level1name = N'girlSix'
    44. , @level2type = 'COLUMN', @level2name = N'nickName'
    45. GO
    46. IF ((SELECT COUNT(*) from fn_listextendedproperty('MS_Description', 
    47. 'SCHEMA', N'dbo', 
    48. 'TABLE', N'girlSix', 
    49. 'COLUMN', N'introduce')) > 0) 
    50. EXEC sp_updateextendedproperty @name = N'MS_Description', @value = N'介绍'
    51. , @level0type = 'SCHEMA', @level0name = N'dbo'
    52. , @level1type = 'TABLE', @level1name = N'girlSix'
    53. , @level2type = 'COLUMN', @level2name = N'introduce'
    54. ELSE
    55. EXEC sp_addextendedproperty @name = N'MS_Description', @value = N'介绍'
    56. , @level0type = 'SCHEMA', @level0name = N'dbo'
    57. , @level1type = 'TABLE', @level1name = N'girlSix'
    58. , @level2type = 'COLUMN', @level2name = N'introduce'
    59. GO
    60.  
    61. -- ----------------------------
    62. -- Records of girlSix
    63. -- ----------------------------
    64. INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'04e3d962adcb4a5b8fefaf8b46995e85', N'2020-05-27 09:05:52.000', N'董新颖', N'郭老师关门弟子之一。');
    65. GO
    66. INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'568fc305930347d3bec1ddd08c71ad29', N'2020-05-27 09:01:09.000', N'王笑涵', N'北方有佳人，绝世而独立。');
    67. GO
    68. INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'7eaa67475f0c4086a5e76ba1731196d2', N'2022-06-12 11:23:16.000', N'夏天', N'保持每天好心情。');
    69. GO
    70. INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'972ec358089042e0bf24fd9efca47bde', N'2020-05-27 08:59:49.000', N'牛龙珠', N'笑若桃花三月开，清风徐徐醉颜来。');
    71. GO
    72. INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'BDFFC6A36A53408281EB8CA242C0E7A3', N'2020-05-27 08:42:31.000', N'闫春娜', N'珠缨旋转星宿摇,花蔓抖擞龙蛇动。');
    73. GO
    74. INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'd1cdd67717e549caba16503787b55877', N'2021-02-17 15:27:41.357', N'小龙女', N'想过过过儿过过的日子');
    75. GO
    76. INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'efb0ca854dac456b9d8c42d4c4b1bce0', N'2020-05-27 09:03:30.000', N'刘梓佳', N'明眸善睐，辅靥承权，瑰姿艳逸，怡静体闲，端的是好一个花王，富贵的牡丹。');
    77. GO
    78. INSERT INTO [dbo].[girlSix] ([id], [createDate], [nickName], [introduce]) VALUES (N'f839343b980e45caafaa9d2c9797294b', N'2020-05-27 09:04:53.000', N'魏慧娟', N'脉脉眼中波，盈盈花盛处。');
    79. GO
    80.  
    81. -- ----------------------------
    82. -- Indexes structure for table girlSix
    83. -- ----------------------------
    84.  
    85. -- ----------------------------
    86. -- Primary Key structure for table [dbo].[girlSix]
    87. -- ----------------------------
    88. ALTER TABLE [dbo].[girlSix] ADD PRIMARY KEY ([id])
    89. GO

    EF引入数据

    等待完成后即可。

    我们需要使用的是girl1804Entities

    创建API控制器

    接口编码

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

    获取信息

    1. /// 
    2. /// 获取信息接口
    3. /// 
    4. /// 
    5. public object GetInfo()
    6. {
    7.     using (girl1804Entities db = new girl1804Entities())
    8.     {
    9.         return db.girlSix.ToList();
    10.     }
    11. }

    添加信息

    1. /// 
    2. /// 添加
    3. /// 
    4. /// 
    5. /// 
    6. /// 
    7. [HttpGet]
    8. public bool AddInfo(string nickName, string introduce)
    9. {
    10.     using (girl1804Entities db = new girl1804Entities())
    11.     {
    12.         girlSix g = new girlSix();
    13.         g.id = System.Guid.NewGuid().ToString("N");
    14.         g.createDate = DateTime.Now;
    15.         g.nickName = nickName;
    16.         g.introduce = introduce;
    17.         db.girlSix.Add(g);
    18.         return db.SaveChanges() > 0;
    19.     }
    20. }

    删除信息

    1. /// 
    2. /// 删除
    3. /// 
    4. /// 
    5. /// 
    6. [HttpGet]
    7. public object DeleteById(string id)
    8. {
    9.     using (girl1804Entities db = new girl1804Entities())
    10.     {
    11.         girlSix g = db.girlSix.Where(o => o.id == id).SingleOrDefault();
    12.         db.girlSix.Remove(g);
    13.         return db.SaveChanges() > 0;
    14.     }
    15. }

    单个查询

    1. /// 
    2. /// 单个查询
    3. /// 
    4. /// 
    5. /// 
    6. [HttpGet]
    7. public object SelectById(string id)
    8. {
    9.     using (girl1804Entities db = new girl1804Entities())
    10.     {
    11.         return db.girlSix.Where(o => o.id == id).SingleOrDefault();
    12.     }
    13. }

    修改方法

    1. /// 
    2. /// 修改方法
    3. /// 
    4. /// 
    5. /// 
    6. /// 
    7. /// 
    8. [HttpGet]
    9. public bool UpdateById(string id, string nickName, string introduce)
    10. {
    11.     using (girl1804Entities db = new girl1804Entities())
    12.     {
    13.         girlSix girlSix = db.girlSix.Where(o => o.id == id).SingleOrDefault();
    14.         if (girlSix == null)
    15.         {
    16.             return false;
    17.         }
    18.         girlSix.nickName = nickName;
    19.         girlSix.introduce = introduce;
    20.         return db.SaveChanges()>0;
    21.     }
    22. }

    获取接口

     

    接口

    1. http://localhost:1246/api/gril1804/GetInfo
    2.  
    3. http://localhost:1246/api/gril1804/AddInfo?nickName={nickName}&introduce={introduce}
    4.  
    5. http://localhost:1246/api/gril1804/DeleteById/{id}
    6.  
    7. http://localhost:1246/api/gril1804/SelectById/{id}
    8.  
    9. http://localhost:1246/api/gril1804/UpdateById/{id}?nickName={nickName}&introduce={introduce}

    根据接口解析操作即可。

    网络js环境

    bootstrap-css：【】

    JQuery：【】

    bootstrap：【】

    vue：【】

    axios：【】

    1.     
    2. <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    3.  
    4.     
    5.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
    6.     
    7.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
    8.     
    9.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">script>
    10.     
    11.     <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js">script>

    完整示例：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     
    10.     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    11.  
    12. head>
    13.  
    14. <body>
    15.     <div id="app">
    16.         <div class="input-group">
    17.             <span class="input-group-addon">昵称搜索:span>
    18.             <input type="text" v-model="selectKey" placeholder="请输入搜索昵称关键字" class="form-control" />
    19.         div>
    20.         <table class="table table-bordered table-hover">
    21.             <tr class="info">
    22.                 <th>编号th>
    23.                 <th>创建时间th>
    24.                 <th>昵称th>
    25.                 <th>介绍th>
    26.                 <th>操作th>
    27.             tr>
    28.             
    29.             <tr v-for="item in newlist">
    30.                 <td>{{item.id}}td>
    31.                 <td>{{item.createDate}}td>
    32.                 <td>{{item.nickName}}td>
    33.                 <td>{{item.introduce}}td>
    34.                 <td>
    35.                     <button v-on:click="del(item.id)" class="btn btn-info">删除button>
    36.                     <button v-on:click="SetInfo(item)" class="btn btn-info">修改button>
    37.                 td>
    38.             tr>
    39.         table>
    40.         <hr/>
    41.         <div class="input-group">
    42.             <span class="input-group-addon">编号:span>
    43.             <input type="text" v-model="id" disabled class="form-control" />
    44.         div>
    45.         <div class="input-group">
    46.             <span class="input-group-addon">创建时间:span>
    47.             <input type="text" v-model="createDate" disabled class="form-control" />
    48.         div>
    49.         <div class="input-group">
    50.             <span class="input-group-addon">昵称:span>
    51.             <input type="text" v-model="nickName" class="form-control" />
    52.         div>
    53.         <div class="input-group">
    54.             <span class="input-group-addon">简介:span>
    55.             <input type="text" v-model="introduce" class="form-control" />
    56.         div>
    57.         <button v-on:click="Setting()" class="btn btn-info">完成修改button>
    58.         <button v-on:click="add()" class="btn btn-info">添加button>
    59.     div>
    60.     
    61.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
    62.     
    63.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
    64.     
    65.     <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">script>
    66.     
    67.     <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js">script>
    68.     <script>
    69.         var urlBase = "http://localhost:1246/api/gril1804/";
    70.         new Vue({
    71.             el: "#app",
    72.             data: {
    73.                 list: [],
    74.                 selectKey: "",
    75.                 id: "",
    76.                 createDate: "",
    77.                 nickName: "",
    78.                 introduce: ""
    79.             },
    80.             created() { //获取数据
    81.                 var _this = this;
    82.                 var url = urlBase + "GetInfo";
    83.                 axios.get(url).then(function(retult) {
    84.                     console.log(retult.data);
    85.                     _this.list = retult.data;
    86.                 })
    87.             },
    88.             computed: { //过滤数据
    89.                 newlist: function() {
    90.                     var _this = this;
    91.                     console.log(_this.list);
    92.                     return _this.list.filter(function(o) {
    93.                         return o.nickName.indexOf(_this.selectKey) != -1;
    94.                     });
    95.                 }
    96.             },
    97.             methods: { //方法集合
    98.                 add: function() {
    99.                     var url = urlBase + "addInfo?nickName=" + this.nickName + "&introduce=" + this.introduce;
    100.                     axios.get(url).then(function(retult) {
    101.                         if (retult.data) {
    102.                             alert("添加成功");
    103.                             location.reload();
    104.                         }
    105.                     })
    106.                 },
    107.                 del: function(o) {
    108.                     if (confirm("是否删除此行")) {
    109.                         var url = urlBase + "DeleteById?id=" + o;
    110.                         axios.get(url).then(function(retult) {
    111.                             alert("删除成功");
    112.                             location.reload();
    113.                         })
    114.                     }
    115.                 },
    116.                 SetInfo: function(item) { //修改1
    117.                     this.id = item.id;
    118.                     this.createDate = item.createDate;
    119.                     this.nickName = item.nickName;
    120.                     this.introduce = item.introduce;
    121.                 },
    122.                 Setting: function() { //修改2
    123.                     var url = urlBase + "UpdateById?id=" + this.id + "&nickName=" + this.nickName + "&introduce=" + this.introduce;
    124.                     axios.get(url).then(function(retult) {
    125.                         if (retult.data) {
    126.                             alert("修改成功");
    127.                             location.reload();
    128.                         }
    129.                     })
    130.                 }
    131.             }
    132.         })
    133.     script>
    134. body>
    135.  
    136. html>

    总结

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

  • 相关阅读:
    自定义MVC框架
    共话云原生数据库的未来
    一文知晓Linux文件权限
    Python中文件操作（IO流）及文件备份
    二次开发真的很难吗？低代码平台有话说
    关于粉丝需要编译python版本的opencv-cuda11的方法（在ubuntu22.04平台编译，python3.6,cuda11.7）
    游戏引擎分层简介
    vscode c++食用指南
    ChatGPT AIGC 实现Excel行列多条件交叉查找
    测试与FastAPI应用数据之间的差异
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/127176923