文件目录
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/48d0b903eb21ccb88af8cbad348d54d2.png#pic_center)
后台
// 写录入系统的接口
var express = require('express')
var apps = express()
// 引入mongoose
var mongoose = require('mongoose')
mongoose.connect("mongodb://127.0.0.1:27017/myFiult",{ useUnifiedTopology: true, useNewUrlParser: true })
var con=mongoose.connection;
//判断是否连接成功
con.on("open",function(){
console.log('YES')
})
con.on("error",function(){
console.log('NO')
})
//创建骨架
const app= new mongoose.Schema({
"name":String,
"info":String,
"price":String,
"se":String,
"f1":String,
"f2":String,
"img":String,
"time":String,
"id":String
})
//生成数据模型
const appX=mongoose.model('shoppingList4',app)
const appY=mongoose.model('shoppingList5',app)
// 解析数据
var bodyParser = require('body-parser')
var urlencodedParser = bodyParser.urlencoded({extended: false})
//cors跨域
apps.use('*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', '*');
res.header('Access-Control-Allow-Headers', '*');
next();
});
/* GET users listing. */
apps.get('/', function(req, res, next) {
res.sendFile(__dirname+'/index.html');
});
//添加
apps.post('/addPost', urlencodedParser, function(req, res) {
var obj = req.body;
appX.create(obj, function(err){
res.send('OK')
})
});
//渲染
apps.get('/getContent', urlencodedParser, function(req, res) {
appX.find({}, function(err, data){
res.send(data)
})
});
//删除
apps.post('/delePost', urlencodedParser, function(req, res) {
var obj = req.body;
appX.deleteMany({_id:obj.id}, function(err, data){
res.send(data)
})
});
//修改
apps.post('/updatePost', urlencodedParser, function(req, res) {
var obj = req.body;
console.log(obj)
appX.update({_id:obj.id},{$set: obj}, function(err, data){
res.send(data)
})
});
//分页
apps.post('/fyPost', urlencodedParser, function(req, res) {
var obj = req.body;
appX.find({}, {}, {limit:obj.limit,skip:obj.skip}, function(err, data){
res.send(data)
})
});
//查找
apps.post('/tabData', urlencodedParser, function(req, res) {
var obj = req.body;
appX.find(obj, function(err, data){
res.send(data)
})
});
//查找
apps.post('/tab', urlencodedParser, function(req, res) {
var obj = req.body;
appY.find(obj, function(err, data){
res.send(data)
})
});
//全部删除
apps.post('/alldelPost', urlencodedParser, function(req, res) {
appX.deleteMany({}, function(err, data){
res.send(data)
})
});
//排序
apps.post('/sortPost', urlencodedParser, function(req, res) {
var obj = req.body;
var key = Object.keys(obj)[0];
obj[key] ? obj[key] = obj[key] - 0 : "";
appX.find({}, function(err, data){
res.send(data)
}).sort(obj)
})
module.exports = apps;
前端
new_file.css
*{
margin: 0;
padding: 0;
}
.yc{
display: none;
}
.color{
background: red;
}
img{
width: 50px;
height: 50px;
}
.box{
width: 400px;
margin: 10px auto;
border: 1px solid;
}
.top{
width: 100%;
height: 600px;
}
.top>div{
width: 100%;
height: 600px;
}
.ul1{
display: flex;
width: 100%;
height: 50px;
}
.ul1>li{
flex: 1;
height: 50px;
text-align: center;
line-height: 50px;
}
.ul2{
width: 100%;
}
.ul2>li{
width: 100%;
line-height: 50px;
height: 50px;
position: relative;
margin-bottom: 5px;
}
.ul2>li>img{
vertical-align: middle;
}
.ul2>li>button{
width: 20px;
position: sticky;
position: absolute;
top:15px;
right:5px;
}
.bottom{
width: 100%;
height: 50px;
display: flex;
}
.lift{
flex: 1;
height: 50px;
}
.right{
flex: 1;
height: 50px;
}
.bottom>div{
text-align: center;
}
.bottom a{
line-height: 50px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="box">
<div class="top">
<div class="one">
<ul type="none" class="ul1">
<li class="color" onclick="f('s1')">冰箱</li>
<li onclick="f('s2')">电脑</li>
<li onclick="f('s3')">手机</li>
</ul>
<ul type="none" class="ul2">
<!-- <li ids="${arr[i]._id}">
<img src="imgs/${arr[i].img.split('_')[1]}" alt="">
<span>${arr[i].info}¥${arr[i].price.toFixed(2)}</span>
<button type="button" class="add">+</button>
</li> -->
</ul>
</div>
<div class="two yc">
</div>
</div>
<div class="bottom">
<div class="lift color">
<a href="javascript:void(0)" class="a1">首页</a>
</div>
<div class="right">
<a href="javascript:void(0)" class="a2">购物车</a>
</div>
</div>
</div>
</body>
<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
<script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
</html>
new_file.js
$('.bottom>div').click(function(){
$(this).addClass('color').siblings().removeClass('color')
var index = $(this).index()
$('.top>div').eq(index).show().siblings().hide()
})
$('.ul1>li').click(function(){
$(this).addClass('color').siblings().removeClass('color')
})
f('s1')
function f(q){
$.ajax({
type:'post',
url:'/tabData',
data:{se:q},
success:function(res){
show(res)
}
});
}
function show(arr){
var str = ''
for (let i = 0; i < arr.length; i++) {
str+=`
<li ids="${arr[i]._id}">
<img src="imgs/${arr[i].img.split('_')[1]}" alt="">
<span>${arr[i].info}¥${Number(arr[i].price).toFixed(2)}</span>
<button type="button" class="add">+</button>
</li>`
}
$('.ul2').html(str)
}
$('.ul2').on('click', '.add', function(){
var ids = $(this).parent().attr('ids')
$.ajax({
type:'post',
url:'/tabData',
data:{_id:ids},
success:function(res){
console.log(res)
}
});
})
function showDom(arr){
}