nodejs实战案例（Express框架+mongoDB）——（11）——用户中心页面

2019独角兽企业重金招聘Python工程师标准>>>

nodejs实战案例（Express框架+mongoDB）——（11）——用户中心页面

这节主要是讲修改用户信息，修改信息这一块比较简单，主要是对mongodb的一个修改，重点在上传头像，以及一个扩展，如何在后端修改图片，例如缩放到统一大小。

首先是完成用户展示页面

在views中添加people.ejs,内容如下：

<%- include header %>

<div class="container">

  <div class="row-fluid">

    <div class="span7">

      <div class="row-fluid">

        <h1 id="toName"><%= name%></h1>

        <div class="span3">

          <img src=<%= imgUrl%> style="width:127px;height:111px;">

        </div>

        <div class="span8" id="info">

          <p>地址：<%= address%></p>

          <p>公司：<%= company%></p>

          <p>学校：<%= school%></p>

          <p>个人简介：<%= info%></p>

          <% if (user) { %>

            <% if (user.name==name) { %>

            <div id="edit">编辑</div>

            <% }%>

          <% }%>

        </div>

        <p class="btn disabled" id="offline">隐身</p>

        <a class="btn btn-success" data-toggle="modal" id="talk" href="#talkBox" style="display:none">聊天</a>

        <% if (user) { %>

          <% if (user.name==name) { %>

          <div class="span8" id="infoEdit" style="display:none;">

            <form action="/people" method="post" enctype="multipart/form-data">

                <input type="text" placeholder="地址" name="address">

                <input type="text" placeholder="公司" name="company">

                <input type="text" placeholder="学校" name="school">

                <input type="text" placeholder="个人简介" name="info">

                <br/>修改头像<input type="file" name="thumbnail">

                <button type="submit" class="btn">提交</button>

                <div id="noEdit">取消</div>

            </form>

          </div>

          <% }%>

        <% }%>

      </div>

      <br/>

      <ul class="nav nav-tabs" id="myTab">

        <li class="active"><a href="#home">提问</a></li>

        <li><a href="#profile">回答</a></li>

        <li><a href="#messages">热门</a></li>

      </ul>

       

      <div class="tab-content">

        <div class="tab-pane active" id="home">

          <ul class="thumbnails" id="element">

            <% question.forEach(function(q, index){ %>

            <li>

              <h4><a href="/question/<%= q._id %>"><%= q.title %></a></h4>

              <p><%= q.askText %></p>

            </li>

            <% })%>

          </ul>

        </div>

        <div class="tab-pane" id="profile">回答</div>

        <div class="tab-pane" id="messages">热门</div>

      </div>

    </div>

    <div class="span4">

      <h2>我的信息</h2>

      <h2>我的信息</h2>

      <h2>我的信息</h2>

      <h2>我的信息</h2>

      <h2>我的信息</h2>

    </div>

  </div>

</div>

<%- include footer %>

修改路由设置index.js中的,这个用户页面我们不仅有用户信息，还有这个用户提过的问题，

app.get('/people/:user',function(req,res){ 

    }); 

为：

app.get('/people/:user',function(req,res){ 

      User.get(req.params.user, function(err, user){

        //处理图片

        user.imgUrl=user.imgUrl.replace("./public/","");

         //先查询到用户信息，然后查询用户的提问

          User.getQuestionUser(user.name,function(question){ 

              res.render('people',{ 

                address: user.address, 

                company: user.company, 

                school : user.school, 

                info : user.info, 

                name:req.params.user, 

                user:req.session.user, 

                question:question, 

                imgUrl:user.imgUrl 

              }); 

          });         

      }); 

  });

这里我们需要在user.js里面继续增加函数

User.getQuestionUser=function(user,callback){ 

  //打开数据库 

  mongodb.open(function(err, db){ 

    if(err){ 

      return callback(err); 

    } 

    db.collection('question', function(err, collection){ 

      if(err){ 

        mongodb.close(); 

        return callback(err); 

      } 

      //查找用户名 name 值为 name文档 

      collection.find({name:user}).sort({time:-1}).toArray(function(err,items){ 

        if(err) throw err; 

        mongodb.close(); 

        //遍历数据 

        return callback(items); 

      }); 

    }); 

  }); 

}; 

另外我们需要将user.js里面顶部的一个User构造函数做些修改，因为用户信息更多了，修改外下面这样

function User(user){ 

  this.name = user.name; 

  this.password = user.password; 

  this.email = user.email; 

  this.address = user.address; 

  this.company=user.company; 

  this.school=user.school; 

  this.info=user.info; 

  this.imgUrl=user.imgUrl; 

}; 

完成后效果如下：

这个热门和回答，这里可以由大家自己扩展。

下面一节讲如何修改用户信息和上传头像

转载于:https://my.oschina.net/u/200898/blog/188977