一键生成Vue.js + Web API前后端集成项目

前言

默认情况下,Visual Studio提供了“基于Vue.js Web 应用程序”项目模板,可以生成Vue.js前端项目。

你需要另外创建Web API项目,调试时需要同时启动2个项目,然后还要解决前后端集成带来的问题,比如跨域访问。

e7de4a3f6d9da8ab45eb2cdbbc997bba.png

如果,能将前后端集成到一个项目就好了!

项目模板

利用“Vue JS 3.0 with .NET 5 Web API”项目模板,我们很容易创建Vue.js+Web API前后端集成项目。

首先,安装“Vue JS 3.0 with .NET 5 Web API”扩展:

c457b0fd8ad42f6a1f3f7874d6a160b6.png

安装成功后,在创建新项目窗口可以可以看到,多了“Vue JS 3.0 with .NET 5”项目模板:

39a3336ec53e8571cfc5ed2f9f1843f8.png

项目结构

创建新项目,项目结构如下:

0b8b23024d98ef966dd303b64b24221c.png

ClientApp目录下放置的就是Vue.js客户端代码,其他内容和普通WebAPI项目相同。

运行项目

无需配置,你可以直接运行它,它会自动运行npm install安装完所有npm包:

154fb3524dc9eed56d2040be30d6e70c.png

如果应用程序启动正常,将显示前端页面,访问FetchData页面,可以看到调用的是相同端口下的后端API:

fae58159cab0137ea20d49dded137f12.png

发布项目

注意,模板代码有错误,设置的configuration.RootPath不对。

发布前需要修改Startup.cs,代码如下:

public Startup(IConfiguration configuration, IWebHostEnvironment env)
{Configuration = configuration;CurrentEnvironment = env;
}public IConfiguration Configuration { get; }
private IWebHostEnvironment CurrentEnvironment { get; set; }// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{services.AddControllers();services.AddSpaStaticFiles(configuration =>{if (CurrentEnvironment.IsDevelopment()){configuration.RootPath = "ClientApp";}else{configuration.RootPath = "ClientApp/dist";}});
}

执行发布操作,它会自动执行npm run build,将前端代码编译输出到ClientApp/dist目录下,发布目录结构如下:

bc31e2c9bb0439db5a8c315e39700db4.png

运行程序,访问FetchData页面,可以看到调用的还是相同端口下的后端API:

be655ece6f2bb1f2f50fd585cbe12d18.png

结论

使用“Vue JS 3.0 with .NET 5 Web API”项目模板,再也不怕怎么创建前后端集成项目了!

如果你觉得这篇文章对你有所启发,请关注我的个人公众号”My IO“

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/294557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【DB2学习文档之七】SQL for DB2

作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ 1.SQL的数据操作语言data manipulation language (DML) 参见Beginning SQL Queries: From Novice to Professional, by Clare Churcher (Apress, 2008) 2.Select语句 这个语句是DB2中最简单也最复杂的语…

这些让人看瞎了的设计!实力证明,谁才是世界的最终boss!

全世界只有3.14 % 的人关注了爆炸吧知识我瞎了也懵了昨天知识君刷微博,看到了一组动图,一时间我都不知道是我的眼睛出了错,还是我的大脑反应不过来。奇了怪了!怎么箭头反转了180后,还是原样!问题到底出在哪…

弹出框css技巧

2019独角兽企业重金招聘Python工程师标准>>> 技术要点&#xff1a; 一个覆盖整个屏幕的浅灰色背景的div,一个包含内容的的div, 代码如下&#xff1a; <div id"financeTip" style""><div class"financeTipBg" style"&qu…

在业务层实现校验请求参数

前言在前面的文章中&#xff0c;我们介绍了在业务层实现管道模式&#xff1a;响应缓存记录请求日志今天&#xff0c;我们同样使用IPipelineBehavior&#xff0c;介绍如何在业务层实现校验请求参数&#xff0c;用于检查输入是否满足业务要求。Demo首先&#xff0c;创建ASP.NET C…

静电可以有多好玩?

1 静电可以有多好玩&#xff1f;孩子&#xff1a;知道我怎么秃的了吧2 这就是爱情啊3 今年最佳cos4 别人家的狗能当桌子▼你家的狗……&#xff08;主银&#xff0c;我就这样静静的看着你&#xff09;▼5 含羞草6 可以让我骑一下你吗7 总之&#xff0c;离我远点你点的每个赞&am…

+操作符重载(2)

2019独角兽企业重金招聘Python工程师标准>>> #include <iostream> class C_A { public: int Cn; }; struct S_A { public: int Sn; }; enum E_A { En 12 }; C_A operator(int n,C_A cVar) { cVar.Cn n; return cVar; …

WPF 四种不同效果呼吸灯

WPF开发者QQ群&#xff1a; 340500857 | 微信群 -> 进入公众号主页 加入组织由于微信群人数太多入群请添加小编微信号&#xff08;yanjinhuawechat&#xff09;或&#xff08;W_Feng_aiQ&#xff09;邀请入群&#xff08;需备注WPF开发者&#xff09;PS&#xff1a;有更好的…

用GCD线程组与GCD信号量将异步线程转换为同步线程

用GCD线程组与GCD信号量将异步线程转换为同步线程 有时候我们会碰到这样子的一种情形: 同时获取两个网络请求的数据,但是网络请求是异步的,我们需要获取到两个网络请求的数据之后才能够进行下一步的操作,这个时候,就是线程组与信号量的用武之地了. 线程组用以监听线程的执行情况…

基于visual Studio2013解决C语言竞赛题之0710排序函数

&#xfeff;&#xfeff;题目解决代码及点评/* 10、用指向指针的指针的方法对N个整数排序并输出。 要求排序单独写成一个函数。N个整数和N在主程序中输入&#xff0c;最后在主函数中输出。 */ #include <stdio.h> #include <stdlib.h> #define N 10 void main() {…

清华本科生0人去阿里,交叉信息院硕士没人再深造 | 清华大学2020年毕业生就业质量报告...

全世界只有3.14 % 的人关注了爆炸吧知识转自&#xff1a;量子位作者&#xff1a;金磊 杨净这几天&#xff0c;《清华大学2020年毕业生就业质量报告》火了。于是&#xff0c;我们也下载下来“拜读”了一下。就业率、毕业去向、就业地域等等信息看下来&#xff0c;也还算是情理之…

Android之TypedArray 为什么需要调用recycle()

转自&#xff1a;http://blog.csdn.net/Monicabg/article/details/45014327 在 Android 自定义 View 的时候&#xff0c;需要使用 TypedArray 来获取 XML layout 中的属性值&#xff0c;使用完之后&#xff0c;需要调用 recyle() 方法将 TypedArray 回收。 那么问题来了&#x…

什么就像谈恋爱一样?

1 向这只猫学习&#xff01;我的妈耶&#xff0c;这撩人的眼神&#xff0c;这小手&#xff0c;以后这大兄die的女朋友还要跟一只猫吃醋&#xff0c;默默先心疼一下2 善良的人最可爱了&#xff01;3 妈妈救我&#xff0c;马路牙子不让我去找你4 这是童年的回忆呀5 一位网友收到老…

.NET Regular Expressions

HTML去空白回车换行 private static readonly Regex REGEX_LINE_BREAKS new Regex("\n\s*", RegexOptions.Compiled); private static readonly Regex REGEX_LINE_SPACE new Regex("\n\s*\r", RegexOptions.Compiled); private static readonly Regex R…

他拥有当今世界最高智商,从出生就一路开挂,然而,获得数学最高奖的他却说自己只是个热爱数学的普通人...

全世界只有3.14 % 的人关注了爆炸吧知识今天就讲讲这位平易近人的顶级天才吧。1975年&#xff0c;陶哲轩出生在澳大利亚&#xff0c;父母均毕业于香港大学&#xff0c;父亲陶象国是一名儿科医生&#xff0c;母亲梁蕙兰是物理和数学专业的高材生&#xff0c;曾当过中学数学教师。…

Win11用户增长迅速!你升了吗?

近日&#xff0c;AdDuplex 发布了 2021 年 11 月微软现代 Windows 操作系统的市场报告。现代 Windows 操作系统的统计只包括 Windows 11 和 Windows 10。Windows 11在 11 月&#xff0c;Windows 11 操作系统的市场份额达到 8.9%&#xff0c;其中包括 8.6% 运行 Windows 11 正式…

豆瓣9分,颠覆世界观的好书,每读一章就感叹一次:原来如此!(免费领)

全世界只有3.14 % 的人关注了爆炸吧知识聪明人的投资直击本质股神巴菲特曾在2019股东大会上&#xff0c;遇到了一位来自美国旧金山的年轻人提问&#xff1a;“要想成为一个好的投资者&#xff0c;最好的方法是什么&#xff1f;”巴菲特毫不犹豫回答道&#xff1a;“阅读”。5岁…

C# WPF MVVM开发框架Caliburn.Micro Screens, Conductors 和 Composition⑦

01—Screens, Conductors and CompositionActions, Coroutines and Conventions往往最能吸引Caliburn.Micro的注意力&#xff0c;但如果你想让你的UI设计得更好&#xff0c;那么了解屏幕和导体可能是最重要的。如果您想利用合成&#xff0c;这一点尤其重要。杰里米米勒最近在为…

如此生猛的纪录片,背后是难以置信的故事!

全世界只有3.14 % 的人关注了爆炸吧知识美国纪录片大师阿尔伯特梅索斯所言&#xff1a;“制作一部电影不是为一个问题寻求答案&#xff0c;而是尝试去捕捉生活本身。”从赵忠祥那句大名鼎鼎的“春天到了&#xff0c;又到了动物交配的季节”开始&#xff0c;纪录片看似没有像影视…

官宣!.NET官网发布中⽂版

#官宣.NET简体中文版.NET的官网终于正式发布简体中⽂版本了&#xff0c;⽽且是作为官方支持的第一梯队&#xff01;这是一个影响未来中国.NET技术生态的大事。我承认好的英文是从事IT技术的重要基础&#xff0c;但本地化语言能帮助更多人了解、学习、应用该技术。.NET官网中文版…

爱因斯坦为什么不是普通人?看他怎么喝茶就明白了,差距太明显了!没法比.......

全世界只有3.14 % 的人关注了爆炸吧知识来源&#xff1a;Закройте, дует看到上面这个动图&#xff0c;猜到这篇文章要讲什么了吗&#xff1f;讲泡茶&#xff0c;啊呸&#xff01;讲“茶叶悖论”&#xff0c;一个爱因斯坦喝茶时不经意间看到的物理现象&#xff0c;然…