單人做一個網站需要掌握哪些知識? - GetIt01
單人做一個網站需要掌握哪些知識?
12-06
想學習如何做一個網站,卻又不知道從哪裡入手。請各位大牛給點方向性的意見,比如如何學習?學什麼?學到什麼程度?
強調一點,是自建網站。
這麼巧, how2j.cn/t/44 , 就是我一個人單獨做的~
做了有一年半了,現在每天有1000個人訪問,流量可真低呢,哈哈
簡單列羅一下網站功能,以及需要什麼知識, 當做題主學習思路的一種參考吧
1. 網頁上要顯示內容,需要學學HTML ,比如這個頁面,有文字,有圖片。
2. 光有文字還不行,還要考慮不同的顏色,布局,排版,如圖做出這樣頁面效果,要學學基本的CSS
3. 有一些交互,比如修改了代碼可以實時看到效果,得掌握Javascript
4. 直接寫CSS太累,需要套用別人寫好的,來得快,也比自己做出來的好看,那麼就可以用用Bootstrap
5. 現在網站有1000多張頁面,不可能做1000張html呀,所以這些都需要維護在資料庫裡面,那就學一個簡單的MySQL
6. 現在一共有55張表。。。。 怎麼維護他們之間的關係~ 彼此如何依賴,外鍵如何關聯,這個需要學習表關係 的相關知識
7. 有了資料庫,也有了表,那麼如何從這些表裡取數據呢? 我用的是JAVA技術棧,那麼就需要用到JDBC
8. 為了使用JDBC不是需要Java基礎嗎? 為了僅僅滿足JDBC的運行,需要如下JAVA基礎 :
面向對象,變數 操作符 控制流程,數字與字元串,異常處理,集合,嗯,剛剛夠
9. 這樣JDBC就可以取出數據了,那麼取出來之後怎麼顯示在HTML上呢? 需要用到JSP
10. 為了JSP可以運行,需要一個Servlet容器,TOMCAT ,簡單用用就可以了
11. 可是TOMCAT總不能在自己機器上跑嘛,要放在公網上,運行,其他人才看得到呀,所以需要掌握如何在LINUX 里部署Tomcat
12. 那麼掛在公網上的Linux自己怎麼弄呢? 我也弄不來,我是在阿里雲租的LINUX雲伺服器
13. 隨著網站提供的功能越來越多,光用JSP開發太慢了,而且難以維護,這個時候就用到了Struts 加快開發效率
14. JDBC也有點難以維護了,那麼就換成了Hibernate
15. 為了讓Struts和Hibernate更好的整合在一起,那還得學學Spring 以及這3個的整合
16. Struts常常有漏洞產生,所以還得時常打補丁 ,真後悔當初沒有用SSM那套呢(其實當時也不熟SSM,哈哈~)
17. 為了更好的講解知識點,錄了教學視頻,所以還得會錄屏軟體 。。。。
18. 這些視頻放在youku不太好,會有廣告,放在雲盤也不好,會被莫名其妙舉報而關閉,所以還是放在自己網站吧。 那麼為了播放,還的學會html5 的播放方式
19. 看視頻太慢,所以再加個不同速度 的播放按鈕,以及回放按鈕
20. 隨著訪問的人數增多,看視頻的人有個3,4個人同時看的時候,視頻播放就卡成狗了,所以為了播放順利,得把視頻放在OSS 上面去
21. 可是視頻也多呢,一個一個得手動上傳多麻煩,那就得調用阿里雲的API ,用Java幫你自動上傳
22. 還有些和開發技術無關的,也是需要掌握的,比如域名,要自己去選購一個,也是在阿里雲買的, 以前叫域名里包含java這個商標,害怕被oracle拿回去,就改了。
23. 光有域名還不行,當伺服器是在國內的時候,是需要備案的。 備案流程現在簡單多了,基本上7天就可以做完,不過其中有一個挺麻煩的地方,需要自己手寫簽字,然後再掃描出來發過去,可是我沒有掃描儀呢,去樓下店裡掃描又嫌麻煩,怎麼辦呢。。。。剛開始是在淘寶買5元的那種幫掃描的。。。 後來發現有的網站可以提供手寫字體,於是把手寫字複製下來,再ps到要填的單子上,發過去就行了,這個可是我十分得意的備案經驗喲,哈哈
嗯~ 好像就這些吧~ 一眨眼看,貌似需要的知識也不少,其實很多很多的知識,在一開始做這個網站的時候,我都是不會的 ,比如Linux(掩面),HTML5播放視頻,阿里雲API。
剛開始做的時候,其實就是很基礎的增刪改查一套,做得過程中,發現需要做某個功能,做這個功能的時候再去學需要的知識,這樣隨著網站功能得一點點豐富,自己的知識,技能也成長了起來了 。 和打遊戲的道理一樣一樣,先整點簡單的小副本,干點小BOSS,裝等提升一些,技能熟練一些,多打幾個小副本,到了進團隊副本的時候,裝等,技術也跟著就上來了嘛。
所以回到題主的問題 「給點方向性的意見,比如如何學習?學什麼?學到什麼程度?」。
試著自己做一個對別人有價值的個小網站嘛,簡單的那種,比如分享你收集的PDF,小軟體,考試題目什麼的,以功能需求為導向,按需學習,這是最好的學習方式,也是最有意思,最有樂趣的方式。
從頭到尾做一個站,像是搭一個積木;更像是設計並建造一棟建築,你熟悉裡面的一磚一瓦,這裡面凝聚了你的創造性和靈感;甚至更像是你的小孩,你看著他一天天長大,裡面有你的心血,懊惱,奮鬥,挫折,成長,收穫。
感謝這個時代,提供給我們這些獨行者 這樣的環境,條件,機遇去做一件允許自己沉醉其中的事業。
其他相關:知乎上前端開發領域有哪些值得推薦的問答? - 知乎
收藏的同學,請記得點個贊~
我就是自己做了一個網站(建築一網 http://www.jianzhu1.com),七月1號做好的,現在上線大概20天吧。現在每天大概有400人訪問吧,閱讀量在1000左右,真的很低呢,新站都是這樣吧。
圖1:網站logo 和我的更新記錄
圖2:網站現在的完成圖
做網站很難嗎?我一開始也是這麼認為的,可是經過一段時間摸索之後,我覺得做網站還是可以入手的,關鍵是這個過程很有趣。
下面我們就一步一步分解做網站這個過程吧。本次回答的前四點可能和其他回答都差不多,重點看本回答的第五點吧。這是我自己整理的結果(比較長)。
一、首先你需要一個域名和一個空間。
域名我是在Namesilo上買的,空間是騰訊雲的,這些前面的回答都有了,我就不一一說了。
圖3:我是在這個網站上買域名
騰訊雲目前運行的還不錯,而且後期還支持QQ登陸的介面,還是很適合我這個網站的。
二、其次,你需要去安裝運行環境Nginx
這個,老實說我也是折騰了好多次,好痛苦啊!之間伺服器都格式化了好幾次,有一點不滿意我就刪掉重來,終於摸索了我自己的路。
我這裡是按照oneinstack的方法去安裝的,安裝他們官網的安裝步驟(安裝 - OneinStack)去做就沒有問題。安裝好的截圖如下圖所示。
圖4:安裝oneinstack成功提示
三、你需要一個FTP軟體
這裡我隆重推薦WinSCP軟體,真的是我用過最好的FTP軟體了,還有Linux的操作介面(下圖紅色箭頭)。
圖5:WinSCP軟體界面
四、你需要安裝WordPress,並選好主題
然後我的做法就是把WordPress下載下來,通過FTP直接拖動到空間裡面,這樣WordPress就安裝好了。然後設置一下用戶名和密碼就可以了。
主題主要是根據你網站的用途來定,企業網站、個人網站、BBS論壇所用的主題是不同的。
五、個人有用的小經驗(特別好用)
(WordPress使用經驗總結(微信機器人+B站視頻+美化文章內標題的標籤)-建築一網--施工、材料、設計一體化)
Simple Tags 插件 實現網頁內鏈(修改支持中文)
騰訊雲CDN緩存設置經驗-建築一網--施工、材料、設計一體化
如何上傳sitemap.xml文件-建築一網--施工、材料、設計一體化
WordPress在側邊欄插入圖片技巧-建築一網--施工、材料、設計一體化
使用騰訊雲cdn之後的速度測試--基本滿意-建築一網--施工、材料、設計一體化
階段性總結--WordPress最近的折騰-建築一網--施工、材料、設計一體化
下面挑幾個有代表性的經驗放在下面分享給大家。
5.1、自由連接網站和微信公眾號
眾所周知,微信公眾號裡面功能最弱的就是沒有認證的個人訂閱號了。不是我不想認證,是微信現在關閉了個人的認證了。這就導致微信公眾號的很多開發功能無法使用到。比如這次,我想用水煮魚大神的微信機器人插件來讓我的網站和公眾號可以自由連接,就必須要使用一點「巧勁 」了。
首先大家一開始都以為,未認證的公眾號,在微信公眾平台在微信自己的後台提供了自定義菜單設置的功能,但是沒有開放創建菜單的介面。所以這個就是2選1的問題:
1. 所有的操作都在微信後台進行設置。 2. 為了使用使用微信機器人的自定義回復的功能,放棄自定義菜單功能。
魚和熊掌是不可兼得的。
可是事實上,沒有認證的個人訂閱號,是可以做菜單的。可以在我的公眾號「建築一網」上看一下效果。
http://weixin.qq.com/r/0z9QSIjEVdUqrcwr92rB (二維碼自動識別)
具體做法:
不需要在微信機器人做,而是在公眾號里做。
1.先在「開發-基本配置」里,把配置停用。
2.在自定義菜單里配置菜單。
3.然後「開發-基本配置」里,把配置啟用。這時候配置的菜單就失效了,不過沒關係。
4.點「添加功能插件」,添加「自定義菜單」,點擊啟用。
注意:以上四步設置完成之後,需要把WordPress伺服器重啟一下,不然微信機器人會沒有響應。Nginx下面重啟伺服器的命令是:
service nginx restart
下面,我將用視頻演示一下操作過程:(可能移動端無法看這個視頻,大家可以去B站關注我的賬號「建築一網」來觀看。)
如何讓沒有認證的個人訂閱號可以自由連接網站和微信公眾號_機械_科技_bilibili_嗶哩嗶哩bilibili.com視頻
本視頻重點:如何讓沒有認證 的個人訂閱號可以自由連接網站和微信公眾號?
第一步、先在「開發-基本配置」里,把配置停用。
第二步、在自定義菜單里配置菜單。
第三步、然後「開發-基本配置」里,把配置啟用。這時候配置的菜單就失效了,不過沒關係。
第四步、點「添加功能插件」,添加「自定義菜單」,點擊啟用。
然後,我們來試一試。我這裡可以正常使用了,是因為我之前重啟過WordPress伺服器了。如果不能使用的話,可以到後台WordPress來重啟伺服器。
操作步驟如下:
第一步、打開WinSCP軟體。
第二步、登陸,並進入Linux系統。
第三步、輸入重啟命令 service nginx restart
這樣就么有問題了。
建築一網微信公眾號主要有兩大作用,第一是分享建築結構相關知識,第二利用該微信公眾號查詢「建築一網」博客中的文章。
查詢功能說明:
相關查詢指令:
輸入n返回最新日誌
輸入R返回隨機日誌
輸入t返回最熱日誌
輸入C返回最多評論日誌
輸入t7返回一周內最熱日誌
輸入C7返回一周內最多評論日誌
輸入h獲取幫助信息!
輸入「關鍵詞」查詢建築一網的相關文章。
查詢步驟如下:
在搜索中搜索不到需要的內容,請更換關鍵詞重新搜索,搜索只能搜索博客(http://www.jianzhu1.com)中的內容,網站中會根據網友提出的問題進行更新相關的內容,如果你有什麼問題,請給我們留言,我們會在微信公眾號和網站中進行相關更新。
5.2、在wordpress中引用B站視頻
在wordpress中引用B站視頻如果直接用官方的分享代碼經常會出錯,視頻經常會顯示找不到,所以小編給大家一個方法就是用下面這個代碼,每次只要替換代碼中小編標識的粗體數字那邊就可以!
如:http://www.bilibili.com/video/av4277134 /
數字就是B站視頻地址中av後面的數字
&&
5.3、如何美化文章內標題的標籤
就是實現圖示功能
其實是通過CSS定義了內容中的H標籤的樣式,直接將下面的代碼添加到你的style.css 中即可:(h1、h2、h3分別是一號標題、二號標題和三號標題)
.article-content h1{ font-size:26px; color: #FF0000; font-weight:bold; border-bottom: 1px solid; padding: 5px 15px; border-left: 8px solid; margin:18px 0px 18px -20px; overflow: hidden; }
.article-content h2{ font-size:18px; color: #FF0000; font-weight:bold; border-bottom: 1px solid; padding: 5px 15px; border-left: 8px solid; margin:18px 0px 18px -20px; overflow: hidden; }
.article-content h3{ font-size:12px; color: #FF0000; font-weight:bold; border-bottom: 1px solid; padding: 5px 15px; border-left: 8px solid; margin:18px 0px 18px -20px; overflow: hidden; }
5.4 添加QQ在線客服功能
實現的效果如下圖所示,點擊QQ交談就會激活QQ應用,進入人工客服在線交流窗口。目前在Windows和Android手機測試均通過,IPhone和IPad測試未通過,主要是代碼造成的,我將在下次的更新中補充。
如何做到呢?首先去下載js文件,下載地址如下:(待更新)
最近太忙了,下午繼續更新。也歡迎大家關注我的專欄「建築一網」。
嗯,首先需要下載js文件,地址我已經把鏈接做出來了,在 http://pan.baidu.com/s/1nuNdzxn
下載之後有兩個文件,分別是kefu.js 和kefu_011.gif。如下圖所示:
打開之前提到的WinSCP軟體,把MC_kefu 文件夾整個拖動到右側窗上傳到伺服器。注意,一定要放到你網站的根目錄,就是和wp-admin、wp-content在同一文件夾。
雙擊打開MC_kefu文件夾,打開kefu.js文件。將QQ號碼改成自己的QQ號碼,同時按照需要更改qq類型,我的是個人QQ。
在要加入QQ客服的頁面的&與&標籤中插入以下代碼
位置在主題目錄下的footer.php文件。一定要拉到最後的&
前面插入
&
需要的客服gif文件可以替換。可以在下面的資源里搜索獲取。
然後刷新一下頁面就可以了。
5.5 百度自動推送功能代碼安裝方法
對於內容量非常大的網站來說,每生成一篇文章,就去百度站長平台手動提交一次鏈接,這個不太現實,工作量太大。因此百度專門為站長提供主動提交鏈接的功能,可以提高蜘蛛抓取頻率和文章收錄,小型企業站也可以試一下。
具體操作方法:
第一步:進入百度站長平台;
第二步:根據左側功能欄,依次找到【網頁抓取】—【鏈接提交】—【自動推送】。
&
第三步:複製百度提供的這段js代碼,粘貼到你的模板header或者是footer ,這樣就可以做到全站引用,跟安裝百度統計一個道理。
JS鏈接推送代碼以網頁為最小對象,服務於全平台多終端,PC站和移動站均可使用。
安裝代碼的頁面在任意平台(瀏覽器、微信、微博)被載入時,頁面鏈接會被第一時間推送給百度,從而提高站點新內容的發現速度。
我個人偏向與直接放到footer.PHP中,這樣每次都會自動載入,不用新建文件每次調用,你也可以按照百度的安裝方法安裝。注意,把代碼放到footer.php文件時,必須放在&之前。
下面是網友博客安裝百度自動推送代碼之後的數據統計截圖,還是有一定效果的!
這是最簡單的一種方法,不管你使用的是是dedecms、wordpress、ecshop或者是其他的程序,此方法都適用!
以上。
既然看到了這裡,就關注知乎邵工吧,這樣不會迷路。
知乎最可愛的工程師——邵工
你可以在開源電子書《Growth: 全棧增長工程師指南》上了解到 Web 開發所需要的知識體系,然後在電子書《Growth: 全棧增長工程師實戰》實戰相關的內容。
《Growth: 全棧增長工程師指南》目錄
Growth: 全棧增長工程師指南
全棧工程師是未來
技術的革新史
軟體開發的核心難題:溝通
大公司的專家與小公司的全棧
全棧工程師的未來:無棧
基礎知識篇
工具只是輔助
WebStorm 還是 Sublime?
語言也是一種工具
提高效率的工具
快速啟動軟體
IDE
DEBUG 工具
終端或命令提示符
包管理
環境搭建
學好一門語言的藝術
一次語言學習體驗
輸出是最好的輸入
如何應用一門新的技術
Web 編程基礎
HTML
hello,world
中文?
其他 HTML 標記
小結
CSS
JavaScript
hello,world
JavaScriptFul
面向對象
其他
前端與後台
後台語言選擇
JavaScript
Python
Java
PHP
其他
MVC
後台即服務
數據持久化
前端框架選擇
Angular
React
Vue
jQuery 系
前台與後台交互
編碼
編碼過程
Web 應用的構建系統
Git 與版本控制
Tasking
如何 Tasking 一本書
Tasking 開發任務
寫代碼只是在碼字
內置索引與外置引擎
如何編寫測試
測試替身
測試驅動開發
可讀的代碼
代碼重構
Intellij Idea 重構
重構到設計模式
上線
隔離與運行環境
隔離硬體:虛擬機
隔離操作系統:容器虛擬化
隔離底層:Servlet 容器
隔離依賴版本:虛擬環境
隔離運行環境:語言虛擬機
隔離語言:DSL
LNMP 架構
Web 緩存
資料庫端緩存
應用層緩存
前端緩存
客戶端緩存
HTML5 離線緩存
可配置
自動化部署
數據分析
構建-衡量-學習
數據分析
用戶數據分析:Google Analytics
網站性能
SEO
爬蟲與索引
什麼樣的網站需要 SEO?
SEO 基礎知識
內容
UX 入門
認知設計
持續交付
遺留系統與修改代碼
回顧與架構設計
自我總結
Retro
架構模式
浮現式設計
每個人都是架構師
架構解耦
從 MVC 與微服務
CQRS
CQRS 結合微服務
《全棧增長工程師實戰》目錄
序:如何成為全棧增長工程師?
全棧增長工程師實戰
深入淺出Django
Django簡介
Django hello,world
安裝Django
創建項目
Django後台
第一次提交
三步創建博客應用
Tasking
創建BlogpostAPP
創建View
測試
自動化測試與持續集成
更完善的博客系統
靜態頁面
評論功能
Sitemap
站點地圖介紹
創建首頁的Sitemap
創建靜態頁面的Sitemap
創建博客的Sitemap
提交到搜索引擎
樣式與UI美化
應用API
博客列表
Django REST Framework
創建博客列表API
測試 API
自動完成
跨域支持
創建移動應用
hello,world
博客列表頁
Profile
Json Web Tokens
登錄表單
Profile
創建博客
移動單頁面應用
移動設備處理
前後端分離
Riot.js
ReactiveJS構建服務
創建博客列表頁
博客詳情頁
添加導航
配置管理
http://game.ptteng.com
我和我的女神一起做的。
不過大部分都是我寫的。
寫了整整一年半。時間應該是在2013年的時候,記不清了。
論壇里有更新日誌。
後端:mysql,Memcache,tuscany,scallop,dal,jdbc,Hibernate,websocket,tiltes,json-taglib,quartz,python,drools,fastdfs,nginx,jetty
前端:angularJs,jquery,bootstrap
源碼:git/svn
放棄:erlang
每天晚上從下班開始寫,寫到晚上11點或者是12點。
還自己做了運營推廣和數據分析。
這個網站是一個純文字版在線殺人遊戲網站。
支持:1.殺人遊戲:簡化,警版,警版不翻牌。
2.捉鬼遊戲:簡化,猜詞。
3.炸狼堡。
4.多人掃雷。
5.一起看電影
6。一起 看新聞
7.Diy遊戲室
功能上:1.支持戰例回放~這是我最喜歡的功能。
2.支持觀戰
3.支持排名,各種排名
4.支持金幣
5.支持自定義神態,動作,音樂
其他:1.集成了各種小功能。包括雅虎Pipe,多美音樂(還是別的?),美圖秀秀,淘寶等等小東西。
核心技術點:1.用Drools,通過規則引擎來實現遊戲的狀態判斷。Workflow畫的666的。寫一個遊戲規則挺簡單的,差不多兩周能把一個遊戲規則做完。
2. 採用WEBSocket通信,所以拋棄了Aja這種到現在我都不喜歡的東西。直接定義了一套遊戲的語言。參照了OWl,用主謂賓的形式來做通信。前端接收到指令之後,解析,然後執行動作。
3.整理出來一套遊戲的動作模板。開發前端界面展示更簡單。
簡單說:把遊戲分成了公共和特殊的兩部分。公共包括,加入房間,離開房間,踢人,搶管理,說話,開始遊戲,結束遊戲等。
遊戲的特殊部分,如簡化,可以分成階段(聲明是白天還是晚上),許可權,角色,動作,資源等等。角色包含殺手和水民,動作包括投票,殺人。資源包含什麼我忘記了。
總之在年青力壯的時候,設計的很Happy,而且擴展性也很好啊。別看現在只是文字 版的,想做成動畫,根本不需要改通信邏輯,前端解析動作直接做就好了。
可惜我不會動畫,也沒有UI設計師。
另外。雖然用了AngularJS,但是混雜了不少JQuery。所以很多東西用的很傻。比如。
自己把JQuery封裝成了View,Service,Controller和Util的概念。
所以後來真正理解AngularJS的時候,才是佩服的不要不要的。比我預想中的概念,特別 是filter和 directive要好的多。
是要打算一直做下去的。只是一直在忙,想要等掙錢了以後,把我心裡想像的東西做出來。
現在只是實現 了3%都不到~
所以接下來說重點。
一個人做網站需要什麼知識?
1.PM
2.運營
3.技術
4.測試
5.客服
6.運維
這是大的分類,不懂PM是完全做不出來東西的。
不是說一定要畫原型圖,而是說在做的時候,總會有太多干擾,必須要想清楚自己做什麼,想要什麼,怎麼排優先順序。
不懂運營,你就沒有用戶。用戶從哪來,怎麼註冊,怎麼帶著他們玩,怎麼傳播。如果什麼都沒有,就是一個死網站。
比如說現在的殺人遊戲-就是一個死網站了,文字 版,不做音頻視頻,只做我喜歡的文字 版。
所以沒人運營之後,大家自己也越來越忙,沒那麼多人玩了。
技術包括前面說的各種點。我好壞多少都懂一點,搜索爬蟲DB緩存分散式WEBSocketETLDrools都懂一些,否則真的搞不定這些事兒。
馬丹我就是在這個項目里學會的Drools和Erlang,看的我欲仙欲死。
前端也一樣,不過前端多靠了我的女神協助。
運維也要懂,否則伺服器隨時坑死你。
所以,說自己想要搭一個網站玩玩?看網站的難易程度吧。Discuz和Wordpress這種東西分分鐘鍾搭好。我還做過一個圈子通訊錄的App。
可是想做一個有人用的網站?很難。
據說,之前內推也是一個人做起來的,挺佩服的。
但是,一個人寫代碼最大的問題就是寂寞。
很寂寞。
寂寞如雪。
可是我很喜歡。
不請自來,我只是一隻菜鳥。
假定題主的問題是為自身技術的提升而問,請繼續看下去。 如若題主的問題是為了做一個普通的網站,請繞道別處吧。
===
既然有人點贊,就繼續補充吧,努力騙更多的贊~(≧▽≦)/~!
=== 【一、語言、工具:工欲善其事,必先利其器。
各種各樣的語言為實現功能而服務,作為一隻很菜的前端汪,當然是選擇自己最熟悉也最容易掌握的語言了——什麼爪哇(Java)請走開好么?!NodeJS顯然是首選~(≧▽≦)/~啦啦啦,(別跟我說Golang,那玩意是初學者可以輕鬆掌握の?那結構難道不是很醜?!)
一個用著舒服的編輯器( ⊙o⊙ )千真萬確可以提升寫作的速度和效率,推薦如下:
Visual Studio Code &>&> 如何評價 Visual Studio Code? - 微軟(Microsoft) Sublime &>&> Sublime Text 有哪些實用技巧? - 前端開發 IDEA/WebStorm &>&> 前者集成環境適用於各種語言的開發,後者專註前端 (IntelliJ IDEA - 話題精華
【二、知識、技能:哎喲,忘詞了!
基礎CSS知識( CSS 教程)
基礎HTML(HTML 教程)
基礎Javascript(JavaScript 教程)
資料庫操作(db) (SQL 教程)
網路請求(ajax/http)(AJAX 教程)
文件讀寫(io.file)(如果你不是和我一樣要用文件存儲,那麼db幾乎是必需的了...)
2.1 資料庫: 2.1.1 表建立(我們做博客么,自然最重要的額就是文章了,那麼post欄位如下:
id title subtitle content category author date
需要其他表的,自行換成想要的樣子,反正需求簡單,就隨便寫吧。
2.1.2 表操作 為什麼我們要說這個問題呢,你自己建啊,又是學習啊,不懂SQL以後玩毛?!
2.2 文件操作 別怪我廢話,文件操作真的很重要,但是吧,但是吧你不會可以搜索( ⊙ o ⊙ )啊!類似file.read()、file.write() 這樣的東西一定要知道一些。就算不知道,好吧,假設我們已經確定了用node的情況下,require()——也差不多勉強可以用了,反正人工約定也不是不可以~
【三、預期、需求:最起碼你得知道自己要做個什麼吧?
看到有人說自己做做著做著就成了博客,實名反對好么? 但是呢,不得不說,其實學會了做博客,其他的,基本差不多的樣子T.T ?
為什麼這麼說呢?
就目前大多數普通網站的後端主要功能就是更刪改查 。
後端:
查詢數據並Return : html(通過模板引擎渲染)/Json
驗證數據並Return : 同上
前端:
(⊙v⊙)嗯,那我們先來做個博客吧!
【四、書寫、建站:說了那麼多廢話,終於可以動工了。
假設我們要建立的如上的網站,主要模塊分為:(個人習慣,在代碼組織上以功能為模塊,受angular影響了...)
4.1 Backend 博客我們說過了,需要動用資料庫,需要進行 增刪改查 這四個基礎功能。
以我的mongodb為例吧,實現文末 *附1 的幾個功能就好了(自己懶得寫了就去copy(不對!借用別人的...)
add() put() del() get() getAll()
當然了,前端還要顯示對吧,所以頁面呢,其實差不多,也就是個靜態頁,然後最後把數據render到html上就好。怎麼玩隨你。實現不想寫頁面直接用res.send()也可以。
4.2 Frontend static indexabout基本就是靜態頁,不需要什麼東西,所以,請動用最初說的html/css基礎做一個你喜歡的頁面吧(丑也沒關係!雖然我確實很難接受...),然後留著備用嘍~
對了,忘了說,其實更好呢,是規劃一下你這個網站未來的布局、樣式、板塊呀什麼的,但是對初學者來說這些balalala的東西估計也聽不懂,後面再改去吧~ 這裡如果能規划下去,大概坑填的差不多的時候就可以建立一套自己的UI庫了。
4.3 Frontend dynamic 可能我設計不太合理,分類不明確,但是我感覺吧,前面那些都很簡單, 後端的基礎功能是很好實現的對吧?之前那段代碼(*附1)基本就是核心了。
我是把路由(訪問的url)也包含在這個分類了 (lue挑,鏈接難看的實現接受不了t..t),我的路由一般是這樣:
http: //http://www.domain.com/
Fe:
/blog
/blog/posts
/blog/post/postName
Be:
/api/blog/add
/api/blog/put
/api/blog/del
/api/blog/get/pid
/api/blog/getAll
前端與後端都是通過api這個介面來實現類似無更新刷新頁面之類的功能,準確說,這麼做就是為了我前端後台的angular服務的....(AJAX 教程)
4.4 Frontend interactive JS大法好,放到最後就是因為js的玩法太多了,所以真不好怎麼說,但凡在網站上能看到的效果都可以和它擦出愛情的火花( ⊙ o ⊙ )啊!什麼WebGl / Canvas / ( ⊙ o ⊙ )啊!各種神奇的效果都是通過它來做呀!當然了,還有各種神奇的技術,那就是前端汪的最愛( ⊙ o ⊙ )啊!
來看! A 3D FPS concept using HTML and CSS3 transforms by Keith Clark A 3D engine built using HTML and CSS 3D transforms by Keith Clark
看看這些神奇的效果,不心動么...再來? Video/Canvas Demo 1 D3.js - Data-Driven Documents
( ⊙ o ⊙ )啊!我去,好像已經偏離了方向,但是沒關係( ⊙ o ⊙ )啊!真的很好玩好么!
=== 有時間再補充,╮(╯▽╰)╭,一入前端深似海,從此節操不好買! 對了,順便貼小廣告:MT-Libraries/MT-Notes · GitHub
=== 附1 (postService):
/**
* Created by thonatos on 15/1/12.
*/
var Post = require("../model/post");
exports.postService = {
add: function (post, callback) {
var _post = new Post(post);
console.log(_post);
_post.save(function (err) {
if (err) {
callback(err);
return;
}
callback({
auth: true,
data: {
req: "/post",
res: "success",
msg: post.name + " Added."
}
});
});
},
put: function (pid, post, callback) {
Post.findById(pid, function (err, oldPost) {
if (err) {
callback(err);
}
oldPost.name = post.name;
oldPost.desc = post.desc;
oldPost.tags = post.tags;
oldPost.date = post.date;
oldPost.author = post.author;
oldPost.content = post.content;
oldPost.save(function (err) {
if (err) {
callback(err);
}
callback({
auth: true,
data: {
req: "/post/" + pid,
res: "success",
msg: post.name + " Updated."
}
});
});
});
},
del: function (pid, callback) {
Post.remove({
_id: pid
}, function (err, post) {
if (err) {
callback(err);
}
callback({
auth: true,
data: {
req: "/post/" + pid,
res: "success",
msg: pid + " Removed."
}
});
});
},
get: function (pid, callback) {
Post.findById(pid, function (err, post) {
if (err) {
callback(err);
return;
}
callback({
post: post
});
});
},
getAll: function (currentPage, perPageNum, callback) {
var perPageNum = perPageNum;
var currentPage = currentPage;
Post.count(function (err, totalRecords) {
if (err) {
callback(err);
}
Post.find().skip(( currentPage - 1 ) * perPageNum).limit(perPageNum).sort("-date").exec(function (err, posts) {
if (err) {
callback(err);
return;
}
var pageCount = ( totalRecords - totalRecords % perPageNum ) / perPageNum;
pageCount = ( totalRecords &> pageCount * perPageNum ) ? ( pageCount + 1 ) : pageCount;
callback({
pageCount: pageCount,
currentPage: currentPage,
perPageNum: perPageNum,
posts: posts
});
});
});
}
};
首先可以用模板做網站,用一些例如squarespace,wix,weebly的網站。
使用其他工具,比如用Wordpress做一個平台,進行複雜的編輯也是可以的。這需要買一個域名和空間,綁定在你的Wordpress裡面,然後上傳內容,編輯時網站的具體內容可以進行輸出。Wordpress 分為 http://Wordpress.com 和 http://Wordpress.org。http://Wordpress.com 已經幫你安排好結構,可以自己導入,進行一些快速的編輯。http://Wordpress.org得自己選擇和上傳模板,可操控性更大,但編輯起來更麻煩。
也可以直接寫代碼,然後上傳到自己的服務區和域名。如果用dreamweaver或者其他插件做一些簡單的coding網站不難,這種情況下需要掌握簡單的javascript,CSS,jqurey,Angular JS 等技巧。
更多相關內容在
JinCao 曹金的live
JinCao 曹金 - 知乎專欄
我來分享一個單人建站所需要的最低配的知識點 ,說得太多把想要學習建站的同學都給嚇跑了,那就有點對不住人家了。
購買域名和伺服器 html+css基礎 cms內容管理系統的運用 配置伺服器
1.html是超文本標記語言。 網站上的內容有是由圖片、文字、視頻、音頻構成的,由html標籤則將其區分標記。 例:瀏覽器中的圖片、超級鏈接文本的默認樣式。各個元素盡顯本色,簡陋不堪。
2.css是用來控制網站外觀的計算機語言。 例如:經過css樣式美化後,網站上的字體大小、顏色、元素間的間距發生了變化,網站開始就變得美觀、易讀了起來。
3.什麼是伺服器? 你把伺服器理解為是一台存放網站數據內容的電腦就可以啦。 4.域名是幹什麼的? 域名與伺服器綁定後,可在瀏覽器的地址欄輸入域名訪問網站內容。 5.cms是什麼? cms是內容管理系統,用來管理網站數據內容的。網站的所有數據及代碼都封裝在cms系統。cms運行存儲在伺服器這台電腦中。
這個話題我要來一發,因為我正在干這個事情。 以上的不少答案都說出了不少乾貨,我就不重複了,我說我的步驟。
我說下我自己的技術背景吧: 專業:工商管理 工作:1年設計、2年純前端、半年前端+後端、半年純後端。
我目前在做的是一個分享類的問答網站,某一個細分類的,是什麼類型的就不說了。 開發時間主要集中在晚上和周日(萬惡的周六上班公司...)。
不廢話了,直接說項目開始的步驟。
一、產品分析階段
需求分析
功能模塊劃分
用戶使用流程草圖
原型草圖
這一階段沒有什麼技術要求,主要工具就是鉛筆加A4紙。麻煩一點的地方在於需求分析的過程中不斷有新的想法,推翻之前的重來,所以草稿畫了四五十張吧,目前是第一版需求。
技能:會削鉛筆、會畫線、會寫幾個字即可。 工具:鉛筆1支,中性筆一支,A4紙一盒 用時:跨度一個月,工作時間約60+小時吧。
二、設計階段 1. 參考各類分享、問答類網站。 2. 仔細設計UI流程。 3. 網站設計規範制訂:用色、Logo、通用組件、尺寸、自適應移動端方案等 4. 按功能模塊開始設計。 這一階段比較痛苦,設計是一個很扯淡的工作,因為沒人審稿,自己要求也不嚴格,所以初期的時候隨便弄了。待出了七八個頁面之後發現這也太!丑!了!。 於是重來,重來,重來... 幾版之後依然不滿意,哎,先這樣了,算了。
技能:會開機、會PS。 工具:筆記本電腦一台、PS軟體一個(破解版的) 參考:各類網站,http://www.pinterest.com 給我的參考最多... 嘿嘿 用時:跨度一個月,工作時間大約100多個小時吧。
三、資料庫表設計 這沒什麼好說的,根據業務來分表,具體也不好表述。
技能:SQL基本知識、資料庫基本知識 工具:sublime,sql 用時:10小時
四、前端技術 1. 技術選型 2. 開發環境搭建 3. 靜態頁、css組件、js組件、前端業務邏輯 最開始在猶豫是先寫React-Native App還是先寫PC網站。 後面想了想還是先寫PC,原因三點: 1. UGC網站沒有PC端會對內容產生環節帶來極大的不便。 2. App推廣我沒錢。 3. PC我熟啊!
說一下技術選型吧。 首先只支持ie8+,或者ie9+。 業務框架:因這個網站的與用戶交互還是蠻多的,所以mvvm框架是必須的,所以選了React,因為現在還沒有開始寫業務代碼,後面用Angular或Vue也說不一定。 交互組件:因在前公司寫了一套React的組件,大約有十多個,可以拿來重用,所以組件就用React來寫了。 CSS:CSS Modules 想來想去沒必要,小網站搞這麼多花樣做個啥呢。大手一揮,取bootstrap的less工具過來定製,相當的爽利。 構建:webpack 優化:還沒有
技能:熟悉CSS語言、熟悉UI模塊化、熟悉組件化、熟悉bootstrap。熟練的使用JavaScript完成前端的大部份業務(交互、通訊、展示)及組件,非常熟悉一兩個前端JS框架(讀過核心源碼或有不少的實際運用經驗)。 工具:lesswebpackwebstorm 用時:進行中,目前50+小時
五、後端技術。 1. 語言選擇 2. 架構設計 3. 開發環境搭建 4. 域名、伺服器購買 5. 版本控制
語言在Java和Nodejs之間搖擺了很久,想用Java來練手(其他的不會,C略懂,但是用C寫伺服器估計比較虐),都用Java寫了一些了,後面刪了,改用Node。因為項目後面會有其他朋友加入進來,都是Nodejs背景的,權衡之下,用Node了。
架構設計就比較扯淡了: 讀寫分離?沒有。 分散式?沒有。 其他呢?也沒有。 為什麼沒有?因為沒弄過啊!邊寫邊學習吧!
開發環境主要包括: 1. typescript環境,Nodejs用ts來寫,所以有構建環境(gulp+ts+babel)。 2. 工程目錄劃分。 3. 模塊劃分,模塊目錄。 4. Node服務層(session
outerviewstatic等) 5. 系統穩定層 (運行日誌、性能監控、惡意請求捕獲等) 6. 資料庫:當然是mysql... 7. 安全層:準備在程序外層套一個安全過濾器,具體怎麼做還沒想好,大概是在Node層外加 一個安全檢測層,主要檢測請求的合法與否,這一層應該有session驗證、防注入、sign驗等。 目前還沒做。
域名註冊了幾個.top域名,嘿嘿,相當的便宜...最貴的一個才3200,最便宜的5塊還是2塊忘了。 伺服器在阿里雲買了個最便宜的64塊一月,結果裝gitLab裝不上,被逼升了2G內存,120來塊一月吧。
版本控制就是gitLab了。
技能:一門或多門後端語言、SQL、資料庫、http cpsocketcookie通訊、基本的Linux操作、ssh遠程基本知識、git基本知識、伺服器-&>客戶端數據流轉基本概念、基本安全知識、基本加密及驗證知識 工具:babelgulp ypescriptkoamysqlgit 用時:目前40小時左右 坑:第三方庫的d.ts文件真的差太多了,邊寫業務代碼邊補d.ts真是太刺激...
哦,對了,還有測試。 目前只有單元測試,而且只有功能模才有單元測試,業務模塊沒有... 測試框架選個常用的mocha就好了。
大約就是這些。 個人網站具備這些知識可以運營起來了。
Let me answer this question as someone who is working in this industry for some years. I did website for international clients in germany and china in the past.
1. Domain name Thing you need to the Consider of First IS under your name Website Which Will BE Reachable. The http://example.com the For Example, there are "several" Website Domain Which the offer to names like https://iwantmyname.com . But the with the before you SHOULD BE Familiar at The Which the DNS Protocol translates domain names to ip addresses, this is important in the next step.
2. Webhoster Remember at The Back Days in the I i WAS A as Free webhoster like a using bplaced - Webhosting Webspace :: // 2GB freehost at The Place for your webspace to Host My Website at The Responsible to the Save you webhoster IS ON A Server Files, Which Makes Them the Available. publicly under a certain IP-Adresse. to Upload the files to the server you use some program like Filezilla, which connects to the server via FTP protocol.
3. Making a page After you know the basics on how to upload content to the internet its easy to upload images or whatever you want and share it with the world. To make a website you should learn HTML + CSS http://www.w3schools.com/HTML /
A simple website would be something like that
&
&
&Hello world&
&
&
Hello world
&
&