手摸手,帶你用vue擼后臺 系列一(基礎篇) - 掘金

完整項目地址:vue-element-admin

系列文章:

  • 手摸手,帶你用 vue 擼后臺 系列一(基礎篇)
  • 手摸手,帶你用 vue 擼后臺 系列二(登錄權限篇)
  • 手摸手,帶你用 vue 擼后臺 系列三 (實戰篇)
  • 手摸手,帶你用 vue 擼后臺 系列四(vueAdmin 一個極簡的后臺基礎模板)
  • 手摸手,帶你用 vue 擼后臺 系列五(v4.0 新版本)
  • 手摸手,帶你封裝一個 vue component
  • 手摸手,帶你優雅的使用 icon
  • 手摸手,帶你用合理的姿勢使用 webpack4(上)
  • 手摸手,帶你用合理的姿勢使用 webpack4(下)

前言

說好的教程終于來了,第一篇文章主要來說一說在開始寫實際業務代碼之前的一些準備工作吧,但這里不會教你 webpack 的基礎配置,熱更新原理是什么,webpack速度優化等等,有需求的請自行 google,相關文章已經很多了。

目錄結構

├── build                      // 構建相關??
├── config                     // 配置相關
├── src                        // 源代碼
│?? ├── api                    // 所有請求
│?? ├── assets                 // 主題 字體等靜態資源
│?? ├── components             // 全局公用組件
│?? ├── directive              // 全局指令
│?? ├── filtres                // 全局 filter
│?? ├── icons                  // 項目所有 svg icons
│?? ├── lang                   // 國際化 language
│?? ├── mock                   // 項目mock 模擬數據
│?? ├── router                 // 路由
│?? ├── store                  // 全局 store管理
│?? ├── styles                 // 全局樣式
│?? ├── utils                  // 全局公用方法
│?? ├── vendor                 // 公用vendor
│?? ├── views                   // view
│?? ├── App.vue                // 入口頁面
│?? ├── main.js                // 入口 加載組件 初始化等
│   └── permission.js          // 權限管理
├── static                     // 第三方不打包資源
│?? └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置項
├── .gitignore                 // git 忽略項
├── favicon.ico                // favicon圖標
├── index.html                 // html模板
└── package.json               // package.json
復制代碼

這里來簡單講一下src文件

api 和 views

簡單截取一下公司后臺項目,現在后臺大概有四五十個 api 模塊

?

如圖可見模塊有很多,而且隨著業務的迭代,模塊還會會越來越多。 所以這里建議根據業務模塊來劃分 views,并且 將views 和 api 兩個模塊一一對應,從而方便維護。如下圖:

?

?

如 article 模塊下放的都是文章相關的 api,這樣不管項目怎么累加,api和views的維護還是清晰的,當然也有一些全區公用的api模塊,如七牛upload,remoteSearch等等,這些單獨放置就行。

components

這里的 components 放置的都是全局公用的一些組件,如上傳組件,富文本等等。一些頁面級的組件建議還是放在各自views文件下,方便管理。如圖:

?

?

store

這里我個人建議不要為了用 vuex 而用 vuex。就拿我司的后臺項目來說,它雖然比較龐大,幾十個業務模塊,幾十種權限,但業務之間的耦合度是很低的,文章模塊和評論模塊幾乎是倆個獨立的東西,所以根本沒有必要使用 vuex 來存儲data,每個頁面里存放自己的 data 就行。當然有些數據還是需要用 vuex 來統一管理的,如登錄token,用戶信息,或者是一些全局個人偏好設置等,還是用vuex管理更加的方便,具體當然還是要結合自己的業務場景的。總之還是那句話,不要為了用vuex而用vuex!


webpack

這里是用 vue-cli 的 webpack-template 為基礎模板構建的,如果你對這個有什么疑惑請自行google,相關的配置紹其它的文章已經介詳細了,這里就不再展開了。簡單說一些需要注意到地方。

jquery (本項目已移除)

管理后臺不同于前臺項目,會經常用到一些第三方插件,但有些插件是不得不依賴 jquery 的,如市面很多富文本基都是依賴 jquery 的,所以干脆就直接引入到項目中省事(gzip之后只有34kb,而且常年from cache,不要考慮那些吹毛求疵的大小問題,這幾kb和提高的開發效率根本不能比)。但是如果第三方庫的代碼中出現?則會直接報錯。要達到類似的效果,則需要使用 webpack 內置的 ProvidePlugin 插件,配置很簡單,只需要

new webpack.ProvidePlugin({$: 'jquery' ,'jQuery': 'jquery'
})
復制代碼

這樣當 webpack 碰到 require 的第三方庫中出現全局的$、jQeury和window.jQuery 時,就會使用 node_module 下 jquery 包 export 出來的東西了。

alias

當項目逐漸變大之后,文件與文件直接的引用關系會很復雜,這時候就需要使用alias 了。 有的人喜歡alias 指向src目錄下,再使用相對路徑找文件

resolve: {alias: {'~': resolve(__dirname, 'src')}
}//使用
import stickTop from '~/components/stickTop'
復制代碼

或者也可以

alias: {'src': path.resolve(__dirname, '../src'),'components': path.resolve(__dirname, '../src/components'),'api': path.resolve(__dirname, '../src/api'),'utils': path.resolve(__dirname, '../src/utils'),'store': path.resolve(__dirname, '../src/store'),'router': path.resolve(__dirname, '../src/router')
}//使用
import stickTop from 'components/stickTop'
import getArticle from 'api/article'
復制代碼

沒有好與壞對與錯,純看個人喜好和團隊規范。


ESLint

不管是多人合作還是個人項目,代碼規范是很重要的。這樣做不僅可以很大程度地避免基本語法錯誤,也保證了代碼的可讀性。這所謂工欲善其事,必先利其器,個人推薦 eslint+vscode 來寫 vue,絕對有種飛一般的感覺。效果如圖:

eslintGif.gif

?

每次保存,vscode就能標紅不符合eslint規則的地方,同時還會做一些簡單的自我修正。安裝步驟如下:

?

首先安裝eslint插件

eslint1.png

?

?

安裝并配置完成 ESLint 后,我們繼續回到 VSCode 進行擴展設置,依次點擊 文件 > 首選項 > 設置 打開 VSCode 配置文件,添加如下配置

"files.autoSave":"off","eslint.validate": ["javascript","javascriptreact","html",{?"language":?"vue",?"autoFix":?true?}],"eslint.options": {"plugins": ["html"]}復制代碼

這樣每次保存的時候就可以根據根目錄下.eslintrc.js你配置的eslint規則來檢查和做一些簡單的fix。這里提供了一份我平時的eslint規則地址,都簡單寫上了注釋。每個人和團隊都有自己的代碼規范,統一就好了,去打造一份屬于自己的eslint 規則上傳到npm吧,如餓了么團隊的 config,vue的 config。

vscode 插件和配置推薦


封裝 axios

我們經常遇到一些線上 的bug,但測試環境很難模擬。其實可以通過簡單的配置就可以在本地調試線上環境。 這里結合業務封裝了axios ,線上代碼

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'// 創建axios實例
const service = axios.create({baseURL: process.env.BASE_API, // api的base_urltimeout: 5000 // 請求超時時間
})// request攔截器
service.interceptors.request.use(config => {// Do something before request is sentif (store.getters.token) {config.headers['X-Token'] = getToken() // 讓每個請求攜帶token--['X-Token']為自定義key 請根據實際情況自行修改}return config
}, error => {// Do something with request errorconsole.log(error) // for debugPromise.reject(error)
})// respone攔截器
service.interceptors.response.use(response => response,/*** 下面的注釋為通過response自定義code來標示請求狀態,當code返回如下情況為權限有問題,登出并返回到登錄頁* 如通過xmlhttprequest 狀態碼標識 邏輯可寫在下面error中*///  const res = response.data;//     if (res.code !== 20000) {//       Message({//         message: res.message,//         type: 'error',//         duration: 5 * 1000//       });//       // 50008:非法的token; 50012:其他客戶端登錄了;  50014:Token 過期了;//       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {//         MessageBox.confirm('你已被登出,可以取消繼續留在該頁面,或者重新登錄', '確定登出', {//           confirmButtonText: '重新登錄',//           cancelButtonText: '取消',//           type: 'warning'//         }).then(() => {//           store.dispatch('FedLogOut').then(() => {//             location.reload();// 為了重新實例化vue-router對象 避免bug//           });//         })//       }//       return Promise.reject('error');//     } else {//       return response.data;//     }error => {console.log('err' + error)// for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)})export default service復制代碼
import request from '@/utils/request'//使用
export function getInfo(params) {return request({url: '/user/info',method: 'get',params});
}
復制代碼

比如后臺項目,每一個請求都是要帶 token 來驗證權限的,這樣封裝以下的話我們就不用每個請求都手動來塞 token,或者來做一些統一的異常處理,一勞永逸。 而且因為我們的 api 是根據 env 環境變量動態切換的,如果以后線上出現了bug,我們只需配置一下 @/config/dev.env.js 再重啟一下服務,就能在本地模擬線上的環境了。

module.exports = {NODE_ENV: '"development"',BASE_API: '"https://api-dev"', //修改為'"https://api-prod"'就行了APP_ORIGIN: '"https://wallstreetcn.com"' //為公司打個廣告 pc站為vue+ssr
}復制代碼

媽媽再也不用擔心我調試線上bug了。 當然這里只是簡單舉了個例子,axios還可以執行多個并發請求,攔截器什么的,大家自行去研究吧。


多環境

vue-cli 默認只提供了devprod兩種環境。但其實正真的開發流程可能還會多一個sit或者stage環境,就是所謂的測試環境和預發布環境。所以我們就要簡單的修改一下代碼。其實很簡單就是設置不同的環境變量

"build:prod": "NODE_ENV=production node build/build.js",
"build:sit": "NODE_ENV=sit node build/build.js",
復制代碼

之后在代碼里自行判斷,想干就干啥

var env = process.env.NODE_ENV === 'production' ? config.build.prodEnv : config.build.sitEnv
復制代碼

新版的 vue-cli 也內置了 webpack-bundle-analyzer 一個模塊分析的東西,相當的好用。使用方法也很簡單,和之前一樣封裝一個 npm script 就可以。

//package.json"build:sit-preview": "cross-env NODE_ENV=production env_config=sit npm_config_preview=true  npm_config_report=true node build/build.js"//之后通過process.env.npm_config_report來判斷是否來啟用webpack-bundle-analyzervar BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
復制代碼

效果圖

analyzer.png

?

webpack-bundle-analyzer這個插件還是很有用的,對后期的代碼優化什么的,最重要的是它夠裝逼~

?


前后端交互

每個公司都有自己一套的開發流程,沒有絕對的好與壞。這里我來講講我司的前后端交互流程。

跨域問題

首先前后端交互不可避免的就會遇到跨域問題,我司現在全是用 cors來解決的,如果你司后端嫌麻煩不肯配置的話,dev環境也可以通過 webpack-dev-serverproxy來解決,開發環境用nginx反代理一下就好了,具體配置這里就不展開了。

前后端的交互問題

其實大家也知道,平時的開發中交流成本占據了我們很大一部分時間,但前后端如果有一個好的協作方式的話能解決很多時間。我司開發流程都是前后端和產品一起開會討論項目,之后后端根據需求,首先定義數據格式和api,然后 mock api 生成好文檔,我們前端才是對接接口的。這里推薦一個文檔生成器 swagger。 swagger是一個REST APIs文檔生成工具,可以在許多不同的平臺上從代碼注釋中自動生成,開源,支持大部分語言,社區好,總之就是一個強大,如下圖的api 文檔(swagger自動生成,ui忽略)

?

?

api 地址,需要傳是沒參數,需要的傳參類型,返回的數據格式什么都一清二楚了。

?

前端自行mock

如果后端不肯來幫你 mock 數據的話,前端自己來 mock 也是很簡單的。你可以使用mock server 或者使用 mockjs + rap 也是很方便的。 不久前出的 easy-mock也相當的不錯,還能結合 swagger。 我們大前端終于不用再看后端的臉色了~

iconfont

element-ui 默認的icon不是很多,這里要安利一波阿里的iconfont簡直是神器,不管是公司項目還是個人項目都在使用。它提供了png,ai,svg三種格式,同時使用也支持unicode,font-class,symbol三種方式。由于是管理后臺對兼容性要求不高,樓主平時都喜歡用symbol,曬一波我司后臺的圖標(都是樓主自己發揮的)。

iconfont.png

?

詳細具體的使用可以見文章 手摸手,帶你優雅的使用 icon

?


router-view

different router the same component vue。真實的業務場景中,這種情況很多。比如

router-view.png

?

我創建和編輯的頁面使用的是同一個component,默認情況下當這兩個頁面切換時并不會觸發vue的created或者mounted鉤子,官方說你可以通過watch $route的變化來做處理,但其實說真的還是蠻麻煩的。后來發現其實可以簡單的在 router-view上加上一個唯一的key,來保證路由切換時都會重新渲染觸發鉤子了。這樣簡單的多了。

?

<router-view :key="key"></router-view>computed: {key() {return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()}}
復制代碼

優化

有些人會覺得現在構建是不是有點慢,我司現在技術棧是容器服務,后臺項目會把dist文件夾里的東西都會打包成一個docker鏡像,基本步驟為

npm install
npm run build:prod
加打包鏡像,一共是耗時如下
復制代碼

?

Paste_Image.png

?

?

還是屬于能接受時間的范圍。 主站PC站基于nodejs、Vue實現服務端渲染,所以不僅需要依賴nodejs,而且需要利用pm2進行nodejs生命周期的管理。為了加速線上鏡像構建的速度,我們利用taobao源 registry.npm.taobao.org 進行加速, 并且將一些常見的npm依賴打入了基礎鏡像,避免每次都需要重新下載。 這里注意下 建議不要使用cnpm install或者update 它的包都是一個link,反正會有各種詭異的bug,這里建議這樣使用

npm install --registry=https://registry.npm.taobao.org
復制代碼

如果你覺得慢還是有可優化的空間如使用webpack dll 或者把那些第三方vendor單獨打包 external出去,或者我司現在用的是http2 可以使用AggressiveSplittingPlugin等等,這里有需求的可以自行優化。


占坑

常規占坑,這里是手摸手,帶你用vue擼后臺系列。 完整項目地址:vue-element-admin

  • 手摸手,帶你用 vue 擼后臺 系列一(基礎篇)

  • 手摸手,帶你用 vue 擼后臺 系列二(登錄權限篇)

  • 手摸手,帶你用 vue 擼后臺 系列三 (實戰篇)

  • 手摸手,帶你用 vue 擼后臺 系列四(vueAdmin 一個極簡的后臺基礎模板)

  • 手摸手,帶你用 vue 擼后臺 系列五(v4.0 新版本)

  • 手摸手,帶你封裝一個 vue component

  • 手摸手,帶你優雅的使用 icon

  • 手摸手,帶你用合理的姿勢使用 webpack4(上)

  • 手摸手,帶你用合理的姿勢使用 webpack4(下)


作者:花褲衩
鏈接:https://juejin.im/post/6844903476661583880
來源:掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/248863.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/248863.shtml
英文地址,請注明出處:http://en.pswp.cn/news/248863.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

21、python基礎學習-new_three_menu

1 #!/usr/bin/env python2 #__author: hlc3 #date: 2019/5/294 5 menu {6 北京: {7 海淀: {8 五道口: {9 soho: {}, 10 網易: {}, 11 google: {} 12 }, 13 中關村: { 14 …

文獻筆記(十六)

一、基本信息 標題&#xff1a;一種基于 C 語言訪問 MySQL 數據庫的研究 時間&#xff1a;2016 出版源&#xff1a;貴州輕工職業技術學院 領域分類&#xff1a;數據庫與信息管理 作者&#xff1a;唐林 副教授&#xff0c; 研究方向&#xff1a; 計算機應用 二、研究背景 相關工…

webpack+vue+mui學習心得

引入mui 1.不需要npm安裝; 直接從官方下載丟進來 2.那就是全局引用了; 沒錯,就是index.html里直接引入,當然也可以main.js引入,隨意啦! so easy 3.找到webpack.base.conf.js,在module與plugins之間插入以下代碼: 4.這樣就可以在項目里面直接用了.然就是mui與vue-router及點…

[java設計模式簡記] 觀察者模式(Observer-Pattern)

觀察者模式(Observer-Pattern) 數據主體擁有需要數據的對象的數據&#xff0c;并且數據改變時需要數據的對象要及時知道 意圖&#xff1a; 定義對象間的一種一對多的依賴關系&#xff0c;當一個對象的狀態發生改變時&#xff0c;所有依賴于它的對象都得到通知并被自動更新。主要…

【ARTS】01_04_左耳聽風-20181203~1209

ARTS&#xff1a; Algrothm: leetcode算法題目Review: 閱讀并且點評一篇英文技術文章Tip/Techni: 學習一個技術技巧Share: 分享一篇有觀點和思考的技術文章Algorithm Single Number https://leetcode.com/problems/single-number/ 1&#xff09;problem Given a non-empty arra…

vue項目(webpack+mintui),使用hbuilder打包app - 小小人兒大大夢想 - 博客園

一、配置config/index.js 本人沒有配置index.js文件&#xff0c;就開始進行了打包&#xff0c;結果最終效果是頁面空白&#xff0c;解決了空白&#xff0c;接著底部圖標&#xff08;我是用的阿里巴巴圖片&#xff09;資源找不到。所以配置這步比較重要。 &#xff08;1&#…

caffe介紹

轉載于:https://www.cnblogs.com/Artimis-fightting/p/10945099.html

python-mysql 基礎知識記錄

cursor.fetchone() 與 cursor.fetchall() 如果查詢結果為空&#xff0c;前者返回 None&#xff0c;后者返回[] 此時如用 len() 函數計算長度&#xff0c;前者報錯&#xff0c;后者返回0 轉載于:https://www.cnblogs.com/ZuoAn-xieyang/p/10097230.html

微服務之consul(一) - 詩碼者 - 博客園

一、概述 consul是google開源的一個使用go語言開發的服務發現、配置管理中心服務。內置了服務注冊與發現框 架、分布一致性協議實現、健康檢查、Key/Value存儲、多數據中心方案&#xff0c;不再需要依賴其他工具&#xff08;比如ZooKeeper等&#xff09;。服務部署簡單&#x…

C#動態加載dll,dll目錄指定

<?xml version"1.0"?><configuration><startup> <supportedRuntime version"v4.0" sku".NETFramework,Versionv4.0"/></startup> <runtime> <assemblyBinding xmlns"urn:schemas-microsoft-com:a…

RestFramework之認證組件

一、認證組件的介紹 對于認證&#xff0c;我們一般有三種方式&#xff0c;即cookie, session,token, cookie,是將信息存放在客戶端(瀏覽器上)&#xff0c;信息不安全&#xff1b;session,把信息放在服務器數據庫中&#xff0c;但是要是信息量較大&#xff0c;對服務器的壓力就會…

圖解基于 Node.js 實現前后端分離 - CSDN博客

因為會上出了個意外&#xff0c;ppt圖片全部丟失&#xff0c;只好對著白板跟大家交流了半個多小時。由于我做演講不喜歡寫太多的文字&#xff0c;沒有圖片的情況下講漏了一些內容。這篇文章是我在會上分享內容對照ppt進行地整理。 基本介紹 首先從一個重要的概念“模板”說起…

java基礎之XML

目錄 java基礎之XML1. XML解析概述2. DOM4J介紹2.1 常用包2.2 內置元素2.2 Element類2.3 Attribute類2.4 常用操作3. 代碼演示3.1 DOM4J讀取xml文件3.2 DOM4J創建xml文件3.2 DOM4J修改xml文件java基礎之XML XML是一種通用的數據交換格式,它的平臺無關性、語言無關性、系統無關性…

CF176E Archaeology(set用法提示)

題目大意&#xff1a; 給一棵樹&#xff0c;每次激活或熄滅一個點&#xff0c;每次問這些點都聯通起來所需的最小總邊權 分析&#xff1a; 若根據dfs序給所有點排序&#xff0c;為$v1,v2,v3....vk$&#xff0c;那么答案就是$(dis(v1,v2)dis(v2,v3)...dis(vk-1,vk)dis(vk,v1))/2…

網上整理的對于Rest和Restful api的理解 - 那啥快看 - 博客園

一、什么是Rest? REST不是"rest"這個單詞&#xff0c;而是幾個單詞縮寫 -- REpresentational State Transfer 直接翻譯&#xff1a;表現層狀態轉移&#xff0c;但這個翻譯正常人根本看不懂&#xff0c;找到的一種最好理解的說法是&#xff0c;URL定位資源&#xff…

P1101 單詞方陣(DFS)

題目描述 給一n \times nnn的字母方陣&#xff0c;內可能蘊含多個“yizhong”單詞。單詞在方陣中是沿著同一方向連續擺放的。擺放可沿著 88個方向的任一方向&#xff0c;同一單詞擺放時不再改變方向&#xff0c;單詞與單詞之間可以交叉,因此有可能共用字母。輸出時&#xff0c;…

企業級rancher搭建Kubernetes(采用rancher管理平臺搭建k8s)

一、簡介 Rancher簡介 來源官方&#xff1a;https://www.cnrancher.com/ Rancher是一個開源的企業級容器管理平臺。通過Rancher&#xff0c;企業再也不必自己使用一系列的開源軟件去從頭搭建容器服務平臺。Rancher提供了在生產環境中使用的管理Docker和Kubernetes的全棧化容器部…

[工具]java_sublime的快速使用

目錄 使用 : 怎么運行: 調整字體: 使用 : 新建--->寫好代碼后-->另存為尾綴是.java的文件 怎么運行: 在你另存為的目錄下cmd調用控制臺輸入dos指令--->執行javac 文件名.java(有.java尾綴)(編譯為.class文件)--->java 文件名(沒有.class尾綴設計者認為執行的是…

基于SOA的銀行系統架構

Part-1 【簡述】 1.通過引入面向服務架構&#xff08;SOA&#xff09;&#xff0c;企業服務總線&#xff08;ESB&#xff09;&#xff0c;適配器&#xff08;Adapter&#xff09;及面向構件等技術&#xff0c;嘗試打造一個統一業務流程服務平臺&#xff0c;實現面向流程的服務…

一次前后端分離的實踐

前后端分離該如何做? 這個問題&#xff0c;不同的技術人員&#xff0c;由于所處的崗位不一樣&#xff0c;給出的答案都不一樣。 前后端分離的問題&#xff0c;不僅僅是技術上的選型問題&#xff0c;還涉及到整個團隊在認知、職責、流程上面重新定義的問題&#xff0c;這也是為…