當前位置：首頁 > 科技 > 軟件

前后臺分離開發(fā)，你會了嗎？

來源：責編：時間：2023-11-30 17:31:15 216觀看

導讀圖片1. 前后臺分離開發(fā)介紹前端開發(fā)有2種方式：前后臺混合開發(fā)前后臺分離開發(fā)前后臺混合開發(fā)，顧名思義就是前臺后臺代碼混在一起開發(fā)，前后臺混合開發(fā)模式有如下缺點：溝通成本高：后臺人員發(fā)現(xiàn)前端有問題，需要找前端人員修改，前

圖片

1. 前后臺分離開發(fā)介紹

前端開發(fā)有2種方式：

前后臺混合開發(fā)
前后臺分離開發(fā)

前后臺混合開發(fā)，顧名思義就是前臺后臺代碼混在一起開發(fā)，前后臺混合開發(fā)模式有如下缺點：

溝通成本高：后臺人員發(fā)現(xiàn)前端有問題，需要找前端人員修改，前端修改成功，再交給后臺人員使用
分工不明確：后臺開發(fā)人員需要開發(fā)后臺代碼，也需要開發(fā)部分前端代碼。很難培養(yǎng)專業(yè)人才
不便管理：所有的代碼都在一個工程中
不便維護和擴展：前端代碼更新，和后臺無關，但是需要整個工程包括后臺一起重新打包部署。

所以我們目前基本都是采用的前后臺分離開發(fā)方式，那么可能小伙伴會問我一個寫后端的人為啥要學習一下前端?

在現(xiàn)在這個卷王之王的當下，我們可以不精通前端，但是前端基礎的curd(增刪改查)操作，最好可以實現(xiàn)自己編寫

那么基于前后臺分離開發(fā)的模式下，我們后臺開發(fā)者開發(fā)一個功能的具體流程如何呢？如下圖所示：

圖片

需求分析：首先我們需要閱讀需求文檔，分析需求，理解需求。
接口定義：查詢接口文檔中關于需求的接口的定義，包括地址，參數，響應數據類型等等
前后臺并行開發(fā)：各自按照接口文檔進行開發(fā)，實現(xiàn)需求
測試：前后臺開發(fā)完了，各自按照接口文檔進行測試
前后段聯(lián)調測試：前段工程請求后端工程，測試功能

2. 前端工程化

2.1. 前端工程化介紹

如果我們只學過Html,CSS和JS(前端三劍客)，使用前端三劍客開發(fā)存在如下問題：

每次開發(fā)都是從零開始，比較麻煩
多個頁面中的組件共用性不好
js、圖片等資源沒有規(guī)范化的存儲目錄，沒有統(tǒng)一的標準，不方便維護

所以現(xiàn)在企業(yè)開發(fā)中更加講究前端工程化方式的開發(fā)，主要包括如下4個特點

模塊化：將js和css等，做成一個個可復用模塊
組件化：我們將UI組件，css樣式，js行為封裝成一個個的組件，便于管理
規(guī)范化：我們提供一套標準的規(guī)范的目錄接口和編碼規(guī)范，所有開發(fā)人員遵循這套規(guī)范
自動化：項目的構建，測試，部署全部都是自動完成

所以對于前端工程化，說白了，就是在企業(yè)級的前端項目開發(fā)中，把前端開發(fā)所需要的工具、技術、流程、經驗進行規(guī)范化和標準化。從而提升開發(fā)效率，降低開發(fā)難度等等。接下來我們就需要學習vue的官方提供的腳手架幫我們完成前端的工程化。

3. NodeJS安裝

vue前端工程化是通過官方提供的腳手架Vue-cli來完成的，用于快速的生成一個Vue的項目模板

Vue-cli主要提供了如下功能：

統(tǒng)一的目錄結構
本地調試
熱部署
單元測試
集成打包上線

我們需要運行Vue-cli，需要依賴NodeJS，NodeJS是前端工程化依賴的環(huán)境。所以我們需要先安裝NodeJS，然后才能安裝Vue-cli

給大家演示安裝的nodejs版本是node-v16.17.1-x64.msi，如果大家沒有該虛擬機軟件，可以在公眾號發(fā)VM獲取下載地址。

圖片

3.1. NodeJS安裝步驟

【步驟一】:雙擊node-v16.17.1-x64.msi

圖片

【步驟二】:選擇安裝目錄

圖片

【步驟三】:驗證NodeJS環(huán)境變量

NodeJS 安裝完畢后，會自動配置好環(huán)境變量，我們驗證一下是否安裝成功，通過：

node -v

圖片

【步驟四】:配置npm的全局安裝路徑

圖片

使用管理員身份運行命令行，在命令行中，執(zhí)行如下指令：

npm config set prefix "D:/allsoftware/install/nodejs"

注意：D:/allsoftware/install/nodejs 這個目錄是NodeJS的安裝目錄

【步驟5】:切換npm的淘寶鏡像

使用管理員身份運行命令行，在命令行中，執(zhí)行如下指令：

npm config set registry https://registry.npm.taobao.org

【步驟6】:安裝Vue-cli

使用管理員身份運行命令行，在命令行中，執(zhí)行如下指令：

npm install -g @vue/cli

注意：這個過程中，會聯(lián)網下載，可能會耗時幾分鐘，耐心等待。

圖片

4. Vue項目-創(chuàng)建

Vue項目-創(chuàng)建方式

命令行

## vue create 項目名稱vue create vue-project01

圖形化界面

vue ui

本次介紹對初學者比較友好的圖形化界面創(chuàng)建項目

4.1. Vue-圖形化界面項目創(chuàng)建步驟

【步驟一】：打開UI界面

在命令行中，執(zhí)行如下指令：

vue ui

圖片

【步驟二】：創(chuàng)建項目

圖片

創(chuàng)建項目的過程，需要聯(lián)網進行，這可能會耗時比較長的時間，請耐心等待。 windows的命令行，容易卡頓，我們可以敲擊一下鍵盤

圖片

最后我們只需要等待片刻，即可進入到創(chuàng)建創(chuàng)建成功的界面，如下圖所示：

圖片

4.2. vue項目目錄結構介紹

我們通過VS Code打開之前創(chuàng)建的vue文件夾，打開之后，呈現(xiàn)如下圖所示頁面：

圖片

vue項目的標準目錄結構以及目錄對應的解釋如下圖所示:

圖片

其中我們平時開發(fā)代碼就是在src目錄下

4.3. 運行vue項目

那么vue項目開發(fā)好了，我們應該怎么運行vue項目呢？

通過VS Code提供的圖形化界面，如下圖所示：（注意：NPM腳本窗口默認不顯示，可以參考本節(jié)的最后調試出來）

圖片

點擊之后，我們等待片刻，即可運行，在終端界面中，我們發(fā)現(xiàn)項目是運行在本地服務的8080端口，我們直接通過瀏覽器打開地址

圖片

最終瀏覽器打開后，呈現(xiàn)如下界面，表示項目運行成功

圖片

4.4. 修改啟動端口

對于8080端口，經常被占用，所以我們可以去修改默認的8080端口。我們修改vue.config.js文件的內容，添加如下代碼

devServer:{    port:7000}

如下圖所示，然后我們關閉服務器，并且重新啟動

圖片

重新啟動如下圖所示：

圖片

補充：NPM腳本窗口調試出來

第一步：通過設置/用戶設置/擴展/MPM更改NPM默認配置，如下圖所示

圖片

然后重啟VS Code，并且雙擊打開package.json文件，然后點擊資源管理器處的3個小點，勾選npm腳本選項，如圖所示

圖片

然后就能都顯示NPM腳本小窗口了。

本文鏈接：http://www.www897cc.com/showinfo-26-35576-0.html前后臺分離開發(fā)，你會了嗎？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Python GUI編程：dearpygui和tkinter的對比與選擇！

下一篇：大數據實戰(zhàn)：基于Flink+ODPS歷史累計計算項目分析與優(yōu)化

標簽：

熱門焦點

Mate60手機殼曝光致敬自己的經典設計

8月3日消息，今天下午博主數碼閑聊站帶來了華為Mate60的第三方手機殼圖，可以讓我們在真機發(fā)布之前看看這款華為全新旗艦的大致輪廓。從曝光的圖片看，Mate 60背后攝像頭面積依然
8月總票房已突破10億！《封神》第一：口碑已經成了

8月5日消息，據燈塔專業(yè)版數據，截至8月5日9時35分，8月總票房（含預售）已突破10億。其中，《封神》以大比分的優(yōu)勢領先。根據官方消息，目前該片總票房已經超過14.
掘力計劃第 20 期：Flutter 混合開發(fā)的混亂之治

在掘力計劃系列活動第20場，《Flutter 開發(fā)實戰(zhàn)詳解》作者，掘金優(yōu)秀作者，Github GSY 系列目負責人戀貓的小郭分享了Flutter 混合開發(fā)的混亂之治。Flutter 基于自研的 Skia 引擎
K8S | Service服務發(fā)現(xiàn)

一、背景在微服務架構中，這里以開發(fā)環(huán)境「Dev」為基礎來描述，在K8S集群中通常會開放：路由網關、注冊中心、配置中心等相關服務，可以被集群外部訪問；圖片對于測試「Tes」環(huán)境或者
一篇聊聊Go錯誤封裝機制

%w 是用于錯誤包裝（Error Wrapping）的格式化動詞。它是用于 fmt.Errorf 和 fmt.Sprintf 函數中的一個特殊格式化動詞，用于將一個錯誤（或其他可打印的值）包裝在一個新的錯誤中。使
簽約井川里予、何丹彤，單視頻點贊近千萬，MCN黑馬永恒文希快速崛起！

來源：視聽觀察永恒文希傳媒作為一家MCN公司，說起它的名字來，可能大家會覺得有點兒陌生，但是說出來下面一串的名字之后，或許大家就會感到震驚，原來這么多網紅，都簽約這家公司了。根
華為Mate 60系列用上可變靈動島：正式版體驗將會更出色

這段時間以來，關于華為新旗艦的爆料日漸密集。據此前多方爆料，今年華為將開始恢復一年雙旗艦戰(zhàn)略，除上半年推出的P60系列外，往年下半年的Mate系列也將
華為HarmonyOS 4.0將于8月4日發(fā)布或搭載AI大模型技術

華為宣布HarmonyOS4.0將于8月4日正式發(fā)布。此前，華為已經針對開發(fā)者公布了HarmonyOS4.0，以便于開發(fā)者提前進行適配，也因此被曝光出了一些新系統(tǒng)的特性
與兆芯合作聯(lián)想推出全新旗艦版筆記本電腦開天N7系列

聯(lián)想與兆芯合作推出全新聯(lián)想旗艦版筆記本電腦開天 N7系列。這個系列采用兆芯KX-6640MA處理器平臺，KX-6640MA 處理器是采用了陸家嘴架構，16nm 工藝，4 核 4 線

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

前后臺分離開發(fā)，你會了嗎？

1. 前后臺分離開發(fā)介紹

2. 前端工程化

2.1. 前端工程化介紹

3. NodeJS安裝

3.1. NodeJS安裝步驟

【步驟一】:雙擊node-v16.17.1-x64.msi

【步驟二】:選擇安裝目錄

【步驟三】:驗證NodeJS環(huán)境變量

【步驟四】:配置npm的全局安裝路徑

【步驟5】:切換npm的淘寶鏡像

【步驟6】:安裝Vue-cli

4. Vue項目-創(chuàng)建

4.1. Vue-圖形化界面項目創(chuàng)建步驟

【步驟一】：打開UI界面

【步驟二】：創(chuàng)建項目

4.2. vue項目目錄結構介紹

4.3. 運行vue項目

4.4. 修改啟動端口

Mate60手機殼曝光致敬自己的經典設計

8月總票房已突破10億！《封神》第一：口碑已經成了

掘力計劃第 20 期：Flutter 混合開發(fā)的混亂之治

K8S | Service服務發(fā)現(xiàn)

一篇聊聊Go錯誤封裝機制

簽約井川里予、何丹彤，單視頻點贊近千萬，MCN黑馬永恒文希快速崛起！

華為Mate 60系列用上可變靈動島：正式版體驗將會更出色

華為HarmonyOS 4.0將于8月4日發(fā)布或搭載AI大模型技術

與兆芯合作聯(lián)想推出全新旗艦版筆記本電腦開天N7系列

最新推薦

猜你喜歡

熱門推薦

相關資訊