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

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

前后臺分離開發(fā),你會了嗎?

來源: 責編: 時間:2023-11-30 17:31:15 216觀看
導讀圖片1. 前后臺分離開發(fā)介紹前端開發(fā)有2種方式:前后臺混合開發(fā)前后臺分離開發(fā)前后臺混合開發(fā),顧名思義就是前臺后臺代碼混在一起開發(fā),前后臺混合開發(fā)模式有如下缺點:溝通成本高:后臺人員發(fā)現(xiàn)前端有問題,需要找前端人員修改,前

圖片圖片Z7H28資訊網——每日最新資訊28at.com

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

前端開發(fā)有2種方式:Z7H28資訊網——每日最新資訊28at.com

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

前后臺混合開發(fā),顧名思義就是前臺后臺代碼混在一起開發(fā),前后臺混合開發(fā)模式有如下缺點Z7H28資訊網——每日最新資訊28at.com

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

所以我們目前基本都是采用的前后臺分離開發(fā)方式,那么可能小伙伴會問我一個寫后端的人為啥要學習一下前端?Z7H28資訊網——每日最新資訊28at.com

在現(xiàn)在這個卷王之王的當下,我們可以不精通前端,但是前端基礎的curd(增刪改查)操作,最好可以實現(xiàn)自己編寫Z7H28資訊網——每日最新資訊28at.com

那么基于前后臺分離開發(fā)的模式下,我們后臺開發(fā)者開發(fā)一個功能的具體流程如何呢?如下圖所示:Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

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

2. 前端工程化

2.1. 前端工程化介紹

如果我們只學過Html,CSS和JS(前端三劍客),使用前端三劍客開發(fā)存在如下問題:Z7H28資訊網——每日最新資訊28at.com

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

所以現(xiàn)在企業(yè)開發(fā)中更加講究前端工程化方式的開發(fā),主要包括如下4個特點Z7H28資訊網——每日最新資訊28at.com

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

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

3. NodeJS安裝

vue前端工程化是通過官方提供的腳手架Vue-cli來完成的,用于快速的生成一個Vue的項目模板Z7H28資訊網——每日最新資訊28at.com

Vue-cli主要提供了如下功能:Z7H28資訊網——每日最新資訊28at.com

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

我們需要運行Vue-cli,需要依賴NodeJS,NodeJS是前端工程化依賴的環(huán)境。所以我們需要先安裝NodeJS,然后才能安裝Vue-cliZ7H28資訊網——每日最新資訊28at.com

給大家演示安裝的nodejs版本是node-v16.17.1-x64.msi,如果大家沒有該虛擬機軟件,可以在公眾號發(fā)VM獲取下載地址。Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

3.1. NodeJS安裝步驟

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

圖片圖片Z7H28資訊網——每日最新資訊28at.com

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

圖片圖片Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

圖片Z7H28資訊網——每日最新資訊28at.com

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

NodeJS 安裝完畢后,會自動配置好環(huán)境變量,我們驗證一下是否安裝成功, 通過:Z7H28資訊網——每日最新資訊28at.com

node -v

圖片圖片Z7H28資訊網——每日最新資訊28at.com

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

圖片圖片Z7H28資訊網——每日最新資訊28at.com

使用管理員身份運行命令行,在命令行中,執(zhí)行如下指令:Z7H28資訊網——每日最新資訊28at.com

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

注意:D:/allsoftware/install/nodejs 這個目錄是NodeJS的安裝目錄Z7H28資訊網——每日最新資訊28at.com

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

使用管理員身份運行命令行,在命令行中,執(zhí)行如下指令:Z7H28資訊網——每日最新資訊28at.com

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

【步驟6】:安裝Vue-cli

使用管理員身份運行命令行,在命令行中,執(zhí)行如下指令:Z7H28資訊網——每日最新資訊28at.com

npm install -g @vue/cli

注意:這個過程中,會聯(lián)網下載,可能會耗時幾分鐘,耐心等待。Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

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

Vue項目-創(chuàng)建方式Z7H28資訊網——每日最新資訊28at.com

  • 命令行
## vue create 項目名稱vue create vue-project01
  • 圖形化界面
vue ui

本次介紹對初學者比較友好的圖形化界面創(chuàng)建項目Z7H28資訊網——每日最新資訊28at.com

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

【步驟一】:打開UI界面

在命令行中,執(zhí)行如下指令:Z7H28資訊網——每日最新資訊28at.com

vue ui

圖片圖片Z7H28資訊網——每日最新資訊28at.com

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

圖片圖片Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

創(chuàng)建項目的過程,需要聯(lián)網進行,這可能會耗時比較長的時間,請耐心等待。 windows的命令行,容易卡頓,我們可以敲擊一下鍵盤Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

最后我們只需要等待片刻,即可進入到創(chuàng)建創(chuàng)建成功的界面,如下圖所示:Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

4.2. vue項目目錄結構介紹

我們通過VS Code打開之前創(chuàng)建的vue文件夾,打開之后,呈現(xiàn)如下圖所示頁面:Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

vue項目的標準目錄結構以及目錄對應的解釋如下圖所示:Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

其中我們平時開發(fā)代碼就是在src目錄Z7H28資訊網——每日最新資訊28at.com

4.3. 運行vue項目

那么vue項目開發(fā)好了,我們應該怎么運行vue項目呢?Z7H28資訊網——每日最新資訊28at.com

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

圖片圖片Z7H28資訊網——每日最新資訊28at.com

點擊之后,我們等待片刻,即可運行,在終端界面中,我們發(fā)現(xiàn)項目是運行在本地服務的8080端口,我們直接通過瀏覽器打開地址Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

最終瀏覽器打開后,呈現(xiàn)如下界面,表示項目運行成功Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

4.4. 修改啟動端口

對于8080端口,經常被占用,所以我們可以去修改默認的8080端口。我們修改vue.config.js文件的內容,添加如下代碼Z7H28資訊網——每日最新資訊28at.com

devServer:{    port:7000}

如下圖所示,然后我們關閉服務器,并且重新啟動Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

重新啟動如下圖所示:Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

補充:NPM腳本窗口調試出來Z7H28資訊網——每日最新資訊28at.com

第一步:通過設置/用戶設置/擴展/MPM更改NPM默認配置,如下圖所示Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

然后重啟VS Code,并且雙擊打開package.json文件,然后點擊資源管理器處的3個小點勾選npm腳本選項,如圖所示Z7H28資訊網——每日最新資訊28at.com

圖片圖片Z7H28資訊網——每日最新資訊28at.com

然后就能都顯示NPM腳本小窗口了。Z7H28資訊網——每日最新資訊28at.com

本文鏈接: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)化

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 宝丰县| 盖州市| 郑州市| 赤水市| 略阳县| 时尚| 宜宾县| 政和县| 雷州市| 衡东县| 北碚区| 长沙市| 柳州市| 盐津县| 清涧县| 阿鲁科尔沁旗| 平谷区| 兴隆县| 英吉沙县| 安宁市| 梓潼县| 景泰县| 临西县| 东乌珠穆沁旗| 洛川县| 淳安县| 金华市| 涞源县| 沁水县| 五大连池市| 迭部县| 贵州省| 方城县| 新营市| 三河市| 老河口市| 乳源| 丽江市| 古交市| 三江| 屏南县|