项目文件功能分析
在dir-dest.txt项目描述文件的基础上对NiceFish项目每个文件模块的功能做一下简单的描述:
├─app
│ ├─animations //这里定义了动画效果
│ │ ├─fade-in.ts //定义淡入淡出动画模块
│ ├─chart //图表组件,这里结合了echarts
│ ├─comment //这里是添加评论组件
│ │ ├─add-comment //页面显示增加评论和显示评论列表功能
│ │ ├─model //评论对象模型(类似java里的class)
│ │ └─services //从服务器获取评论列表(这是个angular服务)
│ ├─home //这是首页组件
│ │ ├─online-contact //"QQ群-请勿加多个"这一模块
│ │ ├─social-channel //"社交媒体"这一模块
│ │ ├─home.component.html //首页视图文件
│ │ ├─home.component.scss //首页样式文件
│ │ ├─home.component.ts //首页组件逻辑
│ │ ├─home.module.ts //首页模块定义,包含有online-contact ,social-channel,home.component.ts等组件
│ │ ├─home.routes.ts //首页模块路由(定义左侧文章列表postlist模块的子路由地址)
│ ├─jsplumb-demo //制作jsplumb流程图(jsPlumb是一个强大的JavaScript连线库,
//它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等)
│ ├─manage //这是管理员后台模块(包含以下很多组件)Console按钮点进去
│ │ ├─comment-table //评论管理组件包括评论列表和搜索评论(http://localhost:4200/user/commenttable/page/1)
│ │ ├─manage-main //Console右侧栏目,系统管理栏目组件
│ │ ├─post-table //Console左侧文章管理组件包括文章搜索和文章列表(http://localhost:4200/manage/posttable/page/1)
│ │ │ └─services //文章管理的各种服务包括获取列表,删除文章,编辑文章
│ │ ├─sys-param //系统设置组件包括文章,评论,用户名密码等参数设置
│ │ └─user-table //用户管理组件包括用户搜索,用户列表
│ ├─post //地图模块
│ ├─post //这是跟文章有关的组件,文章模块包括文章详情和列表以及创建新的文章
│ │ ├─model //定义文章对象(类似java文章class类)
│ │ ├─post-detail //文章详情查看组件http://localhost:4200/posts/postdetail/1
│ │ │ └─services //向服务器获取文章详情服务
│ │ ├─post-detail-main //文章主视图里面包括文章详情视图,登录视图,评论列表视图,作者信息视图,这里写成了一个组件
│ │ ├─postlist //文章列表组件包括搜索文章,发表文章
│ │ │ └─services //getPostList方法获取文章列表服务
│ │ └─write-post //这是写文章组件,需要参考TinyMCE编辑器和ng2集成的请看这里
│ ├─shared //包含国际化功能模块,用户登录注册等功能的表单组件
│ ├─sitestat //网站记录汇总以及时间显示组件
│ ├─user //这里是与用户相关的组件构成的模块
│ │ ├─forget-pwd //找回密码组件
│ │ ├─model //用户对象模型(类似java的user class)
│ │ ├─user-info //用户头像,昵称,文章数,评论数等信息展示和关注组件(@Input和@Output的用法请参考这个目录)
│ │ ├─user-login //用户登录组件(模板驱动型表单请参考这个目录)这个组件在其他地方也有用到所以关联
│ │ ├─user-main //用户详情主界面,左边是文章列表,右边是用户基本信息
│ │ ├─user-profile //用户基本信息设置组件(动态表单请参考这个目录)http://localhost:4200/user/profile
│ │ │ ├─dyn-form //<form-control/>组件根据配置信息编译成指定的input类型
│ │ │ └─field
│ │ │ └─user.profile.component //里面form的input是用ng-for动态生成的子组件是<form-control/>
│ │ └─user-register //用户注册组件(响应式表单请参考这个目录)
│ │ └─directives //密码两次输入是否相同的指令
│ └─utils
├─assets //这个目录里面是一些CSS、字体图标、图片等
│ ├─bootstrap-v3.3.7
│ ├─css
│ ├─fonts
│ │ ├─bootstrap
│ │ ├─icomoon
│ │ │ └─icomoon
│ │ │ ├─demo-files
│ │ │ └─fonts
│ │ └─simple-line-icons
│ ├─i18n //详情用法见ng-translate
│ ├─imgs
│ └─skins
│ └─lightgray
│ ├─fonts
│ └─img
├─documentation
├─environments //项目运行环境配置文件
└─mock-data //测试数据全部放在这个目录里面,【注意】这个目录需要你手动拷贝到Tomcat去