目录

介绍

先决条件

Node.js的介绍

您已经安装了Node.js/NPM吗?

Node/ NPM版本相关的常见错误

Vue.js简介

安装Vue.js V4

NET Core介绍

安装Visual Studio 2019

WebPack/NPM Task Runner Explorer的介绍

VS 2019的NPM/WebPack Task Runner下载和运行说明

为什么需要NPM Task Runner?

Web Pack如何工作

为什么需要Web Pack Task Runner?

将Vue.JS与ASP.NET Core MVC Web应用程序集成

项目创建

模板设计

将Bootstrap添加到项目的App.js文件中

将NPM软件包添加到package.json

WebPack配置并捆绑js文件

在JS和View文件中添加Drop-Zone并进行配置


本文涉及的主题包括Node.jsNPMWebPackVue.js.NET Core 3.1的介绍和安装;如何使用NPMWebPack Task Runner运行/构建指令;如何使用ASP.NET Core 3.1 MVC设置Vue.js;并使用Vue.jsASP.NET Core 3.1 MVC配置DropZone

介绍

我们习惯于通过网站上的浏览器将文件从用户的计算机/系统传输到其他服务器。此过程称为文件上传。我们知道,在单页应用程序中,整个页面是在初始请求期间加载到浏览器中的,以后,它可以更新已更改的部分/页面的特定部分。这就是我们不需要为每次更新重新加载整个页面的方式。无论如何,要完成文件上传,我们可以将其分为两部分。文件上传的前端/ UI部分将使用Vue.js处理,而逻辑文件保存部分/后端将使用ASP.NET Core 3.1 MVC处理。单个文件将使用IFormFile缓存在内存中,并且文件内容将作为流被访问。

先决条件

  • .NET Core 3.1Visual Studio 2019
  • 安装Node.jsNPMVue.js
  • WebPack Task Runner以可视方式编译JS文件
  • NPM Task Runner以可视方式安装/更新软件包

您不喜欢学习还是喜欢学习?好的!这是一个问题!

  • 为什么选择Vue.js?您是否可以选择JS框架(例如Angular/React/Vue.js等)?如果是,那么哪一个对您有利,为什么?还是您没有选择的余地,而您的团队已经为您选择了JS框架(例如Vue.js)?如果是这样,那么为什么还有其他选择呢?
  • 为什么选择NPM?您可以选择BowerYarnNPM,然后为什么选择NPM
  • 为什么选择WebPack?您可以选择GruntGulpWebPack之类的选项,那么为什么选择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框架。这类似于AngularReact.jsKnockout,并避免了页面重新加载。每一个都有不同的重点,您将必须根据自己的情况来决定哪个对您有利。如果您必须使用动态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,则必须卸载以前的版本。新版本v4vue-cli更改为@vue/cli

  • 要检查版本,请使用以下命令: vue --version
  • 要使用NPM全局卸载它,请使用以下命令: npm uninstall vue-cli -g
  • 要将其与NPM一起全局安装,请使用以下命令: npm install -g @vue/cli

NET Core介绍

我不需要介绍Dot NET Framework。但是,如果您的目标是在WindowsMac/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 2019NPM/WebPack Task Runner下载和运行说明

为什么需要NPM Task Runner

当您想要手动安装/更新应用程序中的第三方包时,这是必需的。package.json文件用于保存软件包列表并与Node.jsNPM一起使用。在此文件中,您可以在包名称和版本如下所示的地方添加依赖项:
devDependencies{“PackageNameVersionNumber”}

Web Pack如何工作

让我们来看看以下情况:

  • 最终用户:Eva,我喜欢您的T恤。你从哪儿得到的?我想买一个。
  • Eva.jsJohn给了我这个礼物。
  • 最终用户:好的,和约翰交谈,问他从哪里得到的。
  • Eva.js:嗨,John,去年圣诞节,您从哪里买来给我的T恤?
  • John.js:我是从INABC商店购买的。

因此,最终用户再发送一个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.JSASP.NET Core MVC Web应用程序集成

项目创建

假设您可以创建一个新项目“ASP.NET Core Web应用程序> Web应用程序(模型-视图-控制器)。现在,如果您不想使用默认的jQuery库,则可以从wwwroot> lib中删除文件和文件夹。但是,这是可选的。

模板设计

您可以根据需要修改默认的site.csssite.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

您可能需要VuebabelWebPackbootstrap等软件包。Babel是一个JavaScript编译器,可编译和转换旧的ES5 JavaScript以使浏览器兼容。所有的软件包都保存在package.json文件中。现在,您可以使用Package-Manager-ConsoleTask 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库和最少的代码要求使用它。

JSView文件中添加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并添加dropzoneJavaScript捆绑文件。要添加它们,请执行以下操作:

dropzone中:

  1. url:用于发送发布的文件,并且需要使用操作方法(/Home/SubmitFile)的控制器路径。
  2. use-custom-dropzone-options:如果要自定义选项,则为true;(我在Index.cshtml.js文件中添加了useUploadOptions变量。)
  3. dropzone-options:在这里你可以自定义maxfilesmaxFileSizeInMBacceptedFilesdictDefaultMessage。(在Index.cshtml.js找到uploadOptions” 
  4. v-on:vdropzone-success:成功上传文件后使用此方法。
  5. 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目录中。

  • 现在准备运行该应用程序,运行后,您将找到以下上传控件:

注意:在本文中,我主要关注配置和设置。因此,我不在乎软件包的最新版本。您应该使用最新版本的软件包。

Logo

前往低代码交流专区

更多推荐