node+mongodb+express后台管理项目

最新推荐文章于 2024-08-15 20:24:04 发布

QQ帝国

最新推荐文章于 2024-08-15 20:24:04 发布

阅读量2.7k

点赞数

分类专栏： Node

本文链接：https://blog.csdn.net/qq_empire/article/details/81026978

版权

Node 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

下面是一个完整的mongodb数据库的增删改查,请忽略js

//view



indexq.ejs  前台首页

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/stylesheets/bootstrap.css">
    <link rel="stylesheet" href="/stylesheets/mystyle.css">
  </head>
  <style>
       #ooo{width:100%;height: 200px;
       }
  </style>
  <body id="top">
<!--******************************bar栏*************-->
<!--<div id="ooo">
   <img src="/images/1.gif" /> <img src="/images/1.gif" /> <img src="/images/1.gif" /> 

</div>-->
  <div class="site-topbar">
   <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
            <div class="topbar-nav">
              <a href="index.html">小米网</a><span class="sep">|</span><a href="http://www.miui.com/">MIUI</a><span class="sep">|</span><a href="http://www.miliao.com/">米聊</a><span class="sep">|</span><a href="http://game.xiaomi.com/hy/index.html">游戏</a><span class="sep">|</span><a href="http://www.duokan.com/">多看阅读</a><span class="sep">|</span><a href="i.mi.com">云服务</a><span class="sep">|</span><a href="http://www.mi.com/c/appdownload/">小米网移动版</a><span class="sep">|</span><a href="http://static.mi.com/feedback/">问题反馈</a><span class="sep">|</span><a href="#">Select Region</a>
            </div>
            <div class="topbar-cart" id="J_miniCartTrigger">
                <a class="cart-mini" id="J_miniCartBtn" href="#"><img src="/images/gouwuce.png" alt="">购物车<span class="cart-mini-num J_cartNum">（0）</span></a>
                <div class="cart-menu" id="J_miniCartMenu" style="display:none;">
                  <div class="loading">
                    <span>这里神马都没有！~</span>
                  </div>
                </div>
            </div>
            <div class="topbar-info">
              <a class="link" data-toggle="modal" 
                   data-target="#myModal" href="#">后台登录</a><span class="sep">|</span>
                   <a class="link" data-toggle="modal" 
                   data-target="#myModal2" href="#">注册</a>
                <!-- 模态框（Modal） 登录-->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
                   aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                      <div class="modal-content text-center">
                         <div class="modal-header text-center">
                            <button type="button" class="close" 
                               data-dismiss="modal" aria-hidden="true">
                                  &times;
                            </button>
                          
                            <h1 class="modal-title" id="myModalLabel">
                               后台账号登录
                            </h1>
                         </div>
                         <div class="modal-body text-center">
                          <form>
                           <input class="item_account" autocomplete="off" type="text" name="user" id="userdl" placeholder="邮箱/手机号码/帐号">
                           <input type="password" placeholder="密码" name="pwd" id="passdl">
                           <input class="btnadpt btn_orange" id="login" type="submit" value="立即登录">
                         </form>
                            <fieldset class="oth_type_tit">
                              <legend style="text-align:center;" class="oth_type_txt">其他方式登录</legend>
                            </fieldset>
                           
                         </div>
                         <a href="">
                              <span>注册账号</span>
                              <span>|</span>
                              <span>忘记密码</span>
                            </a>
                      </div><!-- /.modal-content -->
                </div><!-- /.modal -->
                </div>
                 <!-- 模态框(Modal)2 注册-->
                <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" 
                   aria-labelledby="myModalLabel" aria-hidden="true">
                   <div class="modal-dialog">
                      <div class="modal-content text-center">
                         <div class="modal-header text-center">
                            <button type="button" class="close" 
                               data-dismiss="modal" aria-hidden="true">
                                  &times;
                            </button>
                            <a href="http://hd.mi.com/y/02021d/index.html"><img src="img/logo.png" alt=""></a>
                            <h1 class="modal-title" id="myModalLabel">
                               注册账号
                            </h1>
                         </div>
                         <div class="modal-body text-center">
                          <form>
                           <input class="item_account" autocomplete="off" type="text" name="user" id="zucename" placeholder="注册用户名">
                           <input type="tel" placeholder="设置密码" name="pwd" id="szpass">
                           <input style="width:170px;" class="code" type="text" name="icode" autocomplete="off" placeholder="图片验证码">
                           <img style="margin-top:-47px;float:right;" alt="图片验证码" title="看不清换一张" class="icode_image" src="img/yzm.png">
                           <input class="btnadpt btn_orange" id="zuce" type="submit" value="立即注册">
                           </form>
                            <p class="msg">
                            点击“立即注册”，即表示您同意并愿意遵守小米
                            <a href="http://www.miui.com/res/doc/eula/cn.html" target="_blank" title="用户协议">用户协议</a>
                            和
                            <a href="http://www.miui.com/res/doc/privacy/cn.html" target="_blank" title="隐私政策">隐私政策</a>
                            </p>
                      </div><!-- /.modal-content -->
                </div><!-- /.modal -->
              </div>
            </div>
        </div>
      </div> 
    </div>
  </div>
</div>


 
<!--**********************我的代码*****************************-->
<div id="wode" >
 <div>
<br />标题：<input type="text" id="input1"/>
<br />类别：<input type="text" id="input2"/>
<br />作者：<input type="text" id="input3"/>
<!-- <br />时间：<input type="time" id="input4"/>-->
 

<button id="btn">提交</button>

 </div>
</div>




     
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/javascripts/jquery-1.11.3.js"></script>
    <script src="/javascripts/myapp.js"></script>
     <script src="/javascripts/jump.js"></script>
     <script>
          $(function(){
             $(".list2 img").each(function(k,img){
              new JumpObj(img,10);
              //第一个参数代表元素对象
              //第二个参数代表抖动幅度
            });
             //注册
             $("#zuce").click(function(e){
                 e.preventDefault();
                  $.ajax({
                     type:"post",
                     url:"users/indexq",
                     data:{name:$("#zucename").val(),pass:$("#szpass").val()},
                     success:function(data){
                        if(data==1){
                         alert("注册成功")
                       location.href='/indexq'
                        }else{
                          alert("注册失败")
                          
                        }
                     }
          
                  })             
              }) 
              
              //登录
              $("#login").click(function(e){
                 e.preventDefault();
                  $.ajax({
                     type:"post",
                     url:"users/login",
                     data:{user:$("#userdl").val(),pass:$("#passdl").val()},
                     success:function(data){
                        if(data==1){
                         alert("登录成功")
                       location.href='/'
                        }else{
                          alert("登录失败")
                          
                        }
                     }
          
                  })             
              })       
              
              //增删改查
              $("#btn").click(function(e){
                 e.preventDefault();
                  $.ajax({
                     type:"post",
                     url:"users/input",
                     data:{biaoti:$("#input1").val(),leibie:$("#input2").val(),zuozhe:$("#input3").val(),time:$("#input4").val()},
                     success:function(data){
                        if(data==1){
                         alert("提交成功")
                       //location.href='/indexq'
                        }else{
                          alert("提交失败")
                          
                        }
                     }
          
                  })             
              }) 
              
              //结尾
          })


     </script>
    <script src="/javascripts/bootstrap.js"></script>
  </body>

</html>

//后台主页index


<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>大气网站后台模板</title>
<link rel="stylesheet" href="/stylesheets/layui.css">
</head>
  
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">大气网站后台模板</div>
<!-- 头部区域（可配合layui已有的水平导航） -->


<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="images/1.gif" class="layui-nav-img">
您好呀管理员：
<%if(name){%>
  <span><%- name %></span>
<%}%>
 
</a>
<dl class="layui-nav-child">
<dd>
<a href="">基本资料</a>
</dd>
<dd>
<a href="">安全设置</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="/xiaohui">退出登录</a>
</li>
</ul>
</div>


<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">菜单栏</a>
<dl class="layui-nav-child">
<dd>
<a  target="right">产品管理</a>
</dd>
<dd>
<a href="" target="right">新闻分类管理</a>
</dd>
<dd>
<a href="news" target="right">新闻管理</a>
</dd>
<dd>
<a href="" target="right">友情链接</a>
</dd>
<dd>
<a href="" target="right">留言管理</a>
</dd>
<dd>
<a href="" target="right">用户管理</a>
</dd>
<dd>
<a href="javascript:void(0)"  onclick="updatePwd('修改密码',1)">修改密码</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">菜单栏</a>
<dl class="layui-nav-child">

</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">菜单栏</a>
<dl class="layui-nav-child">

</dl>
</li>

<li class="layui-nav-item">
<a href="javascript:;">菜单栏</a>
<dl class="layui-nav-child">

</dl>
</li>

<li class="layui-nav-item">
<a href="javascript:;">菜单栏</a>
<dl class="layui-nav-child">

</dl>
</li>

<li class="layui-nav-item">
<a href="javascript:;">菜单栏</a>
<dl class="layui-nav-child">

</dl>
</li>

</ul>
</div>
</div>


<div class="layui-body" style="z-index: 0;">
<!-- 内容主体区域 -->
<div style="padding: 15px;">
<iframe src="news" name="right" frameborder="0" width="100%" height="1200"></iframe>


</div>
</div>


<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>

<script type="text/javascript" src="/javascripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/javascripts/myplugs/js/plugs.js">
</script>
<script type="text/javascript">
//添加编辑弹出层
function updatePwd(title, id) {
$.jq_Panel({
title: title,
iframeWidth: 500,
iframeHeight: 300,
url: "updatePwd.ejs"
});
}
</script>
<script src="/javascripts/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function() {
var element = layui.element;


});

console.log(<%- name %>)

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

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');


var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');


var app = express();//生成一个express实例 app。
var session = require("express-session");
// view engine setup
//设置 views 文件夹为存放视图文件的目录, 即存放模板文件的地方,__dirname 为全局变量,存储当前正在执行的脚本所在的目录。
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');//设置视图模板引擎为 ejs。


app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());//加载解析cookie的中间件。
app.use(express.static(path.join(__dirname, 'public')));//设置public文件夹为存放静态文件的目录。


//session
app.use(session({ 
secret: 'recommend 128 bytes random string', 
cookie: { maxAge: 20000 * 60 * 1000 },
resave: true,
saveUnintialized: true
}))

//路由控制器。

app.use('/', indexRouter);
app.use('/users', usersRouter);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});


// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};


  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


module.exports = app;

路由routes

index.js

var express = require('express');
var router = express.Router();
var mongo = require("mongodb").MongoClient;
var url1 = "mongodb://localhost:27017/mydb";
var async=require('async')
var ObjectId=require('mongodb').ObjectId;
/* GET home page. */
//用户名存储
router.get('/', function(req, res, next) {
  res.render('index', {name:req.session.name});//render渲染
  console.log(req.session.name)
  
});
//退出销毁用户名
router.get('/xiaohui', function(req, res, next) {
 req.session.destroy(function(err){ 
if(err){ 
console.log(err) 
}else{ 
res.redirect("/") 
} 
})


  
});


router.get('/news', function(req, res, next) {
var count = 0;
  var page = 0;
  var size = 5;
  //页码
  var pagenum = req.query.pagenum;
  var pagenum = pagenum?pagenum:1;
   mongo.connect(url1,function(err,database){
      database.collection("news1",function(err,coll){
      
      //异步处理
 async.series([
  function(callback){
  coll.find({}).toArray(function(err,data){
  count = data.length;//数据条数
  
  //page = page<1? 1:page;
  page = Math.ceil(count/size);//总共的页数
  
  pagenum = pagenum<1?1:pagenum;//页码小于1；显示1
  pagenum = pagenum>page?page:pagenum;//页码大于总页数；显示总页数
  
  callback(null,'')
  })
  
  },function(callback){
  
  coll.find().sort({_id:-1}).limit(size).skip((pagenum-1)*size).toArray(function(err,data){
    callback(null,data)
  })
  }
 ],function(err,data){
        res.render('news',{list:data[1],page:page,count:count,pagenum:pagenum,size:size})
        database.close()
  
 })
      
      
      
      
      
    // if(err) throw err
//      coll.find().sort({_id:-1}).toArray(function(err,data){
//      
//          res.render('news',{list:data});//render渲染
//          database.close()
//      })
      })
   })


});










//新闻数据传页面

router.get('/indexq', function(req, res) {
  res.render('indexq', { });//render渲染
});


router.get('/login', function(req, res) {
  res.render('login', { });//render渲染
});


router.get('/input', function(req, res) {
  res.render('input', { });//render渲染
});


router.get('/alert', function(req, res) {
  res.render('alert', { });//render渲染
});


module.exports = router;

user.js

var express = require('express');
var router = express.Router();
var mongo = require("mongodb").MongoClient;
var url1 = "mongodb://localhost:27017/mydb";
var ObjectId=require('mongodb').ObjectId;






/* GET users listing. */
router.get('/', function(req, res, next){
  
});


//前端首页注册
router.post('/indexq', function(req, res){
      // console.log(req.body) 
   mongo.connect(url1,function(err,database){
      database.collection("users",function(err,coll){
            // console.log(coll)
        coll.find({name:req.body.name}).toArray(function(err,data){
           // console.log(data)
           //console.log(req.body);
           
            if(data.length>0){           
              res.send("2")
              database.close()
            }else{
             coll.insert(req.body,function(){
               res.send("1")
              database.close()
                         
             })
                          
            }
    
        })
       })
   })
  
});




//登录


router.post('/login', function(req, res){
   console.log(req.body) 
   mongo.connect(url1,function(err,database){
      database.collection("users",function(err,coll){
    // if(err) throw err
        coll.find({"name":req.body.user,"pass":req.body.pass}).toArray(function(err,data){
          console.log(data)
            if(data.length>0){
            req.session.name = data[0].name;
            //console.log(data[0].user)
              res.send("1")
              database.close()
            }else{
             
               res.send("2")
              database.close()
                
            }
    
        })
      })
   })
  
});




//前端页面提交
router.post('/input', function(req, res){
      // console.log(req.body) 
   mongo.connect(url1,function(err,database){
      database.collection("news1",function(err,coll){
            // console.log(coll)
        coll.find({name:req.body.biaoti}).toArray(function(err,data){
            //console.log(data)
           //console.log(req.body);
           
            if(data.length>0){           
              res.send("2")
              database.close()
            }else{
             coll.insert(req.body,function(){
               res.send("1")
              database.close()
                         
             })
                          
            }
    
        })
       })
   })


});


//删除数据


router.post('/shanchu', function(req, res){
//console.log(req.body.biaoti) 
//console.log(req.body)
    mongo.connect(url1, function(err, db) {
    if (err) throw err;
    var dbo = db.db("mydb");
      var whereStr = {"biaoti":req.body.biaoti};  // 查询条件
      //console.log(whereStr)
    dbo.collection("news1").deleteOne(whereStr,function(err, obj){
      if (err) throw err;
        console.log("文档删除成功");
        res.send("1")
        db.close();
    });
      
   });
 
});






//修改数据
router.post('/xiugai', function(req, res){
//console.log(req.body) 

mongo.connect(url1, function(err, db) {
   if (err) throw err;
   var dbo = db.db("mydb");//选择数据库名字
   var yuanlai = {"biaoti":req.body.biaoti,"leibie":req.body.leibie,"zuozhe":req.body.zuozhe};  // 查询条件
   var updateStr = {$set: {"biaoti":req.body.biaoti1,"leibie":req.body.leibie1,"zuozhe":req.body.zuozhe1}};
   //console.log(yuanlai,updateStr)
   dbo.collection("news1").updateOne(yuanlai, updateStr, function(err, data) {
       if (err) throw err;
       console.log("文档更新成功");
       res.send("1")
       db.close();
   });
 });
 
});




//查询
router.post('/chaxun', function(req, res){
var whereStr = req.body.biaoti
 mongo.connect(url1, function(err, db) {
    var dbo = db.db("mydb");
     // 查询条件
   dbo.collection("news1").find({$or:[{biaoti:whereStr},{leibie:whereStr},{zuozhe:whereStr}]}).toArray(function(err, result) {
       console.log(result)
      if(result.length){
      res.send(result);
       
      }else{
      res.send("0")
      
      }
       db.close();
   });
   
 });
 
});






module.exports = router;