node零基础开发个人博客新手篇 express+node（二）

这个时候登陆的功能已经实现但是输入密码和用户名以后浏览器没有反应是很不友好的，所以要增加账号和密码的错误处理，给用户提醒，修改登录的post方法处理

var express = require('express');
var router = express.Router();
var crypto = require('crypto');
var mysql = require('./../database');
/* GET home page. */
router.get('/login', function(req, res, next) {
  res.render('login', { title: 'Express' });
});
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
/*
登陆信息验证
 */
router.post('/login',function (req,res,next) {
      var name = req.body.name;
      var password= req.body.password;
      var hash = crypto.createHash('md5');
      hash.update(password);
      password = hash.digest('hex');
      var query = 'SELECT * FROM author Where authorName=' + mysql.escape(name) + 'AND authorPassword=' + mysql.escape(password);
      mysql.query(query,function (err,rows,fields) {
        if (err){
          console.log(err);
          return;
        }
        var user=rows[0];
        if (user){
          res.redirect('/');
        }
      })
    }
)
module.exports = router;

修改后的如下
var express = require('express');
var router = express.Router();
var crypto = require('crypto');
var mysql = require('./../database');
/* GET home page. */
router.get('/login', function(req, res, next) {
  res.render('login', { message: '' });
});
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
/*
登陆信息验证
 */
router.post('/login',function (req,res,next) {
      var name = req.body.name;
      var password= req.body.password;
      var hash = crypto.createHash('md5');
      hash.update(password);
      password = hash.digest('hex');
      var query = 'SELECT * FROM author Where authorName=' + mysql.escape(name) + 'AND authorPassword=' + mysql.escape(password);
      mysql.query(query,function (err,rows,fields) {
        if (err){
          console.log(err);
          return;
        }
        var user=rows[0];
        if (!user){
          res.render('login',{message:'用户名或者密码错误'});
          return;
        }
        req.session.userSign=true;
        req.session.userId = user.authorID;
        res.redirect('/');
      });
    }
);
module.exports = router;

在login.ejs文件中增加错误提示 修改密码的div元素为以下内容

 

<section>
  <form action ="/login" method="post">
    <div class="form-group">
     <input type="text" name="name" placeholder="登录名">
    </div>
    <div class="form-group">
      <input type="password" name="password" placeholder="密码">
      <%if (message) {%>
      <p><%=message%></p>
      <%}%>
    </div>
    <div class="form-group">
      <input type="submit" value="登录">
    </div>
  </form>
</section>

因为密码或者用户名错误的时候渲染的模板和get请求渲染的模板是同一个所以也需要给GET请求添加一个json数据，将get请求的处理函数改为以下内容

 

重新启动项目会发现有了新的提示

 

 

2 实现博客首页界面

 

登录博客后自动跳转到首页，博客首页是都可以访问的所以不用权限限制，

在rout文件夹下的index。js文件中将首页的get请求处理改为如下代码：

增添首页的样式

/*
首页样式
 */
header{
    height: 135px;
    background-image: url("../images/login.jpg");
    background-position:center ;
    margin-bottom: 25px;
}
header h1{
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: 30px;
    line-height: 35px;
    padding: 50px 0;
    word-spacing: 0.5em;
}
.main{
    padding: 0 15px;
    width: 1170px;
    margin: 0 auto;
    margin-bottom: 25px;
}
aside{
    width: 180px;
    padding: 9px;
    border: 1px solid #c0c0c0;
    float: left;
    min-height: 450px;
    height: 100%;
}
aside ul li{
    list-style: none;
    height: 30px;
    text-align: center;
}
aside ul li a{
    font-size: 16px;
    line-height: 30px;
}
aside ul li a:hover{
    color: #183d8e;
}
.main-aside-avatar{
    margin-bottom: 10px;
}
.main-aside-avatar img{
    width: 100%;
}
.main-articles{
    margin-left: 220px;
}
.main-articles-item{
    height: 80px;
    border: 1px solid #c0c0c0;
    padding: 10px;
    margin-bottom: 10px;
}
.main-articles-item:last-child{
    margin-bottom: 0;
}
.main-articles-item h2{
    margin: 0;
    font-weight: normal;
    font-size: 24px;
    line-height: 40px;
}
.main-articles-items-des span{
    padding-right: 8px;
    color: #333;
    font-size: 14px;
}

增添几条sql语句此时首页文章的发布时间是国际事件，也在排版上影响了美观 这是需要在传递给视图之前把时间处理一下 将首页的get请求改成一下代码

 

router.get('/', function(req, res, next) {
  var query = 'select * from article';
  mysql.query(query,function (err,rows,fields) {
    var articles = rows;
    articles.forEach(function (ele) {
        var year = ele.articleTime.getFullYear();
        var month = ele.articleTime.getMonth() + 1 >10 ? ele.articleTime.getMonth() : '0' + (ele.articleTime.getMonth() + 1);
        var date = ele.articleTime.getData() > 10 ? ele.articleTime.getDate() : '0' + ele.articleTime.getDate();
        ele.articleTime = year + '-' + month + '-' + date;
    })
    res.render("index", {articles: articles})
  });
});

这时候给鼠标移入文章加一些简单的动画优化一下体验

在view文件架下面新建一个名为public的文件夹，在这个文件夹中分别新建head，header footer aside文件然后把文件都单独整理出来如下，

 

<!DOCTYPE html>
<html lang="zh-cn" class="login">
<%- include("./public/head.ejs")%>

<body>
<%- include("./public/header.ejs")%>

<section class="main flotfix">
  <%- include("./public/asides.ejs")%>

  <section class="main-articles">
    <ul>
      <% for (var i =0,max=articles.length;i<max;i++){ %>
      <li class="main-articles-item" >
        <h2>
          <a href=""><%= articles[i].articleTitle %></a>
        </h2>
        <section class="main-articles-item-des">
          <p>
            <span>作者: <%= articles[i].articleAuthor %></span>
            <span>发布时间: <%= articles[i].articleTime %></span>
            <span>浏览量: <%= articles[i].articleClick %></span>
          </p>
        </section>
      </li>
      <%}%>
    </ul>
  </section>
</section>
<%- include("./public/footer.ejs")%>

</body>
</html>

这个时候我们的首页和登录就做好了 

附赠代码链接 

https://download.csdn.net/download/weixin_42039715/11638800