Node.js 切近实战(十) 之Excel在线（共享文件）

本篇文章我就不罗嗦了，主要讲的是共享文件列表，主要功能就是查看别人共享的文件。

打开该界面，用户能够在左侧看到共享文件的人员的信息，点击该人能够查看该人共享了哪些文件。在Grid里面有查看文件修改记录，编辑，标记为星标文件等功能。OK，咱们先看一下UI代码。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

div(style='padding:5px;')  include ../common/search.jade .row-margin  hr.panel-line   #splitter(style='height:750px;')  div     ul#div_pane.state-selected      li.k-state-active        span.k-link.k-state-selected All Users        div(style='padding:5px')         a(href='javascript:void(0)' onclick='showFileList("",null,null,null)')          table.link-pane-list           tr            td(rowspan='2' style='width:55px')             img.round-img(src='/images/userlogin.png')            td(style='padding-left:20px;')             h5 All Users             div Newegg       - for(var i=0;i<docs.length;i++){        li        span.k-link #{docs[i]._id}         span(style='color:red;margin-left:5px') (#{docs[i].total})        - var users = docs[i].users;        - for(var j=0;j<users.length;j++){        div(style='padding:5px')         a#link_user(href='javascript:void(0)' onclick='showFileList("#{users[j].userId}",null,null,null)')          table.link-pane-list           tr            td(rowspan='2' style='width:55px')             img.round-img(src='data:image/png; base64,#{users[j].photo}')            td(style='padding-left:20px;')             h5 #{users[j].userName}             span #{users[j].jobtitle}        - }      -}  #file_sharedlist   #wd_details   script#popup_detail(type="text/x-kendo-template")  dl   dt    label File Name:   dd #=fullname#   dt    label CreateDate:   dd #=kendo.toString(createdate,'MM/dd/yyyy HH:mm tt')#   dt    label LastEditUser:   dd #=lastedituser#   dt    label LastEditDate:   dd #=kendo.toString(lasteditdate,'MM/dd/yyyy HH:mm tt')#   block scripts  script(type='text/javascript' src='/javascripts/local/doc/docshared.js')

看到吧，UI其实很简单，最上面引用了一个公共search页面，而后下面又看到了for循环，不错，又使用了jade的视图特性。在这里实际上是循环构造咱们的kendoPanelBar中的内容，注意这里的onclick,调用showFileList拿到该用户所共享的文件。接下来注意这里的img用户图像，在MongoDB中咱们存储的是一个Base64位的字符串，因此咱们展现图片的时候要写成下面这样。

1	img.round-img(src='data:image/png; base64,#{users[j].photo}')

咱们看一下这个photo字段到底存储的是什么。

真的是Base64的字符串。在C#中，咱们很容易将一张图片转化成base64，可是在Node.js中咱们办呢。

1 2 3 4

var request = require('request'); request({ url: session.user.Avatar, encoding: null }, function (err, res, body){     var image = body.toString('base64'); });

这段代码的意思是咱们实用request模块，下载图片，而后将图片转化成base64，注意这里的toString是node.js平台提供的，咱们不须要引用任何外部模块，在该系列博客中，咱们引用了好多模块

就连cassandra这么高大上的东西都有，简直了，不说了。这一系列的其实都是些皮毛，等这一系列讲完，咱们还有更高层次的实战，这些篇其实都是给初学者看的，是鸡肋。OK，咱们看一下后台代码。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

router.get('/docshare', function (req, res) {     userSchemas.userModel.aggregate([{             $match: { userid: { $ne: session.user.UserID } }         }, {             $sort : { _id: 1, userid: 1 }         }, {             $group : {                 _id : '$department', total : { $sum : 1 },                  users: {                     $push: {                         userId: '$userid',                          userName: '$username',                         avatar: '$avatar',                         jobtitle: '$jobtitle',                         department: '$department'                         photo: '$photo'                     }                 }             }         }]).exec(function (error, doc) {         res.render('document/docshare', { docs: doc });     }); });

这个语句初学者看起来感受灰常郁闷，没关系，这段其实就是使用了聚合函数而已。首先$match是匹配条件，$sort是排序，根据userid和主键排序。$group其实就是分组了，分组的条件就是用户所在的部门，总数累加1。最后将分组的对象放到users中，并指定每一个对象所包含的属性。最后将页面输出到客户端，客户端页面直接循环docs进行左边panelBar的渲染。

OK，左边就说完了，右边的话其实就是个kendoGrid，以前也说了好屡次，在这里就再也不赘述。点击Grid中的星标按钮的代码以下。

1 2 3 4 5 6 7 8 9

function markFile(e) {     var dataItem = this.dataItem($(e.currentTarget).closest("tr"));     $.post('/file/mark', { fileId: dataItem._id }, function (res) {         if (res.isSuc) {             debugger             showMsg('info','The file marked successfully!');         }     }); }

后台代码以下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

exports.fileMark = function (req, res) {     var fileMarkEntity = new fileMarkModel({         userid: session.user.UserID,         file: req.body.fileId     });           fileMarkModel.findOne({ userid: session.user.UserID, file: req.body.fileId }, function (error, doc) {         if (!doc) {             fileMarkEntity.save(function (error, doc) {                 if (error) {                     res.json({ isSuc: false, msg: error.message });                 }                 else {                     res.json({ isSuc: true });                 }             });         }         else {             res.json({ isSuc: true });         }     }); }

星标邮件，咱们能够在专门的页面查看。

在该页面能够查看标记的星标文件，而且能够取消标记，看一下这个页面的代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

.row-margin hr.panel-line div#div_file(style='min-height:350px;max-height:350px')  - for(var i=0;i<docsMark.length;i++){     -if(i%10==0){        .clear-float     -}     div.row-margin(style='width:10%;float:left')      -if(docsMark[i].file){        div.center-align-text         input.k-checkbox(id='chk_marked#{docsMark[i].file._id}' type='checkbox' value='#{docsMark[i].file._id}')         label.k-checkbox-label(for='chk_marked#{docsMark[i].file._id}')          span.glyphicon.glyphicon-star-empty        a(href='javascript:void(0)' style='text-decoration: none;color:#666666')         img.excel-img(id='#{docsMark[i].file._id}' src='/images/excel_share.png')           div(style='word-break: break-word;width:90px;') #{docsMark[i].file.fullname}      -}      -else{        div.center-align-text         input.k-checkbox(id='chk_marked#{docsMark[i]._id}' type='checkbox')         label.k-checkbox-label(for='chk_marked#{docsMark[i]._id}')          span.glyphicon.glyphicon-star-empty        a(href='javascript:void(0)' style='text-decoration: none;color:#666666')         img.excel-img(id='#{docsMark[i]._id}' src='/images/excel_share.png')           div(style='word-break: break-word;width:90px;') #{docsMark[i].fullname}      -}  -} .clear-float

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

router.get('/page', function (req, res) {     if (req.query.q == 'm') {         res.render('document/docself');     }     else if (req.query.q == 's') {         res.redirect('/docshare');     }     else if (req.query.q == 'c') {         res.render('other/chatroom');     }     else if (req.query.q == 'r') {         fileAuthSchemas.authModel.find({}, function (error, doc) {             res.render('authorization/docauth', { authArray: doc });         });     }     else if (req.query.q == 'u') {         fileMarkSchemas.filemarkModel.find({ userid: session.user.UserID })         .populate('file')         .exec(function (error, docMark) {             var markFileIdArray = [];             docMark.forEach(function (v) {                 markFileIdArray.push(v.file._id);             });             var query = fileSchemas.fileModel.find({ lastedituserid: session.user.UserID, _id: { $nin: markFileIdArray } });             query.sort('-lasteditdate').limit(20).exec('find', function (error, docRecent) {                 res.render('document/docrecent',                  {                     totalMarkCount: docMark.length || 0,                      docsMark: docMark || [],                     totalRecentCount: docRecent.length || 0,                      docsRecent: docRecent || []                 });             });         });     } });

注意最后的一个页面就是咱们的最近使用页面，咱们不只返回星标文件，并且返回最近使用文件。在获取最近使用文件的时候，排除星标文件。

1	var query = fileSchemas.fileModel.find({ lastedituserid: session.user.UserID, _id: { $nin: markFileIdArray } });

注意这里的$nin，就是not in的意思。其实fileMark collection中存储了文件和用户的关系。

在这里我把nosql用的像sql同样。

OK，这篇文章就讲到这里，进来看了但愿你可以评论一下，也许我会送源码给你。学习请加群：548635112（Node.js实战）

 

结束语

 

免费学习更多精品课程，登陆乐搏学院官网http://h.learnbo.cn/

或关注咱们的官方微博微信，还有更多惊喜哦~

 

本文出自 “技术创造价值” 博客，请务必保留此出处http://leelei.blog.51cto.com/856755/1813970