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. 后台管理模块