首页 > 其他分享 >购物车与vue生命周期与后端交互

购物车与vue生命周期与后端交互

时间：2022-10-26 22:16:54浏览次数：69  
标签：el 生命周期 console log res 购物车 vue data name

表单控制

1.<input type="checkbox">
-多选、单选
2.<input type="radio">
-单选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>表单控制</h1>
    <p><input type="text" v-model="name"></p>
    <p><input type="text" v-model="password"></p>
    <p><input type="checkbox" v-model="isRemember">记住密码</p>
    <p>
        <input type="radio" v-model="gender" value="1">男
        <input type="radio" v-model="gender" value="2">女
    </p>
    <p>
        <input type="checkbox" v-model="hobby" value="唱">唱
        <input type="checkbox" v-model="hobby" value="跳">跳
        <input type="checkbox" v-model="hobby" value="rap">rap
    </p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
            // checkbox单选使用布尔值
            isRemember: false,
            // radio单选使用字符串
            gender: '',
            // checkbox多选使用数组
            hobby: [],
        },
    })
</script>
</html>

购物车带选择与加减

  • js中for循环
1.方式一:js的基于索引的循环
for (var i = 0; i < GroupList.length; i++) {
    // 循环出一个个对象
    console.log(GroupList[i])
}

2.方式二:基于迭代的循环
for (i in GroupList){
    // 循环出一个个索引
    console.log(GroupList[i])
}

3.方式三:of循环，基于迭代的
  for (i of GroupList){
      // 直接循环出值
    console.log(i)
}

4.方式四:数组的循环方法
GroupList.forEach(item => {
    // 直接循环出值
    console.log(item)
})

5.方式五:jquery的each循环
$.each(GroupList, (i, v) => {
    // i就是索引，v就是值
    console.log(v)
})
  • 购物车代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <h1 class="text-center">购物车</h1>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品id</th>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th><input type="checkbox" v-model="CheckAll" @change="handleChange">全选</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="Group in GroupList">
                        <th>{{Group.id}}</th>
                        <th>{{Group.name}}</th>
                        <th>{{Group.price}}</th>
                        <th><span class="btn link btn-sm" @click="handDown(Group)">-</span>{{Group.count}}<span
                                class="btn link btn-sm" @click="Group.count ++">+</span></th>
                        <td><input type="checkbox" v-model="CheckGroup" :value="Group" @change="handleOne"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                选中的商品:{{CheckGroup}}
                <br>
                总价格:{{CheckPrice()}}
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            GroupList: [{id: 1, name: '老魔杖', price: '2000', count: 1},
                {id: 2, name: '魔法石', price: '1000', count: 3},
                {id: 3, name: '光轮2000', price: '200', count: 7},
                {id: 4, name: '隐形斗篷', price: '700', count: 2},],
            CheckGroup: [],
            CheckAll: false,
        },
        methods: {
            CheckPrice() {
                // 取出CheckGroup中的商品数量和价格相乘
                var total = 0
                for (item of this.CheckGroup) {
                    total += item.price * item.count
                }
                return total
            },
            handleChange() {
                if (this.CheckAll) {
                    this.CheckGroup = this.GroupList
                } else {
                    this.CheckGroup = []
                }
            },
            handleOne() {
                // 如果CheckGroup的长度等于GroupList的长度则表示全选
                this.CheckAll = (this.CheckGroup.length == this.GroupList.length)
            },
            handDown(good) {
                if (good.count>1){
                    good.count --
                }else {
                    alert('不能在少了')
                }
            },
        },
    })
</script>
</html>

v-model进阶

1.v-model.lazy
-失去焦点后，input框内的数据绑定变化

2.v-model.number:
-数字开头则则保留数字，后面有非数字则后面的都不保留；非数字开头则都保留

3.v-model.trim:
-去除首尾处的空格
  • 使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model.lazy="name">{{name}}
    <br>
    <input type="text" v-model.number="name1">{{name1}}
    <br>
    <input type="text" v-model.trim="name2">{{name2}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            name1: '',
            name2: '',
        },
    })
</script>
</html>

vue生命周期

1.var vm=new	Vue实例()
-实例创建，数据放到实例中
-挂在模板:el对应的名字的标签内容挂载起来
-修改页面、修改变量，都会相互影响
-销毁实例

2.4个过程对应8个函数，一次执行
-beforeCreate:创建Vue实例之前调用，data、el都没有
-created:创建Vue实例成功后调用(可以在此处发送异步请求后端数据)，data有了，el没有的
-beforeMount:渲染DOM之前调用，data有了，el没有
-mounted:渲染DOM之后调用，data、el都有了
-beforeUpdate:重新渲染之前调用(数据更新等操作时，控制DOM重新渲染)
-updated:重新渲染完成之后调用
-beforeDestroy:销毁之前调用
-destroyed:销毁之后调用

3.生命周期常用知识
-组件向后端发送请求，获取数据，应该放在created中，此时data中已经有数据了
-destroyed做一些资源清理的工作

4.组件创建，开启定时器，不停的打印hello，在destroyed中对定时器进行销毁
setInterval(() => {
    console.log('hello')
}, 3000)
-定时任务有什么用
(1)-实时跟后端交互，基于http+定时任务
-websocket协议:服务端主动推送消息，想手机APP的消息推送
(2)排队秒杀场景:先提交秒杀请求，每个几秒发一次，查询是否秒杀到
  • vm生命周期实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>vue生命周期</h1>
    <hr>
    <button @click="handShow">点击组件消失/显示</button>
    <hr>
    <child v-if="show"></child>
    <hr>
</div>
</body>
<script>
    // 定义一个全局组件
    Vue.component('child', {
        template: `
          <div>
          <button>后退</button>
          {{ title }}
          <button @click="handClick">前进</button>
          </div>`,
        data() {
            return {
                title: '首页',
                t: '',
            }
        },
        methods: {
            handClick() {
                // 修改
                this.title = '123'
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
            console.log(this.$data)
            console.log(this.$el)
        },
        created() {
            console.log('created')
            console.log(this.$data)
            console.log(this.$el)
            this.t = setInterval(() => {
                console.log('hello')
            }, 3000)
        },
        beforeMount() {
            console.log('beforeMount')
            console.log(this.$data)
            console.log(this.$el)
        },
        mounted() {
            console.log('mounted')
            console.log(this.$data)
            console.log(this.$el)
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        destroyed() {
            console.log('destroyed')
        }
    })

    var vm = new Vue({
        el: '#app',
        data: {
            show: true,
        },
        methods: {
            // 销毁、创建全局组件
            handShow() {
                this.show = !this.show
            }
        },

    })
</script>
</html>

与后端交互

1.与后端交互
-js原生发送的ajax请求:new XMLHttpRequest(),浏览器兼容性不好，所有jquery基于它做了封装，封装出了jquery的ajax方法，因为XMLHttpRequest有很多bug
-jquery原生ajax在vue中用的很少
-js原生fetch是现在官方主推的，不支持ie浏览器
-axios在vue中比较常用，它封装了XMLHttpRequest，promsie风格

2.处理跨域请求
2.1跨域请求指的是当前发起请求的域与该请求指向的资源所在的域不一样，凡是发送请求的url的'协议'、'域名'、'端口号'三者之间任意一者与当前页面地址不同的请求
2.2处理跨域请求
res.headers = {'Access-Control-Allow-Origin': '*'}

js原生ajax与后端交互

  • 前端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
                <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>js原生ajax与后端交互</h1>
    <button @click="handleLoad">点击加载数据</button>
    <br>
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: 0,
        },
        methods: {
            handleLoad(){
                $.ajax({
                    url:'http://127.0.0.1:5000',
                    type:'get',
                    success:data=>{
                        // 从后端返回的数据被ajax获取后是字符串，需要转换回对象类型
                        data=JSON.parse(data)
                        this.name = data.name
                        this.age = data.age
                        console.log(data)
                    }
                })
            }
        },
    })
</script>
</html>
  • 后端
from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    res = jsonify({'name': 'barry', 'age': 18})
    # 处理跨域请求
    res.headers = {'Access-Control-Allow-Origin': '*'}
    return res


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

js原生fetch与后端交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>js原生fetch与后端交互</h1>
    <button @click="handleLoad1">点击加载数据</button>
    <br>
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: 0,
        },
        methods: {
            handleLoad1() {
                fetch('http://127.0.0.1:5000').then(res => res.json()).then(res => {
                    console.log(res)
                    this.name = res.name
                    this.age = res.age
                })
            },
        },
    })
</script>
</html>

axios与后端交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>axios与后端交互</h1>
    <button @click="handleLoad2">点击加载数据</button>
    <br>
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: 0,
        },
        methods: {
            handleLoad2() {
                axios.get('http://127.0.0.1:5000').then(res => {
                    // 后端真正的数据在data中
                    console.log(res)
                    this.name = res.data.name
                    this.age = res.data.age
                })
            }
        },
    })
</script>
</html>

标签：el,生命周期,console,log,res,购物车,vue,data,name
From： https://www.cnblogs.com/riuqi/p/16830250.html

相关文章

  • 【2022.10.26】Vue基础学习（3）
    内容概要1.表单控制2.购物车案例3.v-model进阶4.vue生命周期1表单控制#input：checkbox（单选，多选），radio（单选）<!DOCTYPEhtml><htmllang="en"><head><meta......
  • 【2022-10-26】前端Vue框架(三)
    一、表单控制#表单控制可以用一个input框来实现数据绑定：主要参数有checkbox（单选，多选），radio（单选），示例如下：1.1单选<!DOCTYPEhtml><htmllang="en"><head><meta......
  • Vue 组件化编程
    1.1模块与组件、模块化与组件化1.1.1模块理解：向外提供特定功能的js程序，一般就是一个js文件为什么：js文件很多很复杂作用：复用js，简化js的编写，提高js运行效率......
  • vue_3
    目录表单控制基本购物车案例购物车进阶版v-model进阶Vue生命周期1.varvm=newVue({})2.四个过程对应八个函数，依次进行(到某个过程就会执行某个函数)3.钩子函数(hook)4.与......
  • 新建vue项目中各个文件夹的作用
    node_modules文件夹作用:项目的安装依赖文件夹,由命令nmpinstall生成public文件夹:用于存放项目所使用到的一些静态资源(图片等），在最后webpack打包时会直接放入dist文......
  • vue3-- 表单控制 - radio单选 - 购物车案例 - v-model进阶 （了解） - vue生命周期
    表单控制radio单选购物车案例v-model进阶（了解）vue生命周期表单控制input：checkbox(单选，多选，radio(单选))<!DOCTYPEhtml><htmllang="en"><head><metacha......
  • Vue学习-03
    表单控制input：CheckBox（单选，多选）   radio（单选）代码演示<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scrip......
  • Vue 尚硅谷
     //定义组件constschool=Vue.extend({template:`<h2>{{message}}</h2>`,data(){message:'nihao,hello'}})//局部注册组件newVue({......
  • 今日内容 Vue生命周期
    表单控制input：checkbox（单选，多选），radio（单选）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/v......
  • vue生命周期，vue的购物车案例
    表单控制input：checkbox（单选，多选），radio（单选）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js/vue.j......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99