購物車案例
阿新 • • 發佈:2021-01-11
目錄
檔案目錄
後臺
// 寫錄入系統的介面 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){
}