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
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# SASS Compiler cache
|
||||
.sass-cache
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Visual Studio 2014 CTP
|
||||
**/*.sln.ide
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Visual Studio temp something
|
||||
.vs/
|
||||
|
||||
# dotnet stuff
|
||||
project.lock.json
|
||||
|
||||
# VS 2015+
|
||||
*.vc.vc.opendb
|
||||
*.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)
|
||||
#####
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Example Project on how to develop and Build Vue App with DOTNET Web API
|
||||
# clientapp
|
||||
|
||||
## 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