vue购物车案例、v-model进阶、与后端交互

news2024/12/26 10:54:39

一 购物车案例

- 结算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车结算</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <table>
        <tr>
            <td>商品名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>选择</td>
        </tr>
        <tr v-for="item in dataList">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.number}}</td>
            <td><input type="checkbox" :value="item" v-model="checkGroup"></td>
        </tr>
    </table>
    <br>已选商品：{{checkGroup}}
    <br>总价：{{getPrice()}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: [
                {name: '今瓶没', price: 99, number: 2},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 5},
            ],
            checkGroup: [],
        },
        methods: {
            getPrice() {
                let sum_price = 0
                for (i in this.checkGroup) {    // 这里的 i 是索引
                    sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                }
                return sum_price
            }
        }
    })
</script>
</html>

img

- 全选/全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选/全不选</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <table>
        <tr>
            <td>商品名称</td>
            <td>价格</td>
            <td>数量</td>
            <td>全选/全不选<input type="checkbox" v-model="allChecked" @change="checkAll"></td>
        </tr>
        <tr v-for="item in dataList">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.number}}</td>
            <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
        </tr>
    </table>
    <br>已选商品：{{checkGroup}}
    <br>总价：{{getPrice()}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: [
                {name: '今瓶没', price: 99, number: 2},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 5},
            ],
            checkGroup: [],
            allChecked: false,
        },
        methods: {
            getPrice() {
                let sum_price = 0
                for (i in this.checkGroup) {    // 这里的 i 是索引
                    sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                }
                return sum_price
            },
            checkAll() {
                if (this.checkGroup.length > 0) {
                    this.checkGroup = []
                } else {
                    this.checkGroup = this.dataList
                }
            },
            checkOne() {
                // if (this.checkGroup.length === this.dataList.length) {
                //     this.allChecked = true
                // } else {
                //     this.allChecked = false
                // }
                this.allChecked = this.checkGroup.length === this.dataList.length;
            }
        }
    })
</script>
</html>

img

- 数量加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制加减</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
    <div id="box" class="col-md-4 offset-md-1 text-center mt-5 ">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th scope="col">商品名称</th>
                <th scope="col">单价</th>
                <th scope="col">数量</th>
                <th scope="col">全选/全不选 <input type="checkbox" v-model="allChecked" @change="checkAll"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in dataList">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button class="btn link btn-sm" @click="reduceNum(item)">-</button>
                    {{item.number}}
                    <button class="btn link btn-sm" @click="item.number++">+</button>
                </td>
                <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
            </tr>
            <tr class="text-left">
                <td colspan="4">总价：{{getPrice()}}
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            dataList: [
                {name: '今瓶没', price: 99, number: 1},
                {name: '西柚记', price: 59, number: 1},
                {name: '水壶转', price: 89, number: 1},
            ],
            checkGroup: [],
            allChecked: false,
        },
        methods: {
            getPrice() {
                let sum_price = 0
                for (i in this.checkGroup) {
                    sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']
                }
                return sum_price
            },
            checkAll() {
                if (this.checkGroup.length > 0) {
                    this.checkGroup = []
                } else {
                    this.checkGroup = this.dataList
                }
            },
            checkOne() {
                // if (this.checkGroup.length === this.dataList.length) {
                //     this.allChecked = true
                // } else {
                //     this.allChecked = false
                // }
                this.allChecked = this.checkGroup.length === this.dataList.length;
            },
            reduceNum(item) {
                if (item.number === 1) {
                    item.number = 1
                } else {
                    item.number--
                }
            }
        }
    })
</script>
</html>

img

二：v-model进阶

v-model 之 lazy、number、trim

  • lazy：等待input框的数据绑定时区焦点之后再变化
  • number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
  • trim：去除首位的空格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model 之 lazy、number、trim</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model="myText1" placeholder="normal"> {{myText1}}
    <br>
    <input type="text" v-model.lazy="myText2" placeholder="lazy"> {{myText2}}
    <br>
    <input type="text" v-model.number="myText3" placeholder="number"> {{myText3}}
    <br>
    <input type="text" v-model.trim="myText4" placeholder="trim"> {{myText4}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText1: '',
            myText2: '',
            myText3: '',
            myText4: '',
        },
    })
</script>
</html>

img

 

三 与后端交互 - ajax

版本1 - 出现了跨域问题

前端：index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互 - 出现了跨域问题</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleClick">加载数据</button>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {},
        methods: {
            handleClick() {
                $.ajax({
                    url: 'http://127.0.0.1:5000/',    // 发送请求的url，本地的5000端口，是flask的默认端口
                    method: 'get',
                    success: (data) => {
                        console.log(data)
                    }
                })
            }
        }
    })
</script>
</html>
后端：main.py
from flask import Flask    # 这里用轻量级的Flask框架来测试

app = Flask(__name__)


@app.route('/')
def index():
    print('请求来了')
    return 'Hello World'


if __name__ == '__main__':
    app.run()

img

这里可以看出：前端向后端成功发送了请求，后端也成功响应了，但是前端却报错了

这是因为：跨域问题的存在，浏览器检测到前端和后端不是来自同一个域，所以认为这是不安全的，所以就拦截了该资源的传递

想要解决这个问题，就要实现：CORS，也就是 跨域资源共享

版本2 - 解决了跨域问题

前端：index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互 - 解决了跨域问题</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleClick">加载数据</button>
    <p>加载的数据：{{myText}}</p>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            myText: ''
        },
        methods: {
            handleClick() {
                $.ajax({
                    url: 'http://127.0.0.1:5000/',
                    method: 'get',
                    success: (data) => {
                        console.log(data)
                        this.myText = data
                    }
                })
            }
        }
    })
</script>
</html>
后端：main.py
from flask import Flask, make_response

app = Flask(__name__)


@app.route('/')
def index():
    print('请求来了')
    res = make_response('Hello World')
    res.headers['Access-Control-Allow-Origin'] = '*'    # 访问控制允许的源 设置为全部
    return res


if __name__ == '__main__':
    app.run()

img

版本3 - 后端读取json文件传到前端

json文件：file.json
{
  "name": "Darker",
  "age": "18",
  "gender": "male"
}
前端：index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互 - json</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleClick">加载数据</button>
    <p>加载的数据：{{myText}}</p>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            myText: ''
        },
        methods: {
            handleClick() {
                $.ajax({
                    url: 'http://127.0.0.1:5000/',
                    method: 'get',
                    success: (data) => {
                        console.log(data)
                        this.myText = data
                    }
                })
            }
        }
    })
</script>
</html>
后端：main.py
import json

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    print('请求来了')
    with open('file.json', mode='rt', encoding='utf-8') as f:
        dic = json.load(f)
    res = jsonify(dic)
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res


if __name__ == '__main__':
    app.run()

img

fetch

1.简介

① fetch介绍

提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应

它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源

② fetch基本格式
fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

2.实例

json文件：file.json
{
  "name": "Darker",
  "age": "18",
  "gender": "male"
}
后端：main.py
import json

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    print('请求来了')
    with open('file.json', mode='rt', encoding='utf-8') as f:
        dic = json.load(f)
    res = jsonify(dic)
    res.headers['Access-Control-Allow-Origin'] = '*'
    return res


if __name__ == '__main__':
    app.run()
前端：index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue与后端交互 - fetch</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleClick">加载数据</button>
    <p>加载的数据：</p>
    <ul>
        <li >姓名：{{name}}</li>
        <li >年龄：{{age}}</li>
        <li >性别：{{gender}}</li>
    </ul>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            name:'',
            age: '',
            gender: ''
        },
        methods: {
            handleClick() {
                fetch('http://127.0.0.1:5000/').then(response => {
                    return response.json()
                }).then(json => {
                    console.log('从后端获取的json数据', json)   // success 获取的数据
                    this.name = json.name
                    this.age = json.age
                    this.gender = json.gender
                }).catch(ex => {
                    console.log('出现了异常', ex)    // 抛出异常
                })
            }
        }
    })
</script>
</html>

img

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1368641.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

四川思维跳动：抖音能不能根据弹幕找到人？

四川思维跳动：抖音能不能根据弹幕找到人？

在抖音这样的社交媒体平台上&#xff0c;用户可以通过发布抖音短视频与其他用户互动和交流。其中&#xff0c;弹幕是一种常见的互动方式&#xff0c;用户可以通过发送弹幕来表达对视频的评论、喜爱或者提问。然而&#xff0c;有用户担心自己的隐私可能因为弹幕内容被泄露&#…
阅读更多...
新手搭建知识付费平台必备攻略：如何以低成本实现高转化？

新手搭建知识付费平台必备攻略：如何以低成本实现高转化？

明理信息科技知识付费saas租户平台 一、引言 随着知识经济的崛起&#xff0c;越来越多的知识提供者希望搭建自己的知识付费平台。然而&#xff0c;对于新手来说&#xff0c;如何以低成本、高效率地实现这一目标&#xff0c;同时满足自身需求并提高客户转化率&#xff0c;是一…
阅读更多...
AI大语言模型会带来了新一波人工智能浪潮？

AI大语言模型会带来了新一波人工智能浪潮？

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮&#xff0c;可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…
阅读更多...
万能字符单词拼写 - 华为OD统一考试

万能字符单词拼写 - 华为OD统一考试

OD统一考试（C卷） 分值： 100分 题解： Java / Python / C++ 题目描述 有一个字符串数组 words 和一个字符串 chars。假如可以用 chars 中的字母拼写出 words 中的某个"单词"（字符串)，那么我们就认为你掌握了这个单词。 words 的字符仅由 a-z 英文小写宁母组成，…
阅读更多...
认知能力测验，⑥如何破解逻辑判断类测试题？

认知能力测验，⑥如何破解逻辑判断类测试题？

逻辑思维&#xff0c;是一个比较大的范围&#xff0c;在绝大多数的招聘中&#xff0c;认知能力测评形式多样&#xff0c;难度也较大&#xff0c;其中逻辑判断题型所涉及到的分类为&#xff1a;概念类、条件类、矛盾类、数字类、图形类等知识。比如奥数就是个好东西.....如果经历…
阅读更多...
2024年01月微软更新Bug 已解决 ！Explorer.EXE 提示：Windows无法访问指定设备、路径或文件。你可能没有适当的权限访问该项目。

2024年01月微软更新Bug 已解决 ！Explorer.EXE 提示：Windows无法访问指定设备、路径或文件。你可能没有适当的权限访问该项目。

前倾概要 近期大量出现如上图问题&#xff0c;杀毒&#xff0c;系统急救箱都没反应&#xff0c;罪魁祸首就是微软更新&#xff01; 点击什么都是&#xff1a;Windows无法访问指定设备、路径或文件。你可能没有适当的权限访问该项目。 但软件使用正常&#xff0c;还能通过建立…
阅读更多...
8年经验之谈！一文看懂性能测试的流程！

8年经验之谈！一文看懂性能测试的流程！

每天做着点点点测试有没有危机感&#xff1f; 突然有一天&#xff0c;领导说&#xff1a;“小王&#xff0c;今天把996福报系统压一下&#xff0c;下班前把压测报告发我邮箱。” 啥&#xff1f;压测&#xff1f;今天&#xff1f;报告&#xff1f;怎么压&#xff1f;怎么写&am…
阅读更多...
javaweb基础----JDBC（一）

javaweb基础----JDBC（一）

一、什么是JDBC JDBC全称为Java数据库连接(Java Database Connectivity),是一套用于执行SQL语句的Java API。应用程序可以通过这套API连接到关系型数据库&#xff0c;并使用SQL语句完成对数据中数据的查询、增加、更新和删除等操作。 JDBC在应用程序与数据库之间起到了一个桥…
阅读更多...
性能分析与调优: Linux 使用 iperf3 进行TCP网络吞吐量测试

性能分析与调优: Linux 使用 iperf3 进行TCP网络吞吐量测试

目录 一、实验 1.环境 2.TCP网络吞吐量的微观基准测试 二、问题 1.iperf参数有哪些 2.iperf如何二进制安装 一、实验 1.环境 &#xff08;1&#xff09;主机 表1-1 主机 主机架构组件IP备注prometheus 监测 系统 prometheus、node_exporter 192.168.204.18grafana监测…
阅读更多...
BI工具调研

BI工具调研

1、前言 目前公司使用Tableau作为BI工具&#xff0c;但是感觉不是很好用&#xff0c;且国内市场已经不维护了&#xff0c;所以打算换下BI工具&#xff0c;因此需要针对当前市场开源和商业的BI工具进行调研&#xff0c;看看是买商业的还是用开源的。 基于以下部分开源的做了一个…
阅读更多...
深度学习——R-CNN目标检测原理

深度学习——R-CNN目标检测原理

R-CNN系列算法需要先产生候选区域&#xff0c;再对候选区域做分类和位置坐标的预测&#xff0c;这类算法被称为两阶段目标检测算法。近几年&#xff0c;很多研究人员相继提出一系列单阶段的检测算法&#xff0c;只需要一个网络即可同时产生候选区域并预测出物体的类别和位置坐标…
阅读更多...
Jmeter 性能压测 —— 常遇问题与解决技巧！

Jmeter 性能压测 —— 常遇问题与解决技巧！

问题1&#xff1a;如何在大并发测试下&#xff0c;让登录或者后续接口只执行一次&#xff1f; 分析&#xff1a; 这个问题网上的答案其实很多&#xff0c;但是大多不靠谱。 比如推荐使用仅一次控制器&#xff0c;但是仅一次控制器对线程组无效&#xff1b; 比如推荐跨线程组…
阅读更多...
OpenAI ChatGPT-4开发笔记2024-05：windows下anaconda中设置visual studio code workspace

OpenAI ChatGPT-4开发笔记2024-05：windows下anaconda中设置visual studio code workspace

这里写自定义目录标题 1 安装anaconda和vscode2 Create an Anaconda Environment3 select Python Interpreter4 Workspace5 Open Workspace With File6 开发文件夹加入workspace7 美化 1 安装anaconda和vscode 标配。 2 Create an Anaconda Environment conda create --name…
阅读更多...
Python+Flask+MySQL的图书馆管理系统【附源码，运行简单】

Python+Flask+MySQL的图书馆管理系统【附源码，运行简单】

PythonFlaskMySQL的图书馆管理系统【附源码&#xff0c;运行简单】 总览 1、《图书馆管理系统》1.1 方案设计说明书设计目标需求分析工具列表 2、详细设计2.1 登录2.2 注册2.3 程序主页面2.4 图书新增界面2.5 图书信息修改界面2.6 普通用户界面2.7 其他功能贴图 3、下载 总览 …
阅读更多...
网站被挂黑链怎么办

网站被挂黑链怎么办

网站被挂黑链这种事情总是防不胜防&#xff0c;且不说网站本身的安全防护做的是否到位&#xff0c;但只要被盯上了就难逃厄运。即使是企业机构的网站也难逃被黑的经历&#xff0c;更何况用户苦心经营的网站&#xff0c;因此首先需要正确看待挂黑链这个现象&#xff0c;网站被挂…
阅读更多...
Java进击框架：Spring-Web（八）

Java进击框架：Spring-Web（八）

Java进击框架&#xff1a;Spring-Web&#xff08;八&#xff09; 前言DispatcherServlet拦截器异常视图解析重定向转发 语言环境日志 过滤器带注释的控制器声明映射请求其它注解验证 功能性端点URI Links异步请求CORSHTTP缓存视图技术MVC配置其他Web框架 前言 Spring Web MVC是…
阅读更多...
前端学习笔记 6：Pinia

前端学习笔记 6：Pinia

前端学习笔记 6&#xff1a;Pinia Pinia 是 Vue 的一个官方库&#xff0c;用于状态管理。 1.安装 首先创建一个 Vue3 项目&#xff0c;具体方式可以参考这里。 安装 Pinia&#xff1a; npm install pinia创建一个 pinia 实例 (根 store) 并将其传递给应用&#xff1a; im…
阅读更多...
金和OA C6 upload_json 任意文件上传漏洞

金和OA C6 upload_json 任意文件上传漏洞

产品介绍 金和网络是专业信息化服务商,为城市监管部门提供了互联网监管解决方案,为企事业单位提供组织协同OA系统开发平台,电子政务一体化平台,智慧电商平台等服务。 漏洞概述 金和 OA C6 upload_json接口处存在任意文件上传漏洞&#xff0c;攻击者可以通过构造特殊请求包上…
阅读更多...
消息队列-RockMQ-Demo案例拓展输入输出渠道

消息队列-RockMQ-Demo案例拓展输入输出渠道

基于Spirng Cloud Alibaba基础搭建 下面为一个Demo 生产者和消费者是一起的。 父工程pom <properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.8</maven.compiler.source><maven.com…
阅读更多...
如何使用TrafficWatch根据PCAP文件监控和分析网络流量

如何使用TrafficWatch根据PCAP文件监控和分析网络流量

关于TrafficWatch TrafficWatch是一款功能强大的网络数据包嗅探和分析工具&#xff0c;该工具能够帮助我们通过PCAP文件监控和分析目标网络中的网络通信流量。除此之外&#xff0c;该工具还可以为广大研究人员提供针对各种网络协议的内部分析功能&#xff0c;并帮助解决各种网…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023