Node.js Express博客项目实战 之 新闻管理

添加页面：（add.html）

    在视图views中新建文件夹news,新建index.html,add.html,edit.html,首先进行add.html页面的书写

add.html的页面显示：

将该页面进行在后台新闻路由中进行加载，首先得在后台路由中去进行注册；

// 新闻管理
let newsRouter = require('./admin/news.js');
router.use('/news',newsRouter);

在后台路由中进行添加页面的加载：

// 新闻管理的添加页面
router.get("/add",function(req,res,next){
    mysql.query("select * from newstype order by sort desc",function(err,data){
        if (err) {
            return "";
        }else{
            // 新闻管理添加页面
            res.render("admin/news/add.html",{data:data});
        }
    });
});

并在路由中进行首页页面的显示

// 声明路由规则
// 新闻管理首页

router.get("/",function(req,res,next){

    let p = req.query.p ? req.query.p :1;
    let size = 5;

    mysql.query("select count(*) tot from news,newstype type where news.cid = type.id",function(err,data){
        if (err) {
            return "";
        }else{
            let tot = data[0].tot;

            let fpage = page(tot,p,size);

            // 查询相关数据

            mysql.query("select news.*,type.name tname from news,newstype type where news.cid = type.id order by news.id desc limit ?,?",[fpage.start,fpage.size],function(err,data){
                if (err) {
                    return "";
                }else{
                    data.forEach(item=>{
                        item.time = moment(item.time*1000).format("YYYY-MM-DD HH:mm:ss");
                    })
                    // 加载新闻管理的首页
                    res.render("admin/news/index.html",{data:data,show:fpage.show});
                }
            });

        }
    });
    

});

最终整体的显示：

添加新闻的页面显示：

添加功能：

通过连接数据库进行对数据的添加：

在新闻路由中加入：

// 新闻管理添加功能

router.post("/add",upload.single("img"),function(req,res,next){
    // 接受文件上传资源
    let imgRes = req.file;
    // 接受表单上传内容
    let {title,keywords,description,info,author,cid,text} = req.body;
    let num = 0;
    let time = Math.round((new Date().getTime())/1000);
    // 进行图片上传
    let img = uploads(imgRes,"news");

    // 进行数据插入

    mysql.query("insert into news(title,keywords,description,info,author,cid,text,num,time,img) value(?,?,?,?,?,?,?,?,?,?)",[title,keywords,description,info,author,cid,text,num,time,img],function(err,data){
        if (err) {
            return "";
        }else{
            if (data.affectedRows==1) {
                res.send("<script>alert('添加成功');location.href='/admin/news'</script>");
            }else{
                res.send("<script>alert('添加失败');history.go(-1);</script>");

            }
        }
    });

});

实现的效果：

修改功能：

在新闻路由news.js中加入：

首先需要进行加载修改的页面：

// 修改页面

router.get("/edit",function(req,res,next){
    // 获取用户需要修改的数据
    let id = req.query.id;

    // 查询新闻分类
    mysql.query("select * from newstype order by sort desc",function(err,data){
        // 判断是否执行成功
        if (err) {
            return "";
        }else{
            // 查询修改文章对应数据
            mysql.query("select * from news where id = "+id,function(err,data2){
                if (err) {
                    return "";
                }else{
                    // 加载修改页面
                    res.render("admin/news/edit.html",{data:data,newData:data2[0]});
                }
            });
            
        }
    });

});

对上传的新闻封面进行修改，以及点击修改的方式采用的是post方式：

// 新闻管理的修改页面


router.post("/edit",upload.single("img"),function(req,res,next){
    // 接受文件上传资源
    let imgRes = req.file;
    // 接受表单数据
    let {id,cid,text,oldimg,author,info,description,keywords,title} = req.body;

    let img = oldimg;
    // 判断该用户是否修改图片
    if (imgRes) {
        img = uploads(imgRes,"news");
    };

    // 发送sql语句修改数据

    mysql.query("update news set cid= ? , text=? , author=? , info=? , description=? , keywords=? , title=? ,img = ? where id = ?",[cid,text,author,info,description,keywords,title,img,id],function(err,data){
        if (err) {
            return "";
        }else{
            // 判断影响行数
            if (data.affectedRows==1) {
                // 判断用户是否修改图片
                if (imgRes) {
                    if (fs.existsSync(__dirname+"/../../"+oldimg)) {
                        fs.unlinkSync(__dirname+"/../../"+oldimg);
                    };
                };
                res.send("<script>alert('修改成功');location.href='/admin/news';</script>");
            }else{
                res.send("<script>alert('修改失败');history.go(-1);</script>");

            }
        }

    });
});

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="/public/admin/css/pintuer.css">
<link rel="stylesheet" href="/public/admin/css/admin.css">
<script src="/public/admin/js/jquery.js"></script>
<script src="/public/admin/js/pintuer.js"></script>

<script type="text/javascript" charset="utf-8" src="/public/baidu/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/public/baidu/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/public/baidu/lang/zh-cn/zh-cn.js"></script>

</head>
<body>
<div class="panel admin-panel">
  <div class="panel-head"><strong><span class="icon-key"></span> 添加新闻</strong></div>
  <div class="body-content">
    <form method="post" class="form-x" action="" enctype="multipart/form-data">
          
      <div class="form-group">
        <div class="label">
          <label for="sitename">文章标题：</label>
        </div>
        <div class="field">
          <input type="text" class="input" id="mpass" name="title" size="50" placeholder="请输入新闻标题" value="<%= newData.title %>" data-validate="required:请输入新闻标题" />       
        </div>
      </div>      
      
      <div class="form-group">
        <div class="label">
          <label for="sitename">文章关键字：</label>
        </div>
        <div class="field">
          <input type="text" class="input" id="mpass" value="<%= newData.keywords %>" name="keywords" size="50" placeholder="请输入新闻关键字" data-validate="required:请输入新闻关键字" />       
        </div>
      </div>      
      <div class="form-group">
        <div class="label">
          <label for="sitename">文章描述：</label>
        </div>
        <div class="field">
          <input type="text" class="input" id="mpass" value="<%= newData.description %>" name="description" size="50" placeholder="请输入新闻描述" data-validate="required:请输入新闻描述" />       
        </div>
      </div>    

      <div class="form-group">
        <div class="label">
          <label for="sitename">文章简介：</label>
        </div>
        <div class="field">
          <input type="text" class="input" value="<%= newData.info %>" id="mpass" name="info" size="50" placeholder="请输入新闻简介" data-validate="required:请输入新闻简介" />       
        </div>
      </div>   
      <div class="form-group">
        <div class="label">
          <label for="sitename">文章作者：</label>
        </div>
        <div class="field">
          <input type="text" class="input" id="mpass" value="<%= newData.author %>" name="author" size="50" placeholder="请输入新闻作者" data-validate="required:请输入新闻作者" />       
        </div>
      </div>   
      <div class="form-group">
        <div class="label">
          <label for="sitename">文章分类：</label>
        </div>
        <div class="field">
          <select name="cid" id="" class="input">
            <% data.forEach(item=>{%>

              <% if(item.id == newData.cid){ %>
                <option selected value="<%= item.id %>"><%= item.name %></option>
              <% }else { %>
                <option value="<%= item.id %>"><%= item.name %></option>
              <% } %>
            <% }) %>
          </select>
        </div>
      </div>  

      <div class="form-group">
        <div class="label">
          <label for="sitename">新闻封面：</label>
        </div>
        <div class="field">
          <input type="file" class="input" id="mpass" name="img" />   
          <img src="<%= newData.img%>" alt=""> 
          <input type="hidden" name="id" value="<%= newData.id %>">   
          <input type="hidden" name="oldimg" value="<%= newData.img %>">   
        </div>
      </div>  

      <div class="form-group">
        <div class="label">
          <label for="sitename">新闻内容：</label>
        </div>
        <div class="field">
          <script id="editor" type="text/plain" name="text" style="100%;height:500px;" ><%- newData.text %></script>
        </div>
      </div>  
      
      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>   
        </div>
      </div>      
    </form>
  </div>
</div>
<script>
  var ue = UE.getEditor('editor');


</script>
</body></html>

修改功能的效果图展示：

删除功能：

在新闻路由中加入：

// 无刷新删除数据

router.get("/ajax_del",function(req,res,next){
    // 接受到删除的数据

    let {id,img} = req.query;

    // 删除数据
    mysql.query("delete from news where id = "+id,function(err,data){
        if (err) {
            return "";
        }else{
            if (data.affectedRows==1) {
                // 删除封面图片
                if (fs.existsSync(__dirname+"/../../"+img)) {
                    fs.unlinkSync(__dirname+"/../../"+img);
                };

                res.send("1");

            }else{
                res.send("0");
            }
        }
    });
});

在新闻的首页写入

ajax_del的方法：

<script>
  // 删除方法

  function del(obj,id,img){
    // 确认框
    if (confirm("您确认要删除？")) {
      // 发送ajax请求删除数据
      $.get("/admin/news/ajax_del",{id:id,img:img},function(data){
        // 判断是否删除成功
        if (data==1) {
          window.location.reload();
        };
      });
    };
  }
</script>

删除功能的实现效果：

新闻路由news.js总的代码：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="/public/admin/css/pintuer.css">
<link rel="stylesheet" href="/public/admin/css/admin.css">
<script src="/public/admin/js/jquery.js"></script>
<script src="/public/admin/js/pintuer.js"></script>
</head>
<body>
  <div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 新闻列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
    <div class="padding border-bottom">
      <ul class="search" style="padding-left:10px;">
        <li> <a class="button border-main icon-plus-square-o" href="/admin/news/add"> 添加新闻</a> </li>
        <li>搜索：</li>
       
        <li>
          <form action="" method="get">
          <input type="text" placeholder="请输入搜索关键字" name="search" class="input" style="250px; line-height:17px;display:inline-block" />
          <button class="button border-main icon-search">搜索</button>
          </form>
        </li>
      </ul>
    </div>
    <table class="table table-hover text-center">
      <tr>
        <th width="100" style="text-align:left; padding-left:20px;">ID</th>
        <th>新闻标题</th>
        <th>新闻封面图</th>
        <th>新闻分类</th>
        <th>新闻作者</th>
        <th>发表时间</th>
        <th>浏览量</th>
        <th width="310">操作</th>
      </tr>
      <!-- ejs 的模板引擎 -->
      <% data.forEach(item=>{ %>
        <tr>
          <td><%= item.id %></td>
          <td><%= item.title %></td>
          <td><img width="200px" src="<%= item.img %>" alt=""></td>
          <td><%= item.tname %></td>
          <td><%= item.author %></td>
          <td><%= item.time %></td>
          <td><%= item.num %></td>
          <td>
            <div class="button-group"> 
              <a class="button border-main" href="/admin/news/edit?id=<%= item.id%>"><span class="icon-edit"></span> 修改</a> 
              <a class="button border-red" href="javascript:void(0)" onclick=" del(this,<%= item.id %>,'<%= item.img %>')"><span class="icon-trash-o"></span> 删除</a> 
            </div>
          </td>
        </tr>
      <% }) %>
      

      <tr>
        <td colspan="8">
          <div class="pagelist"> 
            <%- show %>
          </div>
        </td>
      </tr>

    </table>
  </div>
<script>
  // 删除方法

  function del(obj,id,img){
    // 确认框
    if (confirm("您确认要删除？")) {
      // 发送ajax请求删除数据
      $.get("/admin/news/ajax_del",{id:id,img:img},function(data){
        // 判断是否删除成功
        if (data==1) {
          window.location.reload();
        };
      });
    };
  }
</script>
</body>
</html>