⑴ Web前端工程師的入門指南-教你如何成為一名web前端開發工程師
今天小編要跟大家分享的文章是關於Web前端工程師的入門指南-教你如何成為一名web前端開發工程師。經過如此多的試驗和測試,而不是說你從頭開始創建了所有內容,接著,你在網頁上創建了第一個登錄表單時,你感覺如何?經過了多次更改後,將布局分配給第一個Web應用程序時感覺如何?當成功處理了數千個用戶的操作時,你感覺如何?
大多數Web開發人員都經歷了上述所有階段,最初可能會對其中某些感到沮喪,但是當他們看到自己的網站正在運行並且人們在世界各地使用它時,總體感覺確實令人興奮和驚奇。Web開發人員負責許多任務,從收集需求到設計網站,處理網站的後端部分,並使其成功地為用戶服務。每年,行業中都會涌現出新技術和工具,以提高開發人員的工鄭槐作效率,並為用戶提供更好的網站。對於他們來說,保持在Web開發游戲之上的挑戰變得越來越大。今天,我們將討論要在2020年成為Web開發人員的完整地圖。這將是針對所有開發人員(前端,後端和全棧)的實用指南。
1、首先確定你的目標或道路
我們將討論很多技術,趨勢和工具,但我們不希望您不知所措,因此你需要首先決定要成為一名Web開發人員要做什麼,因為這將幫助你選擇合適的工具。和學習技術。成為Web開發人員的原因有很多,下面列出了一些選擇因素:
·你想作為一卜叢賀名Web開發型派人員在一家公司工作,這是最普遍的原因。
·你想以自由開發人員的身份來開始自己的業務或代理。
·你可以成為其他公司的顧問。
·你可以創建自己的應用來賺錢。
·編碼是你的業余愛好。
從上述感興趣或目標的領域,你可以選擇適用於你的目標的正確工具和技術。如果你的目標是成為一名前端開發人員,則可以選擇前端開發的工具和技術。後端和全棧開發也是如此。
2、Web開發的基本工具和軟體
·
計算機和操作系統:如果沒有計算機和操作系統,則無法編寫代碼。要學習Web開發,你不需要任何高端計算機(如果你擁有的話,那麼更好)。你可以使用任何類型的中型筆記本電腦或台式機。對於操作系統,可以使用適合你的MacOS,Windows(最新版本)或Linux。
·文本編輯器/
IDE:毫無疑問,VSCode適用於大多數情況和大多數語言。它具有良好的性能,出色的擴展性,內置的終端功能以及大量功能。在2019年StackOverFlow調查中,VSCode也是開發人員的首選。你還可以選擇其他一些不錯的選擇,例如Sublime
Text或Atom。如果我們談論IDE,那麼是Visual
Studio(#或C#),Eclipse和Netbeans(Java)。是不錯的選擇。
·
Web瀏覽器:大多數開發人員的首選是Chrome或Firefox。Chrome速度很快,並且使用V8引擎(JavaScript引擎)。Firefox也取得了長足的進步,其中的一些好東西不在chrome瀏覽器中。兩種瀏覽器都有出色的開發工具,可以對Web開發中的問題進行故障排除。
·終端:您將使用一些系統命令來使用CLI進行很多工作。您可以將默認或第三方終端用於您的Web開發項目。Bash,Zsh,Powershell,Git
Bash,iTerm,Hyper這些都是可以使用的選項。
·設計(可選):並不是每個人都需要學習。在公司中,有專門的團隊來製作圖像,徽標或草圖,但是如果您是自由職業者,則可能必須學習Adobe
XD,Photoshop,Sketch或Figma。
3、從HTML和CSS開始
HTML和CSS是Web開發的基本構建塊。無論您的Web應用程序有多先進,或者使用什麼框架和後端語言,都必須使用HTML和CSS構建前端應用程序。因此,這是在Web開發中要學習的第一件事。
·HTML5(語義元素,屬性,文檔類型等)
·CSS基礎知識顏色,字體,位置,盒子模型等。
·CSSGrid和Flexbox對齊內容或創建列。
·CSS自定義屬性
4、響應式布局
您的應用程序應該在所有類型的設備(例如智能手機,平板電腦,台式機,iPad或任何其他屏幕尺寸的設備)上都可以查看和使用。因此,了解創建響應式設計或布局非常重要。讓我們來看一些重要的主題。
·了解如何設置視口
·媒體查詢不同的屏幕尺寸。
·流體寬度
·雷姆單位
·移動優先
5、自定義可重用CSS組件
與其依賴大型的CSS框架(如Bootstrap),不如創建自己的模塊化,可重用的CSS組件以在項目中使用。如果您構建自己的定製設計,則無需導入完整的庫。您創建只需要特定UI的組件。的新趨勢最近還出現了有助於更有效地編寫CSS代碼的代碼。如果你已經了解CSS,那麼您無需在學習Saas上花費很多精力。Saas是CSS預處理程序,可為標准CSS添加更多功能並使其更加高效。你可以使用變數,嵌套,條件語句來減少CSS的重復並提高其效率。你還可以為每個可重用組件創建單獨的Saas文件。Sass確實節省了很多時間,所以你絕對應該在2020年學習它。
6、CSS框架
學習CSS框架的普及程度不如去年,但對於不擅長設計的開發人員而言,仍然非常相關或有用。有許多流行的CSS框架可供使用,其中一些如下。
·Bootstrap是最流行的CSS框架。學習引導程序也有助於學習其他框架。
·Tailwind
CSS是其他正在流行的框架,與其他框架幾乎沒有什麼不同。它是一組實用程序類,因此您可以創建自己的按鈕和其他看起來與其他按鈕確實不同的東西。它們也是高度可定製的。
·物化
·布爾瑪
7、前端必須語言:JavaScript
學習HTML和CSS之後,接下來需要學習的是Vanilla
Javascript。對開發人員來說,掌握javascript基本知識非常重要。您將在伺服器端語言(例如PHP,Python或#)中使用大量javascript,並且如果您想與React,Angular,NodeJS,Vue或任何其他javascript框架或庫一起使用,則非常需要學習這種語言。以下是你應該在javascript中涵蓋的一些重要主題
·JavaScript基礎知識(變數,數據類型,函數,條件等)
·DOM(文檔對象模型)
·JSON(JavaScript對象表示法)
·提取API(請求/響應/Ajax)
·如果您想轉向React,Vue,Angular或其他框架,現代JS(ES6)概念對於學習非常重要。
8、一些重要工具
Web開發中將使用一些工具。這些工具將幫助你進行調試,提高生產率,管理代碼,與其他開發人員合作以及類似的東西。讓我們討論其中一些工具。
·
Git(版本控制)和Github是您肯定會在2020年學習的最受歡迎的工具。Git在與其他開發人員協作和管理代碼方面有很多幫助。您還可以選擇其他一些選項,例如GitLab,Bitbucket和其他一些選項。
·
了解如何使用瀏覽器開發工具。無論是chrome還是firefox,您都應該知道如何使用不同的選項卡,例如元素選項卡,javascript控制台,用於請求和響應的網路選項卡,應用程序選項卡以及其他用於不同目的的選項卡。
·大多數IDE或文本編輯器都具有添加擴展名或插件的功能,這對提高生產力和構建Web應用程序非常有幫助。例如,Visual
Studio代碼中的VSCode擴展可幫助下載擴展,例如實時伺服器或實時saas編譯器以與React一起使用。
·Emmet是另一個很棒的工具,它允許您編寫非常快速的HTML和CSS,這有助於提高開發人員的生產力。
·
學習使用javascript軟體包管理器,例如NPM和Yarn。如果您正在使用Javascript框架或庫(例如React),那麼這些軟體包管理器將使用很多,但是對於其他語言(例如Python或Php),您將使用不同的軟體包管理器。
·
如果要在前端安裝NPM軟體包,則必須使用Webpack或Parcel。如果要創建自己的模塊,或者要將一個javascript文件帶到另一個javascript文件,則默認情況下不能僅使用瀏覽器來執行此操作,因此需要Webpack或Parcel對其進行捆綁。
9、基本部署
此時,一旦你知道應該為前端開發學習什麼工具或技術,就需要知道如何在Internet上部署前端網站。如果你正在為小型企業構建一些小型應用程序,登錄頁面或個人站點,則無需學習AWS或DevOps,僅因為它們具有光澤和新潮。你將使事情變得更加復雜而不是簡單。你需要在2020年學習一些部署工具和步驟。
·域注冊(Namecheap,Google等)
·託管託管(InMotion,Hostgator,Bluehost等)
·靜態主機(Netlify,Github頁面)
·SSL證書。
·FTP,SFTP(文件傳輸協議)非常適合小型應用程序。
·SSH(安全外殼),用於高級應用程序。
·CLI和Git。
到目前為止,我們討論的任何工具,技術趨勢或步驟都是前端開發的一部分。您尚不知道該框架,但可以為個人和小型企業構建網站,也可以構建適合移動設備的布局。您還可以使用到目前為止討論的工具或技術來部署小型應用程序或項目。如果您想申請工作,那麼學習一些前端框架(如React,Vue或Angular)將是很棒的。
10、前端框架和狀態管理
框架使您可以進行更高級的前端開發。框架為您提供了許多優勢,例如可重用的組件,更有條理的UI或頁面交互。這對於協作更好,也有助於編寫簡潔的代碼。另外,了解狀態管理。每個框架都有不同的方法。以下是2020年的一些流行框架和狀態管理器。
·React:React庫是最流行的Web開發學習方法,與其他框架和庫相比,它相當容易。React開發人員還有很多工作要做。您可以將Rex和
ContextAPI與Hooks一起使用以進行狀態管理。
·Vue:
Vue也越來越受歡迎,開發人員也更喜歡學習Vue。與React和Angular相比,Vue最容易學習。VueX是為視圖而構建的狀態管理器。
·Angular:此框架通常在大型組織中使用。它具有相當陡峭的學習曲線。用Angular學習
TypeScript也很好。它允許您使用可選的靜態類型並支持ES2015的功能。NGRX和Services是可以學習此框架的良好狀態管理器。
可選學習:
·
如果您具有這三個框架之一的知識,那麼您還可以使用Svelte,它是一個JavaScript編譯器,可讓您生成純凈的原始JS代碼並幫助您輕松構建用戶界面。
·
了解伺服器端渲染。NextJS(React)和NuxtJS(Vue)是允許您在伺服器上運行React和Vue的框架。兩者都有很好的功能,例如更好的SEO,文件系統路由,自動代碼拆分,靜態導出,JS中的CSS和許多其他功能。
·靜態網站生成器:Gatsby(反應式)和Gridsome(Vue)
我們已經討論了所有大多數前端開發工具和技術。現在讓我們討論成為後端開發人員或全棧開發人員的語言和技術。
11、伺服器端語言(選擇一種)
您應該至少了解一種伺服器端語言。要在2020年選擇一種語言,下面提供了一些選項...
·NodeJS(不是語言,而是運行時環境)
·Python(非常適合初學者)
·Java(適合大型組織)
·Php(適合自由職業)
·Ruby(2020年少兩極)
·C#
·Go
注意:無論你喜歡學習哪種伺服器端語言,都要確保你了解使用該語言的數據結構和演算法。數據結構和演算法將幫助您為用戶呈現數據,並將幫助您優化Web應用程序中的代碼。我們特別建議您專注於使用數組和字元串(最重要)。你將同時使用這兩種方法。
12、伺服器端框架(選擇一項)
一旦學習了自己選擇的一種伺服器端語言,就可以使用其中一種語言框架。您可以選擇以下給出的選項之一...
·Node.js_Express,Koa,Adonis,Feather.js,Nest.js
·Python:Django,Flask,
·Java:SpringMVC,Grails
·PHP:Laravel,Symfony,Codeignitor,Slim
·Ruby:Sinatra上的RubyonRails
·C#:ASP.NETMVC
·Go:Revel
13、資料庫(選擇一項)
大多數Web應用程序都需要一個存儲數據的地方。在某些情況下,某些技術或某些語言可以與某些資料庫配合使用。例如:在Mern堆棧中,M代表MongoDB,而在LAMP堆棧中M代表MySQL,但完全取決於您要為應用程序選擇哪個資料庫。我們將討論2020年一些流行的資料庫。
·關系資料庫:RDBMS仍然是最受歡迎的資料庫。最喜歡使用PostgreSQL,MySQL,MSSQL。
·NoSQL:MongoDB,RethinkDB,CouchDB
·雲資料庫:Firebase,AzureCouldDB,AWS
·輕量級和緩存:Redis,SQLlite,NeDB
在學習資料庫時,您還將學習RDBMS,ORM(對象關系映射器)或ODM(對象數據映射器)的SQL(結構化查詢語言)。GraphQL
:(可選)您可以了解現在流行的GraphQL。這是API的查詢語言。它具有類似於JSON的簡單語法,並且相當容易實現。
14、CMS:內容管理
您絕對應該了解內容管理系統,尤其是如果您是自由職業者。CMS用於將內容添加到您的網站或應用程序。客戶能夠更新自己的內容非常好。
·
傳統CMS:WordPress(PHP),Drupal(PHP),Keystone(Javascript),Enro(Javascript)
·其他CMS:DEDECMS,帝國CMS,PHPcms,Prismic.io,Strati。
15、部署和DevOps
託管全棧應用程序或後端應用程序比僅前端應用程序要復雜一些,尤其是當您擁有資料庫時。確保您知道如何使用CLI進行部署。了解有關用於部署應用程序的以下內容。
在大多數公司中,有不同的團隊從事DevOps的工作。因此,擁有有關DevOps的知識完全是可選的。您可以了解到,如果您正在從事自己的項目。
·SSH(安全外殼)
·Web伺服器環境:NGINX,Apache
·應用程序託管:Linode,Heroku,AWS,Azure,Now。
·虛擬化:Docker,Vagrant
·測試:單元,功能,集成等
·負載平衡,監視,安全性。
以上所有技術工具都足以使您成為前端,後端或全棧開發人員。根據最終目標選擇正確的工具和技術。
以上就是小編今天為大家分享的關於Web前端工程師的入門指南-教你如何成為一名web前端開發工程師的文章,希望本篇文章能夠對正在從事web前端工作的小夥伴和正在學習web前端知識的夥伴們有所幫助,想要了解更多web前端相關知識記得關注北大青鳥web培訓官網。最後祝願小夥伴們工作順利,成為一名優秀的web前端開發工程師!
英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻譯|web前端開發(ID:web_qdkf)
⑵ WEB前端專利點的申請有哪些
專利法中沒有明文規定哪些互聯網產品可以或不可以申請專利,原則上任何互聯網產品都可以申請專利,但可能會因為不合專利授權條件而被駁回,導致企業浪費了時間、金錢、公開了產品秘密也得不到專利的保護。
軟體技術申請專利以保護軟體流程步驟方法,也可進行計算機軟體著作登記以保護程序源代碼。申請專利的話,通常只能申請發明專利,授權風險較高,請謹慎。
以上信息來自快法務,希望可以幫助您,如果您還有疑問可以追問或登陸快法務平台查看。
⑶ 前端專利方向有哪些
1、首先搭建服務。
2、其次無伺服器。
3、再其次智能化。
4、最後IDE。全稱"Web前端開發",簡稱「前端",又稱作「客戶端開發" .可以這樣簡單的概括,只要是瀏覽器或移動設備上能直接被人看到的界面,都可以是前端開發者的工作負責范圍。而配合前端工作的開發人員被稱作「後端」也稱作「伺服器端" 。
⑷ javascript做的前端網頁能不能申請軟體著作權
可以申請
軟體著作權登記辦理步驟
1、辦理流程
填寫申請表--→提交申請文件--→繳納申請費--→登記機構受理申請--→補正申請文件(非必須程序)--→取得登記證書
注釋:如已登記軟體的著作權發生繼受(受讓、承受或繼承),權利繼受方辦理著作權登記時需先做軟體著作權登記概況查詢。(查詢申請表可以到我中心網中的「軟體登記特別提示」中下載)
2、填寫申請表
在中心網站上,首先進行用戶注冊,然後用戶登陸,在線按要求填寫申請表後,確認、提交並列印。
3、提交申請文件
申請人或代理人按照要求提交登記申請文件。
4、繳納申請費
申請文件符合受理要求時,軟體登記機構發出繳費通知,申請人或代理人按照通知要求繳納費用。
5、登記機構受理申請
申請文件符合受理要求並繳納申請費的,登記機構在規定的期限內予以受理,並向申請人或代理人發出受理通知書及繳費票據。
6、補正程序
根據計算機軟體登記辦法規定,申請文件存在缺陷的,申請人或代理人應自發出補正通知之日起, 30個工作日提交補正材料,逾期未補正的,視為撤回申請;經補正仍不符合《計算機軟體著作權登記辦法》第二十一條有關規定的,登記機構將不予登記並書面通知申請人或代理人。
7、獲得登記證書
申請受理之日起30個工作日後,申請人或代理人可登記我中心網站,查閱軟體著作權登記公告。北京地區的申請人或代理人在查閱到所申請軟體的登記公告後,可持受理通知書原件在該軟體登記公告發布3個工作日後,到我中心版權登記大廳領取證書。申請人或代理人的聯系地址是外地的,我中心將按照申請表中所填寫的地址郵寄證書,請務必在申請表中填寫正確的聯系地址。
注釋:外地的軟體登記申請人或代理人如需自取證書,應當在申請表中申請人或代理人信息欄內的聯系人後加註括弧,寫明聯系人的北京聯系地址,我中心將不做郵寄處理。
⑸ 前端網頁簡歷模板
寫好簡歷對前端網頁求職者求職成功起著非常重要的作用。以下是我為大家整理的前端網頁簡歷模板,希望你們喜歡。
前端網頁簡歷模板(一)
姓名:xxx
國籍:中國
目前所在地:廣州
民族:漢族
戶口所在地:湖南
身材:158 cm46 kg
婚姻狀況:未婚
年齡:25 歲
培訓認證:
誠信徽章:
求職意向及工作經歷
人才類型:普通求職
應聘職位:網頁設計師/美工:設計師 網站策劃 文案策劃 廣告 設計/策劃 項目管理與策劃
工作年限:4
職稱:無職稱
求職類型:均可
可到職-隨時
月薪要求:3500--5000
希望工作地區:北京 北京 北京
個人工作經歷:2005.3-2008.2 二年前台網頁設計,文案寫作和製作,ASP代碼的編寫,動畫片頭,動畫BANNER設計與製作,後台頁面框架設計和各功能的分析與實現,功能分配圖表設計。其作品有:;;,;;;;;;;;;;;;;;;;;;;;等40多個網站設計與製作.
2004.12-2005.2婁底宏遠電腦學校網頁設計、FLASH動畫設計輔導老師。
教育 背景
畢業 院校:邵陽學院
最高學歷:大專
畢業-2003-06-01
所學專業一:行政管理
所學專業二:網頁設計
受教育培訓經歷:2004.7-2004.12宏遠電腦學校培訓網頁設計,並以優異的成績畢業於校且被留校任輔導老師(網頁設計與動畫設計)
2000.9-2003.6邵陽學院,攻讀行政管理專業三年。在校期間任班內團知書,各專業成績優秀。予以畢業
語言能力
外語:英語良好
國語水平:良好
粵語水平:一般
工作能力及其他專長
為人熱誠,樸素大方,活潑開朗,具有堅強的毅力和較強的溝通能力,人際關系處理較好,有強烈的團隊精神,以忠誠、務實、拼搏、勤奮來提升自己、完善自己,並能熟練使用Dreamweaver,Flash,Photoshop,corelDRAW等各設計軟體,能用DIV+CSS布局網頁設計。
前端網頁簡歷模板(二)
基本信息
姓 名:陳xx
性別:男
婚姻狀況:未婚
民族:漢
戶 籍:廣西
年齡:27
現所在地:南寧
身高:174
聯系電話:135*****
電子郵箱:xuexila.com
求職意向
希望崗位:原畫/動畫/3D設計,網頁設計/製作/美工/UI,平面設計總監/經理/主管
工作年限:職稱:無職稱
期望薪資:面議
求職類型:全職
到崗時間:隨時
個人工作經歷
**公司
起止年月:2011-03 ~ 2012-04
公司性質: 中外合資
所屬行業:醫療/護理/保健/衛生
擔任職位: 企劃設計主管
工作描述: 公司總部及下屬門診部項目企劃設計及對外宣傳平面媒體廣告設計及製作流程跟蹤把關驗收,電子書/雜志排版製作等設計。公司VI網站項目策劃及 網站美工FLASH動畫3DMAX場景設計。
離職 原因:
**公司
起止年月:2009-05 ~ 2011-02
公司性質: 外商獨資
所屬行業:計算機/互聯網/通信/電子
擔任職位: 網路技術 部主管
工作描述: 公司VI平面宣傳廣告網站項目策劃 網站美工FLASH動畫3DMAX場景製作電子書/雜志排版製作等設計。
離職原因: 個人原因
**公司
起止年月:2007-03 ~ 2009-04
公司性質: 外商獨資
所屬行業:計算機/互聯網/通信/電子
擔任職位: 美工部主管
工作描述: 1、3D動畫效果設計。2、公司VI/平面宣傳廣告/FLASH片頭動畫/網頁FLASH動畫/全FLASH網站設計。AS語言。3、網頁前台設計及網站維護管理。
離職原因: 個人原因
**公司
起止年月:2006-08 ~ 2007-01
公司性質: 私營企業
所屬行業:石油/化工/礦產/地質
擔任職位: 設計師
工作描述: 1、現場量尺寸計算用料,繪制CAD圖,發回工廠製作。2、展櫃3D效果圖設計。
離職原因: 個人原因
**公司 起止年月:2005-05 ~ 2006-06
公司性質: 私營企業
所屬行業:廣告
擔任職位: 設計師
工作描述: 1、3DMAX效果圖設計。2、平面廣告設計。
FLASH動畫設計。
離職原因: 個人原因
**公司
起止年月:2003-09 ~ 2005-03
公司性質: 私營企業
所屬行業:石油/化工/礦產/地質
擔任職位: 廣告營削策劃
工作描述:
廣告營削策劃設計(宣傳POP海報/宣傳冊/大型戶外廣告,招牌/店頭招牌)
3DMAX效果圖設計(加盟店效果圖設計)
倉庫系統維護(產品編碼錄入,設定利潤值及資料庫管理)
超市收銀系統管理(掃描編碼錄入/入貨價格設定,設定利潤值及資料庫管理備份)
離職原因: 個人原因
教育背景
畢業院校: 廣西建築材料工業學院
最高學歷: 大專
獲得學位: 大專
畢業日期: 2003-07
專 業 : 建築裝飾
起始年月 終止年月 學校(機構) 所學專業 獲得證書 證書編號
1999-07 2003-07 廣西建築材料工業學院 建築裝飾 畢業證
語言能力
外語: 英語一般
粵語水平:良好
國語水平:良好
工作能力及其他專長
1、4年的設計專業學習接受過正規的美術教育,具有較好的美術手繪功底及藝術素養和8年的工作 經驗 熟練應用:3DMAX ,Vray喧染器 ,Lightscape ,CAD ,Photoshop ,coreldraw , AIFlash ,Dreamweaver ,fireworks等各類設計軟體。
2、能夠獨立或者團隊合作高效率地完成工作。
3、對公司產品及項目的宣傳企劃設計有相當豐富的經驗。
自我評價
工作腳踏實地,善於創新、敢於迎接挑戰。有很強的精力投入工作。學習能力強、樂業敬業,強調團體合作精神。
前端網頁簡歷模板(三)
目前所在: 荔灣區
年齡: 20
戶口所在: 陽江
國籍: 中國
婚姻狀況: 未婚
民族: 漢族
培訓認證: 未參加
身高: 150 cm
誠信徽章: 未申請
體重:
人才 測評: 未測評
我的特長:
求職意向
應聘職位:網頁設計/製作/美工:
工作年限: 3
求職類型: 實習
可到職日期: 隨時
月薪要求: 1000--1500
希望工作地區: 越秀區,天河區,海珠區
工作經歷
蘇寧電器(廣州市)
起止年月:2010-10 ~ 2010-10
公司性質: 中外合資
所屬行業:服務業
擔任職位: 後台客服
工作描述: 後台協助物流部門工作讓我加強了與客戶的溝通協調能力,也提高了處理問題的能力,工作認真、勤奮,得到好評。
教育背景
畢業院校: 廣州市工貿技師學院 廣東商學院
最高學歷: 大專
獲得學位:
畢業日期: 2011-07
專 業 一: 電子商務與 財務管理
專 業 二:
起始年月 終止年月 學校(機構) 所學專業 獲得證書 證書編號
2008-09 2011-07 廣州市工貿技師學院 電子商務與財務管理 助理電子商務師 辦公軟體 -
語言能力
外語: 英語 一般
粵語水平: 良好
其它 外語能力:
國語水平: 良好
工作能力及其他專長
本人主修課程:會計基礎、財務會計、中級財務會計、工業會計、電子商務、經濟學、管理學、中國稅制、統計學、應用文寫作等。熟悉的軟體有:辦公軟體、會計電算化、網頁製作、Fhotoshop、Dreawearn。
詳細個人自傳
本人性格開朗做事認真、負責,有耐心,心思敏捷,能吃苦耐勞。本人曾在學校參加學生會,並獲得“優秀學生幹部”,同時加入教務助理組,協助老師管理學校秩序和考勤記錄工作。也曾在教務助理組協助主席舉辦 辯論 賽並擔任主持人,並獲得“優秀主持人”稱號。年輕代表著熱情有活力,希望能在往後學到更多的經驗和知識。
⑹ 前端工程師零基礎個人網站搭建
大家好,我是一名前端工程師,我想大多前端工程師都渴望自己獨立搭建一個個人網站,不管是出於更多的學習提升自己的核心競爭力,還是想要展示自己建一個個人博客,亦或者是純粹出於好奇想建站一條龍跑通,反正,就是要自己獨立搭建一個網站跑通。你可以說沒有以上的想法,反正我有,所以,我就嘗試了,最後輸入我的網址 maramlee.com ,成功展示了「hello world」。啊…哈哈哈……
打算寫這篇文章是希望能給想要嘗試自己建站卻迷茫在前端的同學一點方向,可能就有人說了,網上隨便搜零基礎建站一大堆,不需要我在這邊寫,我回想我這建站之路,覺得還是很有必要,相信肯定會有一部分人會因為我的這篇文章而受益。
我在建站之初就查過很多資料,網上的資料很多很雜,有各種原因:比如太多不好分辨,有些時間比較久遠,也有很多本來是基礎點卻各行如隔山一臉懵,等等,所以實際操作起來比較吃力。我這里就從最初的申請域名開始,到最後輸入網址出現「hello world」,整個流程串聯起來,希望起到拋磚引玉的作用。
我希望您是一個有前端開發基礎的人,當然,我盡量將用到的技術點都提出來,希望能給沒有基礎的人一個思考方向。
我這邊域名、伺服器等用的是阿里雲,不用這個平台的小夥伴兒與自己的平台自行對比哈,有問題,也可以給我評論留言,一起探討。如果不知道選哪個平台申請,可以和我一樣,注冊一個 阿里雲賬號 ,再跟著我做。
此節有 注冊域名 、 實名認證 、 備案域名 這幾個流程。
輸入想要的域名,未被佔用即可注冊。具體操作,請參見 注冊通用域名 。
域名後綴通常為.com或.cn,基本上是能注冊 .com 就注冊 .com ,更多後綴請參見 域名區別 。
具體流程,請參見 域名實名認證概述 。
說明 使用中國大陸境內伺服器託管您的網站時,需要進行備案。否則不需要備案。
為節約備案時間和順利通過備案,建議您提前了解並做好備案前的准備工作:
各省管局要求資料有所不同,請根據 各地區管局備案規則 准備資料。更多詳情,請參見 ICP備案前准備概述 。
如果按步驟來的話,沒有備案過,所以參見: 首次備案 。
如果您是其他備案場景,請參見 ICP備案快速入門 。
先前往 實例創建頁 ,對於運維來說,這節比較簡單,但是作為運維小白,購買伺服器的時候,要注意根據自己的實際情況購買,強烈多查下阿里雲的文檔: 使用向導創建實例 ,很詳細!同時多看看提示、注意事項等。下面是我這個運維小白看了文檔後總結的步驟,如果你是小白也可以這樣做,如果有運維人員發現我的描述這些有問題的話,也請多多指教哈。
比如你只是想學學試一下,就選擇「按量付費」(注意按量付費的話,要先充值,記得充100-200都可以),但你希望長期維護就選擇「包年包月」。
這個要注意,總的來說,查看的網站的人在哪裡多,就選哪裡,如果你自己的博客,也可以選擇自己所在地,反正全國范圍內用的話,都差不了多少。更多的參見: 教我選擇地域
作為玩玩的網站,就按最小的選就可以了。
不知道怎麼選,建議選擇 CentOS 7.4 64位。注意,如果你是 windows 的電腦,也不要想當然的選擇 Windows Server 系統,這里是你的伺服器鏡像,可以簡單的理解為這是一台新電腦的配置,和你本地使用的電腦系統無關。
這個看你存儲東西決定,你可以想像成你新買一個電腦,這里的存儲可以看成電腦的內存。系統盤是必須選的,可以看成 windows 系統的 C 盤。至於數據盤和 NAS 存儲,不了解也可以先不選。對於玩玩的小夥伴兒,可以直接就操作系統盤打通流程,至於其他數據盤什麼的,可以後面深入了解了再擴展。
這個有「經典網路」和「專有網路」的區別,現在新開的賬號,都只有「專有網路」這個選項,就直接選這個就可以了,想知道更多它們可以自行查閱資料。
默認勾選「分配公網IPv4地址」即可
做測試用的話,就選「按使用流量」即可
可以看情況選擇,一般的玩玩,默認 5M 即可
想要了解詳細內容,可以查看: 教我選擇> 。安全組可以根據提示,新建一個安全組: 新建安全組> ,這里進去後,新建時,需要創建專有網路,根據提示填寫,一般默認就可以。
剩餘的彈性網卡和 IPv6 作為小白來說,暫時用不到,可以打通流程後再進行知識補充。
這個看你心情,可以登陸後再設置,可以「自定義密碼」也可以用「密鑰對」,根據文檔提示操作即可
再之後的操作可以看你情況設置,問題不大,確認好後即點擊購買即可。具體詳細操作,記得看文檔哦~
域名解析後,外部用戶才可通過域名訪問網站。比如輸入 .com 就可以訪問網路網站。
主要操作,看阿里雲的這個文檔就可以了: 設置域名解析快速入門
部署網站這里涉及到伺服器部署,對於前端來可能比較陌生,可能對後端來說比較容易些,但是,這個也不是很難,阿里雲給了部署的方式: 自助建站方式匯總 ,可以選擇適合自己的方式進行部署。我是前端人員,最熟悉的語言是 javascript ,所以,我選擇用 node.js 部署,阿里雲文檔里也有對應的操作文檔: node.js部署
這樣,你的第一個網頁就出來啦~~~
作為小白,踩過的坑真的不少,像不會後端怎麼辦?學 node.js 。不會 Linux 系統操作怎麼辦?查 Linux 常用操作。反正就是各種找文檔,找學習資料。這里就稍微提下比較基礎的坑,希望對其他小白有幫助。
連接 ECS 實例有多種方法:
注意,綁定了密鑰對之後,上面兩種連接方式都不可以用了。
想知道更詳細的內容,可查看 文檔 。
Linux格式化數據盤 文檔中有寫,格式化數據盤,需要掛載,隨實例一起購買的數據盤,無需掛載。而且,雲伺服器ECS僅支持數據盤分區操作,不支持系統盤分區操作。我前面就沒注意到,系統盤,就是隨實例一起購買的數據盤,我只有這個盤,看文檔的時候就跟著操作,進行分區,分了很多次,用 fdisk -lu /dev/vda1 查看分區成功的,但是,運行命令 mkfs.ext4 /dev/vda1p1 在新分區上創建一個文件系統就一直報錯:The device apparently does not exist; did you specify it correctly? 找不到文件系統。最後找了很久才發現犯了低級錯誤,在系統盤分區。
由於我不是計算機科班出身,不是很了解 ip 地址,在安全組里創建規則的時候,對於授權對象一欄,一臉懵逼,於是查找了下 IP 地址相關知識。
有一點基礎的人都知道,控制台輸入 ifconfig 列印出的地址,與電腦中圖形化界面上顯示的 ip 地址一樣,但是,這個地址是內網地址,並不是外網地址。
我在這里做測試的時候就將內網 ip 設置上,然後一直沒有預期效果。
外網地址,可以打開網路,直接搜索 ip 就可看到你的外網地址。
對於 ip 地址也是惡補了下,不了解的小夥伴兒可以參考這個地址: CIDR的IP地址的表示與劃分方法 ,對於這個實例,我也做了個筆記,供大家參考:
主機ID全為0和主機ID全為1的為非法IP地址
網路ID相同的就屬於同一網段
C類:C類IP地址:
3位元組的網路地址(最高位必須是110)+1位元組的主機地
CIDR:無類域間路由
IP地址/網路ID的位數 0.0.0.0/0
子掩碼:子網掩碼的二進制格式中的網路位全為1。這樣二進制格式的子網掩碼和二進制的IP地址進行「與」運算,可以得出該IP地址的網路位。
CIDR技術用 子網掩碼 中連續的1部份表示網路ID,連續的0部份表示主機ID。
例如 :192.168.23.35/21,計運算元網的網路ID、子網掩碼、起止IP地址
子網掩碼:255.255.248.0
網路ID:192.168.16.0
起始IP地址:192.168.16.1
結束IP地址:192.168.23.254
由於我使用的是阿里雲平台,文章中很多節選自阿里雲,想了解更多的小夥伴兒請多查看阿里雲文檔。
我是事後回憶寫的文章,所以,可能有遺漏的地方,如果讀到發現有問題,請給我評論或留言,我會持續改進此文。