购物车案例

最新推荐文章于 2022-05-14 18:18:54 发布

weixin_48211419

最新推荐文章于 2022-05-14 18:18:54 发布

阅读量67

点赞数

本文链接：https://blog.csdn.net/weixin_48211419/article/details/112438963

版权

文件目录

在这里插入图片描述

后台

// 写录入系统的接口
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){

}

weixin_48211419

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
购物车案例

目录文件目录后台前端new_file.cssindex.htmlnew_file.js文件目录后台// 写录入系统的接口var express = require('express')var apps = express()// 引入mongoose var mongoose = require('mongoose')mongoose.connect("mongodb://127.0.0.1:27017/myFiult",{ useUnifiedTopology: true, useNew
复制链接

扫一扫