目录
WebPack/NPM Task Runner Explorer的介绍
VS 2019的NPM/WebPack Task Runner下载和运行说明
将Vue.JS与ASP.NET Core MVC Web应用程序集成
本文涉及的主题包括Node.js，NPM，WebPack，Vue.js和.NET Core 3.1的介绍和安装；如何使用NPM和WebPack Task Runner运行/构建指令；如何使用ASP.NET Core 3.1 MVC设置Vue.js；并使用Vue.js和ASP.NET Core 3.1 MVC配置DropZone。
介绍
我们习惯于通过网站上的浏览器将文件从用户的计算机/系统传输到其他服务器。此过程称为文件上传。我们知道，在“单页应用程序”中，整个页面是在初始请求期间加载到浏览器中的，以后，它可以更新已更改的部分/页面的特定部分。这就是我们不需要为每次更新重新加载整个页面的方式。无论如何，要完成文件上传，我们可以将其分为两部分。文件上传的前端/ UI部分将使用Vue.js处理，而逻辑文件保存部分/后端将使用ASP.NET Core 3.1 MVC处理。单个文件将使用IFormFile缓存在内存中，并且文件内容将作为流被访问。
先决条件
- .NET Core 3.1的Visual Studio 2019
- 安装Node.js，NPM和Vue.js
- WebPack Task Runner以可视方式编译JS文件
- NPM Task Runner以可视方式安装/更新软件包
您不喜欢学习还是喜欢学习？好的！这是一个问题！
- 为什么选择Vue.js？您是否可以选择JS框架（例如Angular/React/Vue.js等）？如果是，那么哪一个对您有利，为什么？还是您没有选择的余地，而您的团队已经为您选择了JS框架（例如Vue.js）？如果是这样，那么为什么还有其他选择呢？
- 为什么选择NPM？您可以选择Bower，Yarn或NPM，然后为什么选择NPM？
- 为什么选择WebPack？您可以选择Grunt，Gulp或WebPack之类的选项，那么为什么选择WebPack？
Node.js的介绍
- Node.js是开源命令行工具。它使用Google V8 JavaScript引擎执行代码。
- 安装Node.js/NPM——要下载Node.js，请单击链接（https://nodejs.org/en/download/）
- 为什么你需要的Node.js/NPM——简而言之，您可能需要在应用程序中安装第三方包。NPM是命令行实用程序，可帮助您安装所需的软件包。但是如果没有Node.js，就无法安装NPM。系统将要求您使用Node.js安装设置来安装NPM。因此，安装Node.js以运行NPM。
您已经安装了Node.js/NPM吗？
打开命令提示符，键入：node -v并按Enter。如果获得版本号，则意味着您已经在计算机上安装了该版本号。
- 要检查npm版本，请使用以下命令： npm -v
- 要升级npm版本，请使用以下命令： npm i -g npm
Node/ NPM版本相关的常见错误
假设您的系统中有较旧的版本，并且已升级到最新版本。现在，如果使用以下命令npm -v在版本检查期间遇到任何错误（例如“TypeError: log.gauge.isEnabled”），则这是npm软件包依赖项问题。从以下路径中删除所有目录/文件，然后再次重新安装/修复Node.js：
- C:\Users\[用户名]\AppData\Roaming\npm-cache
- C:\Users\[用户名]\AppData\Roaming\npm
Vue.js简介
Vue.js是用于单页应用程序（SPA）开发的JavaScript框架。这类似于Angular，React.js或Knockout，并避免了页面重新加载。每一个都有不同的重点，您将必须根据自己的情况来决定哪个对您有利。如果您必须使用动态DOM操作，那么React.js很好。如果您需要数据驱动的CRUD操作，那么Angular很好。Vue.Js的位置介于这些情况之间；但它仍然喜欢处理动态DOM操作。但是，这是我的个人看法！
安装Vue.js V4
使用以下命令在全局范围内安装新版本：npm install -g @vue/cli。
为什么需要卸载旧版本的vue-cli？如果您已经全局安装了vue-cli软件包（版本：1.0/2.0）并想使用新的v4，则必须卸载以前的版本。新版本v4从vue-cli更改为@vue/cli。
- 要检查版本，请使用以下命令： vue --version
- 要使用NPM全局卸载它，请使用以下命令： npm uninstall vue-cli -g
- 要将其与NPM一起全局安装，请使用以下命令： npm install -g @vue/cli
NET Core介绍
我不需要介绍Dot NET Framework。但是，如果您的目标是在Windows，Mac和/或Linux等多种平台上运行应用程序，则Dot NET Core是完美的选择，因为它专注于微服务。另一个考虑因素是，如果您需要docker-container，那么您知道容器与虚拟机（VM）相比要更轻量。
安装Visual Studio 2019
WebPack/NPM Task Runner Explorer的介绍
Web-Pack Task Runner Explorer用于编译和捆绑JS文件。而NPM Task Runner Explorer用于安装/更新依赖项包。
VS 2019的NPM/WebPack Task Runner下载和运行说明
- 下载NPM Task Runner和运行说明
- 下载Web Pack Task Runner和运行说明
为什么需要NPM Task Runner？
当您想要手动安装/更新应用程序中的第三方包时，这是必需的。“package.json”文件用于保存软件包列表并与Node.js和NPM一起使用。在此文件中，您可以在包名称和版本如下所示的地方添加依赖项：
“devDependencies”：{“PackageName”：“VersionNumber”}
Web Pack如何工作
让我们来看看以下情况：
- 最终用户：Eva，我喜欢您的T恤。你从哪儿得到的？我想买一个。
- Eva.js：John给了我这个礼物。
- 最终用户：好的，和约翰交谈，问他从哪里得到的。
- Eva.js：嗨，John，去年圣诞节，您从哪里买来给我的T恤？
- John.js：我是从IN的ABC商店购买的。
因此，最终用户再发送一个Http请求以获得预期结果。这意味着，在Eva.js调用John.js的地方有一个依赖图。现在，如果要将这两个JS文件合并为一个捆绑包，则只需一个http请求即可找到该文件。因此，您需要Web Pack来制作那些捆绑包。您可以使用Web Pack合并、压缩和/或uglify 你的JS文件。（合并是将所有文件附加到一个大文件中；压缩是在不更改功能的情况下删除了不必要的空格和字符；uglify 是将代码转换为难以理解的格式。）
为什么需要Web Pack Task Runner？
简而言之，考虑到上述情况，可以说您需要Web-Pack Task Runner来编译和捆绑JS文件。
“webpack.config.js”文件提取所有配置，并且具有一个入口点，将所有JS文件配置带入捆绑器(bundler)启动的位置，然后使用输出获取路径和文件名配置来生成捆绑(bundle)。
module.exports = {
entry: { app: './wwwroot/js/app.js' },
output: {
publicPath: "/dest/js/",
path: path.join(__dirname, '/wwwroot/dest/js/'),
filename: '[name].bundle.js'
}
}将Vue.JS与ASP.NET Core MVC Web应用程序集成
项目创建
假设您可以创建一个新项目“ASP.NET Core Web应用程序> Web应用程序（模型-视图-控制器）”。现在，如果您不想使用默认的jQuery库，则可以从“wwwroot> lib”中删除文件和文件夹。但是，这是可选的。
模板设计
您可以根据需要修改默认的site.css和site.js文件。
将Bootstrap添加到项目的App.js文件中
在“wwwroot/css”目录中，我添加了CSS 的app.css文件，在“wwwroot/js”目录中，我添加了app.js文件，并注册了“Bootstrap”插件以使用material图标并最终具有以下内容：
import $ from 'jquery';
Import the Bootstrap Material Design Theme
import 'bootstrap-material-design/dist/css/bootstrap-material-design.min.css';
import 'bootstrap-material-design/dist/js/bootstrap-material-design.min.js';
import 'material-design-colors/dist/material-design.min.css';
Import the App Styles
import '../css/app.css';
Initialize the Material Design elements when the page loads
$(document).ready(function () {
$('body').bootstrapMaterialDesign
$('[data-toggle="popover"]').popover注意：我添加此文件仅作为示例。在这个项目中，我避免使用设计/material-icon，而是专注于配置。
将NPM软件包添加到package.json
您可能需要Vue，babel，WebPack，bootstrap等软件包。Babel是一个JavaScript编译器，可编译和转换旧的ES5 JavaScript以使浏览器兼容。所有的软件包都保存在“package.json”文件中。现在，您可以使用Package-Manager-Console或Task Runner Explorer安装/更新这些软件包。例如，我添加了一些软件包并得到以下结果：
{
"name": "HR.App.Web",
"version": "1.1.1",
"private": true,
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-es2017": "^6.24.1",
"bootstrap": "^4.1.3",
"bootstrap-material-design": "^4.1.1",
"css-loader": "^1.0.0",
"fuse.js": "^3.2.1",
"jquery": "^3.3.1",
"material-design-colors": "^1.0.2",
"style-loader": "^0.19.0",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.6.2",
"vue": "^2.6.10",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {}
}如果要使用NPM Task Runner资源管理器从package.json文件安装/更新软件包，请确保安装了NPM Task Runner资源管理器。如果没有看到Task Runner Explorer，请选择Package.json并单击鼠标右键。现在在Task Runner Explorer中，在package.json中选择安装。然后单击鼠标右键，如下图所示。结果，将安装所有软件包。
WebPack配置并捆绑js文件
在找到webpack.config.js文件时自动触发Web-Pack Task Runner。该文件的结尾如下：
"use strict";
const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
app: './wwwroot/js/app.js',
home: './Views/Home/Index.cshtml.js',
errorDetail: './Views/Home/ErrorDetail.cshtml.js'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
new VueLoaderPlugin()
],
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
},
output: {
publicPath: "/dest/js/",
path: path.join(__dirname, '/wwwroot/dest/js/'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
query: {
presets: ['es2017']
}
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 8192
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
extensions: ['.js', '.vue']
}
};我已经在最上面说明了，我们需要使用“Entry”来配置js文件的源，并使用路径来稍后获取该捆绑包。
entry: { app: './wwwroot/js/app.js', home: './Views/Home/Index.cshtml.js'}输出：这是已编译JavaScript文件的输出路径和包名的配置。
output: { publicPath: "/dest/js/", path: path.join(__dirname, '/wwwroot/dest/js/'),
filename: '[name].bundle.js'}如果要使用web-pack Task Runner Explorer编译并捆绑JS文件，请确保安装了Web-Pack Task Runner Explorer。如果没有看到Task Runner Explorer，请选择webpack.config.js并单击鼠标右键。现在在Task Runner Explorer中，在webpack.config.js中选择Run，然后单击鼠标右键，如下图所示。结果，所有JS文件都将构建到输出目录（wwwroot\dest\js）。
为什么选择 Drop-Zone？
很容易将文件拖放到上面，也很容易将文件上传到服务器上；轻量级的JavaScript库和最少的代码要求使用它。
在JS和View文件中添加Drop-Zone并进行配置
- 要安装dropzone软件包，请将dropzone添加到package.json文件的devDependencies中。"devDependencies": {vue2-dropzone": "2.0.0" }
- 如果打开webpack.config.js文件，则会发现我已经将JavaScript源文件及其路径添加到条目中。条目：{home: './Views/Home/Index.cshtml.js'}
- 在此项目中，在“视图” >“主目录”中找到“Index.cshtml”视图页面和“Index.cshtml.js”文件。打开Index.cshtml并添加dropzone和JavaScript捆绑文件。要添加它们，请执行以下操作：
在dropzone中：
- url:用于发送发布的文件，并且需要使用操作方法（“/Home/SubmitFile”）的控制器路径。
- use-custom-dropzone-options：如果要自定义选项，则为true；（我在Index.cshtml.js文件中添加了“useUploadOptions”变量。）
- dropzone-options：在这里你可以自定义maxfiles，maxFileSizeInMB，acceptedFiles，dictDefaultMessage。（在Index.cshtml.js中找到“uploadOptions” ）
- v-on:vdropzone-success：成功上传文件后使用此方法。
- v-on:vdropzone-error：如果上传失败，则使用此方法。
- Index.cshtml.js文件，该文件用在名为home.bundle.js的捆绑包中的Index.cshtml中，并以以下内容结尾：
import Vue from 'vue';
import Dropzone from 'vue2-dropzone';
document.addEventListener('DOMContentLoaded', function (event) {
let view = new Vue({
el: document.getElementById('view'),
components: {
"dropzone": Dropzone
},
data: {
message: 'This is the index page',
useUploadOptions: true,
uploadOptions: {
acceptedFiles: '.png,.jpg,.pdf',
dictDefaultMessage: 'To upload the file click here. Or, drop a file here.',
maxFiles: 1,
maxFileSizeInMB: 20,
addRemoveLinks: true
}
},
methods: {
onUploaded: function (file, response) {
if (response.status === "OK" || response.status === "200") {
console.log('Successfully uploaded!');
}
else {
this.isVisible = false;
console.log(response.message);
}
},
onUploadError: function (file, message, xhr) {
console.log("Message ====> " + JSON.stringify(message));
}
}
});
});- 转到主控制器文件并添加以下代码：
[HttpPost("/Home/SubmitFile")]
public async Task<ActionResult> SubmitFile(IFormFile file)
{
try
{
To do: Validation
To do: check file-content
string webRootPath = hostingEnvironment.WebRootPath;
string fileLandingPath = Path.Combine(webRootPath, folderName);
StreamReader stream = new StreamReader(file.OpenReadStream());
if (!Directory.Exists(fileLandingPath))
{
Directory.CreateDirectory(fileLandingPath);
}
string filePath = string.Format("{0}\\{1}{2}", fileLandingPath,
Path.GetFileNameWithoutExtension(file.FileName),
Path.GetExtension(file.FileName));
using (var fileStream = new FileStream(filePath, FileMode.Create))
{
await file.CopyToAsync(fileStream);
}
var jsonResult = Json(new { status = "OK" });
return jsonResult;
}
catch (Exception ex)
{
return Json(new { status = "Error", message = ex.Message });
}
}- 现在选择Web-pack Task Runner来编译和捆绑js文件。选择运行，然后右键单击鼠标按钮，然后将找到运行和绑定选项。单击运行。等待几秒钟，您将得到结果到“wwwroot\dest\js”目录中。
- 现在准备运行该应用程序，运行后，您将找到以下上传控件：
注意：在本文中，我主要关注配置和设置。因此，我不在乎软件包的最新版本。您应该使用最新版本的软件包。
1374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
