❶ 如何利用AngularJs快速搭建前端基本框架
如何利用AngularJs快速搭建前端基本框架
我們先進入官網。官網首頁就能夠下載，點擊箭頭所示圖標，下載所需文件。
點擊以後彈出選擇對話框，如圖所示，我們可以直接點擊download圖標，這時下載的就只是基本文件，選擇zip後我們能夠將整個文件夾下載下來，這里隨便自己喜歡。
下載完成以後，解壓文件，開始准備寫項目。如果下載的是單個文件，就不需要解壓，下載的就只是angular.js文件，只需要直接飲用就可以了。
打開編輯器，創建一個新的項目，在項目中導入我們下載的文件，再創建一個新的文檔：index.html。在文檔中我們需要導入Angularjs庫，這里我們可以看到出現了很多其他的文件，這些文件有各自的意義，以後再說明。
先導入如圖所示的這行代碼，Angularjs基本庫已經導入了，說明我們可以開始使用它們。
開始測試是否成功。HTML樣式在紅色框中，事件直接寫在該頁面上如藍色框中所示。
Angularjs框架的最大不同就是每個web都有獨立控制器，即controller，我們用它來控制整個頁面框架的邏輯。用ng-app劃定區域。這里體現了它的數據綁定的功能，{{message}}，在控制器中獲得賦值就立刻返回給頁面顯示出來。
關於這個問題，差不多就是這個樣子的了，你如果不明白，可以自己去後盾瞅瞅，我這些都是在後盾上學的，有空可以去看一下，就算不喜歡也沒關系啊，何樂而不為呢？
❷ 如何利用AngularJs快速搭建前端基本框架
AngularJs是一款以前後端分離為優勢的前端框架，也有人將其稱為MVC*框架，它在用戶數據交互方面顯示出強大的功能，這個主要依賴於它的數據綁定功能。此篇經驗我主要來講一下如何入門開始寫基於Angularjs的Web頁面。
❸ 怎麼用thinkphp搭建前端後台框架
以前用PHP做過一個很蹩腳的網站，為什麼這么說呢，因為寫的全是死代碼。做完以後覺得實在是累，前端要div+css,js 後端要php,MySQL，這么多東西要弄，十分頭疼。所以，在接到做網站的任務後，我第一時間想到一定要使用開發框架去做，絕不能跟以前一樣那麼累了。
我選擇的是PHP的ThinkPHP框架。說實話，真的蠻不錯的。瞬間覺得Web開發還是蠻有效率的。
超級鏈接：ThinkPHP中文網
按照套路，首先貼一下實驗環境：
1. WAMP（集成的那種，最Easy的幾乎不需要配置）
2. ZendStudio7.2（中文網址http://www.zendstudio.net/，裡面提供下載，在線注冊機以及使用教程）
3. ThinkPHP框架+網路UEditor編輯器插件
4. Win7-64bit操作系統
5. 瀏覽器（火狐，IE，Chrome），外加火狐FireBug插件用於調試以及偷樣式
❹ web前端多端編程開發框架結構
隨著我們對web前端編程開發技術的掌握，越來越多的框架語言和架構方式被我們所熟知。下面回龍觀北大青鳥就一起來了解一下，web前端開發的一些常見框架結構。
1.全包型
這類框架大的特點就是從底層的渲染引擎、布局引擎，到中層的DSL，再到上層的框架全部由自己開發，代表框架是Qt和Flutter。這類框架優點非常明顯：性能(的上限)高;各平台渲染結果一致。缺點也非常明顯：需要完全重新學習DSL(QML/Dart)，以及難以適配中國特色的端：小程序。
這類框架是原始也是純正的的多端開發框架，由於底層到上層每個環節都掌握在自己手裡，也能大可能地去保證開發和跨端體驗一致。但它們的框架研發成本巨大，渲染引擎、布局引擎、DSL、上層框架每個部分都需要大量人力開發維護。
2.Web技術型
這類框架把Web技術(JavaScript，CSS)帶到大弊移動開發中，自研布局引擎處理CSS，使用JavaScript寫業務邏輯，使用流行的前端框架作為DSL，各端分別使用各自的原生組件渲染。代表框架是ReactNative和Weex，這樣做的優點有：
開發迅速;
復用前端生態;
易於學習上手，不管前端後端移動端，多多少少都會一點JS、CSS。
缺點有：
1.交互復雜時難以洞鏈寫出高性能的代碼，這類框架的滾顫族設計就必然導致JS和Native之間需要通信，類似於手勢操作這樣頻繁地觸發通信就很可能使得UI無法在16ms內及時繪制。ReactNative有一些聲明式的組件可以避免這個問題，但聲明式的寫法很難滿足復雜交互的需求。
2.由於沒有渲染引擎，使用各端的原生組件渲染，相同代碼渲染的一致性沒有一種高。
3.JavaScript編譯型
這類框架就是我們這篇文章的主角們：Taro、WePY、uni-app、mpvue、chameleon，它們的原理也都大同小異：先以JavaScript作為基礎選定一個DSL框架，以這個DSL框架為標准在各端分別編譯為不同的代碼，各端分別有一個運行時框架或兼容組件庫保證代碼正確運行。
❺ 從0搭建React+antd+TypeScript+Umi Hooks+Mobx前端框架
因為現在公司的主要技術棧是React,所以也想著能夠搭建一個好的React前端框架，方便在工作中使用；框架在打包過程也做了優化，多線程，拆包，緩存等等手段提升打包速度和質量。主要用到的庫包括：
創建帶TypeScript模板的react-app，推薦使用yarn,接下來我也主要以yarn做例子
然後在項目根目錄創建一個 craco.config.js 用於修改默認配置。antd按需載入以及自定義主題
重新打包就可以了， 所有的主題配置在這里噢
這里利用React-router做路由，同時也會根據用戶角色，做許可權處理；只有當角色和路由允許的角色一致時才可以訪問和展示。
新建router下新建indext.tsx 用於渲染頁面
引入Router/index.tsx
新建hasPermission.ts,如果頁面 roles 包括用戶的角色則返回true,在渲染menu和子頁面的時候就根據這個值渲染頁面。
比如Home頁面，渲染子頁面的邏輯：
在這里 SubPages1 下面的 page1 就無法展示出來和訪問，如果直接輸入路由也會訪問頁面不存在，因為page1允許的角色 user 而我們角色是 admin 所以無法展示。
useImmer 很好的解決了ReactHooks中的賦值的性能問題，可以單獨更新某個對象的某個屬性。
上面的賦值方法也可以寫到一起,效果是一樣的：
Umi Hooks 是一個 React Hooks 庫，致力提供常用且高質量的 Hooks。提供了非常多的Hooks組件，比如上面使用的 usePersistFn ，他的作用：在某些場景中，你可能會需要用 useCallback 記住一個回調，但由於內部函數必須經常重新創建，記憶效果不是很好，導致子組件重復 render。對於超級復雜的子組件，重新渲染會對性能造成影響。通過 usePersistFn ，可以保證函數地址永遠不會變化。Umi Hooks功能還是非常強大的，有很多功能很強大的API。大家可以去官方文檔看看 https://hooks.umijs.org/zh-CN/hooks/life-cycle/use-update-effect 。
自定義 hooks 其實在我們的開發工作中，還是很常遇到的。 hooks 的好處就是可以抽離公共方法，像組件一樣的隨意使用，對於快節奏的開發工作還是很舒服的，比如你覺得 react hooks 或者 umi hooks 的api，不能滿足自己的需求，也可以自己創新一些api。我這里舉個例子，大家寫 class 組件寫的很多的話，會經常用的 this.setState() ，大家都知道 this.setState() 是非同步執行，你無法直接拿到最新的 state 。 hooks 中的 useState 同樣也是非同步的，你無法直接獲取到最新的 state ，所以我自己寫了一個 useSetState 方法，用於在修改完狀態後能夠立即拿到最新的 state 。
我們在src/hooks文件夾下新建 useSetState.ts
使用的方式也很簡單，基本和useState一致，只是在setState的時候提供一個回調函數。
這就完成了帶回調的 useSetState hooks 的編寫，不過這種寫法不太推薦在 hooks 中使用，建議需要獲取最新的數值都在 useEffect 或者 useUpdateEffect(umi hooks) 中去。
狀態管理選擇的Mobx,Mobx和Rex我都用過，不過當我習慣用Mobx後，就感覺還是Mobx更方便一些，所以更喜歡在項目中用Mobx,現在Mobx已經更新到5.0版本了，不過5.0版本並不支持ie11，所以如果想要兼容性可以選擇4.0的版本，或者Rex。
這里推薦一個針對Mobx的庫， mobx-react-lite :它是基於 React 16.8 和 Hooks 的 MobX 的輕量級React綁定。
這個主要影響的是調用方法的形式，對於Mobx的書寫是一樣的，比如寫一個加減數值：
這里你的typeScirpt可能會編譯不了，會報錯：Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
解決方法是在 tsconfig.json 加入配置：
完畢以後，一定要把 storeProvider 包裹所需要共享狀態的頁面，我這里直接放到app.tsx
剩下來就僅僅是調用的事情了：
此外axios的配置應該大家都知道，所以我這也不多說了，具體在我的源碼裡面也有，utils下的axios.ts
加入了打包分析 webpack-bundle-analyzer speed-measure-webpack-plugin
加入了打包進度條 webpackbar
加入了打包壓縮 compression-webpack-plugin terser-webpack-plugin
還對包進行拆包
開發環境的域名代理 devServer
加快打包速度，還可以考慮刪除antd-icons，單獨去iconfont網站下，按需引入。不然打包會費很多時間
引入dotenv-cli
新增開發環境配置文件 .env.development 和 .env.proction 兩個文件
然後修改package.json中的啟動腳本：
現在 yarn start 或者 yarn build 就會根據環境配置來處理。
還有一些細節的調整，會盡力將這個框架更加完善的。
github地址： https://github.com/Benzic/React-typescript-umihooks-mobx
歡迎star 和提意見
❻ web前端開之網站搭建框架之vue詳解
網站搭建框架之vue
Vue是web前端快速搭建網站的框架之一。它與jQuery有所不同，是以數據驅動web界面（以操作數據改變頁面，而jQuery是以操作節點來改變頁面），同時，vue還實現了數據的雙向綁定，可及時響應用戶的輸入。最主要的是vue的寫法簡單，容易掌握，組件形式可以大大提高工作效率。
對於vue的使用可以分為兩種使用形式：1.引入vue.js文件，在js中將vue實例化；2.通過node安裝第三方包--vue，搭建腳手架，用腳手架將頁面分成幾個組件編寫，從而利用組件來搭建頁面。
引入vue.js的寫法
Vue分為V層（視圖層）和M層（數據層），一般都是由M層的數據來驅動V層的改變。而vue的常用指令數量不多且寫法簡單。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是將數據寫進標簽內，但它們的不同之處在於v-text會將標簽當做文本內容寫入
，而v-html則會對標簽進行編譯，只顯示標簽內的內容。
至於v-show、v-if、v-else這三個指令都是通過布爾值的判斷來執行的，當布爾值為真時，設置了v-show、v-if指令的標簽會顯示出來，當布爾值為假時，標簽隱藏；而v-else與這兩個指令相反。除此之外，v-show和v-if、v-else之間也有差別，v-show是改變標簽的display屬性來使標簽顯示或隱藏；而v-if、v-else是通過添加或刪除節點，來顯示或隱藏標簽的。
V-for是vue的一種遍歷方法，這個方法極大的簡化了數組或對象的遍歷並顯示到頁面的步驟
而v-bind：是對html屬性或自定義屬性的數據驅動方式，格式為v-bind:href，可簡寫為：href。對於類（class）的操作是通過布爾值來判斷增加或者隱藏類，同時。類和樣式（style）所接受的數據類型為對象。
V-model指令的作用是將數據進行雙向綁定，僅限於輸入類型標簽。當用戶在頁面輸入時，數據層的數據會跟著改變。這是VM模式。由v驅動m。
除了這些普通的指令之外，還有事件指令v-on:，可簡寫為@+事件名，例如：@click，並將執行函數寫到vue的methods中
通過腳手架來寫項目的話，可用通過寫組件，再將組件引入（注冊）到另一個vue文件里拼接在一起，從而構建出一個頁面。
（組件書寫格式）
（組件整合）
（注冊路由）
路由是通過vue-router來實現的，在注冊路由的時候要將router實例化。不同的路由跳轉不同的頁面，這是搭建單頁面應用的優勢。
而父組件與子組件之間的通訊可以通過props將父組件的信息傳遞給子組件，改變子組件的內容，這樣子組件的復用就不會有障礙了，而子組件傳遞信息給父組件或者其他組件的通訊則需vuex。
通過引入vuex並實例化一個Vuex.Store作為一個公共平台，將數據進行傳輸。通過vue的computed方法接收數據，通過methods方法改變數據。而這個公用平台可以實現組件與組件之間的信息傳遞，從而實現組件之間的交互。
通過一個星期的實戰，深深的體會到了vue的優勢，在構建移動端這方面的效率很高。但在搭建的過程中，還是少不了與jQuery結合，畢竟每個工具都有其優點，擇其優而用是明智的選擇。
❼ （一）基於 vue-element-admin 前端與後端框架搭建
通過 src/settings.js 進行全局配置：
get-page-title.js 在 src/permission.js 中被引用
修改 package.json
執行命令啟動
中間件是一個函數，請求和響應周期中被順序調用
寫一個中間函數
調用中間件注意事項：
應用如何響應請求的一種規則
響應 / 路徑的 get 請求
響應 / 路徑的 post 請求
規則主要分兩部分
通過自定義異常處理中間件處理請求中產生的異常
使用時需要注意兩點：
瀏覽器輸入 http://localhost:5000/user
安裝 boom 依賴，最大的好處是可以快速的幫我們生成一些異常信息
app.js
創建 router 文件夾，創建 router/index.js
創建 router/user.js
創建 router 文件夾，創建 router/constant.js
啟動，訪問根路徑 http://localhost:5000
這里指定的路由的前綴 /user 所有訪問路徑前要加 /user
訪問 http://localhost:5000/user/info
訪問一個不存在的路徑
自定義路由異常處理中間件
注意兩點:
訪問一個不存在的路徑時，會返回一個 json 的結果，方便前端做出處理