65.9K
CodeProject 正在变化。 阅读更多。
Home

Vue.Js 结合 ASP.NET Core MVC

Habibur Rony
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (9投票s)

2017 年 11 月 13 日

CPOL

9分钟阅读

viewsIcon

70899

downloadIcon

1637

本文主要介绍 Vue.js 与 Dot NET Core 的基本配置和设置。其中包括对 Web-pack、Grunt 或 Gulp、Type-Script、Babel、Axios 和 Web-pack 任务运行器的基本讨论。还简要介绍了 NPM、Bower 和 Yarn 等包管理器。

本文指导如何使用 Vue.js 实现一个 Web 应用程序。这些是关于了解客户端和服务器端之间通信的入门级指南。我们将配置设置以及如何使用 Vue.Js（一个用于客户端开发的 JavaScript 框架）。服务器端将由 Dot NET Core MVC 处理。让我们看看如何设置 Vue.Js 与 Dot NET Core。

覆盖主题

  • Vue.js 安装和基本设置
  • Dot NET Core 下载和设置
  • ASP.NET Core SPA 模板
  • Node.js 和 NPM 设置
  • 包管理器（NPM、Bower、Yarn）基础知识
  • Web-pack、Grunt 或 Gulp 的基本知识
  • Type-Script、Babel 简介
  • 设置 Dot Core MVC 和 NPM
  • Axios-Package 的使用
  • 设置 Web-pack 任务运行器

VUE.JS 简介

它是一个用于单页应用程序（SPA）开发的 JavaScript 框架。这个 JavaScript 框架类似于 Angular、React.js 和 Knockout。这些框架各有侧重，您需要决定哪个适合您。这取决于您的情况。如果您需要处理动态 DOM 操作，那么 React.js 很好。如果您需要数据驱动的 CRUD 操作，那么 Angular 很好。Vue.Js 的定位介于两者之间；但它仍然喜欢处理 DOM。这些只是我个人的看法。

DOT NET Core

我不需要介绍 Dot NET Framework。但这一次，Dot NET Core 正在为未来带来一场革命。是的，我说的是跨平台。如果您打算在 Windows、Mac 和 Linux 等多个平台上运行您的应用程序，那么 Dot NET Core 是完美的。因为它侧重于微服务，并且如果您喜欢 Docker 容器，这也是一个考虑因素。您知道容器与虚拟机（VM）相比是轻量级的。

下载和安装 Visual Studio 2017

ASP.NET Core Spa 模板

通过 ASP.NET Core 2.0，您默认会获得单页应用程序模板。

您也可以安装 ASP.NET Core SPA 模板。此模板兼容 ASP.NET Core 1.1 的 Angular、Aurelia、Knockout、React、React+Redux、Vue.js。找到 给定链接以下载模板。 (http://vsixgallery.com/extension/4336beed-a389-4f86-9138-40d258e78ccf/)

您还可以 下载 Vue.js Pack 2017 以获得 HTML 智能感知和代码片段 (https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329)

基础知识和设置

Node.js

Node.js 是一个开源的命令行工具。它使用 Google V8 JavaScript 引擎执行代码。 您可以下载它。 (https://node.org.cn/en/download/)

Node 包管理器 (NPM)

NPM 是一个命令行实用程序。您可以使用它来安装第三方包、版本管理和依赖管理。在 Node.js 安装过程中，系统会提示您安装 NPM。如果您想安装 NPM，请不要忘记安装 Node.js。建议安装 Node.js 来运行 NPM。

命令行

  • 安装 NPM：npm install -g npm
  • 更新：npm update -g
  • 查看已安装的版本：npm -v

Bower, Yarn

Bower 和 Yarn 类似于 NPM。您可以使用 NPM、Yarn 或 Bower 中的任何一个。在包安装方面，Yarn 有时比 NPM 快几秒钟；这取决于具体情况。

Web-pack, Grunt 或 Gulp

如果您问我 Web-pack 是什么？我会保持沉默。让我们看一个 Web-pack 可以为您提供解决方案的场景。

  • 终端用户：我喜欢你的 T 恤。你是怎么得到的？
  • Eva.js：我男朋友 John 送我的。
  • 终端用户：好的，去问 John。
  • Eva.js：嗨亲爱的！你在哪里买的这件酷 T 恤？
  • John.js：我在一家在线商店买的。

所以，终端用户又发送了一个 Http 请求来获取期望的结果。这意味着，存在一个依赖图，其中 *Eva.js* 调用 *John.js*。

现在，如果我们把这两个 JS 文件合并成一个包，那么只需要一个 http 请求就可以找到文件。

所以，您需要 Web-pack 来制作这些包。您可以使用 Web-pack 来连接、压缩或混淆您的 JS 文件。

  • 连接是将所有文件附加到一个大文件中。
  • 压缩是在不改变功能的情况下删除不必要的空格和字符。

  • 混淆是将代码转换成一种难以理解的格式。

Gulp/Grunt

Gulp 或 Grunt 类似于 Web-pack。您可以使用它们来连接、压缩或混淆您的 JS 和 CSS 文件。

Web-Pack 与 Gulp/Grunt

Web-Pack

Gulp/Grunt

Type-Script

ECMAScript 是 JavaScript 的标准。但并非所有浏览器都支持新标准。Type-Script 充当一个转译器，可以将代码从（例如，es-2016 或 es-2017）转译为 es5 的 JavaScript 代码。最终，它使其在浏览器中兼容。

如果您来自 .NET 背景的工程师，那么我会说，它为编写 JavaScript 增加了一些美感，例如——命名空间、接口、泛型、访问修饰符、空值检查等。您会感觉就像在 .NET 家园一样。

Babel

Babel 也是一个 JavaScript 转译器，它可以编译和转换旧的 ES5 JavaScript，使其在浏览器中兼容。

安装 VUE-CLI

  • 首先，您需要确保 Node.js 和 NPM 已安装在您的系统上。
  • 使用以下命令将 Vue CLI 全局安装到本地系统：npm install -g vue-cli

设置 Dot Net Core MVC 和 NPM

  • 创建一个新的 .NET Core 项目（带 MVC）
  • 选择 .NET Core > ASP.NET Core Web Application

  • 选择 Web Application (MVC)

在 ASP.NET Core 中使用 Bower、NPM 或 Yarn 管理客户端包

如果您选择 MVC 模板，它会自动使用 Bower 进行客户端包安装。

移除项目中的默认 Bower

我将在此演示项目中使用 NPM。要从项目中移除 Bower：

  • 删除 - lib 文件夹。您会在 *wwwroot* 文件夹中找到它。
  • 删除 *bower.json* 配置文件。
  • 最后，卸载项目，然后重新加载项目。

将 NPM 客户端包管理器添加到项目中

在您的项目中添加 *package.json* 文件。通过右键单击解决方案并搜索 `npm` 来添加此文件。您将获得 `npm` 配置文件。

添加文件后，卸载并重新加载项目。您将在“依赖项”下看到 *npm* 文件夹。

Axios-Package

在这个项目中，我将使用 `axios-package` 进行 http 客户端请求。它是一个基于 Promise 的 http 客户端。使用 ‘npm install axios’ 安装此包。

package.json

您可以将内容复制并粘贴到 *package.json* 文件中，Visual-Studio 将为您还原所有包。

{
  "name": "Rony.DotNetCore.HelloWorld",
  "version": "0.0.0",
  "devDependencies": {
    "@types/requirejs": "^2.1.28",
    "axios": "^0.16.2",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "bootstrap": "^4.0.0-beta",
    "bootstrap-material-design": "4.0.0-beta.3",
    "css-loader": "^0.28.7",
    "fuse.js": "^3.2.0",
    "jquery": "^3.2.1",
    "material-design-colors": "^1.0.2",
    "moment": "^2.19.1",
    "numbro": "^1.11.0",
    "popper.js": "^1.12.5",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "vue": "2.4.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "2.4.4",
    "webpack": "^3.6.0"
  }
}

用于 Type-Script 的 tsconfig.json

为了避免额外的复杂性，我没有将 type-script 添加到这个项目中。我使用了 babel。因为我的主要目标不是展示转译器。但是，如果您想添加 type-script，那么您需要将 *tsconfig.json* 文件添加到项目中，并包含以下内容，然后根据您的需要更改目标版本。

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "module": "es2015",
    "moduleResolution": "node",
    //"target": "es5",
    "target": "es2015",
    "removeComments": true,
    "sourceMap": true,
    "skipDefaultLibCheck": true,
    "types": [ "requirejs" ]
  },
  "compileOnSave": true,
  "exclude": [
    "bin",
    "node_modules"
  ]
}

添加 *tsconfig.json* 文件后，您需要将 `HelloWorld.cshtml.js` 更改为 `HelloWorld.cshtml.ts`。最后，您就可以在您的 `ts` 文件中使用 type script 了。

在 Dot NET Core MVC 中设置 VUE.JS 和 Web-Pack

如果您尚未安装 web-pack，请安装（nmp install webpack –g）。现在在您的项目中添加一个 *webpack.config.js* 文件。在这里，我们将设置 JS 文件的入口点。

entry: {
        app: './wwwroot/js/site.js',
        HelloWorld: './Views/Home/HelloWorld.cshtml.js',
        EmployeeIndex: './Views/Home/EmployeeIndex.cshtml.js
    }

我们需要设置输出目录来放置打包后的 js 文件。

output: {
        publicPath: "/js/",
        path: path.join(__dirname, '/wwwroot/js/'),
        filename: '[name].bundle.js'
    }

完整的配置如下。您可以将其复制并粘贴到您的 *webpack.config.js* 文件中，并根据您的需要进行更改。

    /// <binding ProjectOpened='Watch - Development' />
    "use strict";
const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: {
        app: './wwwroot/js/site.js',
        HelloWorld: './Views/Home/HelloWorld.cshtml.js',
        EmployeeIndex: './Views/Home/EmployeeIndex.cshtml.js'
     
    },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default'],
            moment: 'moment',
            axios: 'axios',
            numbro: 'numbro'
        }),
        new webpack.optimize.UglifyJsPlugin()
    ],
    output: {
        publicPath: "/js/",
        path: path.join(__dirname, '/wwwroot/js/'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,
                loader: "ts-loader",
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            {
                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']
    }
};

设置 Webpack 任务运行器

您需要 Web-pack 任务运行器来编译和打包 js 文件。您也可以直接从命令行进行编译。在这种情况下，您不需要 webpack 任务运行器。总之，如果您想安装，请 前往下载链接并安装它。安装后，您将在项目中找到给定的窗口。

如果您需要更改 JS 文件，它将由这个工具自动编译。您甚至可以手动运行它。要手动运行它，请转到任务运行器资源管理器的左侧。选择“运行”并右键单击鼠标按钮，您将找到“运行”和“绑定”选项。点击“运行”。等待几秒钟，您将看到结果。

Vue.js 结合 Dot Net Core MVC 的简短演示项目

我创建了一个非常轻量级的项目来向您展示配置和工作原理。您可以创建一个 Dot NET core MVC 应用程序项目。要设置项目，请按照前面给出的步骤进行配置。

Hello-World 视图页面

在此项目中，我在 Views>Home 目录下添加了一个“*HelloWorld.cshtml*”视图页面和“*HelloWorld.cshtml.js*”。

在 *HelloWorld.cshtml* 文件中，我添加了两个变量，如 `message` 和 `twoWayBindingMessage`，来向您展示——我们如何将 *Vue.js* 绑定到 `View` 并与之通信。

@{
    ViewData["Title"] = "Hello World - Page";
}
<h4>@ViewData["Title"]</h4>
<h3>@ViewData["Message"]</h3>

    <div id="view">
        <span>One way binding message:{{message}}</span>
            <br /><hr />
            <span>2-way binding msg: {{twoWayBindingMessage}}</span><br />
            <br/>
            <input type="text" v-model="twoWayBindingMessage">
    </div>

<script src="~/js/HelloWorld.bundle.js" asp-append-version="true"></script>

在这里，带有双花括号的 `message` 变量是一次性静态绑定。如果您愿意，可以使用动态绑定。文件末尾添加了一个来自输出目录的 JavaScript 包文件。

*HelloWorld.cshtml.js* 文件包含以下行。您会在 `vue` 对象的 data 中找到变量。

import Vue from "vue";
document.addEventListener('DOMContentLoaded', function (event) {
    let view = new Vue({
        el: document.getElementById('view'),
        mounted: function () { },
        data: {
            message: "One-way binding msg",
            twoWayBindingMessage:"Type here ..."
        }
    });
});

如何提交表单

我在 Views>Home 目录下添加了“*EmployeeIndex.cshtml*”视图页面和“*EmployeeIndex.cshtml.js*”。在这里，我添加了几行代码来展示如何使用 axios 发布数据。其余的 `get`、`put` 或 `delete` 方法类似。

在 *EmployeeIndex.cshtml* 文件中，添加下面给出的内容

@{
  ViewData["Title"] = "Add Employee";
}
<h3>@ViewData["Title"]</h3>
<h3>@ViewData["Message"]</h3>

@{
    ViewData["Title"] = "Add Employee";
}
<h3>@ViewData["Title"]</h3>
<h3>@ViewData["Message"]</h3>

<div id="view">
    <form>
        <div class="form-group">
            <label for="FirstName">First Name</label>
            <input type="text" class="form-control" 
            id="firstName" name="firstName" 
            v-model="firstName" placeholder="firstName ">
        </div>
        <div class="form-group">
            <label for="LastName">Last Name</label>
            <input type="text" class="form-control" 
            id="lastName" name="lastName" 
            v-model="lastName" placeholder="Last Name">
        </div>
        <div class="form-group">
            <label for="address">Address</label>
            <textarea class="form-control" rows="3" 
            id="address" name="address" 
            v-model="address" placeholder="Address"></textarea>
        </div>
        <button v-on:click="addEmployee">Add Employee</button>
    </form>
</div>

<script src="~/js/EmployeeIndex.bundle.js"></script>

我将给定内容添加到 *EmployeeIndex.cshtml.js* 文件中。如果您需要 `put`、`get`、`delete` 等新方法，可以将其添加到 `methods:{…}` 中。

import Vue from "vue";
import http from 'axios';

document.addEventListener('DOMContentLoaded', function (event) {
    let view = new Vue({
        el: document.getElementById('view'),
        mounted: function () { },
        data: {
            firstName: "",
            lastName: "",
            address:"",
            message: "This is a simple message from vue"
        },
        methods:
        {
            addEmployee: function () {
                try {
                    var url = '/Home/EmployeeIndex/';
                    var data = {
                        "firstName": this.firstName,
                        "lastName": this.lastName,
                        "address": this.address
                    };
                    var self = this;
                    http.post(url, data)
                        .then(function (response) {
                            console.log("successfully added!");
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                } catch (ex) {
                    console.log(ex);
                }

               return false;
            },
        }
    });
});

在文件顶部，我导入了 `vue` 和 `axios`。

import Vue from "vue";
import http from 'axios';

要发布数据，我使用了 `axios` 的 `http.post(url, data)` 方法。

现在，运行项目并为 `firstName`、`lastName` 和 `address` 输入一些值。如果您单击“添加员工”按钮，您就可以将这些值从客户端传递到控制器。

配置和设置项目有许多方法。我在这篇文章中包含了一个小型演示项目。在演示中，我包含了一些非常简单和基础的代码；但是，您可以使用单独的文件来存放模板和组件文件，以实现客户端开发。

© . All rights reserved.