node. js closest Combat (10) of Excel Online (shared file)

I will not talk about this article, the main thing is to share a list of files, the main function is to view the files shared by others.

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/83/F6/wKioL1eB-6SzQRnoAACfJTq-o-c136.png "title=" Qq20160710153858.png "alt=" Wkiol1eb-6szqrnoaacfjtq-o-c136.png "/>

Opens the interface where the user can see information about the person who shared the file on the left, and click on that person to see which files the person has shared. In the grid, there are functions such as viewing file modification record, editing, marking the star file. OK, let's look at the UI code first.

Div (style= ' padding:5px; ') &NBSP;INCLUDE&NBSP, .... /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   &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;TD (rowspan= ' 2 '  style= ' width:55px ')              img.round-img (src= '/images/userlogin.png ')   &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;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&nBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;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_detailsscript# 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 ')

See, the UI is actually very simple, the top refers to a public search page, and then see the For loop below, good, and the use of Jade's view features. Here is actually looping constructs our Kendopanelbar content, notice here the onclick, call Showfilelist to get the file that the user shares. Next take note of the IMG user image here, in MongoDB we store a Base64 bit of string, so we show the picture when it is written as follows.

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

Let's take a look at what this photo field actually stores.

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/83/F7/wKiom1eB-DPCCLDuAABt-UAzicM801.png "title=" Qq20160710152419.png "alt=" Wkiom1eb-dpcclduaabt-uazicm801.png "/>

Really is a string of Base64. In C #, it's easy to turn a picture into a base64, but we do it in node. js.

var request = require (' request '); Request ({Url:session.user.Avatar, encoding:null}, function (err, res, body) {var i Mage = body.tostring (' base64 ');});

This code means that we use the request module, download the image, and then convert the image to Base64, note that the ToString here is provided by the node. JS platform, we do not need to reference any external modules, in this series of blogs, we quoted a lot of modules

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/83/F6/wKioL1eB-Tbjy6e_AAA-gDMqVR8135.png "title=" Qq20160710152815.png "alt=" Wkiol1eb-tbjy6e_aaa-gdmqvr8135.png "/>

Even Cassandra such a big thing all have, simply, don't say. This series is actually some fur, and so on, and so on, we have a higher level of actual combat, these articles are actually for beginners to see, is chicken ribs. OK, let's look at the backstage code.

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 });     });

This sentence beginner seems to feel gray often depressed, does not matter, this paragraph is actually uses the aggregation function only. First $match is the match condition, $sort is sort, sorted according to UserID and primary key. $group is actually grouped, the conditions of the group is the user's department, the total cumulative 1. Finally, put the grouped objects in the users and specify the properties that each object contains. Finally, the page is output to the client, and the client page loops the docs directly to the left Panelbar rendering.

OK, the left is finished, the right word is actually a kendogrid, before also said several times, here will not repeat. Click the Star button's code in the grid below.

function Markfile (e) {var dataItem = This.dataitem ($ (e.currenttarget). Closest ("tr")); $.post ('/file/mark ', {fileid:dataitem._id}, function (res) {if (RES.ISSUC) {Debugger Sho        Wmsg (' info ', ' The file marked successfully! '); }    });}

The background code is as follows

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 });        }     });}

Star Mail, we can view it on a dedicated page.

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/83/F6/wKioL1eCABaSqVroAABZLyWYkAI134.png "title=" Qq20160710154707.png "alt=" Wkiol1ecabasqvroaabzlywykai134.png "/>

On this page you can view the tagged Star file, and you can unmark it to see the code for this page

. Row-marginhr.panel-linediv#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; ') &nbsP;#{docsmark[i].fullname}     -} -}.clear-float 

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 ').. exec (' Find ', function  (error,  Docrecent)  {                 res.render (' document/docrecent ',                  {                     totalmarkcount: docmark.length | |  0,                      docsmark: docmark | |  [],                     totalrecentcount: docrecent.length | |  0,    &nbSp;                docsrecent:  docrecent | |  []                });             });         });     });

Note that the last page is our most recently used page, and we return not only the star file, but also the most recently used file. Exclude the star file when obtaining the most recently used file.

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

Note that the $nin here is the meaning of not. In fact Filemark collection stores the relationship between the file and the user.

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/83/F6/wKioL1eCCb_h11x5AABBEPzdMZo935.png "title=" Qq20160710163846.png "alt=" Wkiol1eccb_h11x5aabbepzdmzo935.png "/>

Here I'm using nosql like SQL.

OK, this article is about here, came in hope you can comment, maybe I will send the source to you.

This article is from the "Technology Creation value" blog, please be sure to keep this source http://leelei.blog.51cto.com/856755/1813970

node. js closest Combat (10) of Excel Online (shared file)