同步操作将从 mikey.zhaopeng/teamsalt 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
teamsalt是一个在线的团队写作任务管理系统。
teamsalt是team+salt(盐),寓意就是作为盐一样,成为团队中不可缺少的系统。
系统设计参考了teambition、tower、worktile、fengcheco等。
http://teamsalt.duapp.com/
user: admin
password: 1
搭建在bae上面,使用bae2.0,可能访问不太稳定,打算迁移到其他平台上面。
后台使用jfinal进行开发,具体开发,请查看jfinal开发手册,30分钟就可以阅读完了。
.
├── com
│ └── teamsalt
│ ├── common
│ │ ├── Message.java // 请求返回 json 对象封装类
│ │ ├── TeamsaltConfig.java // jfinal 配置
│ │ └── TeamsaltConstants.java // 常量类
│ ├── controller
│ │ ├── CommentController.java // 评论 controller
│ │ ├── IndexController.java // 首页 controller
│ │ ├── InviteController.java // 邀请用户 controller
│ │ ├── ProjectController.java // 项目 controller
│ │ ├── TaskController.java // 任务 controller
│ │ ├── TasklistController.java // 任务列表 controller
│ │ └── UserController.java // 用户 controller
│ ├── filter
│ │ ├── MainFilter.java // 使用Filter过滤main.html页面,解决jfinal无法过滤静态html的问题
│ │ └── xss // XSS 过滤拦截
│ │ ├── CrossScriptingFilter.java
│ │ ├── HTMLFilter.java
│ │ └── RequestWrapper.java
│ ├── interceptor
│ │ ├── CheckLoginInterceptor.java // 当访问/login页面的时候,判断是否已经登录,已经登录,则跳转到/home
│ │ └── GlobalLoginInterceptor.java // 全局用户登录拦截器
│ ├── kit // 常用的一些工具类
│ │ ├── ConfigKit.java
│ │ ├── ContextKit.java
│ │ ├── CookieKit.java
│ │ ├── DateKit.java
│ │ ├── HtmlTagKit.java
│ │ ├── PwdKit.java
│ │ └── UuidKit.java
│ └── model // model 层的各种对象
│ ├── Comment.java
│ ├── Invite.java
│ ├── InviteUser.java
│ ├── Project.java
│ ├── ProjectTasklist.java
│ ├── ProjectUser.java
│ ├── Task.java
│ ├── Tasklist.java
│ ├── TasklistTask.java
│ └── User.java
├── log4j.properties // log4j 配置
└── S.java // 采用 jetty 的启动类
代码开发比较简单,具体查看jfinal手册就能进行代码开发了。
前台采用单页面应用程序(SPA)的开发方式,完全可以和后台分离出来,部署在不同的服务器上面,而且可以将前台用 phonegap 之类的工具,打包成android、ios、winPhone等的应用,起初也就是这么设计的。
js 文件的代码路径是在teamsalt/WebContent/js
中,具体说明如下。
.
├── app // 这个是压缩代码后产生的文件地方
│ ├── common
│ ├── model
│ ├── object
│ ├── router
│ ├── ui-component
│ ├── view
│ └── widget
├── dist // 这个是压缩时候的临时文件
│ ├── common
│ ├── model
│ ├── object
│ ├── router
│ ├── ui-component
│ ├── view
│ └── widget
├── gallery // 这个是需要的插件包
│ ├── backbone
│ ├── bootbox
│ ├── bootstrap
│ ├── contextmenu
│ ├── datepicker
│ ├── dropdownx
│ ├── notify
│ ├── perfect-scrollbar
│ ├── popbox
│ ├── select
│ ├── tags
│ ├── template
│ ├── underscore
│ └── xdate
├── jquery // jquery
│ └── jquery
├── node_modules // 使用 grunt 需要的插件,已经提供
│ ├── grunt
│ ├── grunt-cmd-concat
│ ├── grunt-cmd-transport
│ ├── grunt-contrib-clean
│ └── grunt-contrib-uglify
├── seajs // seajs
│ ├── 1.3.1
│ ├── plugin-log
│ ├── seajs
│ └── seajs-text
└── src // 这个是程序的源代码了
├── common // 公共工具
├── model // model 层
├── object // 自定义的一个 map 对象
├── router // 路由器
├── ui-component // 自定义的 ui 组件
├── view // view 层
└── widget // 自定义的 widget 组件
采用 seajs 和 backbone 进行代码架构,同后台同样的 mvc 模式开发。
user.js
define(function(require, exports, module) {
var $ = require('jquery');
var _ = require('underscore');
var Backbone = require('backbone');
var User = Backbone.Model.extend({
getUser : function(params, success) {
var url = '/user/profile/';
var self = this;
Util.query.g(url, '', function(result) {
success(result.other, params);
});
},
getUsersByProjectIdAndTaskId : function(params, success, error) {
this.fetch({
url : '/data/' + Util.curProjectId + '-users.json',
success : function(model, response, options) {
success(response);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
error(arguments);
}
});
},
getUsersByProject : function(params, success, error) {
var url = '/user/getProjectUsers';
Util.query.g(url, params, function(result) {
success(result.other);
});
},
// 得到所有用户
getAllUser : function(params, success) {
var url = '/user/getAllUser';
Util.query.g(url, '', function(result) {
success(result.other);
});
}
});
module.exports = User;
})
虽然叫做 view 但是在架构上面,担任的是 contro 层的功能。
layout.js
/**
* @author zhaopeng
* @datetime 2013-08-27
* @description 程序任务主界面入口
*/
define(function(require, exports, module){
var $ = require('jquery');
var _ = require('underscore');
var Backbone = require('backbone');
var Bootstrap = require('bootstrap');
// 布局模板
var layoutHtml = require('./tpl/layout.html');
// 模板
var ProjectBar = require('./header/projectBar');// header左侧项目切换bar
var UserinfoBar = require('./header/userinfoBar');// header右侧用户信息bar
var SidebarTasklist = require('./sidebar/sidebar-tasklist');// 左侧侧边栏
var SidebarUser = require('./sidebar/sidebar-user');// 左侧侧边栏
var ListPanel = require('./container/listPanel');// container左侧列表
var DetailPanel = require('./container/detailPanel');// container右侧详情
var CommonView = require('./commonView');// 公共组件VIEW
//模型
var Comment = require('../model/comment');
var Project = require('../model/project');
var Task = require('../model/task');
var Tasklist = require('../model/tasklist');
var User = require('../model/user');
var Laoyout = Backbone.View.extend({
el: 'body',
events:{
'updateCommon #sidebar':'updateCommon',
'updateCommon #list-panel':'updateCommon',
'updateCommon #detail-panel':'updateCommon',
'deleteTask #detail-panel':'deleteTask',
'updateTask #detail-panel':'updateTask'
},
initialize: function() {
this.$el.html(Util.tpl.t(layoutHtml,{})).hide().show('1000');
// 初始化模型,全部记载到map中
this.comment = new Comment();
this.project = new Project();
this.task = new Task();
this.tasklist = new Tasklist();
this.user = new User();
Util.Models.put('comment',this.comment);
Util.Models.put('project',this.project);
Util.Models.put('task',this.task);
Util.Models.put('tasklist',this.tasklist);
Util.Models.put('user',this.user);
// 初始化布局界面
this.projectBar = new ProjectBar();
this.userinfoBar = new UserinfoBar();
this.sidebarTasklist = new SidebarTasklist();
this.sidebarUser = new SidebarUser();
this.listPanel = new ListPanel();
this.detailPanel = new DetailPanel();
Util.Views.put('projectBar',this.projectBar);
Util.Views.put('userinfoBar',this.userinfoBar);
Util.Views.put('sidebarTasklist',this.sidebarTasklist);
Util.Views.put('sidebarUser',this.sidebarUser);
Util.Views.put('listPanel',this.listPanel);
Util.Views.put('detailPanel',this.detailPanel);
},
updateCommon:function(e){
CommonView.init();
},
//删除任务后,同步删除列表中的数据
deleteTask:function(e,result){
this.listPanel.deleteTask(result.uuid);
},
//更新任务后,同步更新列表中的数据
updateTask:function(e,result){
this.listPanel.updateTask(result);
}
});
module.exports = Laoyout;
})
使用 artTemplate 模板引擎,模板文件都存放在对应的 tpl
文件夹下。
layout.html
<nav id="header" class="navbar navbar-default navbar-inverse navbar-static-top navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="project-bar" class="nav navbar-nav">
</ul>
<a class="navbar-brand" href="#" style="margin-left: 40%;">teamsalt</a>
<ul id="userinfo-bar" class="nav navbar-nav navbar-right">
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<aside id="sidebar">
<section id="sidebar-tasklist" class="sidebar-menu">
</section>
<section id="sidebar-user" class="sidebar-menu">
</section>
</aside>
<div id="container" >
<div id="list-panel" class="bor-r">
</div>
<div id="detail-panel">
</div>
</div>
<div class="notifications top-right"></div>
根据系统到 http://nodejs.org/ 下载安装对应的 nodejs。我用的是 linux 编译后的版本,在 .bashrc
将 nodejs 添加到环境变量就好了。 如果是 windows 直接安装就可以了。
使用-g全局安装,这样可以在任何一个目录里使用了。命令: npm install -g grunt-cli
需要注意的是在 linux 或 mac 下有时会报没有权限的错误,这时须在前面加一个 sudo
代码中已经包含了 grunt 需要的插件,所有只需要安装 grunt 就可以了。
进入目录,使用命令: npm install grunt --save-dev
至此,安装完毕。
在 Gruntfile.js 中提供了一下几个命令。
grunt build-t // 执行 transport
grunt build-c // 执行 concat
grunt build-u // 执行 uglify
grunt build-min // 执行压缩
grunt build-all // 执行以上所有命令
grunt // 执行 clean, 删除 app 和 dist 目录
压缩提醒
teamsalt/WebContent/js/app/
,如果部署只需要将app.js
上传到服务器就可以了。 // For development
if (location.href.indexOf("?pro") > 0) {
seajs.use("app/app");
}
// For production
else {
seajs.use("src/app");
}
对目前此系统暂停开发,全心专注进行第二个版本的开发,第二个版本具有更好的架构设计,更轻快的开发速度,更多的功能特性。在基本版本完成之后,同样也会选择开源的方式进行发布。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。