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