摘要:組件已經(jīng)有了,我們的框架還有哪些特性呢自適應(yīng)自適應(yīng)現(xiàn)在很多框架都沒有自適應(yīng)功能,而很多使用場景也在手機(jī)上會有,這也是后臺管理框架誕生的原因之一。
系列教程《一步步帶你做vue后臺管理框架》第一課
github地址:vue-framework-wz
線上體驗(yàn)地址:立即體驗(yàn)
?
?
《一步步帶你做vue后臺管理框架》第一課:介紹框架
《一步步帶你做vue后臺管理框架》第二課:上手使用
《一步步帶你做vue后臺管理框架》第三課:登錄功能
?
在如今的科技公司中有很多前端的需求都是要寫一個(gè)類似于后臺管理框架,日常的工作中會有太多重復(fù)的內(nèi)容加重我們程序員的工作,浪費(fèi)我們的時(shí)間,導(dǎo)致不能早點(diǎn)下班回家吃飯。
普通程序員拿到一個(gè)項(xiàng)目總是會重新寫,寫路由花了兩小時(shí),寫vuex花了兩小時(shí),寫個(gè)Header組件花了1小時(shí),側(cè)邊欄又要1小時(shí),這樣下來項(xiàng)目拿到手一天的時(shí)間都沒真正去做項(xiàng)目的需求,再加上改bug,寫css,準(zhǔn)備工作都要花三四天,等到產(chǎn)品過來催,還沒有真正去實(shí)現(xiàn)功能。這樣是極大的浪費(fèi)時(shí)間。
?
那么我們怎么才能成為一個(gè)高效率的程序員呢?
?
成功的秘籍就在于需要有一個(gè)自己的后臺管理框架,當(dāng)你拿到一個(gè)項(xiàng)目,所有的UI組件、路由、狀態(tài)管理、登錄鑒權(quán)功能、等等都已經(jīng)寫好,你只需要去復(fù)用代碼再加上少量的邏輯,當(dāng)你一個(gè)小時(shí)做完準(zhǔn)備工作,出去買杯咖啡回來看到你的同事還在苦逼的寫vue路由,你肯定會會心一笑:“框架在手,天下我有”。**
表格是我們工作中最常見的組件。就拿寫一個(gè)表格來舉例吧
?
? 高下立判。傳統(tǒng)寫一個(gè)表格需要大量重復(fù)html,且需要自己寫css,自己定義數(shù)據(jù)渲染方式。效率低下且質(zhì)量不高,而我們的框架已經(jīng)定義好表格組件,只需要把注意力放在數(shù)據(jù)獲取上,工作瞬間輕松了很多。
?
再來看下wz框架表格組件在實(shí)際應(yīng)用中的強(qiáng)大之處吧。
篩選數(shù)據(jù),擴(kuò)展行,瞬間導(dǎo)出原始數(shù)據(jù)或排序后的數(shù)據(jù)等等強(qiáng)大的功能。
?我們的框架已經(jīng)定義好表格組件,上手即用,是不是又美觀又簡單好用啊。
不止表格,還有各種你工作中會遇到的組件,輕松完成工作中出現(xiàn)的復(fù)雜需求。
UI組件已經(jīng)有了,我們的框架還有哪些特性呢?
自適應(yīng)自適應(yīng)!!!現(xiàn)在很多vue框架都沒有自適應(yīng)功能,而很多使用場景也在手機(jī)上會有,這也是wz后臺管理框架誕生的原因之一。想想要自己每次做自適應(yīng)就頭疼,現(xiàn)在有了wz框架老板再也不用擔(dān)心我的界面適配問題了。
?我們看下效果:
?
是不是很棒!wz框架基于超好用的開源UI iview,采用了row和col的思想,Row為一行,Col為一列,配置Col 的sm md lg 等屬性就可以做到自適應(yīng)。
代碼如下例
?
?
還有什么令人激動的特性呢?
莫過于登錄鑒權(quán)功能了!
產(chǎn)品要做登錄功能你把希望寄托于后端,后端不背鍋把鍋甩你身上?求人不如求己,wz框架已經(jīng)替你封裝好登錄鑒權(quán),只需發(fā)送服務(wù)端驗(yàn)證一下用戶名密碼即可。
來看下我們炫酷的登錄界面
?
炫酷狂拽吊炸天是不是。
邏輯就是登錄的時(shí)候輸入密碼存到cookie里,可以由個(gè)人選擇加密方式,每次在路由跳轉(zhuǎn)的時(shí)候利用router.beforeEach((to, from, next) 判斷是否有token,如果有,發(fā)送到服務(wù)端驗(yàn)證,如果通過,就繼續(xù)路由,如果沒有,就重定向到登錄界面,后面會用詳細(xì)的教程講一下。
鑒權(quán)也是一樣的道理,在router配置中加上
meta: { role: ["Administrator"] },在router.beforeEach()中判斷要去的那個(gè)界面是否需要權(quán)限。并且側(cè)邊欄是根據(jù)可訪問的路由動態(tài)生成的,不同級別的用戶可以看到的側(cè)邊欄是不一樣的,這就在一定程度上做到了簡單的權(quán)限管理的功能。
可以看一下這端代碼,就是登錄鑒權(quán)的核心。
router.beforeEach((to, from, next) => { // console.log(to) NProgress.start(); // 開啟Progress if (store.getters.token) { // 判斷是否有token // alert("dont need login "); if (to.path === "/login") { next({ path: "/" }); } else {//如果不是去login 而是其他需要判定權(quán)限的 // console.log(store.getters.roles) if (store.getters.roles.length === 0) { // 如果當(dāng)前用戶沒有拉取完user_info信息 store.dispatch("GetInfo").then(res => { // 拉取user_info const roles = res.data.role; store.dispatch("GenerateRoutes", { roles }).then(() => { // 生成可訪問的路由表 router.addRoutes(store.getters.addRouters) // 動態(tài)添加可訪問路由表 // console.log(store.getters.addRouters); next({ ...to }); // hack方法 確保addRoutes已完成 }) }) } else { // 沒有動態(tài)改變權(quán)限的需求可直接next() 刪除下方權(quán)限判斷 ↓ if (hasPermission(store.getters.roles, to.meta.role)) { // console.log(to.meta.role) // console.log("has permission"); next();// } else { // console.log("has no permission"); next({ path: "/", query: { noGoBack: true } }); } // 可刪 ↑ } } } else { if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單,直接進(jìn)入 next() } else { alert("please login"); next("/login"); // 否則全部重定向到登錄頁 NProgress.done(); // 在hash模式下 改變手動改變hash 重定向回來 不會觸發(fā)afterEach 暫時(shí)hack方案 ps:history模式下無問題,可刪除該行! } } }); ?``` 說完特性,我們再來看看框架的目錄結(jié)構(gòu)。 build和config是webpack的配置文件,src中存放著框架的主要文件,api是已經(jīng)封裝好的api請求,components是我們的UI組件。mock是便于我們前端調(diào)試的一個(gè)工具,可以截獲http請求,返回?cái)?shù)據(jù),從而做到獨(dú)立于后端開發(fā),加快我們的開發(fā)進(jìn)度,當(dāng)我們需要請求服務(wù)器的時(shí)候要把這個(gè)文件夾刪掉。 我們需要新加頁面就在views里面加上新的界面文件,然后在router里配置好路由就可以正常訪問了。 當(dāng)我們需要提交頁面放到服務(wù)器上也很簡單,運(yùn)行
npm run build:prod
? 項(xiàng)目目錄下就會多出一個(gè)dist文件夾,里面有index.html文件和static文件夾,放在服務(wù)器上就行。不需要在服務(wù)器上安裝任何環(huán)境,甚至不需要node即可。 再也不用為發(fā)布項(xiàng)目操心了。 ####項(xiàng)目目錄結(jié)構(gòu)
├── build // 構(gòu)建相關(guān)
├── config // 配置相關(guān)
├── src // 源代碼
│ ├── api // 所有請求
│ ├── components // 全局UI組件
│ ├── directives // 全局指令
│ ├── mock // mock數(shù)據(jù)
│ ├── router // 路由
│ ├── store // 全局store管理
│ ├── utils // 全局公用方法
│ ├── containers // 自適應(yīng)布局組合
│ ├── vendor // UI組件依賴js
│ ├── views // views界面
│ │ ├── charts //圖表組件
│ │ ├── components //首頁組件
│ │ ├── login //登錄界面
│ │ ├── pages //錯(cuò)誤界面
│ │ └── permission //權(quán)限測試界面
│ ├── App.vue // 入口頁面
│ └── main.js // 入口 加載組件 初始化等
├── static // 靜態(tài)資源
│ ├── bower_components //七牛SDK
│ ├── css //css
│ ├── js //js
│ └── Jquery.min.js // jq
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置項(xiàng)
├── .gitignore // git 忽略項(xiàng)
├── favicon.ico // favicon圖標(biāo)
├── index.html // html模板
└── package.json // package.json
?關(guān)于框架的介紹就基本是這些了,wz框架的特點(diǎn)就在于自適應(yīng)、登錄鑒權(quán)、封裝好UI組件、簡單易上手、穩(wěn)定高效。 希望大家多多使用,多多宣傳。 大家有什么問題最好去我github提issues,文章評論評論較長時(shí)間才查看一次。 ? **接下來的教程講一下封裝UI組件、router、webpack、node命令行構(gòu)建工具等內(nèi)容。** **希望大家看了這系列教程都能制作出自己的前端框架,從而在工作中得心應(yīng)手。** **如果喜歡就點(diǎn)個(gè)start鼓勵(lì)下作者吧。** ? **github地址:[vue-framework-wz](https://github.com/herozhou/vue-framework-wz)** **線上體驗(yàn)地址:[立即體驗(yàn)](http://herozhou.coding.me/vue-framework-wz/#/dashboard)**
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/88405.html
摘要:系列教程一步步帶你做后臺管理框架第二課地址線上體驗(yàn)地址立即體驗(yàn)閑扯再多不會用也沒白搭,這節(jié)課我來帶大家直接上手框架,體驗(yàn)到簡單方便之后你就會愛上這個(gè)框架欲罷不能的。在中加入一個(gè)新的屬性,是一個(gè)函數(shù)。 系列教程《一步步帶你做vue后臺管理框架》第二課 github地址:vue-framework-wz線上體驗(yàn)地址:立即體驗(yàn) 閑扯再多不會用也沒白搭,這節(jié)課我來帶大家直接上手框架,體驗(yàn)到...
摘要:管理后臺,日常就是提交各種表單了,這部分現(xiàn)有的方案,比如表單提交或者收集信息提交。,可以用于前端開發(fā)的工程構(gòu)建。帶了人的前端團(tuán)隊(duì),你的精力開始在配合公司其他部門做用戶數(shù)據(jù)增長了。開始考慮使用的。? ? ? ?hi,大家伙,我是佛系大大,很高興與你們一起溝通,學(xué)習(xí),進(jìn)步。 ? ? ? ?很久不更新博客了,現(xiàn)在回來再寫博客,盡然是有些懷念的感覺,幸福的感覺。因?yàn)閷懖┛停瑑?nèi)心會很寧靜,沉浸在自己的...
摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了,體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項(xiàng)目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺 系列...
摘要:社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了,體現(xiàn)出了社區(qū)對其的認(rèn)可。監(jiān)聽事件手動維護(hù)列表這樣我們就簡單的完成了拖拽排序。 完整項(xiàng)目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎(chǔ)篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權(quán)限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實(shí)戰(zhàn)篇)系類文章四:手摸手,帶你用vue擼后臺 系列...
閱讀 3018·2023-04-25 20:22
閱讀 3335·2019-08-30 11:14
閱讀 2590·2019-08-29 13:03
閱讀 3178·2019-08-26 13:47
閱讀 3218·2019-08-26 10:22
閱讀 1263·2019-08-23 18:26
閱讀 608·2019-08-23 17:16
閱讀 1908·2019-08-23 17:01