km之路--007 km 前端 base 01

技術列表

html5

css3

jquery

jquery-plugin[包括本身寫的插件和下載的插件]

easyui

es5

grunt

js模板引擎[沒找到合適的,本身從0開始寫]

 

目錄結構

 

 

 1 assets : 靜態資源,包括CSS,JS,圖片等
 2 
 3 assets/css/common : 通用css,好比reset.css
 4 
 5 assets/css/km-blog : 博客模塊的CSS 
 6 
 7 assets/css/km-web : 網站首頁模塊的CSS 
 8 
 9 ==========
10 
11 assets/image : 圖片資源
12 
13 assets/imaage/static : 靜態資源圖片,好比背景圖片等
14 
15 assets/imaage/static : 動態資源圖片,好比用戶頭像
16 
17 
18 ===========
19 
20 assets/js : 前臺項目JS文件
21 
22 assets/js/jquery : jquery 相關
23 
24 assets/js/jquery/jquery : jquery 文件
25 
26 assets/js/jquery/jquery/plugin : 官方或別人開發的jquery插件
27 
28 assets/js/lib : 個人JS庫
29 
30 assets/js/lib/core : 本項目核心庫,包括通用JS邏輯和本身封裝的JS函數
31 
32 assets/js/lib/km-blog : 博客模塊JS
33 
34 assets/js/lib/km-web : 首頁模塊JS
35 
36 assets/js/lib/km-jquery-plugin : 本身寫的jquery插件
37 
38 assets/js/lib/kmtpl : 本身寫的js模板引擎.其實也是基於jquery的一個插件,不過我打算單獨提出來,畢竟和其餘插件不同
39 
40 
41 ==========
42 
43 dox : 包括hosts文件 , nginx.conf文件 , 項目說明文檔等
44 
45 ============
46 
47 html : HTML文件
48 
49 html/km-blog : 博客模塊
50 
51 html/km-web : 首頁模塊
52 
53 html/km-manager : 後臺管理模塊,這個模塊不依賴其餘文件/目錄,單獨成項,只是爲了目錄結構更加清晰才放在這裏
54 
55 html/km-manager/assets : 後臺管理模塊用到的靜態資源,如easyui的庫文件等
56 
57 html/km/manager/html : 後臺管理模塊的頁面,因爲後臺模塊暫時用easyui作,不是extjs那種一個頁面就能搞定,因此特設此目錄
58 
59 =========
60 
61 node_modules : 各類grunt 包
62 
63 ==========
64 
65 testphp : 供前端頁面測試用的php文件
66 
67 ============
68 
69 Gruntfile.js package.json package-lock.json : grunt/node相關配置文件

 

 

 命名規範

css/js

全部CSS文件和JS文件命名規範以下:

km-common.css km-common.min.css
km-blog-index.css km-blog-profile.min.css

km-core.js km-config.min.js

 

也就是:km-模塊名-子模塊名[.min].css/js

圖片[未定]

暫時沒有想好

 

所用到的grunt插件

合併文件：grunt-contrib-concat
語法檢查：grunt-contrib-jshint
Scss 編譯：grunt-contrib-sass
壓縮js文件：grunt-contrib-uglify
監聽文件變更：grunt-contrib-watch
壓縮css文件:grunt-contrib-cssmin

 

首頁模塊頁面設計參考

首頁暫時只包括header和footer,中間內容暫時不作設計

用戶我的空間後臺管理參考博客園,用easyui實現

 

博客模塊頁面設計參考

首頁參考開源博客

我的博客空間參考CSDN

博客詳情頁參考CSDN[目錄單獨設計]

博客專欄頁參考CSDN

博客評論與回覆參考知乎[要有查看對話功能]

 

測試數據

好吧,用PHP生成測試數據對我來講不太現實,我仍是直接用spring mvc吧,這樣直接把跨域也解決了

 

實現順序

1. 首頁模塊

包括首頁和我的後臺管理

2. 博客模塊

2.1 博客首頁

2.2 我的博客空間

2.3 博客詳情頁

2.4 博客專欄頁

2.5 博客評論與回覆功能

3. 後臺管理模塊