Mysql+Node+bootstrap 购物车简单小Demo
技术简介——Node.js
Node.js 是一个开源与跨平台的 JavaScript 运行时环境。
Node.js 在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核)。
Node.js 具有独特的优势,因为为浏览器编写 JavaScript 的数百万前端开发者现在除了客户端代码之外还可以编写服务器端代码,而无需学习完全不同的语言。
在 Node.js 中,可以毫无问题地使用新的 ECMAScript 标准,因为不必等待所有用户更新其浏览器,你可以通过更改 Node.js 版本来决定要使用的 ECMAScript 版本,并且还可以通过运行带有标志的 Node.js 来启用特定的实验中的特性。
项目分析
用户通过注册获得登录资格,登录系统出现“商品信息页面”,添加其中商品及数量。点击““我的购物车”按钮,可以选择删除其中商品,最后点击结算按钮,跳转至“账单页面”。
项目效果图
数据库
用户表
CREATE TABLE `t_user` (`uname` varchar(11) COLLATE utf8mb4_unicode_ci DEFAULT NULL, `upwd` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,`sex` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT '男',`age` int(11) DEFAULT NULL,`uid` int(11) NOT NULL AUTO_INCREMENT,PRIMARY KEY (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=19 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
商品信息表
CREATE TABLE `good` (`goodId` int(11) NOT NULL AUTO_INCREMENT,`goodName` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,`goodNum` int(11) DEFAULT NULL,`price` float DEFAULT NULL,PRIMARY KEY (`goodId`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
购物车信息表
CREATE TABLE `goodcart` (`gcid` int(11) NOT NULL AUTO_INCREMENT,`cid` int(11) NOT NULL,`gid` int(11) DEFAULT NULL,`goodqutity` int(11) DEFAULT NULL,PRIMARY KEY (`gcid`,`cid`)
) ENGINE=InnoDB AUTO_INCREMENT=72 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
用户购物车表
CREATE TABLE `cart` (`cid` int(11) NOT NULL AUTO_INCREMENT,`uid` int(11) DEFAULT NULL,PRIMARY KEY (`cid`)
) ENGINE=InnoDB AUTO_INCREMENT=26141 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
- 1.创建node项目
- 安装NodeJS NodeJS安装教程
- 创建Node项目创建Node项目教程
- 在编译软件的terminal中安装mysql、express、morgan依赖包
//安装命令
npm install node express mysql morgan
2.配置app.js文件
const express=require('express');
const path=require("path");
//日志记录包引入
const logger=require("morgan");
//添加两个自定义路由JS文件
const login=require('./router/login.js')
const good=require('./router/good.js')
const app=express();var bodyParser=require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))app.use(logger('dev'));
app.use(login);
app.use(good);
app.use(express.urlencoded({extends:true}));
//将默认路径设置为public,这样进入服务时,自动跳转至public包下的index.html文件
app.use(express.static(path.join(__dirname,"public")));//将项目运行端口号设置为8083
app.listen('8083',function(){console.log(" http://localhost:8083")
})
3.配置db/dbconfig.js文件
const mysql=require('mysql');
module.exports={config:{host:"localhost",user:'root',password:"1234",database:"goodCart",port:3306,"multipleStatements":true //允许一次性实现多个sql查询语句},_connect(sql,params,cb){let myConnection=mysql.createConnection(this.config);myConnection.connect();myConnection.query(sql,params,cb);myConnection.end();},_connetion(sql,params,cb){let pool=mysql.createPool(this.config);pool.getConnection(function(err,conn){if(err){console.log(err);}conn.query(sql,params,cb);pool.releaseConnection(conn);})}
}
4.编写public/index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录页面</title><link href="bootstrap/css/bootstrap.css" rel="stylesheet"><style>.block{display: block;}.noblock{display: none;}</style>
</head>
<body><div class="container mt-5"><div class="alert alert-danger" role="alert" id="alert1"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">×</button>登录失败</div><div class="alert alert-success" role="alert" id="alert2"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">×</button>登录成功</div><div class="row mt-5"><div class="col-3"></div><div class="col-6"><form><div class="form-group" style="text-align: center"><h2 style="letter-spacing: 30px;">登录</h2></div><div class="form-group"><label for="username">用户名</label><input type="text" class="form-control" id="username" placeholder="请输入用户名"><small id="nousername" class="form-text text-muted float-right"><span style="color: #bd2130;">您输入的用户名不符合规范!</span></small></div><div class="form-group"><label for="pwd">密码</label><input type="password" class="form-control" id="pwd"placeholder="请输入密码"><small id="nopwd" class="form-text text-muted float-right" ><span style="color: #bd2130;"> 您输入的密码不符合规范!</span></small></div><div class="form-group mb-5" id="block"><small id="findpwd" class="form-text text-muted float-left"><a href="#">找回密码</a></small><small id="register" class="form-text text-muted float-right"><a href="html/register.html">注册</a></small></div><div class="form-group"><button type="button" id="btn1" class="btn btn-primary btn-block">确认</button></div></form></div><div class="col-3"></div></div></div><script src="common/jquery-3.3.1.js"></script><script src="bootstrap/js/bootstrap.bundle.js"></script><script>$(function(){$("#alert1").hide();$("#alert2").hide()$("#nousername").hide();$("#nopwd").hide();})function login(){let username,pwd;username=$("#username").val();pwd=$("#pwd").val();if(/^\w{3,10}$/.test(username)){}else{$("nousername").css("display","block");$("#nousername").show();}if(/^\w{3,10}$/.test(pwd)){}else{$("#nopwd").show();$("#block").css("margin-top","25px");return;}//原生JSlet xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsfot.XMLHTTP");let data="";xhr.onreadystatechange=function(){//console.log(xhr.readyState); //1 初始化 2 发起请求 3 进行中,等待响应 4 完成请求if(xhr.readyState==4){data=JSON.parse(xhr.responseText);if(data.status==200){$("#alert2").show();localStorage.setItem("username",username);location.href="html/main.html";}else if(data.status==400){$('#alert1').show()}}}xhr.open("post",'/login',true);xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");xhr.send(`username=${username}&pwd=${pwd}`);}$("#btn1")[0].addEventListener("click",login,true);</script>
</body>
</html>
5.编写public/html/register.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册页面</title><link href="./../bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5"><div class="row mt-5"><div class="col-3"></div><div class="col-6"><form><div class="form-group" style="text-align: center"><h2 style="letter-spacing: 30px;">注册</h2></div><div class="form-group"><label for="username">用户名</label><input type="text" class="form-control" id="username" placeholder="请输入用户名"><small id="nousername" class="form-text text-muted float-right"><span style="color: #bd2130;">您输入的用户名不符合规范!</span></small></div><div class="form-group"><label for="pwd">密码</label><input type="password" class="form-control" id="pwd" placeholder="请输入密码"><small id="nopwd" class="form-text text-muted float-right"><span style="color: #bd2130;">您输入的用户名不符合规范!</span></small></div><div class="form-group mb-5"><small id="register" class="form-text text-muted float-right"><a href="./../index.html">登录</a></small></div><div class="form-group"><button type="button" class="btn btn-primary btn-block" id="btn1">确认</button></div></form></div><div class="col-3"></div></div>
</div><script src="./../common/jquery-3.3.1.js"></script>
<script>$(function(){$("#nousername").hide();$("#nopwd").hide();})function register(){let username,pwd;username=$("#username").val();pwd=$("#pwd").val();if(/^\w{4,10}$/.test(username)){}else{$("nousername").css("display","block");$("#nousername").show();}if(/^\w{4,10}$/.test(pwd)){}else{$("#nopwd").show();$("#block").css("margin-top","25px");return;}let xhr=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsfot.XMLHTTP");let data="";xhr.onreadystatechange=function(){data=JSON.parse(xhr.response);if(xhr.readyState==4){if(data.status==200){alert("注册成功");location.href="./../index.html";}else{alert("注册失败");}}}xhr.open("post",'/register');xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");xhr.send(`username=${username}&pwd=${pwd}`);}$("#btn1")[0].addEventListener("click",register,true);
</script>
</body>
</html>
6.编写登录和注册的接口文件login.js
const express=require('express');
const db=require('./../db/dbconfig.js');
const _router=express.Router();module.exports=_router;
_router.route('/register').post(function(request,response){let user=request.body;let values=[user.username,user.pwd];console.log(values)let sql = 'INSERT INTO `t_user` (uname, upwd) VALUE(?,?);';let cb=function(err,data,fields){if(!err){response.json({"status":200,"msg":"注册成功","data":[]})}else{response.json({"status":400,"msg":"注册失败","data":[]})}}db._connetion(sql,values,cb);})_router.post('/login',function(request,response){let user = request.body;let values = [user.username,user.pwd];let sql='select uid from `t_user` where uname=? and upwd=?';let cb=function(error,data,fields){if(!error&data.length==1){response.json({"status":200,"msg":"登录成功","data":data})}else{response.json({"status":400,"msg":"登录失败","data":data})}}db._connetion(sql,values,cb);})
7.编写商品信息页面public/html/main.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>主页面</title><link rel="stylesheet" href="./../bootstrap/css/bootstrap.css"><style>.plussub {width:120px;height:32px;border:1px solid #ccc;background:#fff;margin:0 auto;}.plussub span {width:30px;height:30px;float:left;text-align:center;line-height:30px;cursor:pointer;}.plussub .sub {border-right:1px solid #ccc;}.plussub .plus {border-left:1px solid #ccc;}.plussub input[type="text"] {border:none;height:30px;width:56px;text-align:center;float:left;line-height:30px;}</style>
</head>
<body style="background-color: #d7f5ff">
<div class="form-group mt-5" style="text-align: center"><h2 style="letter-spacing: 30px;">商品信息</h2><button type="button" id="btn3" class="btn btn-danger">全部加入购物车</button><button type="button" id="btn4" class="btn btn-primary">批量加入购物车</button><button type="button" id="btn5" class="btn btn-info">反选加入购物车</button>
</div>
<div class="container mt-3"><div class="row" style="text-align: center;background-color: rgba(255,255,255,0.8);"><table class="table border" ><thead class="thead-dark"><tr><th scope="col">选择</th><th scope="col">商品名称</th><th scope="col">商品数量</th><th scope="col">数量</th><th scope="col">单价</th><th scope="col">操作</th></tr></thead><tbody id="show"><tr><td><input type="radio"></td><td scope="col">旺仔小馒头</td><td scope="col">100</td><td scope="col"><div class="plussub"><span class="sub" onclick="sub(1)">–</span><input class="yzquantity1" onblur="yzquantity(1)" type="text" value="1"><span class="plus" onclick="plus(1)">+</span></div></td><td scope="col">2.5¥</td><td scope="col"><button type="button" class="btn btn-success">加入购物车</button><button type="button" class="btn btn-danger">删除</button></td></tr></tbody></table><div class="container mt-2 mb-2 mr-2"><button type="button" class="btn btn-primary float-right" id="btn1">我的购物车</button></div></div>
</div><div class="modal fade" id="showGoodInfo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="showUserInfoLabel">商品详情信息</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="container"><div class="row"><div class="col-1"></div><div class="col-10"><div class="form-group"><label>商品名称</label><span class="form-control" id="gN"></span></div><div class="form-group"><label>商品数量</label><span class="form-control" id="gNum"></span></div><div class="form-group"><label>商品单价</label><span class="form-control" id="gP"></span></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">确定</button></div></div><div class="col-1"></div></div></div></div></div></div>
</div><script src="./../common/jquery-3.3.1.js"></script><script src="./../bootstrap/js/bootstrap.bundle.js"></script><script>var count=0;let cid=randomNumber();localStorage.setItem("cid",cid);let arr1=[];//存入批量选择的goodId$(function(){setuid();getList();createC();$(document).on("click",".btn6",confirmBtn);$(document).on("click",".btn-add",addBtn);$(document).on("click",".btn-search",searchBtn);})const setuid=function(){let username= localStorage.getItem("username");$.ajax({type: "get",url: "/setuid",data: {"username":username},success: function (data) {if(data.status==200){localStorage.setItem("uid",data.data[0].uid)}else if(data.status==400){console.log("setuid error")}}}).done(function(){})}const createC=function(){let uId= localStorage.getItem("uid");$.ajax({type: "get",url: "/createC",data: {"uId":uId,"cId":cid},success: function (data) {if(data.status==400){console.log("createC error")}}})}const getList=function(){$.ajax({type : 'get',url : '/getList',success:function(data){if(data.status==200){let arr=data.data;if(arr.length==0){alert("数据库没有数据!");}else{$("#show").html("");for(let i in arr){let obj=arr[i];count=obj.goodNum;$("#show").append(`<tr><td><input type="radio" data-id="${obj.goodId}"></td><td scope="col">${obj.goodName}</td><td scope="col">${obj.goodNum}</td><td scope="col"><input data-id="${obj.goodId}" onKeypress="return (/[\\d]/.test(String.fromCharCode(event.keyCode)))" placeholder="0" type="number" min="0"/><button type="button" class="btn btn-primary btn6" >确定</button></td><td scope="col">${obj.price}¥</td><td scope="col"><button type="button" class="btn btn-success btn-add" data-id="${obj.goodId}">加入购物车</button><button type="button" class="btn btn-danger btn-search" data-id="${obj.goodId}"">查看</button></td></tr>`)}addEventListener}}else if(data.status=400){alert("商品数据库连接有问题!");}}})}const addBtn=(e)=>{let id=$(e.target).attr("data-id");$.ajax({type:"get",url:"/saveCartInfo",data:{"goodId":id,"cartId":cid,"count":count},success:function(data){if(data.status==200){console.log(data)alert("成功添加至购物车!");}else if(data.status==400){alert("货物信息连接失败!");}}})}const searchBtn=(e)=>{$("#showGoodInfo").modal("show");let id=$(e.target).attr("data-id");$.ajax({type:"get",url:"/getGoodDetailInfo",data:{"goodId":id},success:function(data){let arr=data.data;console.log(arr);$("#gN").text(arr[0].goodName);$("#gNum").text(arr[0].goodNum);$("#gP").text(arr[0].price+"¥");}})}$("#btn1")[0].addEventListener("click",function(){location.href='./cart.html';},true)//全部加入购物车$("#btn3")[0].addEventListener("click",function(){let gooddata=[];let co=0;$.ajax({type:"get",url:"/selectAll",success:function(data){gooddata.push(data.data[1]);}}).done(function(){$.ajax({type:"get",url:"/addAll",data:{"gooddata":gooddata[0],"length":gooddata[0].length,"cid":cid},success:function(data){if(data.status==200){selectAll();alert("已成功全部添加!");}}})})},true)$("#btn4")[0].addEventListener("click",function(){$("input[type|=radio]:checked").each(function(e){let id=$(this).attr("data-id");arr1.push(id);})console.log(arr1.length);$.ajax({type:"get",url:"/selectSome",data:{"arr1":arr1,"length":arr1.length,"cid":cid},success:function(data){if(data.status==200){$('input[type|=radio]').prop('checked',false);alert("已成功批量添加!");}}})},true)$("#btn5")[0].addEventListener("click",function(){$("input[name='radio']").each(function(){if($(this).attr("checked")) {let id=$(this).attr("data-id");arr1.push(id);$(this).removeAttr("checked");}else {$(this).attr("checked","true");}})cancelAll();},true)function confirmBtn(){count=0;count=$($(this)[0]).prev().val();}function randomNumber() {const now = new Date()let seconds = now.getSeconds()return now.getFullYear().toString()/10+ seconds + (Math.round(Math.random() * 10 + 23)).toString()}function selectAll(){$('input[type|=radio]').attr('checked','checked');}function cancelAll(){$('input[type|=radio]').removeAttr('checked');}</script>
</body>
</html>
8.编写购物车页面public/html/cart.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>购物车</title><link rel="stylesheet" href="./../bootstrap/css/bootstrap.css">
</head>
<body style="background-color: #d7f5ff">
<div class="container mt-3"><div class="form-group mt-5" style="text-align: center"><h2 style="letter-spacing: 30px;" class="mb-4">我的购物车</h2><button type="button" id="btn2" class="btn btn-success">清空购物者</button></div><div class="row" style="text-align: center;background-color: rgba(255,255,255,0.8);"><table class="table border" style="text-align: center;"><thead class="thead-dark"><tr><th scope="col">选择</th><th scope="col">商品名称</th><th scope="col">商品数量</th><th scope="col">商品单价</th><th scope="col">购买数量</th><th scope="col">操作</th></tr></thead><tbody id="show2"><tr><td><input type="radio"></td><td scope="col">旺仔小馒头</td><td scope="col">100</td><td scope="col"><div class="plussub"><span class="sub" onclick="sub(1)">–</span><input class="yzquantity1" onblur="yzquantity(1)" type="text" value="1"><span class="plus" onclick="plus(1)">+</span></div></td><td scope="col">2.5¥</td><td scope="col"><button type="button" class="btn btn-success">加入购物车</button></td></tr></tbody></table><div class="container"><div class="float-right mt-2 mb-3 mr-3"><button type="button" class="btn btn-primary" id="rediect">提交购物车信息,计算总金额</button></div></div></div>
</div><script src="./../common/jquery-3.3.1.js"></script>
<script src="./../bootstrap/js/bootstrap.bundle.js"></script>
<script>$(function(){getCartList();$(document).on("click",".btn-delete",deleteBtn);})const getCartList=function(){let uid=localStorage.getItem("uid");let cid=localStorage.getItem("cid");console.log(uid);$("#show2").html("")$.ajax({type : 'get',url : '/getCartList',data:{"uid":uid,"cid":cid},success:function(data){if(data.status==200){let arr=data.data;for(let i in arr){let obj=arr[i]$("#show2").append(`<tr><td><input type="radio"></td><td scope="col">${obj.goodName}</td><td scope="col">${obj.goodNum}</td><td scope="col">${obj.price}¥</td><td scope="col">${obj.goodqutity}</td><td scope="col"><button type="button" class="btn btn-danger btn-delete" data-id="${obj.goodId}"">删除</button></td></tr>`)}if(arr.length==0){alert("数据库没有数据!");}}else if(data.status=400){alert("数据库连接有问题!");}}})}//删除单个商品function deleteBtn(e){let id=$(e.target).attr("data-id");$.ajax({type:"get",url:"/deleteCart",data:{"goodId":id},success:function(data){if(data.status==200){alert("删除成功!");}else if(data.status==400){alert("删除失败!");}}}).done(function(){getCartList();})}//删除所有商品$("#btn2")[0].addEventListener("click",function(){$.ajax({type:"get",url:"/deleteAllCart",success:function(data){if(data.status==200){alert("删除成功!");}else if(data.status==400){alert("删除失败!");}}}).done(function(){getCartList();})},true)//跳转 location.href="html/total.html";$("#rediect")[0].addEventListener("click",function(){location.href="./total.html";},true)
</script>
</body>
</html>
9.编写购物车结算页面public/html/total.html
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body style="background-color: #d7f5ff"><div class="container mt-5"><div><div class="row"><div class="col-3"></div><div class="col-6" style="padding-bottom:100px;text-align: center;background-color: rgba(255,255,255,0.6);"><div class="form-group mt-5" style="text-align: center"><h2 style="letter-spacing: 30px;">购物车结算</h2><link rel="stylesheet" href="./../bootstrap/css/bootstrap.css"></div><form><div class="form-row"><div class="form-group col-md-6"><label for="uname">用户名称</label><span class="form-control" id="uname"></span></div><div class="form-group col-md-6"><label for="sex">用户性别</label><span class="form-control" id="sex"></span></div></div><div class="form-group"><label>购物车商品</label><table class="table table-bordered"><thead><tr><td scope="col">商品名称</td><td scope="col">商品数量</td><td scope="col">商品单价</td></tr></thead><tbody id="show1"></tbody></table></div><div class="form-group"><label>总金额</label><span class="form-control" id="total"></span></div></form></div><div class="col-3"></div></div></div>
</div><script src="./../common/jquery-3.3.1.js"></script>
<script>$(function(){getTotal();})const getTotal=function(){let uid=localStorage.getItem("uid");let cid=localStorage.getItem("cid");$("#show2").html("")$.ajax({type : 'get',url : '/getTotal',data:{"uid":uid,"cid":cid},success:function(data){$("#show1").html("");if(data.status==200){console.log(data);let arr=data.data[1];$("#uname").text(data.data[0][0].uname);$("#sex").text(data.data[0][0].sex);let count=0;for(let i in arr){let obj=arr[i];$("#show1").append(`<tr><td scope="col">${obj.goodName}</td><td scope="col">${obj.goodqutity}</td><td scope="col">${obj.price}¥</td></tr>`);count+=obj.goodqutity*obj.price;}$("#total").text(count);}else if(data.status=400){alert("数据库连接有问题!");}}})}
</script>
</body>
</html>
9.编写商品信息、购物车、购物车结算接口public/router/good.js
const express=require('express');
const db=require('./../db/dbconfig.js');
const _router=express.Router();
const mysql=require('mysql');
module.exports=_router;
//获取商品信息接口
_router.route('/getList').get(function(request,response){let values=[];let sql = 'select * from good';let cb=function(err,data,fields){if(!err){response.json({"status":200,"msg":"成功获取货物信息","data":data})}else{response.json({"status":400,"msg":"获取货物信息失败","data":data})}}db._connetion(sql,values,cb);})//获取购物车删除商品信息接口
_router.route('/deleteCart').get(function(request,response){let cid=request.query.goodId;let values=[cid];let sql="delete from goodcart where gid=?"let cb=function(err,fields){if(!err){response.json({"status":200,"msg":"成功删除","data":[]})}else{response.json({"status":400,"msg":"删除失败","data":[]})}}db._connetion(sql,values,cb);})//获取清空商品信息接口
_router.route('/deleteAllCart').get(function(request,response){let values=[];let sql="delete from goodcart";let cb=function(err,fields){if(!err){response.json({"status":200,"msg":"成功删除","data":[]})}else{response.json({"status":400,"msg":"删除失败","data":[]})}}db._connetion(sql,values,cb);})//获取购物车信息接口
_router.route('/getCartList').get(function(request,response){let uid=request.query.uid;let cid=request.query.cid;let values=[cid];let sql = 'SELECT goodId,goodName,goodNum,price,gc.`goodqutity` FROM cart c,goodcart gc,good g WHERE c.cid=? AND c.cid=gc.cid AND gc.gid=g.goodId';let cb=function(err,data,fields){if(!err){response.json({"status":200,"msg":"成功获取货物信息","data":data})}else{response.json({"status":400,"msg":"获取货物信息失败","data":data})}}db._connetion(sql,values,cb);})
//获取购物车结算接口
_router.route('/getTotal').get(function(request,response){let uid=request.query.uid;let cid=request.query.cid;let values=[uid,cid];console.log(values);let sql = 'select *from t_user where uid=?;SELECT goodId,goodName,price,gc.goodqutity FROM cart c,goodcart gc,good g WHERE c.cid=? AND c.cid=gc.cid AND gc.gid=g.goodId;';let cb=function(err,data,fields){if(!err){response.json({"status":200,"msg":"成功用户及购物车信息","data":data})}else{response.json({"status":400,"msg":"获取用户及购物信息失败","data":data})}}db._connetion(sql,values,cb);})//获取商品详情信息接口
_router.route('/getGoodDetailInfo').get(function(request,response){let cid=request.query.goodId;let values=[cid];let sql="select * from good where goodId=?"let cb=function(err,data,fields){if(!err){response.json({"status":200,"msg":"成功获取","data":data})}else{response.json({"status":400,"msg":"获取失败","data":data})}}db._connetion(sql,values,cb);})//获取购物车加入商品信息接口
_router.route('/saveCartInfo').get(function(request,response){let count=request.query.count;let goodId=request.query.goodId;let cartId=request.query.cartId;let values=[cartId,goodId,count];let sql="INSERT INTO goodcart (cid, gid,goodqutity) VALUES(?,?,?);"let cb=function(err,data,fields){if(!err){response.json({"status":200,"msg":"成功获取","data":data})}else{response.json({"status":400,"msg":"获取失败","data":data})}}db._connetion(sql,values,cb);})//创建购物车接口
_router.route('/createC').get(function(request,response){let uId=request.query.uId;let cId=request.query.cId;let values=[cId,uId];console.log(values);let sql=" INSERT INTO cart VALUE(?,?);";let cb=function(err,data,fields){if(!err){response.json({"status":200,"msg":"成功获取","data":data})}else{response.json({"status":400,"msg":"获取失败","data":data})}}db._connetion(sql,values,cb);})_router.route('/setuid').get(function(request,response){let username=request.query.username;let values=[username];let sql=" SELECT uid FROM t_user WHERE uname=?;";let cb=function(err,data,fields){if(!err){response.json({"status":200,"msg":"成功获取","data":data})}else{response.json({"status":400,"msg":"获取失败","data":data})}}db._connetion(sql,values,cb);})//获取全部商品信息
_router.route('/selectAll').get(function(request,response){let values=[];console.log(values);let sql=" SELECT Count(*) FROM good;SELECT goodId FROM good;";let cb=function(err,data,fields){if(!err){response.json({"status":200,"msg":"成功获取","data":data})}else{response.json({"status":400,"msg":"获取失败","data":data})}}db._connetion(sql,values,cb);})
//全部商品加入购物车接口
_router.route('/addAll').get(function(request,response){let gooddata=request.query.gooddata;let length=request.query.length;let cid=request.query.cid;let sql="";for(let i=0;i<length;i++){sql+=selectOne(cid,gooddata[i].goodId)}let values=[];let cb=function(err,data,fields){if(!err){response.json({"status":200,"msg":"成功获取","data":data})}else{response.json({"status":400,"msg":"获取失败","data":data})}}db._connetion(sql,values,cb);})function selectOne(cid,gid){let sql='INSERT INTO `goodcart` (`gcid`, `cid`, `gid`, `goodqutity`) VALUES(NULL,'+cid+','+gid+',NULL); 'return sql;
}//批量商品加入购物车接口
_router.route('/selectSome').get(function(request,response){let arr1=request.query.arr1;let length=request.query.length;let cid=request.query.cid;let sql="";for(let i=0;i<length;i++){sql+=selectOne(cid,arr1[i])}let values=[];let cb=function(err,data,fields){if(!err){response.json({"status":200,"msg":"成功获取","data":data})}else{response.json({"status":400,"msg":"获取失败","data":data})}}db._connetion(sql,values,cb);})
Mysql+Node+bootstrap 购物车简单小Demo相关推荐
- java qq邮箱服务器端口_[Java教程]javamail 利用qq邮箱做邮箱服务器,简单小demo
[Java教程]javamail 利用qq邮箱做邮箱服务器,简单小demo 0 2016-07-12 10:00:10 首先maven:javax.mailmail1.4.1 用户名密码验证:1 pu ...
- python购物车简单小程序
通过学习循环.列表等知识,写了购物车简单的程序 注意输入工资,以及输入Id时,需要把其转换为Int类型 # Author:barry allen # -*- coding:utf-8 -*- sala ...
- webService(简单小demo)
1.什么是webService? 1.1.先说好处: WebService是两个系统的远程调用,使两个系统进行数据交互,如应用: 天气预报服务.银行ATM取款.使用邮箱账号登录各网站等. WebSer ...
- [安卓相机1]简单小Demo
安卓相机1-简单Demo 一.创建文件 二.添加对应布局 三.定义Preview类 三.将Preview添加到FrameLayout 四.在Manifest文件中声明相机权限 最后 一.创建文件 1. ...
- node爬虫最简单的demo
1.安装node 2.新建一个文件夹,文件夹里新建一个game.js 3.安装模块 在命令行输入安装模块命令: npm i npm install cheerio sync-request --sav ...
- 云服务器apache mysql php_服务器配置教程:阿里云服务器安装PHP环境(附PHP+MySQL+Apache后台小Demo)...
前言 搭建Apache HTTP Server往往都会安装PHP环境,因为很多人都使用PHP做web.其实相对我而言,我是用PHP做后台.主要是因为我是移动端方向:做iOS和Android.往往需要通 ...
- 【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo
简单记录 - Jsoup爬虫入门实战 数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...
- 接收udp数据_聊聊UDP、TCP和实现一个简单的JAVA UDP小Demo
最近真的比较忙,很久就想写了,可是一直苦于写点什么,今天脑袋灵光一闪,觉得自己再UDP方面还有些不了解的地方,所以要给自己扫盲. 好了,咱们进入今天的主题,先列一下提纲: 1. UDP是什么,UDP适 ...
- node+express项目链接MySQL数据库(最简单版)
node+express项目链接MySQL数据库(最简单版) (假定你node+express项目已创建完成,可参照这里) 第一步.安装mysql驱动 npm install mysql --save ...
最新文章
- BCH独立日最好的礼物——Token发行已实现
- 支持向量机:Numerical Optimization
- linux-shell命令之chgrp(change group)【更改群组】
- 答应了好久的camera资料
- 【CCF】201709-2公共钥匙盒
- 神经网络如何进行深度估计?
- python符号表_根据第一个字符分割列表-Python
- python varchar_在python中声明varchar
- 【Android】proguard混淆代码
- cocos2d-x学习之旅(十一):制作TXM游戏地图,并加载到游戏场景中
- librdkafka交叉编译
- 单片机实验四 矩阵键盘实验
- Q12矩阵中的路径 回溯法
- k8s报错error: You must be logged in to the server (Unauthorized)
- linux运行直播软件,在Linux下可用Wine安装和运行虎牙直播、斗鱼直播
- win10 无法识别x64dbg 插件
- android7 显示到pc,安卓手机上的画面怎么投屏到Win7电脑上?超详细投屏方法看这里!...
- Log日志(Linux C)
- OCC-7.6.0 + MFC单文档应用入门教程
- 信息系统项目管理师笔记
热门文章
- 【九】Android Activity一
- AI上推荐 之 AutoInt模型(Transformer开始玩特征交互)
- 思科认证分类介绍-初级认证、高级认证、最高级认证
- python的各种推导式
- Python爬虫开源项目代码(爬取微信、淘宝、豆瓣、知乎、新浪微博、QQ、去哪网 等等)
- Altium Designer绘制PCB电路板一般流程
- 网上虚拟展厅建设方案介绍
- 阿里云手机系统之我见
- 改变世界的 17 个数学公式,你知道几个?
- 微信小程序 - 根据后端返回的唯一 ID / code,生成 “唯一“ 的推荐码、邀请码、订单号、加密路由、一串英文+数字长字符等 (支持反序列化原 ID 解码,逆向得出 ID 二者互转)wechat