526互联

表单控制，购物车案例，v-model进阶，与后端交互的三种方式

发布时间 2023-06-05 19:03:29作者: 无敌大帅逼

1 表单控制

# 1 checkebox:
	-单选
    -多选
# 2 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>checkbox单选</h1>
    <!--    <p>用户名: <input type="text" v-model="username"></p>-->
    <!--    <p>密码: <input type="password" v-model="password"></p>-->
    <!--    <p>记住密码: <input type="checkbox" v-model="remember"></p>-->
    <!--    <hr>-->
    <!--    用户名：{{username}}&#45;&#45;&ndash;&gt;密码：{{password}}&#45;&#45;&ndash;&gt; {{remember}}-->

    <h1>checkbox多选</h1>
    <!--    <p>用户名: <input type="text" v-model="username"></p>-->
    <!--    <p>密码: <input type="password" v-model="password"></p>-->
    <!--    <p>记住密码: <input type="checkbox" v-model="remember"></p>-->
    <!--    <p>爱好：</p>-->
    <!--    <p>篮球：<input type="checkbox" v-model="hobby" value="1"></p>-->
    <!--    <p>足球：<input type="checkbox" v-model="hobby" value="2"></p>-->
    <!--    <p>乒乓球：<input type="checkbox" v-model="hobby" value="3"></p>-->
    <!--    <hr>-->
    <!--    用户名：{{username}}&#45;&#45;&ndash;&gt;密码：{{password}}&#45;&#45;&ndash;&gt; {{remember}}-&#45;&#45;》爱好：{{hobby}}-->

    <h1>radio单选</h1>
    <p>用户名: <input type="text" v-model="username"></p>
    <p>密码: <input type="password" v-model="password"></p>
    <p>记住密码: <input type="checkbox" v-model="remember"></p>
    <p>爱好：</p>
    <p>篮球：<input type="checkbox" v-model="hobby" value="1"></p>
    <p>足球：<input type="checkbox" v-model="hobby" value="2"></p>
    <p>乒乓球：<input type="checkbox" v-model="hobby" value="3"></p>
    <p>性别：
        男：<input type="radio" v-model="gender" value="1">
        女：<input type="radio" v-model="gender" value="2">
        保密：<input type="radio" v-model="gender" value="0">
    </p>
    <hr>
    用户名：{{username}}--&ndash;&gt;密码：{{password}}----> {{remember}}---》爱好：{{hobby}}---》性别：{{gender}}

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            remember: false,
            hobby: [],
            gender: ''
        },
    })
</script>
</html>

2 购物车案例

2.1 基本购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="./js/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="text-center">购物车</h1>

                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品ID</th>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in good_list">
                        <th scope="row">{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td>{{good.number}}</td>
                        <td><input type="checkbox" :value="good" v-model="checkGroup"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                选中了：{{checkGroup}}
                <h3>总价格：{{getPrice()}}</h3>
                <h3>选中了checkbox，checkGroup会发生变化，页面也在变，都会重新刷新页面，函数就会重新执行</h3>
            </div>


        </div>

    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            good_list: [
                {id: 1, name: '钢笔', price: 12, number: 2},
                {id: 2, name: '脸盆', price: 20, number: 20},
                {id: 3, name: '毛笔', price: 6, number: 9},
                {id: 4, name: '圆珠笔', price: 8, number: 5},
                {id: 5, name: '铅笔', price: 1, number: 3},
            ],
            checkGroup: [],
        },
        methods: {
            getPrice() {
                // 1 根据checkGroup选中的，计算
                //  循环checkGroup，拿出价格*数量，累加，最后返回
                var total = 0
                for (item of this.checkGroup) {
                    total += item.number * item.price
                }
                return total
            }
        }
    })

</script>
</html>

js循环的5种方法

    //补充： js循环
    var arr = [33, 2, 3, 4, 6, 7, 4]
     1 基础for循环
     for (var i = 0; i < arr.length; i++) {
         console.log(arr[i])
     }
     2 in的循环(不怎么用)，循环出索引
     for (i in arr) {
         // console.log(i)
         console.log(arr[i])
     
    3 of 循环  es6的语法  循环出value值
     for (i of arr) {
         console.log(i)
     
     4 数组的循环
     arr.forEach(function (value, index) {
         console.log(index, '--', value)
     }
     5 jq的循环
     $.each(arr, function (index, value) {
         console.log(index, '--', value)
     })

2.2 全选全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="text-center">购物车</h1>

                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品ID</th>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in good_list">
                        <th scope="row">{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td>{{good.number}}</td>
                        <td><input type="checkbox" :value="good" v-model="checkGroup" @change="handleChangeOne"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                选中了：{{checkGroup}}
                <br>
                {{checkAll}}
                <h3>总价格：{{getPrice()}}</h3>
            </div>


        </div>

    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            good_list: [
                {id: 1, name: '钢笔', price: 12, number: 2},
                {id: 2, name: '脸盆', price: 20, number: 20},
                {id: 3, name: '毛笔', price: 6, number: 9},
                {id: 4, name: '圆珠笔', price: 8, number: 5},
                {id: 5, name: '铅笔', price: 1, number: 3},
            ],
            checkGroup: [],
            checkAll: false
        },
        methods: {
            getPrice() {
                // 1 根据checkGroup选中的，计算
                //  循环checkGroup，拿出价格*数量，累加，最后返回
                var total = 0
                for (item of this.checkGroup) {
                    total += item.number * item.price
                }
                return total
            },
            handleCheckAll() {
                // console.log(this.checkAll)
                // 全选中：对钩都打上，js中得含义是：checkGroup变量满值
                if (this.checkAll) {
                    this.checkGroup = this.good_list  // 全选
                } else {
                    this.checkGroup = []  // 全不选
                }

            },
            handleChangeOne() {
                // 判断 checkGroup的长度，是否等于good_list长度
                if (this.checkGroup.length == this.good_list.length) {
                    this.checkAll = true
                } else {
                    this.checkAll = false

                }

            }
        }
    })


</script>
</html>

2.3 带加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="text-center">购物车</h1>

                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品ID</th>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in good_list">
                        <th scope="row">{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>

                            {{good.price}}

                        </td>
                        <td>
                            <button class="btn" @click="handleJian(good)">-</button>
                            {{good.number}}
                            <button class="btn" @click="good.number++">+</button>
                        </td>
                        <td><input type="checkbox" :value="good" v-model="checkGroup" @change="handleChangeOne"></td>
                    </tr>
                    </tbody>
                </table>
                <hr>
                选中了：{{checkGroup}}
                <br>
                {{checkAll}}
                <h3>总价格：{{getPrice()}}</h3>
            </div>


        </div>

    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            good_list: [
                {id: 1, name: '钢笔', price: 12, number: 2},
                {id: 2, name: '脸盆', price: 20, number: 20},
                {id: 3, name: '毛笔', price: 6, number: 9},
                {id: 4, name: '圆珠笔', price: 8, number: 5},
                {id: 5, name: '铅笔', price: 1, number: 3},
            ],
            checkGroup: [],
            checkAll: false
        },
        methods: {
            getPrice() {
                // 1 根据checkGroup选中的，计算
                //  循环checkGroup，拿出价格*数量，累加，最后返回
                var total = 0
                for (item of this.checkGroup) {
                    total += item.number * item.price
                }
                return total
            },
            handleCheckAll() {
                // console.log(this.checkAll)
                // 全选中：对钩都打上，js中得含义是：checkGroup变量满值
                if (this.checkAll) {
                    this.checkGroup = this.good_list  // 全选
                } else {
                    this.checkGroup = []  // 全不选
                }

            },
            handleChangeOne() {
                // 判断 checkGroup的长度，是否等于good_list长度
                if (this.checkGroup.length == this.good_list.length) {
                    this.checkAll = true
                } else {
                    this.checkAll = false

                }

            },
            handleJian(good) {
                if (good.number > 1) {
                    good.number--
                } else {
                    alert('太少了，不能再少了')
                }

            }
        }
    })


</script>
</html>

3 v-model进阶

v-model 之 lazy、number、trim
	# lazy：等待input框的数据绑定时区焦点之后再变化
	# number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
	# 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">
    <h1>lazy修饰符</h1>
    <input type="text" v-model.lazy="username">---->{{username}}
    <h1>number修饰符</h1>
    <input type="text" v-model.number="username1">---->{{username1}}
    <h1>trim修饰符</h1>
    <input type="text" v-model.trim="username2">---->{{username2}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            username1: '',
            username2: '',
        },
    })
</script>
</html>

4 与后端交互三种方式

# 后端写了一堆接口
# 前端会了
#前后端要打通----》从前端发送ajax---》核心：使用js发送http请求，接收返回
	-原生js，可以开启ajax，但是原生js开启，比较麻烦，需要做浏览器兼容，有坑(基本不写)
    	
    -jq，写了个兼容所有浏览器的  $.ajax()，不仅仅有ajax，还封装了很多dom操作
    	-如果vue中使用它，不合适
    -axios：第三方的ajax包（咱们用）
    
    -fetch： 原生js发送ajax请求，有的浏览器也不兼容
    
    
    
    
# 写个后端：flask
# pip3 install flask

from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    print('来了，老弟')
    # 前后端分离后，一定会出跨域---》后面要解决的重点
    # 在响应头中加入：Access-Control-Allow-Origin ，就就可以解决跨域
    res = jsonify({'name': '彭于晏', 'age': 19})
    res.headers = {'Access-Control-Allow-Origin': '*'}
    return res


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

4.1 使用jq的ajax

            handleLoad() {
                // 请求发送成功，后端执行了，但是被浏览器拦截了，因为有跨域问题
                // 当前地址，如果向非浏览器地址栏中得地址发送请求，就会出现跨域
                // 1 ajax请求方式 1    jquery的ajax
                var _this = this
                $.ajax({
                    url: 'http://127.0.0.1:5000',
                    type: 'get',
                    success: function (data) {
                        console.log(typeof data)
                        var res = JSON.parse(data)
                        _this.name = res.name
                        _this.age = res.age

                    }
                })

            }

4.2 使用fetch

           handleLoad() {
                // 2 使用js原生的fetch(目前也不用)
                // fetch('http://127.0.0.1:5000').then(function (response) {
                //     // console.log(response)
                //     return response.json();
                // }).then(function (res) {
                //     console.log(res);
                // });
                // 了解，箭头函数一会讲
                fetch('http://127.0.0.1:5000').then(res=>res.json()).then(res=>{
                    console.log(res)
                })

            }

4.3 使用axios(以后用这个)

handleLoad() {
                var _this = this
                axios.get('http://127.0.0.1:5000').then(function (res) {
                    console.log(res.data)
                    _this.name = res.data.name
                    _this.age = res.data.age
                })
            }

使用django与axios进行前后端交互

import json
from django.shortcuts import render
from django.http import JsonResponse
from flask import jsonify

def films(request):
    with open('app01/filme.json','rt',encoding='utf8') as f:
        res = json.load(f)
    res = JsonResponse(res)
    res['Access-Control-Allow-Origin'] = '*'  #请求头添加
    return res

4.4 箭头函数

# es6 的语法
	1 函数写法变简单
    2 箭头函数没有自己的this，在箭头函数中使用this，就是它上一层的
    
    
    
//  箭头函数
    //1 无参数，无返回值
    // var f =function (){
    //     console.log('我是匿名函数')
    // }
    // var f = () => {
    //     console.log('我是匿名函数')
    // }
    // f()

    //2 有一个参数，没有返回值  ,可以省略括号
    // var f = function (name) {
    //     console.log('我是匿名函数',name)
    // }
    // var f = name => {
    //     console.log('我是匿名函数', name)
    // }
    // f('Lqz')
    //3多个参数，不能省略括号
    // var f = (name, age) => {
    //     console.log('我是匿名函数', name, age)
    // }
    // f('Lqz', 19)

    //4多个参数，不能省略括号,一个返回值
    // var f = (name, age) => {
    //     return name + 'nb'
    // }


    // 简写成  省了return和大括号
    // var f = (name, age) => name + 'nb'
    // var res=f('Lqz', 19)
    // console.log(res)


    // 5 一个参数，一个返回值
    // var f = name => name + 'nb'
    // var res = f('Lqz')
    // console.log(res)