前端：我們是大前端，我們可以做一切【WEB前端大作戰】

我們是大前端，我們可以做一切~

還在擔心自己是個小前端嗎，此刻開始，我們是大前端。

在你的印象中，前端是否就是做頁面的苦逼呢

這篇文章帶大家來了解一下，我們大前端可以做什么

博主還在大四，文章可能會有不足之處，期待大佬指導~

如果你是學生，那么來吧，做前端吧~ 前端能做啥？啥都能。

常規開發

現在大多數項目都是前后端分離的，所以一般項目開發離不開前后端。

后端做接口，前端去接入。比如很火的 Vue + Spring Boot

那么身為一個前端人員，如何輕松的做全部呢

桌面端，移動端H5，App，小程序。全棧開發我都要，不為別的，只為裝逼，哈哈。

一是為了裝逼，二是為了提高自身價值，三是如果你創業，完全可以自己拉個寫文檔的。

下面我們介紹一下前端可以做的一些，也會有單個文章詳細講解每種的用法。

全棧開發

談到全棧，我們就想到后端，Java,Python等，但是前端人員熟悉的js一樣可以做后端。

可能你也猜到了，是那親愛的Node.js 。一般我們做前端開發都會用到Node，npm，cnpm呀等等

你可能又要問了。啊，哈士奇，沒有后端，我們怎么部署呀，數據庫怎么辦呀。 好問題~(自問自答)

我的建議是 云開發 ~ 下面我們也會提下。

云函數模式(小型后端)

很多小伙伴可能用過云函數，非常方便，寫個方法丟云函數就可以當http/https接口用

云函數+云數據庫 爽的不要不要的。對于個人開發者以及小型公司，成本和周期都短。

我就用來給女朋友定時發過郵箱和短信。?(?ˊ?ˋ)?

下圖是用云函數寫的一個郵箱驗證服務的截圖 環境為Node.js 12.13

我們可以給云函數創建一個定時觸發器，每天早上6點15發送當天天氣。發給女朋友/女神~

云函數，助力大學生找到對象，助力小型應用節省成本。

下圖是一個定時器的創建

多個云函數之間可以組成一個小型后端，每個云函數又可以獨立創建觸發器。多用，高效，方便。

我們可以將云函數用于但不僅限于：桌面端，Web端，小程序，App。

如果你對云函數感興趣，可以在我的華為云博客搜素函數工作流相關。我在其它博客平臺也發過其它云服務商的云函數使用。

郵件轉發服務：npm 安裝 nodemailer 即可體驗

云開發模式

云開發模式是什么呢？云函數+云數據庫+云存儲的集成，外帶日志，代碼托管，應用部署等待。

由于我主要使用的是Vue，所以我最常用的是uniCloud。uni-app+uniCloud快速開發跨平臺應用。

而且不需要擔心數據庫的查詢等等，服務商都給我們做好了，通過函數式調用查詢數據庫。

數據庫字段什么的也不需要操心，云數據庫可以使用JSON式的數據庫。

下圖是uniCloud的一個服務空間云數據庫截圖，字段類型可以是object,array等等，是不是很爽

數據從云數據庫取出就是json格式，爽的不要不要的。

前后端在一個編譯器即可完成編寫，是不是很爽，而且這里的云函數同樣可以url化(網關觸發)

如果你是Vue開發者，非常推薦你使用uni-app+uniCloud，可以跨平臺云開發。

開發完成后還可以很方便的部署代碼，比如H5編譯后上傳到服務空間。還可以配置跨域以及證書。

如果你是其它框架開發者，可以去各大云服務商找到你想要的開發模板以。如下圖，騰訊云cloudBase

套殼開發App以及桌面端(懶人版)

如果我們開發了移動H5，但是老板說：?。∧銥槭裁床蛔龀墒謾C應用程序(包括安卓，蘋果)呢。

你肯定會特別苦惱，老板我只是小前端呀，莫慌，弟弟帶你裝逼。

H5套殼成手機App

你可以選擇使用APICloud 輸入入口地址后，編譯即可

當然你也可以直接使用uni-app開發或者mui，下圖為uni-app項目打包

套殼成桌面端exe

網站打包成桌面端，想想就刺激~ (??o? ?)?3??

我們可以使用 nativefier

安裝npm install nativefier

如何使用呢？比如我把本次征文活動作為入口頁面打包~ 【WEB前端大作戰】火熱進行中：https://bbs.huaweicloud.com/blogs/255890

如果出現xxxxx不是命令啥的 就npm install nativefier -g 哈哈

第一次使用可能會安裝electron 不用擔心 electron就是專門做桌面端的

如下圖，我們打包了活動入口

跨平臺開發(不包括桌面端)

這里用到的是我上面推薦的uni-app

在其他博客平臺我也寫過用法，后面會都搬到華為云博客

桌面端開發

我們上面提到的云開發可以完成跨平臺的開發。套殼的時候用到了electron。這就是桌面端開發的主角。

我們這里不細講，而是告訴大家有這個東西，我在CSDN寫過用法，簡單的整合了下Vue和electron(懶人整合法)，后面也會搬到華為云博客。

electron官方文檔如下圖

這是我之前寫的一個桌面端 整合了element ui

我們是大前端~

看完后是不是覺得很棒，我們是大前端，不是小前端。走后端的路，雖然超不過他們，但是咱們也找到路了不是。

歡迎加入我們的高校聯盟 CloudDEVPioneer

【WEB前端大作戰】火熱進行中：https://bbs.huaweicloud.com/blogs/255890

Electron Vue web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。