位置: IT常识 - 正文
VUE3.0+Antdv+Asp.net WebApi开发学生信息管理系统（二）
编辑：rootadmin推荐整理分享VUE3.0+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
数据库实体类项目创建成功后，添加数据库表对应的实体类，如下图所示：
添加第三方框架本示例中所需要的第三方框架主要有三个，如下所示：
EntityFramework框架主要用于操作数据库，是微软提供的通过ORM方式操作数据的框架。Autofac框架，主要用于类的依赖注入的自动实现。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/swashbuckle16 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 axiosnpm -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 instance12 .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 post6 } 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 config22 .plugin('html')23 .tap(args => {24 args[0].title = 'SIMS'25 return args26 })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开发学生信息管理系统第二篇的全部内容，写文不易，多谢支持。学习编程，从关注【老码识途】开始！！！
下一篇：dedecms模板中if else判断语句写法(在dedecms中,如何模板建站)
