Mysql+Node+bootstrap 购物车简单小Demo

最新推荐文章于 2024-03-30 03:34:48 发布

水货——鲈鱼

最新推荐文章于 2024-03-30 03:34:48 发布

阅读量1.9k

点赞数 3

文章标签： javascript npm node.js

本文链接：https://blog.csdn.net/weixin_41162427/article/details/107824387

版权

技术简介——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">
               &times;
           </button>
           登录失败
       </div>
       <div class="alert alert-success" role="alert" id="alert2">
           <button type="button" class="close" data-dismiss="alert"
                   aria-hidden="true">
               &times;
           </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;
           }
           //原生JS
           let 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)">&ndash;</span>
                        <input class="yzquantity1" onblur="yzquantity(1)" type="text" value="1">
                        <span class="plus" onclick="plus(1)">&#43;</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">&times;</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)">&ndash;</span>
                       <input class="yzquantity1" onblur="yzquantity(1)" type="text" value="1">
                       <span class="plus" onclick="plus(1)">&#43;</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);
   })