使用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{
width:100vw;
height:100vh;
position: fixed;
background: rgba(0,0,0,0.5);
display: none;
div{
width:300px;
height:100px;
margin:0 auto;
background:#f2f2f2;
text-align: center;
}
}
.update{
width:100vw;
height:100vh;
position: fixed;
background:rgba(0,0,0,0.5);
display: none;
div{
width: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; width:500px ; justify-content: space-around;">
<button onclick="prev()">prev</button>
<ul class="select" style="display: flex; width: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加回车
项目就启动了
