ASP.NET中怎么搭建前后端分離框架

本篇文章為大家展示了ASP.NET中怎么搭建前后端分離框架，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

        一、 項(xiàng)目開(kāi)發(fā)環(huán)境搭建
        1、 安裝 .NET Core
         .NET Core 與之前的 .NET Framework 不一樣，它不再緊緊的耦合在 Windows 系統(tǒng)上了，因此，我們可以在支持的操作系統(tǒng)上以安裝軟件的形式安裝我們的 .NET Core 開(kāi)發(fā)環(huán)境。
        打開(kāi)官網(wǎng)的下載頁(yè)面（.NET Downloads），找到 .NET Core，這里因?yàn)槲覀冃枰诋?dāng)前環(huán)境進(jìn)行開(kāi)發(fā)，所以需要安裝 .NET Core SDK，下載完成后，一路 Next 即可。

        當(dāng)我們安裝完成后，打開(kāi)控制臺(tái)，輸入命令，則會(huì)顯示出我們本機(jī)安裝的 .NET Core 版本。

1

dotnet --info ## 或者使用 dotnet --version 查看本機(jī)安裝的 .NET Core 版本信息

        在 .NET Core 中為我們提供了 .NET Core CLI 這一工具使我們使用命令行的方式創(chuàng)建我們的 .NET Core 應(yīng)用，這里我們還是使用 VS 來(lái)創(chuàng)建我們的應(yīng)用，有興趣的朋友，可以看看園子里的這篇文章 =》.NET Core dotnet 命令大全
        2、 安裝 Node.js & Vue CLI
        在整個(gè)前后端分離的項(xiàng)目的搭建中，前端的 Vue 項(xiàng)目，是使用 Vue CLI 3 進(jìn)行搭建的腳手架項(xiàng)目，而 Vue CLI 本質(zhì)上是一個(gè)全局安裝的 npm 包，通過(guò)安裝這一 npm 包可以為我們提供終端里的 vue 命令，因此我們需要使用這一腳手架工具的前提，則是需要我們安裝 Node.js 環(huán)境。
        打開(kāi) Node.js 官網(wǎng)（Node.js），選擇長(zhǎng)期支持版下載，之后一路 Next 下去即可。目前的 Node.js 安裝包中已經(jīng)包含了 npm，因此，我們安裝好 Node.js 即可。npm 可以類(lèi)比于我們 .NET 平臺(tái)的 Nuget，而默認(rèn)我們安裝的全局組件和緩存默認(rèn)是在 C:\Users\用戶(hù)名\AppData\Roaming 下，如果你想修改緩存的地址或者全局安裝的包地址則需要自己配置環(huán)境，具體可參考 =》Node.js安裝及環(huán)境配置之Windows篇
        PS：Vue CLI 3 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。

1
2
3

npm uninstall vue-cli -g ## 卸載 vue-cli (1.x or 2.x)
node -v ## 查看安裝的 Node 版本
npm -v ## 查看安裝的 npm 版本

        當(dāng) Node 環(huán)境安裝好之后，我們就可以安裝 Vue CLI 3 腳手架工具了，如果你之前已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)，則需要先卸載舊版本的 Vue CLI。

1
2

npm uninstall vue-cli -g ## 卸載 vue-cli (1.x or 2.x)
npm install -g @vue/cli

        安裝之后，我們就可以在命令行中使用 vue 命令。

1
2

vue ## 查看 vue 相關(guān)幫助信息
vue --version ## 查看安裝的 vue cli 版本信息

        3、 安裝 Git
        為代碼添加版本控制是必須的，它可以詳細(xì)的記錄你的每一次操作，以及當(dāng)你的某次作死導(dǎo)致的環(huán)境出錯(cuò)時(shí)，你可以很快的恢復(fù)環(huán)境。經(jīng)常作死的表示，這個(gè)巨需要。
        Git 作為一個(gè)分布式的版本控制系統(tǒng)，與 SVN 這種集中式的版本控制系統(tǒng)不同，我們的本地倉(cāng)庫(kù)不僅包含了我們的代碼，還包含了每個(gè)人對(duì)代碼的操作歷史 log，而 SVN 的歷史操作記錄只存在于中央倉(cāng)庫(kù)中。
        這樣有什么好處呢？假如，某天中央倉(cāng)庫(kù)出錯(cuò)了需要重新創(chuàng)建，因?yàn)槲覀儽镜氐拇a不包含操作歷史 log，你只能把代碼重新放置到中央倉(cāng)庫(kù)，而文件的歷史版本卻丟失了。如果使用 Git 進(jìn)行版本控制的話，因?yàn)槲覀儽镜氐膫}(cāng)庫(kù)是一個(gè)完整的包含歷史操作記錄的倉(cāng)庫(kù)，我們就可以毫無(wú)差別的重新搭建一個(gè)中央倉(cāng)庫(kù)。
        Git 方面的學(xué)習(xí)教程，可以看看廖雪峰大神寫(xiě)的這一系列的教程 =》Git 教程
        打開(kāi) Git 官網(wǎng)（Git）下載安裝包安裝，一路 Next 即可。安裝完成后，開(kāi)始菜單里出現(xiàn) Git Bash 這個(gè)應(yīng)用，則說(shuō)明我們的 Git 已經(jīng)安裝成功了。安裝 Git 之后，我們需要設(shè)置我們的名字以及 Email，從而表明我們的身份，這里使用 Git Bash 設(shè)置即可。

1
2

git config --global user.name "Your Name" ## 全局設(shè)置用戶(hù)名
git config --global user.email "email@example.com" ## 全局設(shè)置郵箱

        二、 應(yīng)用整體框架搭建
        當(dāng)我們安裝好項(xiàng)目開(kāi)發(fā)的環(huán)境之后就可以搭建我們的項(xiàng)目框架了，這里我選擇將前后端的項(xiàng)目放到同一個(gè) Git 倉(cāng)儲(chǔ)中，你也可以根據(jù)你自己的喜好放到多個(gè) Git 倉(cāng)儲(chǔ)中。
        新建一個(gè)文件夾作為倉(cāng)儲(chǔ)，在創(chuàng)建好的文件夾路徑下打開(kāi) Git Bash，初始化我們的倉(cāng)儲(chǔ)。如果你勾選了顯示隱藏文件夾，則會(huì)發(fā)現(xiàn)，當(dāng)我們執(zhí)行好初始化的命令之后，則會(huì)在當(dāng)前文件夾下創(chuàng)建一個(gè) .git 文件夾。

1

git init

        當(dāng)然，你也可以使用 VS 進(jìn)行創(chuàng)建 Git 倉(cāng)儲(chǔ)，使用 VS 創(chuàng)建倉(cāng)儲(chǔ)后會(huì)自動(dòng)幫我們創(chuàng)建 .gitignore 和 .gitattributes 文件，同樣的，后續(xù)對(duì)于該倉(cāng)儲(chǔ)的任何 Git 操作，我們也可以通過(guò) VS 進(jìn)行。
        gitignore 文件表示我們需要忽略的文件或目錄，而 gitattribute 則用于設(shè)置非文本文件的對(duì)比方式，這里我們使用 VS 創(chuàng)建 Git 倉(cāng)儲(chǔ)后生成的 gitignore 文件默認(rèn)會(huì)添加 .NET 項(xiàng)目需要忽略提交的文件和目錄。因?yàn)?，前端的?xiàng)目我是使用 VS Code 進(jìn)行開(kāi)發(fā)的，這里，我需要將一些 VS Code 生成的文件也添加到 gitignore 文件中。

1
2
3
4
5

.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

        創(chuàng)建 ASP.NET Core Web API 的具體過(guò)程就不演示了，這里采用的就是基礎(chǔ)的多層架構(gòu)，當(dāng)我們創(chuàng)建好項(xiàng)目之后，可以看到 VS 右下角鉛筆 icon 處會(huì)顯示我們未做提交的修改。點(diǎn)擊 icon ，輸入我們的提交信息后，就可以將我們的修改提交到倉(cāng)儲(chǔ)中。

        后端的 API 接口應(yīng)用創(chuàng)建好了，現(xiàn)在我們使用 Vue CLI 來(lái)構(gòu)建我們前端的 Vue 項(xiàng)目。這里，我選擇在解決方案的根目錄創(chuàng)建我們的前端項(xiàng)目。
        在 Vue CLI 3 中，我們不僅可以使用 vue create 命令來(lái)創(chuàng)建我們的項(xiàng)目，而且可以使用圖形化的頁(yè)面創(chuàng)建我們的應(yīng)用。

1
2

vue create project-name ## 使用命令行的形式創(chuàng)建
vue ui ## 使用圖形化的方式創(chuàng)建

        當(dāng)使用 vue ui 命令后會(huì)自動(dòng)打開(kāi)創(chuàng)建項(xiàng)目的頁(yè)面，可以看到，這個(gè)路徑下，并沒(méi)有創(chuàng)建好的項(xiàng)目，你可以選擇從別的路徑下導(dǎo)入，或者是直接創(chuàng)建新的項(xiàng)目。如果你有使用過(guò) Vue CLI 之前的版本，使用大寫(xiě)字母創(chuàng)建項(xiàng)目時(shí)是會(huì)報(bào)錯(cuò)的，但是在 Vue CLI 3 版本中沒(méi)有出現(xiàn)這種問(wèn)題。

        因?yàn)槲覍⑶岸隧?xiàng)目與后端的項(xiàng)目放到同一個(gè)倉(cāng)儲(chǔ)中，所以這里就不需要再進(jìn)行初始化 git 倉(cāng)庫(kù)了，對(duì)于項(xiàng)目的配置，這里就采用默認(rèn)的配置。點(diǎn)擊創(chuàng)建之后就會(huì)自動(dòng)搭建我們的項(xiàng)目。如何啟動(dòng)這個(gè)腳手架項(xiàng)目，可以按照生成的 README 文件中的步驟執(zhí)行。

        到這里，基礎(chǔ)的 Vue 腳手架項(xiàng)目就已經(jīng)搭建完成了，對(duì)于添加插件之類(lèi)的內(nèi)容，放到我們后面的內(nèi)容中。另外，雖然我們?cè)趧?chuàng)建項(xiàng)目時(shí)并沒(méi)有勾選初始化 Git 倉(cāng)儲(chǔ)，但是 Vue CLI 還是創(chuàng)建了一個(gè) gitignore 文件，如果你和我一樣，是將前后端項(xiàng)目放到一個(gè)倉(cāng)儲(chǔ)的話，可以把這個(gè)文件里的內(nèi)容復(fù)制到項(xiàng)目根目錄中的 gitignore 文件中，然后把這個(gè)文件刪除。

附錄

        微軟官方有提供一套 Vue 的 SPA 應(yīng)用模板，不過(guò)并沒(méi)有顯示在我們使用 VS 創(chuàng)建項(xiàng)目的頁(yè)面中，而且需要我們添加一個(gè)插件之后，使用 .NET Core CLI 的方式創(chuàng)建。因?yàn)樽约翰](méi)有詳細(xì)了解這塊的內(nèi)容，這里只列出創(chuàng)建的方法，詳細(xì)的介紹請(qǐng)查看微軟的官方文檔（Building Single Page Applications on ASP.NET Core with JavaScriptServices ）。

1
2

## 安裝 SPA 模板
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

        當(dāng)你安裝好模板之后，可以看到，多了使用 Aurelia、Vue、Knockout 創(chuàng)建 SPA 模板的選項(xiàng)，這時(shí)我們就可以使用 dotnet new 命令來(lái)創(chuàng)建包含 Vue 的模板應(yīng)用。模板創(chuàng)建完成后需要安裝依賴(lài)的包。加載完依賴(lài)的包之后，我們就可以通過(guò) VS 或 VS Code 開(kāi)發(fā)調(diào)試我們的項(xiàng)目。

1
2

dotnet new vue ## 創(chuàng)建 Vue SPA 項(xiàng)目
npm install ## 還原依賴(lài)的 npm 包

上述內(nèi)容就是ASP.NET中怎么搭建前后端分離框架，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。