使用mongoose数据库项目

创建mongoose数据库项目

　　一、搭建环境

　　　　　　一、1 . 创建一个文件夹

　　　　 　   一、2 . 在文件夹的导航中输入cmd

　　　　　　　　

 　　

 

　　　　　　一、3 . 创建package.json

　　　　　  　　在小黑框中输入 cnpm init  加回车  初始化一个package.json

　　　　　　　　

　　　　　　 一、4.创建node_modules

　　　　　　　　在小黑框中输入 cnpm i 加回车  创建一个node_modules文件夹

　　　　　　　　

　　　　　　  一、5.创建public文件夹和package.json和node_modules文件夹同级创建

　　　　　　　　

　　　　　　　　　　创建public文件夹用于存放静态文件（如  js , css , html）

　　　　          一、6.创建tem文件夹用来来存放链接mongoose数据库的文件

　　　　　　

　　             　 一、7 . 创建routes文件夹用来存放对mongoose数据库中数据操作的js文件

　　　　　　

　　　　      　  一、8.安装必要模块

　　　　　　　　

    　　　　　　cnpm install body-parser --save

    　　　　　　cnpm install cookie-parser --save

　　　　　　　 cnpm install multer --save

　　　　二、搭建服务

　　　　　　　   二、1.链接mongoose数据库

　　　　　　　　　　二、1.（1）在tem文件夹下创建  mgs.js 文件(mgs是mongoose的缩写）

　　　　　　　　　　

　　　　　　　　　　

//链接mongoose数据库
//引入mongooose数据库
var mgs=require("mongoose")
//创建连接地址
var url="mongodb://127.0.0.1:27017/us2"
//连接访问地址
mgs.connect(url)
//连接监听是否已经连接，如果已经连接启动时在小黑框中会有“芒果”字样
mgs.connection.on("connected",function(){console.log("芒果")})
//存入mongoose数据库中的数据格式
var type={
    name:{type:String,default:"name"},
    message:{type:String,default:"message"},
    price:{type:Number,default:12}
}
//按格式存入数据库数据
var list=mgs.model("list",mgs.Schema(type))
//向外抛出list
module.exports=list

　　　　　　　　　　二、1.（2）在tem文件夹下再创建一个server.js文件，用来启动服务

　　

//引入express
var express = require('express');
//引入path
var path = require('path');
//实例express为app
var app = express();

// view engine setup
//配置开发环境
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, '../public')));
//监听3000端口如果服务启动，在小黑框中会有“服务”字样
app.listen("3000",function(){console.log("服务")})

//向外抛出app
module.exports = app;

　　　　　　　　二、2.（1）在public文件夹下创建image文件夹，用来存放项目中需要的图片

　

　　　　　　　　二、2.（2）在public文件夹下创建javaScript文件夹，用来存放项目中需要的js文件

javaScript文件夹下的js文件

　　

demo1.js文件内容

点击body判断是否删除

$(".con tbody").click((e)=>{
    var str=e.target.innerHTML
    var tr=$(e.target).parent().parent()
    var id=tr.attr("id")
    if(str=="删"){
        $('.active').css({display:"block"})
        $(".active").click((e)=>{
            var txt=e.target.innerHTML
            if(txt=="确定"){
                var obj={_id:id}
                $.get("/dele",obj,function(msg){
                    console.log(msg)
                    aa()
                    $('.active').css({display:"none"})
                })
            }else if(txt== "取消") {
                $('.active').css({display:"none"})
            }
        })
        
    }
})

　　find1_render.js内容，判断一页几条信息，共分多少页内容

// ===================================================
var cur=1;
var msg=[] 
var mei=5;//每页五条
function renderOptions(len){//先计算再渲染
      // 计算有多少页
    pageN=Math.ceil(len/mei)//总页数除以每页条数=多少页
    // console.log(msg.length)
    var arr=new Array()
    for(var i=1;i<=pageN;i++){arr.push(i)}

    render2(arr)
}

// ===================================================
function render2(arr){
   $('.con .select').html(options(arr))
}
// ---------------总页数显示的下拉菜单
function options(arr){
  return arr.map(function(m,i){
    return '<li>'+m+'</li>'
  }).join('')
}
// ===============================
var obj_f=new Object();
function aa(){
  $.get('/find',obj_f,function(data){
    msg=data;
    renderOptions(msg.length)//计算和渲染页码
    renderPage(cur)//渲染页码
  })
}
aa()
function renderPage(cur){
  var part=msg.slice((cur-1)*mei,cur*mei);
  $('.con tbody').html(_html(part))
}
// ---------------
$('.con .select').click(function(e){
  var txt=e.target.innerHTML
 	

if(cur!=txt){
    cur=txt
    renderPage(cur)
}

})
//========================================
function prev(){
	if(cur==1){
		alert("已經是第一頁")
	}else{		
	cur--
	renderPage(cur)		
	}
}
function next(){
	if(cur==pageN){
		alert("已經是最後一頁")
	}else{		
	cur++
	renderPage(cur)
	}
}
//========================================
// ---------------把数据对应成html字串
function _html(data){
  var str=data.map(function(m,i){
    return `
        <tr id="${m._id}">
	         <td>${m.name}</td>
	         <td>${m.message}</td>
	         <td>${m.price}</td>
	         <td>
	         <button>删</button>
	         <button>改</button>
	         </td>
      	</tr>
    `
  }).join('')
  return str;
}
// ===================================================

　　init.js文件是搜索和添加基本功能

   // 搜索
   $(".search button").click(()=>{
    ax()
 })
 $(Document).keydown(function(e){
     if(e.keyCode==13){
         ax()
     }
 })
 function ax(){
     obj_f={
         name:$(".search input").val()
     }
     aa()
 }
 // 添加
 $(".create button").click(()=>{
     var obj={
         name:$(".name").val(),
         message:$(".message").val(),
         price:$(".price").val()
     }
     $.get("/create",obj,function(msg){
         console.log(msg)
         aa()
     })

 })

　　jq3.js是jquery3.js文件，项目依赖的js文件，在jquery官网下载的文件

　　update.js是更新数据的操作，js文件，也是通过监听body中的点击事件判断

   // 搜索
   $(".search button").click(()=>{
    ax()
 })
 $(Document).keydown(function(e){
     if(e.keyCode==13){
         ax()
     }
 })
 function ax(){
     obj_f={
         name:$(".search input").val()
     }
     aa()
 }
 // 添加
 $(".create button").click(()=>{
     var obj={
         name:$(".name").val(),
         message:$(".message").val(),
         price:$(".price").val()
     }
     $.get("/create",obj,function(msg){
         console.log(msg)
         aa()
     })

 })

　　

　　　　　　　　二、2.（3）在public文件夹下创建stylesheets文件夹，用来存放项目中需要的css样式文件

 

通过scss编写的css样式，在stylesheets文件夹下创建css.scss文件

@charset "utf-8";
*{margin:0;padding:0;list-style: none;}

.active{
    100vw;
    height:100vh;
    position: fixed;
    background: rgba(0,0,0,0.5);
    display: none;
    div{
        300px;
        height:100px;
        margin:0 auto;
        background:#f2f2f2;
        text-align: center;
    }

}

.update{
    100vw;
    height:100vh;
    position: fixed;
    background:rgba(0,0,0,0.5);
    display: none;
    div{
        400px;
        height:500px;
        margin:0 auto;
        background:#f2f2f2;
    }
}

.select li{
    padding:5px 10px;
    border:1px solid #000;
}

　　

　　　　　　　　二、2.（4）在public文件夹下创建index.html文件，主页面

　

主页的布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="stylesheets/css.css">
    <style>
        li {
            list-style: none;
        }

        .con tbody tr td {
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="active">
        <div>
            <p>确定要删除？</p>
            <p><button>确定</button><button>取消</button></p>
        </div>
    </div>

    <div class="update">
        <div>
            <p>name</p>
            <p><input type="text" class="name1"></p>
            <p>message</p>
            <p><input type="text" class="message1"></p>
            <p>price</p>
            <p><input type="text" class="price1"></p>
            <p><button>提交</button><button>取消</button></p>
        </div>
    </div>



    <div class="create">
        <p>name</p>
        <p><input type="text" class="name"></p>
        <p>message</p>
        <p><input type="text" class="message"></p>
        <p>price</p>
        <p><input type="text" class="price"></p>
        <p><button>提交</button></p>
    </div>

    <div class="show con">
        <p class="search"><input type="text"><button>搜索</button></p>
        <table border=1px width="800px" cellspacing=0>
            <thead>
                <tr>
                    <th>name</th>
                    <th>message</th>
                    <th>price</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <div style="display: flex; 500px ; justify-content: space-around;">
            <button onclick="prev()">prev</button>
            <ul class="select" style="display: flex; 500px ; justify-content: space-around;">

            </ul>
            <button onclick="next()">next</button>
        </div>
    </div>



</body>
<script src="javascripts/jq3.js"></script>
<script src="javascripts/find1_render.js"></script>
<script src="javascripts/deno1.js"></script>
<script src="javascripts/update.js"></script>
<script src="javascripts/init.js"></script>
<script>
</script>

</html>

　　二、3.（1）在routes文件夹下创建create.js文件，用来监听创建信息

　　　　　　

var express = require('express');
var router = express.Router();
var list=require("../tem/mgs")

/* GET users listing. */
router.get('/', function(req, res, next) {
    list.create(req.query,function(err,result){
        if(err){console.log("创建失败")}
        else{
            res.send(result)
        }
    })
});

module.exports = router;

　　二、3.（2）在routes文件夹下创建delete.js文件，用来监听删除数据的操作

var express = require('express');
var router = express.Router();
var list=require("../tem/mgs")

/* GET users listing. */
router.get('/', function(req, res, next) {
    list.deleteOne(req.query,function(err,result){
        if(err){console.log("创建失败")}
        else{
            res.send(result)
        }
    })
});

module.exports = router;

　　二‘、3.（3）在routes文件夹下创建find.js文件，用来监听查询数据库的操作，查询用户数据

var express = require('express');
var router = express.Router();
var list=require("../tem/mgs")

/* GET home page. */
router.get('/', function(req, res, next) {
    if(req.query.name){
        list.find({name:new RegExp(req.query.name)},function(err,result){
            if(err){console.log("查寻失败")}
            else{
                res.send(result)
            }
        })
    }else{

        list.find({},function(err,result){
            if(err){console.log("查询失败")}
            else{
                res.send(result)
            }
        })
    }

});

module.exports = router;

　　二‘、3.（4）在routes文件夹下创建find1.js文件，用来监听查询数据库的操作，判断是否有此用户

var express = require('express');
var router = express.Router();
var list=require("../tem/mgs")

/* GET users listing. */
router.get('/', function(req, res, next) {
    list.find(req.query,function(err,result){
        if(err){console.log("查询失败")}
        else{
            res.send(result)
        }
    })
});

module.exports = router;

　　二、3.（5）在routes文件夹下创建update.js文件，用来监听更新数据的操作

var express = require('express');
var router = express.Router();
var list=require("../tem/mgs")

/* GET users listing. */
router.get('/', function(req, res, next) {
    // console.log(req.query)
    var id={_id:req.query.id}
    var obj={
        name:req.query.name,
        message:req.query.message,
        price:req.query.price
    }
    list.update(id,obj,function(err,result){
        if(err){console.log("更新失败")}
        else{
            res.send(result)
        }
    })
});

module.exports = router;

　　

　　　二、4.创建app.js  和node_modules文件夹同级

　　　　　　　　　

　　　　　　　　　　app.js文件中的内容

//导入服务
var app=require("./tem/server")

//接收请求地址
var find = require('./routes/find');
var create = require('./routes/create');
var dele = require('./routes/dele');
var find1 = require('./routes/find1');
var update = require('./routes/update');


//执行请求
app.use('/find', find);
app.use('/create', create);
app.use('/dele', dele);
app.use('/find1', find1);
app.use('/update', update);

　　

　　　　通过在当前项目根目录下小黑框中输入supervisor app.js加回车

项目就启动了