需求

你被WayKurat雇用了，这是一家开发vue js/ASP.NET核心应用程序的虚拟公司。

第二天，你迟来到办公室。你的老板在你的办公桌旁等着你，当他注意到你的行为时，他会露出笑容。幸运的是，他并没有为你迟到而生气，他很高兴告诉你他希望你从头开发一个简单的网络应用程序，该应用程序将列出WayKurat订阅者（订阅web api已经由讨厌的同事开发完成）。

您需要在VS 2017上使用ASP .NET Core 2.2并要求尝试使用libman而不是bower / npm或手动下载libs。

解决方案

创建一个新的ASP.NET Core应用程序，将项目名称设置为WayKuratWeb.SimpleVueJs

选择ASPMVC项目模板

你的老板喜欢vue js所以我们将使用Libman安装Vue。右键单击项目，然后点击

添加 - >添加客户端库...

将显示Libman添加库窗口，键入“vue”，然后在下拉列表中单击vue（可能是您的最终版本）。选择特定文件，按下图所示勾选文件，然后点击安装。

现在安装了vue，让我们创建一个vue组件。
在wwwroot / js/文件夹下创建一个新的js文件
将文件名设置为VueSubscriberListComponent.js（只是一个例子，你可以像你的奶奶一样称呼它）

接下来粘贴这个js代码。这将是我们的Vue组件。

var subscriberListComponent = new Vue({el: '#subscriber-list-component',data: {subscribers: [],isViewReady: false},methods: {refreshData: function () {this.isViewReady = false;//dummy data for now, will update this latervar subscribers = [{ name: 'jic', email: 'paytercode@waykurat.com' },{ name: 'kin', email: 'monsterart@waykurat.com' }];this.subscribers = subscribers;this.isViewReady = true;}},created: function () {this.refreshData();}
});

更新项目的/Views/Home/Index.cshtml文件以引用vue和我们的组件

@{ViewData["Title"] = "Home Page";
}
<div class="text-center"><div id="subscriber-list-component"><h3>WayKurat Subscribers </h3><div v-if="isViewReady == true"><ol><li v-for="u in subscribers">{{ u.name }} - {{u.email}}</li></ol><button class="btn btn-primary btn-block" v-on:click="refreshData">REFRESH</button></div><div v-else><div>Loading data...</div></div></div>
</div>
@section Scripts{<script src="~/lib/vue/vue.js"></script><script src="~/js/VueSubscriberListComponent.js"></script>
}

在浏览器上运行应用，您的应用将如下所示。如果没有，请检查浏览器控制台是否有错误（请在提交stackoverflow问题之前检查它，它不是黑盒子）

现在是时候让我们使用你同事完成的Web API。
但事情并不像他们看起来那样，他昨天没有上传他的代码，看起来他正在擅离职守。
所以你现在被迫写一个虚拟的web api。

添加一个新的控制器，将名称设置为SubscribersController.cs然后粘贴此代码。

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;namespace WayKuratWeb.SimpleVueJs.Controllers
{[Route("/api/[controller]/[action]/")]public class SubscribersController : Controller{[HttpGet]public IActionResult GetAll(){//hard coded data for brevity, this must be from a data store on the real worldvar subs = new List<Subscriber>();subs.Add(new Subscriber() { Id=1,Name = "JEK",Email="jekhaxor@test.test"});subs.Add(new Subscriber() { Id = 1, Name = "Jikie", Email = "jekiedraws@test.test" });return Ok(subs);}}public class Subscriber{public int Id { get; set; }public string Name { get; set; }public string Email { get; set; }}
}

现在添加了控制器，将使用ajax在我们的组件上使用它。
您准备编写一个发送XMLHttpRequest的简单js，但你的老板看到了它并坚持使用axios。
好吧，如果这就是他想要的，那就让我们做吧。

通过libman安装Axios。像安装vue时一样打开libman窗口。键入“axios”，然后选择文件，如下图所示。

在Index.cshtml上添加对axios的引用

@{ViewData["Title"] = "Home Page";
}
<div class="text-center"><div id="subscriber-list-component"><h3>WayKurat Subscribers </h3><div v-if="isViewReady == true"><ol><li v-for="u in subscribers">{{ u.name }} - {{u.email}}</li></ol><button class="btn btn-primary btn-block" v-on:click="refreshData">REFRESH</button></div><div v-else><div>Loading data...</div></div></div>
</div>
@section Scripts{<script src="~/lib/vue/vue.js"></script><script src="~/lib/axios/axios.js"></script><script src="~/js/VueSubscriberListComponent.js"></script>
}

更新VueSubscriberListComponent.js以使用我们的web api

var subscriberListComponent = new Vue({el: '#subscriber-list-component',data() {return {subscribers: [],isViewReady: false};},methods: {refreshData: function () {var self = this;this.isViewReady = false;//UPDATED TO GET DATA FROM WEB APIaxios.get('/api/subscribers/getall/').then(function (response) {self.subscribers = response.data;self.isViewReady = true;}).catch(function (error) {alert("ERROR: " + (error.message|error));});}},created: function() {this.refreshData();}
});

您在浏览器上检查了您的应用程序，并按预期运行。您做了自己的部分，您已将代码上传到repo并准备午餐。
现在你刚刚使用了libman并编写了一个vue compoenent。

外部参考

你会在这里了解更多

https://vuejs.org/v2/guide/

https://docs.microsoft.com/en-us/aspnet/core/?view=aspnetcore-2.2

原文地址：https://www.codeproject.com/Tips/1271379/Simple-ASP-NET-CORE-2-2-app-plusVue-JS

简单的ASP.NET CORE 2.2 app + Vue JS相关推荐

ASP.NET Core 实战：使用ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
一.前言这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...
.NET Core + JWT令牌认证 + Vue.js 通用动态权限(RBAC)管理系统框架[DncZeus]开源啦！！！...
DncZeus 前言关于 DncZeus DncZeus = Dnc + Zeus "Dnc"--.Net Core 的缩写: "Zeus"--中文译为宙斯, ...
开源干货！.NET Core + JWT令牌认证 + Vue.js通用动态权限(RBAC)管理系统框架[DncZeus]开源
DncZeus 前言关于 DncZeus DncZeus = Dnc + Zeus "Dnc"–.Net Core 的缩写: "Zeus"–中文译为宙斯,是古 ...
Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器显示pdf文件
Asp.net Core 配合 PDFObject 和 pdf.js 在浏览器直接显示pdf文件测试环境的浏览器版本: Chrome :90.0.4430.93(64 位) FireFox :88. ...
更简单的ASP.NET Core多语言(国际化和本地化, 欢迎转载)
其实在.NET Core有更好的多语言实现方式 #新建项目(.NET Core MVC) #在项目根目录新建Resources, 在Resources目录里面添加Program.en-US.resx ...
ASP.NET Core 实战：基于 Jwt Token 的权限控制全揭露
一.前言在涉及到后端项目的开发中,如何实现对于用户权限的管控是需要我们首先考虑的,在实际开发过程中,我们可能会运用一些已经成熟的解决方案帮助我们实现这一功能,而在 Grapefruit.VuCore ...
开源干货！.NET Core + Vue.js通用动态权限(RBAC)管理系统框架[DncZeus]开源
DncZeus 前言关于 DncZeus DncZeus = Dnc + Zeus "Dnc"--.Net Core 的缩写: "Zeus"--中文译为宙斯, ...
ASP.NET Core 异常和错误处理 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 异常和错误处理 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 异常和错误处理上一章节中,我们学习了 ASP.NET Cor ...
ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Razor 标签助手上一章节我们介绍了视图导入,学习了 ...

简单的ASP.NET CORE 2.2 app + Vue JS

需求

解决方案

外部参考

简单的ASP.NET CORE 2.2 app + Vue JS相关推荐

最新文章

热门文章