码迷,mamicode.com
首页 > 其他好文 > 详细

km之路--007 km 前端 base 01

时间:2018-01-01 23:33:56      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:动态   css3   一个   引擎   core   语法   s函数   stat   文档   

技术列表

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

 

km之路--007 km 前端 base 01

标签:动态   css3   一个   引擎   core   语法   s函数   stat   文档   

原文地址:https://www.cnblogs.com/khlbat/p/8168954.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!