Skip to content

Commit c36fa8d

Browse files
liborpanskyliborpansky
committed
SoftwareAteliers#16 Project migrated to ASP.NET Core 3.0
Target framework change to netcoreapp3.0, Microsoft.AspNetCore.SpaServices.Extensions updated to 3.0.0, VueCliMiddleware updated to 3.0.0-preview7-1. VueCliMiddleware middleware is not 100% stable, waiting for some tests and production ready release to issue a PR.
1 parent 97f094a commit c36fa8d

11 files changed

+129
-88
lines changed

‎AspNetCoreVueStarter.csproj

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Web">
22

33
<PropertyGroup>
4-
<TargetFramework>netcoreapp2.2</TargetFramework>
4+
<TargetFramework>netcoreapp3.0</TargetFramework>
55
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
66
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
77
<IsPackable>false</IsPackable>
@@ -19,9 +19,8 @@
1919
</PropertyGroup>
2020

2121
<ItemGroup>
22-
<PackageReference Include="Microsoft.AspNetCore.App" />
23-
<PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="2.2.0" />
24-
<PackageReference Include="VueCliMiddleware" Version="2.2.1" />
22+
<PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.0.0" />
23+
<PackageReference Include="VueCliMiddleware" Version="3.0.0-preview7-1" />
2524
</ItemGroup>
2625

2726
<ItemGroup>

‎ClientApp/package-lock.json

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ClientApp/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11+
"date-fns": "^2.2.1",
1112
"register-service-worker": "^1.6.2",
1213
"vue": "^2.6.10",
1314
"vue-class-component": "^7.1.0",

‎ClientApp/src/filters/date.filter.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { format } from 'date-fns';
2+
3+
export default (date: Date) => {
4+
return format(new Date(date), 'eeee, dd MMMM');
5+
};

‎ClientApp/src/main.ts

+3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,12 @@ import App from './App.vue';
66
import router from './router';
77
import store from '@/store/index';
88
import './registerServiceWorker';
9+
import dateFilter from '@/filters/date.filter';
910

1011
Vue.config.productionTip = false;
1112

13+
Vue.filter('date', dateFilter);
14+
1215
new Vue({
1316
vuetify,
1417
router,

‎ClientApp/src/models/Forecast.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export class Forecast {
22
constructor(
3-
public dateFormatted: Date,
3+
public date: Date,
44
public temperatureC: number,
55
public temperatureF: number,
66
public summary: string,

‎ClientApp/src/views/FetchData.vue

+22-19
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
class="elevation-1"
1515
>
1616
<v-progress-linear v-slot:progress color="blue" indeterminate></v-progress-linear>
17-
<template v-slot:items="props">
18-
<td>{{ props.item.dateFormatted }}</td>
19-
<td>{{ props.item.temperatureC }}</td>
20-
<td>{{ props.item.temperatureF }}</td>
21-
<td>{{ props.item.summary }}</td>
17+
<template v-slot:item.date="{ item }">
18+
<td>{{ item.date | date }}</td>
19+
</template>
20+
<template v-slot:item.temperatureC="{ item }">
21+
<v-chip :color="getColor(item.temperatureC)" dark>{{ item.temperatureC }}</v-chip>
2222
</template>
2323
</v-data-table>
2424
</v-col>
@@ -56,27 +56,30 @@ export default class FetchDataView extends Vue {
5656
private errorMessage: string = 'Error while loading weather forecast.';
5757
private forecasts: Forecast[] = [];
5858
private headers = [
59-
{ text: 'Date', value: 'dateFormatted' },
59+
{ text: 'Date', value: 'date' },
6060
{ text: 'Temp. (C)', value: 'temperatureC' },
6161
{ text: 'Temp. (F)', value: 'temperatureF' },
6262
{ text: 'Summary', value: 'summary' },
6363
];
6464
65-
private created() {
66-
this.fetchWeatherForecasts();
65+
private getColor(temperature: number) {
66+
if (temperature < 0) return 'blue'
67+
else if (temperature >= 0 && temperature < 30) return 'green'
68+
else return 'red'
69+
}
70+
private async created() {
71+
await this.fetchWeatherForecasts();
6772
}
6873
69-
private fetchWeatherForecasts() {
70-
axios
71-
.get<Forecast[]>('api/SampleData/WeatherForecasts')
72-
.then((response) => {
73-
this.forecasts = response.data;
74-
})
75-
.catch((e) => {
76-
this.showError = true;
77-
this.errorMessage = `Error while loading weather forecast: ${e.message}.`;
78-
})
79-
.finally(() => (this.loading = false));
74+
private async fetchWeatherForecasts() {
75+
try {
76+
const response = await axios.get<Forecast[]>('api/WeatherForecast');
77+
this.forecasts = response.data;
78+
} catch (e) {
79+
this.showError = true;
80+
this.errorMessage = `Error while loading weather forecast: ${e.message}.`;
81+
}
82+
this.loading = false
8083
}
8184
}
8285
</script>

‎Controllers/SampleDataController.cs

-45
This file was deleted.

‎Controllers/WeatherForecastController.cs

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
using AspNetCoreVueStarter.Models;
6+
using Microsoft.AspNetCore.Mvc;
7+
using Microsoft.Extensions.Logging;
8+
9+
namespace AspNetCoreVueStarter.Controllers
10+
{
11+
[Route("api/[controller]")]
12+
[ApiController]
13+
public class WeatherForecastController : ControllerBase
14+
{
15+
private static readonly string[] Summaries = new[]
16+
{
17+
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
18+
};
19+
20+
private readonly ILogger<WeatherForecastController> _logger;
21+
22+
public WeatherForecastController(ILogger<WeatherForecastController> logger)
23+
{
24+
_logger = logger;
25+
}
26+
27+
[HttpGet]
28+
public IEnumerable<WeatherForecast> Get()
29+
{
30+
var rng = new Random();
31+
return Enumerable.Range(1, 5).Select(index => new WeatherForecast
32+
{
33+
Date = DateTime.Now.AddDays(index),
34+
TemperatureC = rng.Next(-20, 55),
35+
Summary = Summaries[rng.Next(Summaries.Length)]
36+
})
37+
.ToArray();
38+
}
39+
}
40+
}

‎Models/WeatherForecast.cs

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
6+
namespace AspNetCoreVueStarter.Models
7+
{
8+
public class WeatherForecast
9+
{
10+
public DateTime Date { get; set; }
11+
12+
public int TemperatureC { get; set; }
13+
14+
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
15+
16+
public string Summary { get; set; }
17+
}
18+
}

‎Startup.cs

+31-19
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
using Microsoft.AspNetCore.Builder;
22
using Microsoft.AspNetCore.Hosting;
3-
using Microsoft.AspNetCore.Mvc;
3+
using Microsoft.AspNetCore.SpaServices;
44
using Microsoft.Extensions.Configuration;
55
using Microsoft.Extensions.DependencyInjection;
6+
using Microsoft.Extensions.Hosting;
67
using VueCliMiddleware;
78

89
namespace AspNetCoreVueStarter
@@ -19,17 +20,17 @@ public Startup(IConfiguration configuration)
1920
// This method gets called by the runtime. Use this method to add services to the container.
2021
public void ConfigureServices(IServiceCollection services)
2122
{
22-
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
23+
services.AddControllersWithViews();
2324

24-
// In production, the React files will be served from this directory
25+
// In production, the Vue files will be served from this directory
2526
services.AddSpaStaticFiles(configuration =>
2627
{
2728
configuration.RootPath = "ClientApp/dist";
2829
});
2930
}
3031

3132
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
32-
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
33+
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
3334
{
3435
if (env.IsDevelopment())
3536
{
@@ -38,33 +39,44 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
3839
else
3940
{
4041
app.UseExceptionHandler("/Error");
42+
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
4143
app.UseHsts();
4244
app.UseHttpsRedirection();
4345
}
4446

4547
app.UseStaticFiles();
4648
app.UseSpaStaticFiles();
4749

48-
app.UseMvc(routes =>
50+
app.UseRouting();
51+
52+
app.UseEndpoints(endpoints =>
4953
{
50-
routes.MapRoute(
54+
endpoints.MapControllerRoute(
5155
name: "default",
52-
template: "{controller}/{action=Index}/{id?}");
56+
pattern: "{controller}/{action=Index}/{id?}");
57+
58+
#if DEBUG
59+
if (System.Diagnostics.Debugger.IsAttached)
60+
endpoints.MapToVueCliProxy("{*path}", new SpaOptions { SourcePath = "ClientApp" }, "serve", regex: "Compiled successfully");
61+
else
62+
#endif
63+
// note: output of vue cli or quasar cli should be wwwroot
64+
endpoints.MapFallbackToFile("index.html");
5365
});
5466

55-
app.UseSpa(spa =>
56-
{
57-
spa.Options.SourcePath = "ClientApp";
67+
//app.UseSpa(spa =>
68+
//{
69+
// spa.Options.SourcePath = "ClientApp";
5870

59-
if (env.IsDevelopment())
60-
{
61-
// run npm process with client app
62-
spa.UseVueCli(npmScript: "serve", port: 8080);
63-
// if you just prefer to proxy requests from client app, use proxy to SPA dev server instead:
64-
// app should be already running before starting a .NET client
65-
// spa.UseProxyToSpaDevelopmentServer("http://localhost:8080"); // your Vue app port
66-
}
67-
});
71+
// if (env.IsDevelopment())
72+
// {
73+
// // run npm process with client app
74+
// spa.UseVueCli(npmScript: "serve", port: 8080);
75+
// // if you just prefer to proxy requests from client app, use proxy to SPA dev server instead:
76+
// // app should be already running before starting a .NET client
77+
// // spa.UseProxyToSpaDevelopmentServer("http://localhost:8080"); // your Vue app port
78+
// }
79+
//});
6880
}
6981
}
7082
}

0 commit comments

Comments
 (0)