Vue（购物车案例代码笔记）

最新推荐文章于 2024-03-30 10:17:30 发布

开心市民小顾

最新推荐文章于 2024-03-30 10:17:30 发布

阅读量933

点赞数 1

文章标签： html css vue

本文链接：https://blog.csdn.net/qq_45433707/article/details/106114541

版权

所有内容来自黑马程序员课程，如果侵犯联系删除。
按照组件化方式实现业务需求

按照业务功能进行组件化划分

 	 - 标题组件（展示文本）
 	 - 列表组件（列表展示，商品数量变更，商品删除）
 	 - 组件结算（计算商品金额）

2.功能实现步骤

		 - 实现整体布局和样式效果
		 - 划分独立的功能组件
		 - 组合所有的子组件形成整体结构
		 - 逐个实现各个组件功能
		 			-标题组件
		 			-列表组件
		 			-结算组件

html+css静态；初始状态

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .container .cart {
            width: 300px;
            margin: auto;
        }
        
        .container .title {
            background-color: lightblue;
            height: 40px;
            line-height: 40px;
            text-align: center;
            /*color: #fff;*/
        }
        
        .container .total {
            background-color: #FFCE46;
            height: 50px;
            line-height: 50px;
            text-align: right;
        }
        
        .container .total button {
            margin: 0 10px;
            background-color: #DC4C40;
            height: 35px;
            width: 80px;
            border: 0;
        }
        
        .container .total span {
            color: red;
            font-weight: bold;
        }
        
        .container .item {
            height: 55px;
            line-height: 55px;
            position: relative;
            border-top: 1px solid #ADD8E6;
        }
        
        .container .item img {
            width: 45px;
            height: 45px;
            margin: 5px;
        }
        
        .container .item .name {
            position: absolute;
            width: 90px;
            top: 0;
            left: 55px;
            font-size: 16px;
        }
        
        .container .item .change {
            width: 100px;
            position: absolute;
            top: 0;
            right: 50px;
        }
        
        .container .item .change a {
            font-size: 20px;
            width: 30px;
            text-decoration: none;
            background-color: lightgray;
            vertical-align: middle;
        }
        
        .container .item .change .num {
            width: 40px;
            height: 25px;
        }
        
        .container .item .del {
            position: absolute;
            top: 0;
            right: 0px;
            width: 40px;
            text-align: center;
            font-size: 40px;
            cursor: pointer;
            color: red;
        }
        
        .container .item .del:hover {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="cart">
                <div class="title">我的商品</div>
                <div>
                    <div class="item">
                        <img src="img/1.ico" alt="">
                        <div class="name">哈哈哈哈</div>
                        <div class="change">
                            <a href="">-</a>
                            <input type="text" class="num">
                            <a href="">+</a>
                        </div>
                        <div class="del">*</div>
                    </div>
                    <div class="item">
                        <img src="img/1.ico" alt="">
                        <div class="name">哈哈哈哈</div>
                        <div class="change">
                            <a href="">-</a>
                            <input type="text" class="num">
                            <a href="">+</a>
                        </div>
                        <div class="del">*</div>
                    </div>
                    <div class="item">
                        <img src="img/1.ico" alt="">
                        <div class="name">哈哈哈哈</div>
                        <div class="change">
                            <a href="">-</a>
                            <input type="text" class="num">
                            <a href="">+</a>
                        </div>
                        <div class="del">*</div>
                    </div>
                    <div class="item">
                        <img src="img/1.ico" alt="">
                        <div class="name">哈哈哈哈</div>
                        <div class="change">
                            <a href="">-</a>
                            <input type="text" class="num">
                            <a href="">+</a>
                        </div>
                        <div class="del">*</div>
                    </div>
                </div>
                <div class="total">
                    <span>总价</span>
                    <button>结算</button>
                </div>
            </div>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    </script>
</body>

</html>

vue后的代码：

// 引入json文件测试
const data = require('./data.json');
//引入路径模块
const path = require('path');
//引入操作文件模块
const fs = require('fs');

// 自动生成图书编号（自增）
let maxBookCode = () => {
    let arr = [];
    data.forEach((item) => {
        arr.push(item.id);
    });
    // 返回数组中最大数
    return Math.max.apply(null, arr);
};
// 把内存数据写入文件
let writeDataToFile = (res) => {
    console.log(res);
    fs.writeFile(path.join(__dirname, './data.json'), JSON.stringify(data, null, 4), (err) => {
        if (err) {
            res.json({
                status: 500
            });
        }
        res.json({
            status: 200
        });
    })
};

//获取图书列表
exports.getAllBooks = (req, res) => {
    res.send(data);
};
//添加图书
exports.addBooks = (req, res) => {
    let info = req.body;
    let book = {};
    for (let key in info) {
        book[key] = info[key];
    }
    book.date = Date();
    book.id = maxBookCode() + 1;
    data.push(book);
    writeDataToFile(res);

};
// 验证图书是否存在
exports.checkName = (req, res) => {
    let name = req.params.name;
    if (name.trim().length == 0) {
        res.json({
            status: 3
        })
    }
    // console.log(name);
    let flag = false;
    data.some(item => {
        if (item.name == name) {
            flag = true;
            return true;
        }
    });
    if (flag) {
        res.json({
            status: 1
        });
    } else {
        res.json({
            status: 2
        })
    }
};
// 编辑图书根据id查找图书
exports.ToEditBook = (req, res) => {
    let id = req.params.id;
    book = {};
    data.some((item) => {
        if (id == item.id) {
            book = item;
            return true;
        }
    });
    res.json(book);
};
// 编辑图书功能
exports.editBook = (req, res) => {
    let info = req.body;
    let id = req.params.id;
    data.some(item => {
        if (item.id == id) {
            for (let key in info) {
                item[key] = info[key];
            }
            return true;
        }
    });
    writeDataToFile(res);
};

// 删除图书
exports.deleteBook = (req, res) => {
    let id = req.params.id;
    data.some((item, index) => {
        if (id == item.id) {
            data.splice(index, 1);
            return true;
        }
    })
    writeDataToFile(res);
}