Compare commits
No commits in common. "c359776a221414a07f4124c9dc2e13a99030db65" and "b868f86759951366c0438e7353bcc26cfe4d9a0a" have entirely different histories.
c359776a22
...
b868f86759
|
|
@ -1,225 +1,22 @@
|
||||||
# The following command works for downloading when using Git for Windows:
|
|
||||||
# curl -LOf http://gist.githubusercontent.com/kmorcinek/2710267/raw/.gitignore
|
|
||||||
#
|
|
||||||
# Download this file using PowerShell v3 under Windows with the following comand:
|
|
||||||
# Invoke-WebRequest https://gist.githubusercontent.com/kmorcinek/2710267/raw/ -OutFile .gitignore
|
|
||||||
#
|
|
||||||
# or wget:
|
|
||||||
# wget --no-check-certificate http://gist.githubusercontent.com/kmorcinek/2710267/raw/.gitignore
|
|
||||||
|
|
||||||
# User-specific files
|
|
||||||
*.suo
|
|
||||||
*.user
|
|
||||||
*.sln.docstates
|
|
||||||
|
|
||||||
# Build results
|
|
||||||
[Dd]ebug/
|
|
||||||
[Rr]elease/
|
|
||||||
x64/
|
|
||||||
[Bb]in/
|
|
||||||
[Oo]bj/
|
|
||||||
# build folder is nowadays used for build scripts and should not be ignored
|
|
||||||
#build/
|
|
||||||
|
|
||||||
# NuGet Packages
|
|
||||||
*.nupkg
|
|
||||||
# The packages folder can be ignored because of Package Restore
|
|
||||||
**/packages/*
|
|
||||||
# except build/, which is used as an MSBuild target.
|
|
||||||
!**/packages/build/
|
|
||||||
# Uncomment if necessary however generally it will be regenerated when needed
|
|
||||||
#!**/packages/repositories.config
|
|
||||||
|
|
||||||
# MSTest test Results
|
|
||||||
[Tt]est[Rr]esult*/
|
|
||||||
[Bb]uild[Ll]og.*
|
|
||||||
|
|
||||||
*_i.c
|
|
||||||
*_p.c
|
|
||||||
*.ilk
|
|
||||||
*.meta
|
|
||||||
*.obj
|
|
||||||
*.pch
|
|
||||||
*.pdb
|
|
||||||
*.pgc
|
|
||||||
*.pgd
|
|
||||||
*.rsp
|
|
||||||
*.sbr
|
|
||||||
*.tlb
|
|
||||||
*.tli
|
|
||||||
*.tlh
|
|
||||||
*.tmp
|
|
||||||
*.tmp_proj
|
|
||||||
*.log
|
|
||||||
*.vspscc
|
|
||||||
*.vssscc
|
|
||||||
.builds
|
|
||||||
*.pidb
|
|
||||||
*.log
|
|
||||||
*.scc
|
|
||||||
|
|
||||||
# OS generated files #
|
|
||||||
.DS_Store*
|
|
||||||
Icon?
|
|
||||||
|
|
||||||
# Visual C++ cache files
|
|
||||||
ipch/
|
|
||||||
*.aps
|
|
||||||
*.ncb
|
|
||||||
*.opensdf
|
|
||||||
*.sdf
|
|
||||||
*.cachefile
|
|
||||||
|
|
||||||
# Visual Studio profiler
|
|
||||||
*.psess
|
|
||||||
*.vsp
|
|
||||||
*.vspx
|
|
||||||
|
|
||||||
# Guidance Automation Toolkit
|
|
||||||
*.gpState
|
|
||||||
|
|
||||||
# ReSharper is a .NET coding add-in
|
|
||||||
_ReSharper*/
|
|
||||||
*.[Rr]e[Ss]harper
|
|
||||||
|
|
||||||
# TeamCity is a build add-in
|
|
||||||
_TeamCity*
|
|
||||||
|
|
||||||
# DotCover is a Code Coverage Tool
|
|
||||||
*.dotCover
|
|
||||||
|
|
||||||
# NCrunch
|
|
||||||
*.ncrunch*
|
|
||||||
.*crunch*.local.xml
|
|
||||||
|
|
||||||
# Installshield output folder
|
|
||||||
[Ee]xpress/
|
|
||||||
|
|
||||||
# DocProject is a documentation generator add-in
|
|
||||||
DocProject/buildhelp/
|
|
||||||
DocProject/Help/*.HxT
|
|
||||||
DocProject/Help/*.HxC
|
|
||||||
DocProject/Help/*.hhc
|
|
||||||
DocProject/Help/*.hhk
|
|
||||||
DocProject/Help/*.hhp
|
|
||||||
DocProject/Help/Html2
|
|
||||||
DocProject/Help/html
|
|
||||||
|
|
||||||
# Click-Once directory
|
|
||||||
publish/
|
|
||||||
|
|
||||||
# Publish Web Output
|
|
||||||
*.Publish.xml
|
|
||||||
|
|
||||||
# Windows Azure Build Output
|
|
||||||
csx
|
|
||||||
*.build.csdef
|
|
||||||
|
|
||||||
# Windows Store app package directory
|
|
||||||
AppPackages/
|
|
||||||
|
|
||||||
# Others
|
|
||||||
*.Cache
|
|
||||||
ClientBin/
|
|
||||||
[Ss]tyle[Cc]op.*
|
|
||||||
~$*
|
|
||||||
*~
|
|
||||||
*.dbmdl
|
|
||||||
*.[Pp]ublish.xml
|
|
||||||
*.pfx
|
|
||||||
*.publishsettings
|
|
||||||
modulesbin/
|
|
||||||
tempbin/
|
|
||||||
|
|
||||||
# EPiServer Site file (VPP)
|
|
||||||
AppData/
|
|
||||||
|
|
||||||
# RIA/Silverlight projects
|
|
||||||
Generated_Code/
|
|
||||||
|
|
||||||
# Backup & report files from converting an old project file to a newer
|
|
||||||
# Visual Studio version. Backup files are not needed, because we have git ;-)
|
|
||||||
_UpgradeReport_Files/
|
|
||||||
Backup*/
|
|
||||||
UpgradeLog*.XML
|
|
||||||
UpgradeLog*.htm
|
|
||||||
|
|
||||||
# vim
|
|
||||||
*.txt~
|
|
||||||
*.swp
|
|
||||||
*.swo
|
|
||||||
|
|
||||||
# Temp files when opening LibreOffice on ubuntu
|
|
||||||
.~lock.*
|
|
||||||
|
|
||||||
# svn
|
|
||||||
.svn
|
|
||||||
|
|
||||||
# CVS - Source Control
|
|
||||||
**/CVS/
|
|
||||||
|
|
||||||
# Remainings from resolving conflicts in Source Control
|
|
||||||
*.orig
|
|
||||||
|
|
||||||
# SQL Server files
|
|
||||||
**/App_Data/*.mdf
|
|
||||||
**/App_Data/*.ldf
|
|
||||||
**/App_Data/*.sdf
|
|
||||||
|
|
||||||
|
|
||||||
#LightSwitch generated files
|
|
||||||
GeneratedArtifacts/
|
|
||||||
_Pvt_Extensions/
|
|
||||||
ModelManifest.xml
|
|
||||||
|
|
||||||
# =========================
|
|
||||||
# Windows detritus
|
|
||||||
# =========================
|
|
||||||
|
|
||||||
# Windows image file caches
|
|
||||||
Thumbs.db
|
|
||||||
ehthumbs.db
|
|
||||||
|
|
||||||
# Folder config file
|
|
||||||
Desktop.ini
|
|
||||||
|
|
||||||
# Recycle Bin used on file shares
|
|
||||||
$RECYCLE.BIN/
|
|
||||||
|
|
||||||
# Mac desktop service store files
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
# SASS Compiler cache
|
# local env files
|
||||||
.sass-cache
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
# Visual Studio 2014 CTP
|
# Log files
|
||||||
**/*.sln.ide
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
# Visual Studio temp something
|
# Editor directories and files
|
||||||
.vs/
|
.idea
|
||||||
|
.vscode
|
||||||
# dotnet stuff
|
*.suo
|
||||||
project.lock.json
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
# VS 2015+
|
*.sln
|
||||||
*.vc.vc.opendb
|
*.sw?
|
||||||
*.vc.db
|
|
||||||
|
|
||||||
# Rider
|
|
||||||
.idea/
|
|
||||||
|
|
||||||
# Visual Studio Code
|
|
||||||
.vscode/
|
|
||||||
|
|
||||||
# Output folder used by Webpack or other FE stuff
|
|
||||||
**/node_modules/*
|
|
||||||
**/wwwroot/*
|
|
||||||
|
|
||||||
# SpecFlow specific
|
|
||||||
*.feature.cs
|
|
||||||
*.feature.xlsx.*
|
|
||||||
*.Specs_*.html
|
|
||||||
|
|
||||||
#####
|
|
||||||
# End of core ignore list, below put you custom 'per project' settings (patterns or path)
|
|
||||||
#####
|
|
||||||
|
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
using System;
|
|
||||||
using System.Collections.Generic;
|
|
||||||
using System.Linq;
|
|
||||||
using System.Net;
|
|
||||||
using System.Net.Http;
|
|
||||||
using System.Threading.Tasks;
|
|
||||||
using Microsoft.AspNetCore.Mvc;
|
|
||||||
using Microsoft.Extensions.Logging;
|
|
||||||
|
|
||||||
namespace vue_dotnet_example.Controllers
|
|
||||||
{
|
|
||||||
[ApiController]
|
|
||||||
public class UsersController : ControllerBase
|
|
||||||
{
|
|
||||||
|
|
||||||
private readonly ILogger<UsersController> _logger;
|
|
||||||
|
|
||||||
static readonly Models.IUserRepository repository = new Models.UserRepository();
|
|
||||||
|
|
||||||
public UsersController(ILogger<UsersController> logger)
|
|
||||||
{
|
|
||||||
_logger = logger;
|
|
||||||
}
|
|
||||||
|
|
||||||
[HttpGet]
|
|
||||||
[Route("api/users")]
|
|
||||||
public IEnumerable<Models.UserModel> GetAllUsers()
|
|
||||||
{
|
|
||||||
return repository.GetAll();
|
|
||||||
}
|
|
||||||
|
|
||||||
[HttpPost]
|
|
||||||
[Route("api/user")]
|
|
||||||
[Consumes("application/json")]
|
|
||||||
public Models.UserModel PostUser(Models.UserModel item)
|
|
||||||
{
|
|
||||||
return repository.Add(item);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
using System;
|
|
||||||
using System.Collections.Generic;
|
|
||||||
|
|
||||||
namespace vue_dotnet_example.Models
|
|
||||||
{
|
|
||||||
public interface IUserRepository
|
|
||||||
{
|
|
||||||
IEnumerable<UserModel> GetAll();
|
|
||||||
|
|
||||||
UserModel Add(UserModel user);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
namespace vue_dotnet_example.Models
|
|
||||||
{
|
|
||||||
public class UserModel
|
|
||||||
{
|
|
||||||
public int Id { get; set; }
|
|
||||||
|
|
||||||
public string firstName { get; set; }
|
|
||||||
|
|
||||||
public string lastName { get; set; }
|
|
||||||
|
|
||||||
public string email { get; set; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
using System;
|
|
||||||
using System.Collections.Generic;
|
|
||||||
|
|
||||||
namespace vue_dotnet_example.Models
|
|
||||||
{
|
|
||||||
public class UserRepository: IUserRepository
|
|
||||||
{
|
|
||||||
private List<UserModel> users = new List<UserModel>();
|
|
||||||
private int _nextId = 1;
|
|
||||||
|
|
||||||
public UserRepository()
|
|
||||||
{
|
|
||||||
Add(new UserModel { firstName= "first1", lastName="last1", email="email1@gmail.com"});
|
|
||||||
Add(new UserModel { firstName= "first2", lastName="last2", email="email2@gmail.com"});
|
|
||||||
Add(new UserModel { firstName= "first3", lastName="last3", email="email3@gmail.com"});
|
|
||||||
}
|
|
||||||
|
|
||||||
public IEnumerable<UserModel> GetAll()
|
|
||||||
{
|
|
||||||
return users;
|
|
||||||
}
|
|
||||||
|
|
||||||
public UserModel Add(UserModel item)
|
|
||||||
{
|
|
||||||
if (item == null)
|
|
||||||
{
|
|
||||||
throw new ArgumentNullException("item");
|
|
||||||
}
|
|
||||||
item.Id = _nextId++;
|
|
||||||
users.Add(item);
|
|
||||||
return item;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
26
Program.cs
26
Program.cs
|
|
@ -1,26 +0,0 @@
|
||||||
using System;
|
|
||||||
using System.Collections.Generic;
|
|
||||||
using System.Linq;
|
|
||||||
using System.Threading.Tasks;
|
|
||||||
using Microsoft.AspNetCore.Hosting;
|
|
||||||
using Microsoft.Extensions.Configuration;
|
|
||||||
using Microsoft.Extensions.Hosting;
|
|
||||||
using Microsoft.Extensions.Logging;
|
|
||||||
|
|
||||||
namespace vue_dotnet_example
|
|
||||||
{
|
|
||||||
public class Program
|
|
||||||
{
|
|
||||||
public static void Main(string[] args)
|
|
||||||
{
|
|
||||||
CreateHostBuilder(args).Build().Run();
|
|
||||||
}
|
|
||||||
|
|
||||||
public static IHostBuilder CreateHostBuilder(string[] args) =>
|
|
||||||
Host.CreateDefaultBuilder(args)
|
|
||||||
.ConfigureWebHostDefaults(webBuilder =>
|
|
||||||
{
|
|
||||||
webBuilder.UseStartup<Startup>();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<Project Sdk="Microsoft.NET.Sdk.Web">
|
|
||||||
|
|
||||||
<PropertyGroup>
|
|
||||||
<TargetFramework>net5.0</TargetFramework>
|
|
||||||
<RootNamespace>ProjectGrid</RootNamespace>
|
|
||||||
<SpaRoot>clientapp\</SpaRoot>
|
|
||||||
<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
|
|
||||||
</PropertyGroup>
|
|
||||||
|
|
||||||
<ItemGroup>
|
|
||||||
<PackageReference Include="Swashbuckle.AspNetCore" Version="5.6.3" />
|
|
||||||
</ItemGroup>
|
|
||||||
|
|
||||||
<ItemGroup>
|
|
||||||
<!-- Don't publish the SPA source files, but do show them in the project files list -->
|
|
||||||
<Content Remove="$(SpaRoot)**" />
|
|
||||||
<None Remove="$(SpaRoot)**" />
|
|
||||||
<None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
|
|
||||||
</ItemGroup>
|
|
||||||
|
|
||||||
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
|
|
||||||
<!-- Ensure Node.js is installed -->
|
|
||||||
<Exec Command="node --version" ContinueOnError="true">
|
|
||||||
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
|
|
||||||
</Exec>
|
|
||||||
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
|
|
||||||
<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
|
|
||||||
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
|
|
||||||
</Target>
|
|
||||||
|
|
||||||
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
|
|
||||||
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
|
|
||||||
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
|
|
||||||
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
|
|
||||||
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
|
|
||||||
|
|
||||||
<!-- Include the newly-built files in the publish output -->
|
|
||||||
<ItemGroup>
|
|
||||||
<DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
|
|
||||||
<DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
|
|
||||||
<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
|
|
||||||
<RelativePath>%(DistFiles.Identity)</RelativePath>
|
|
||||||
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
|
|
||||||
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
|
|
||||||
</ResolvedFileToPublish>
|
|
||||||
</ItemGroup>
|
|
||||||
</Target>
|
|
||||||
|
|
||||||
</Project>
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
{
|
|
||||||
"$schema": "http://json.schemastore.org/launchsettings.json",
|
|
||||||
"iisSettings": {
|
|
||||||
"windowsAuthentication": false,
|
|
||||||
"anonymousAuthentication": true,
|
|
||||||
"iisExpress": {
|
|
||||||
"applicationUrl": "http://localhost:28358",
|
|
||||||
"sslPort": 44387
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"profiles": {
|
|
||||||
"IIS Express": {
|
|
||||||
"commandName": "IISExpress",
|
|
||||||
"launchBrowser": true,
|
|
||||||
"launchUrl": "swagger",
|
|
||||||
"environmentVariables": {
|
|
||||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"vue_dotnet_example": {
|
|
||||||
"commandName": "Project",
|
|
||||||
"dotnetRunMessages": "true",
|
|
||||||
"launchBrowser": true,
|
|
||||||
"launchUrl": "swagger",
|
|
||||||
"applicationUrl": "https://localhost:5001;http://localhost:5000",
|
|
||||||
"environmentVariables": {
|
|
||||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
26
README.md
26
README.md
|
|
@ -1,2 +1,24 @@
|
||||||
# vue-dotnet-example
|
# clientapp
|
||||||
Example Project on how to develop and Build Vue App with DOTNET Web API
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
|
|
|
||||||
59
Startup.cs
59
Startup.cs
|
|
@ -1,59 +0,0 @@
|
||||||
using System;
|
|
||||||
using System.Collections.Generic;
|
|
||||||
using System.Linq;
|
|
||||||
using System.Threading.Tasks;
|
|
||||||
using Microsoft.AspNetCore.Builder;
|
|
||||||
using Microsoft.AspNetCore.Hosting;
|
|
||||||
using Microsoft.AspNetCore.HttpsPolicy;
|
|
||||||
using Microsoft.AspNetCore.Mvc;
|
|
||||||
using Microsoft.Extensions.Configuration;
|
|
||||||
using Microsoft.Extensions.DependencyInjection;
|
|
||||||
using Microsoft.Extensions.Hosting;
|
|
||||||
using Microsoft.Extensions.Logging;
|
|
||||||
using Microsoft.OpenApi.Models;
|
|
||||||
|
|
||||||
namespace vue_dotnet_example
|
|
||||||
{
|
|
||||||
public class Startup
|
|
||||||
{
|
|
||||||
public Startup(IConfiguration configuration)
|
|
||||||
{
|
|
||||||
Configuration = configuration;
|
|
||||||
}
|
|
||||||
|
|
||||||
public IConfiguration Configuration { get; }
|
|
||||||
|
|
||||||
// This method gets called by the runtime. Use this method to add services to the container.
|
|
||||||
public void ConfigureServices(IServiceCollection services)
|
|
||||||
{
|
|
||||||
|
|
||||||
services.AddControllers();
|
|
||||||
services.AddSwaggerGen(c =>
|
|
||||||
{
|
|
||||||
c.SwaggerDoc("v1", new OpenApiInfo { Title = "vue_dotnet_example", Version = "v1" });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
|
|
||||||
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
|
|
||||||
{
|
|
||||||
if (env.IsDevelopment())
|
|
||||||
{
|
|
||||||
app.UseDeveloperExceptionPage();
|
|
||||||
app.UseSwagger();
|
|
||||||
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "vue_dotnet_example v1"));
|
|
||||||
}
|
|
||||||
|
|
||||||
app.UseHttpsRedirection();
|
|
||||||
|
|
||||||
app.UseRouting();
|
|
||||||
|
|
||||||
app.UseAuthorization();
|
|
||||||
|
|
||||||
app.UseEndpoints(endpoints =>
|
|
||||||
{
|
|
||||||
endpoints.MapControllers();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
{
|
|
||||||
"Logging": {
|
|
||||||
"LogLevel": {
|
|
||||||
"Default": "Information",
|
|
||||||
"Microsoft": "Warning",
|
|
||||||
"Microsoft.Hosting.Lifetime": "Information"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
{
|
|
||||||
"Logging": {
|
|
||||||
"LogLevel": {
|
|
||||||
"Default": "Information",
|
|
||||||
"Microsoft": "Warning",
|
|
||||||
"Microsoft.Hosting.Lifetime": "Information"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"AllowedHosts": "*"
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
.DS_Store
|
|
||||||
node_modules
|
|
||||||
/dist
|
|
||||||
|
|
||||||
|
|
||||||
# local env files
|
|
||||||
.env.local
|
|
||||||
.env.*.local
|
|
||||||
|
|
||||||
# Log files
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.idea
|
|
||||||
.vscode
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
{
|
|
||||||
"lockfileVersion": 1
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,44 @@
|
||||||
|
{
|
||||||
|
"name": "clientapp",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "^4.6.0",
|
||||||
|
"bootstrap-vue": "^2.21.2",
|
||||||
|
"core-js": "^3.6.5",
|
||||||
|
"vue": "^3.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-service": "~4.5.0",
|
||||||
|
"@vue/compiler-sfc": "^3.0.0",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-vue": "^7.0.0-0"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/vue3-essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "babel-eslint"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<Dashboard />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import 'bootstrap/dist/css/bootstrap.css'
|
||||||
|
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||||
|
|
||||||
|
import Dashboard from './components/Dashboard.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
components: {
|
||||||
|
Dashboard
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@import './assets/styles/global.css';
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,40 @@
|
||||||
|
.header {
|
||||||
|
padding: 2%;
|
||||||
|
background-color: rgb(131, 53, 241);
|
||||||
|
font-size: 50px;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding: 2%;
|
||||||
|
background-color: red;
|
||||||
|
font-size: 50px;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard {
|
||||||
|
padding: 3% 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-board {
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(179, 242, 163, 0.719);
|
||||||
|
padding: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
color: red;
|
||||||
|
font-size: 75px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mrgnbtm {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-7 mrgnbtm">
|
||||||
|
<h2>Create User</h2>
|
||||||
|
<form>
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col-md-6">
|
||||||
|
<label htmlFor="exampleInputEmail1">First Name</label>
|
||||||
|
<input type="text" class="form-control" v-model="firstName" name="firstname" id="firstname" aria-describedby="emailHelp" placeholder="First Name" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group col-md-6">
|
||||||
|
<label htmlFor="exampleInputPassword1">Last Name</label>
|
||||||
|
<input type="text" class="form-control" v-model="lastName" name="lastname" id="lastname" placeholder="Last Name" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group col-md-12">
|
||||||
|
<label htmlFor="exampleInputEmail1">Email</label>
|
||||||
|
<input type="text" class="form-control" v-model="email" name="email" id="email" aria-describedby="emailHelp" placeholder="Email" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" @click='createUser()' class="btn btn-danger">Create</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'CreateUser',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
firstName: '',
|
||||||
|
lastName: '',
|
||||||
|
email: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createUser() {
|
||||||
|
console.log(this.firstName)
|
||||||
|
const payload = {
|
||||||
|
firstName: this.firstName,
|
||||||
|
lastName: this.lastName,
|
||||||
|
email: this.email
|
||||||
|
}
|
||||||
|
this.$emit('createUser', payload)
|
||||||
|
this.clearForm();
|
||||||
|
},
|
||||||
|
clearForm() {
|
||||||
|
this.firstName = "";
|
||||||
|
this.lastName = "";
|
||||||
|
this.email = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<div class="hello">
|
||||||
|
<Header />
|
||||||
|
<div class="container mrgnbtm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-8">
|
||||||
|
<CreateUser @createUser="userCreate($event)" />
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<DisplayBoard :numberOfUsers="numberOfUsers" @getAllUsers="getUsers()" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mrgnbtm">
|
||||||
|
<Users v-if="users.length > 0" :users="users" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Header from './Header.vue'
|
||||||
|
import CreateUser from './CreateUser.vue'
|
||||||
|
import DisplayBoard from './DisplayBoard.vue'
|
||||||
|
import Users from './Users.vue'
|
||||||
|
import { getAllUsers, createUser } from '../services/UserService'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Dashboard',
|
||||||
|
components: {
|
||||||
|
Header,
|
||||||
|
CreateUser,
|
||||||
|
DisplayBoard,
|
||||||
|
Users
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
users: [],
|
||||||
|
numberOfUsers: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getUsers() {
|
||||||
|
getAllUsers().then(res => {
|
||||||
|
this.users = res;
|
||||||
|
console.log(this.users)
|
||||||
|
this.numberOfUsers = this.users.length
|
||||||
|
});
|
||||||
|
},
|
||||||
|
userCreate(data) {
|
||||||
|
console.log(data);
|
||||||
|
createUser(data).then(res => {
|
||||||
|
this.getUsers();
|
||||||
|
console.log('res:::', res);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.getUsers();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<template>
|
||||||
|
<div class="display-board">
|
||||||
|
<h4>Users Created</h4>
|
||||||
|
<div class="number">
|
||||||
|
{{numberOfUsers}}
|
||||||
|
</div>
|
||||||
|
<div class="btn">
|
||||||
|
<button @click='getAllUsers()' type="button" class="btn btn-warning">Get all Users</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DisplayBoard',
|
||||||
|
props: ['numberOfUsers'],
|
||||||
|
methods: {
|
||||||
|
getAllUsers() {
|
||||||
|
this.$emit('getAllUsers')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<template>
|
||||||
|
<div class="header">
|
||||||
|
Vue.js With .NET
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Header'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<h2>Users</h2>
|
||||||
|
<table class="table table-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>User Id</th>
|
||||||
|
<th>Firstname</th>
|
||||||
|
<th>Lastname</th>
|
||||||
|
<th>Email</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(item, index) in users" :key="index">
|
||||||
|
<td>{{ index + 1 }}</td>
|
||||||
|
<td>{{ item.firstName }}</td>
|
||||||
|
<td>{{ item.lastName }}</td>
|
||||||
|
<td>{{ item.email }}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Users',
|
||||||
|
props: ['users']
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
export async function getAllUsers() {
|
||||||
|
|
||||||
|
const response = await fetch('/api/users');
|
||||||
|
return await response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createUser(data) {
|
||||||
|
const response = await fetch(`/api/user`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {'Content-Type': 'application/json'},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
})
|
||||||
|
return await response.json();
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
module.exports = {
|
||||||
|
devServer: {
|
||||||
|
"public": "vue.hello-world.games",
|
||||||
|
"port": 10002,
|
||||||
|
proxy: {
|
||||||
|
'^/api': {
|
||||||
|
target: 'https://localhost:5001',
|
||||||
|
changeOrigin: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue