VUE3.0+Antdv+Asp.net WebApi開發學生信息管理系統（二）

来源:https://www.cnblogs.com/hsiang/archive/2022/08/10/16564385.html
-Advertisement-
Play Games

在B/S系統開發中，前後端分離開發設計已成為一種標準，而VUE作為前端三大主流框架之一，越來越受到大家的青睞，Antdv是Antd在Vue中的實現。本系列文章主要通過Antdv和Asp.net WebApi開發學生信息管理系統，簡述前後端分離開發的主要相關內容，僅供學習分享使用，如有不足之處，還請指... ...


在B/S系統開發中，前後端分離開發設計已成為一種標準，而VUE作為前端三大主流框架之一，越來越受到大家的青睞，Antdv是Antd在Vue中的實現。本系列文章主要通過Antdv和Asp.net WebApi開發學生信息管理系統，簡述前後端分離開發的主要相關內容，僅供學習分享使用，如有不足之處，還請指正。

在本示例項目中，主要包含兩大部分：1.前端web項目【vsims.web】2.後端webapi項目【vsims.webapi】，經過前一篇文章的講解，已經對前端項目的架構和組成部分有了大致瞭解，今天繼續開發後端webapi項目的開發講解。

涉及知識點

在本示例中，涉及知識點包含前端和後端兩部分：

前端項目涉及知識點如下：

  • 開發工具：HbuilderX
  • 項目框架：VUE3.0+Antdv

後端項目涉及知識點如下：

  • 開發工具：Visual Studio 2022
  • 項目類型：Asp.net WebApi
  • 資料庫：SQL Server 2012

資料庫表結構

在學生信息管理系統中，學生，班級，課程，成績等內容和管理模塊的相關內容，都離不開資料庫的支持，所以數據是支撐，頁面是對數據的展示。根據系統功能設計，對應資料庫如下所示：

 

 關於具體表結構說明，之前已有說明，本文不再贅述，可參考文章：WPF開發學生信息管理系統【WPF+Prism+MAH+WebApi】（二） 

創建WebApi項目

在VS2022中文件--新建，打開創建新項目視窗，然後選擇【ASP.NET Core Web API】項目類型，點擊下一步，如下所示：

 

 在配置新項目頁面，輸入項目名稱，和保存位置，點擊下一步，如下所示：

 

 選擇項目對應框架，預設.NET 6.0

 

資料庫實體類

項目創建成功後，添加資料庫表對應的實體類，如下圖所示：

 

添加第三方框架

本示例中所需要的第三方框架主要有三個，如下所示：

  1. EntityFramework框架主要用於操作資料庫，是微軟提供的通過ORM方式操作數據的框架。
  2. Autofac框架，主要用於類的依賴註入的自動實現。
  3. Swagger框架，主要用於WebApi在瀏覽器端的可視化展示。

第三方框架主要通過Nuget包進行安裝，如下所示：

 

創建WebApi介面

在Asp.net WebApi項目中，採用三層架構的方式進行開發介面，如下所示：

 

關於具體實現類的代碼，之前已有說明，本文不在贅述，可參考文章：WPF開發學生信息管理系統【WPF+Prism+MAH+WebApi】（二） 

配置介面

在上述介面開發完成後，需要配置註入DataCotext和Autofac等內容，如下所示：

 1 using Autofac;
 2 using Autofac.Extensions.DependencyInjection;
 3 using Microsoft.EntityFrameworkCore;
 4 using VSIMS.WebApi;
 5 using VSIMS.WebApi.Data;
 6 using VSIMS.WebApi.Services.Student;
 7 using System.Configuration;
 8 using System.Reflection;
 9 
10 var builder = WebApplication.CreateBuilder(args);
11 
12 // Add services to the container.
13 
14 builder.Services.AddControllers();
15 // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
16 builder.Services.AddEndpointsApiExplorer();
17 builder.Services.AddSwaggerGen();
18 builder.Services.AddDbContext<DataContext>(options => options.UseSqlServer(builder.Configuration.GetConnectionString("Default")));
19 // 以下是autofac依賴註入
20 builder.Host.UseServiceProviderFactory(new AutofacServiceProviderFactory());
21 builder.Host.ConfigureContainer<ContainerBuilder>(builder =>
22 {   // 註入Service程式集
23     string assemblyName = Assembly.GetExecutingAssembly().GetName().Name;
24     builder.RegisterAssemblyTypes(Assembly.Load(assemblyName))
25     .AsImplementedInterfaces()
26     .InstancePerDependency();
27 });
28 var app = builder.Build();
29 
30 // Configure the HTTP request pipeline.
31 if (app.Environment.IsDevelopment())
32 {
33     app.UseSwagger();
34     app.UseSwaggerUI();
35 }
36 
37 app.UseHttpsRedirection();
38 
39 app.UseAuthorization();
40 
41 app.MapControllers();
42 
43 app.Run();

 

運行WebApi介面

在VS中運行程式，如果顯示介面列表，則表示成功。如下所示：

Web前端調用Api

在VUE3.0的前端項目中，如果需要調用WebApi，需要先安裝第三方插件Axios以及vue-axios，安裝命令為：

npm -i --save axios
npm -i --save vue-axios

安裝過程，如下圖所示：

 

配置和封裝Axios

在src目錄下創建api目錄，並創建config.js，配置介面訪問基本地址，如下所示：

1 export default {
2   baseUrl: {
3     dev: "http://localhost:5151/", // 開發環境
4     // fat: 'http://xxx.xx.xx.xx:8080' 
5     //uat : "http://production.com"
6     //pro:"http://localhost:8088/"
7   },
8 };

然後在api目錄下，創建http.js文件，封裝axios訪問，如下所示：

 1 import axios from "axios"; // 引用axios
 2 import config from "@/api/config";
 3 
 4 const instance = axios.create({
 5     baseURL: config.baseUrl.dev,
 6     timeout: 60000,
 7 });
 8 //get請求
 9 export function get(url, params = {}) {
10     return new Promise((resolve, reject) => {
11         instance
12             .get(url, {
13                 params: params,
14             })
15             .then((response) => {
16                 resolve(response);
17             })
18             .catch((err) => {
19                 reject(err);
20             });
21     });
22 }
23 //post請求
24 export function post(url, data = {}) {
25     return new Promise((resolve, reject) => {
26         instance.post(url, data).then(
27             (response) => {
28                 resolve(response.data);
29             },
30             (err) => {
31                 reject(err);
32             }
33         );
34     });
35 }

然後創建index.js，封裝get和post方法，如下所示：

1 // index.js 調用介面的方法
2 // 引入封裝的get/post請求方法
3 import {
4     get,
5     post
6 } from '@/api/http'
7 
8 export const getD = (url, m) => get(url, m)
9 export const postD = (url, m) => post(url, m)

封裝完成後，在LoginView登錄視圖中，調用介面，如下所示：

引入index.js封裝的方法，如下所示：

1 import { getD } from '../api/index.js';

在登錄事件中，調用介面，輸出介面返回信息，如下所示：

 1 const onFinish = (values: any) => {
 2     console.log(values);
 3     console.log('Success:', values);
 4     getD('/api/Login/Login',{"username":values.username,"password":values.password}).then(res=> {
 5         console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>");
 6         console.log(res);
 7         console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>");
 8         router.push('/home');
 9     })
10     .catch(error=>{
11         console.log(error)
12     });
13     //this.$router.push('/home');
14 };

然後運行程式，輸入用戶名密碼，點擊登錄按鈕，然後提示如下錯誤：

 

 以上錯誤是前端項目和後端WebApi是兩個獨立的項目，不屬於同一個域，所以會報跨域問題。在Vue3.0中，要解決跨域問題，需要在vue.config.js中增加跨域配置。如下所示：

 1 const {
 2     defineConfig
 3 } = require('@vue/cli-service');
 4 const webpack = require('webpack');
 5 module.exports = defineConfig({
 6     css: {
 7         loaderOptions: {
 8             less: {
 9                 lessOptions: {
10                     modifyVars: {
11                         'primary-color': '#1DA57A',
12                         'link-color': '#1DA57A',
13                         'border-radius-base': '2px',
14                     },
15                     javascriptEnabled: true,
16                 },
17             },
18         },
19     },
20     chainWebpack: config => {
21         config
22         .plugin('html')
23         .tap(args => {
24             args[0].title = 'SIMS'
25             return args
26         })
27     },
28     transpileDependencies: true,
29     configureWebpack: {
30         devServer: {
31             host:'localhost',
32             port:8080,
33             proxy: {
34               '/api': {                //   /api是習慣性的寫法，可以隨意改
35                 target: 'http://localhost:5151/', //介面功能變數名稱
36                 changeOrigin: true,             //是否跨域
37               }
38             }
39         }
40     }
41 })

登錄模塊業務邏輯

通過登錄介面視窗返回的狀態碼以及返回值，判斷是否登錄成功，如果成功，則跳轉到主頁面，如果失敗，則提示錯誤信息，如下所示：

 1 const onFinish = (values: any) => {
 2     console.log(values);
 3     console.log('Success:', values);
 4     getD('/Login/Login',{"username":values.username,"password":values.password}).then(res=> {
 5         if(res.status==200){
 6             //返回成功
 7             if(res.data>0){
 8                 sessionStorage['UserId']=values.username;
 9                 sessionStorage['LoginId']=res.data;
10                 message.success('登錄成功！');
11                 router.push('/home');
12             }else{
13                 message.error('登錄失敗，用戶命名錯誤！');
14             }
15         }else if(res.status==204){
16             //沒有返回
17             message.error('用戶命名錯誤！');
18         }else{
19             message.error('系統錯誤！');
20         }
21     })
22     .catch(error=>{
23         console.log(error)
24     });
25     //this.$router.push('/home');
26 };

運行程式

啟動項目後，在瀏覽器中輸入網址，操作如下所示：

 

備註

以上就是Antdv+Asp.net WebApi開發學生信息管理系統第二篇的全部內容，寫文不易，多謝支持。學習編程，從關註【老碼識途】開始！！！

 


作者：小六公子
出處：http://www.cnblogs.com/hsiang/
本文版權歸作者和博客園共有，寫文不易，支持原創，歡迎轉載【點贊】，轉載請保留此段聲明，且在文章頁面明顯位置給出原文連接，謝謝。
關註個人公眾號，定時同步更新技術及職場文章


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Redis命令手冊
    Redis命令手冊 字元串 SET SET key value [EX seconds] [PX milliseconds] [NX|XX] 將字元串值value關聯到key。 如果key已經持有其他值，set就覆寫舊值，無視類型。 當set命令對一個帶有生存時間(TTL)的鍵進行設置之後，該鍵原有 ...
  • Redis 持久化機制
    概述 Redis 官方提供了兩種不同的持久化方法來將數據存儲到硬碟，分別是： 快照（Snapshot） AOF（Append Only File）只追加日誌文件 預設開啟快照，同時啟用兩種持久化方式時，優先 AOF 快照（Snapshot） 這種方式可以將某一時刻的所有數據都寫入硬碟，保存的文件以 ...
  • 容器化 | 在 S3 實現定時備份
    《在 S3 備份恢復 RadonDB MySQL 集群數據》一文中我們展示了在 S3 存儲中對集群數據備份恢復的具體操作過程，但只是手動備份。RadonDB MySQL Kubernetes 2.2.0 新增支持 S3 的定時備份功能（NFS 的支持也在路上）。 下麵讓我們來看一下該功能是如何使用的 ...
  • Maven使用與學習
    Maven使用與學習 一、Maven是什麼 maven像是一種管理的工具，實現的原理是使用插件。比如說，一個公司需要做一個項目，這個項目被分成了很多模塊，每個模塊又分成了許多的業務，這些最後都需要整合到一起。那麼就會出現一個很大的問題，在項目開發中每個人使用的jar包版本、軟體版本等如果不一樣的話， ...
  • Centos7環境使用Mysql離線安裝包安裝Mysql5.7
    伺服器環境：centos7 x64 需要安裝：mysql5.7+ 一、卸載CentOS7系統自帶mariadb # 查看系統自帶的Mariadb [root@CDH-141 ~]# rpm -qa|grep mariadb mariadb-libs-5.5.44-2.el7.centos.x86_6 ...
  • 使用JMeter進行MySQL的壓力測試
    GreatSQL社區原創內容未經授權不得隨意使用，轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本，使用上與MySQL一致。 前言 JMeter是apache公司基於java開發的一款開源壓力測試工具，體積小，功能全，使用方便，是一個比較輕量級的測試工具，使用起來非常簡單。而且 ...
  • 突破次元壁壘，讓身邊的玩偶手辦在屏幕上動起來！
    因為喜愛，人們會將二次元形象製作成玩偶手辦，然而沒有生命氣息的冰冷模型並不能滿足人們互動性的情感需求。如何能讓帶有情感寄托的玩偶手辦更具表現力和感染力呢？ 近日，HMS Core 3D建模服務上線自動骨骼綁定能力，可以讓已建成模型的二足人形物體根據自定義動作活動起來，甚至與用戶產生互動，不再只是冰冷 ...
  • 【面試題】為什麼有時用Vue.use()？及Vue.use()的作用及原理是什麼？
    Vue.use()的作用及原理 點擊打開視頻講解 在Vue中引入使用第三方庫通常我們都會採用import的形式引入進來 但是有的組件在引入之後又做了Vue.use()操作 有的組件引入進來又進行了Vue.prototype.$axios = axios 那麼它們之間有什麼聯繫呢？ 例如：Vue.us ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類