vue知识-03

购物车案例

要实现的功能：

        1、计算商品总价格

        2、全选框和取消全选框

        3、商品数量的增加和减少

    

        

            
购物车
            

                

                

                    
商品id
                    
商品名称
                    
商品价格
                    
商品数量
                    
全 选or不选
                
                
                

                

                    
{{good.id}}
                    
{{good.name}}
                    
{{good.price}}
                    
-
                        
                        +
                    
                    

                
                
            
            

            
已选商品:{{CheckGoodList}}
            
是否全选:{{CheckAll}}
            
总价格:{{GetPrice()}}
        
    

v-model之lazy、number、trim

lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格

    
input 和v-model
    

    
v-model修饰符：lazy、number、trim
    --->{{s1}}
    

    --->{{s2}}
    

    --->{{s3}}

与后端交互的类型

jq的 ajax：会引入了jq框架，好多功能用不到，不是很好
js的 fetch：提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分

 fetch('http://127.0.0.1:5000/userinfo')
                .then(response => {
                    return response.json();
                }).then(data => {
                this.username = data.username
                this.age = data.age
            });

axios：是第三方ajax，占内存小，底层还是基于XMLHttpRequest      

jq的ajax发送

加载用户信息

methods: {
    handleLoad() {
        // 后端发送请求，拿到数据，赋值给 username和age 页面就有了
        // 1 发送请求方式1 使用 jq的ajax
        $.ajax({
            url: 'http://127.0.0.1:5000/userinfo',
            method: 'get',
            success: data => {
                console.log(typeof data)  //查看数据类型
                data = JSON.parse(data)  //把字符串转换成对象
                this.username = data.username  //把数据赋值给data中的username
                this.age = data.age
            }
        })
    }
}

js的fetch发送

加载用户信息

methods: {
    handleLoad() {
        // 后端发送请求，拿到数据，赋值给 username和age 页面就有了
        // 1 原生fetch发送请求
        fetch('http://127.0.0.1:5000/userinfo')
            .then(response => {
                return response.json();
            }).then(data => {
            this.username = data.username
            this.age = data.age
            }
        })
    }
}

axios发送

加载用户信息

methods: {
    handleLoad() {
        // 后端发送请求，拿到数据，赋值给 username和age 页面就有了
        // axios发送请求
        axios.get('http://127.0.0.1:5000/userinfo')
            .then(res => {
                console.log(res.data); //真正的响应体的数据在res.data
                this.username = res.data.username
                this.age = res.data.age
            })
            .catch(error => {
                console.log(error);
            }
        })
    }
}

小电影案例

    
点击显示小电影案例
    加载
    

        
        

            
{{film.name}}
            
主演：
                
                {{item.name}}   
            
            
            
{{film.nation}}|{{film.runtime}}
        
    

from rest_framework.viewsets import ViewSet
from rest_framework.decorators import action
import json
from django.http import JsonResponse

# 小电影后端
# 定义一个Movie类，继承自ViewSet
class Movie(ViewSet):
    @action(methods=['get'], detail=False)
    def film(self,requset):
        with open('film.json', 'r', encoding='utf-8')as f:
            res = json.load(f)
        res = JsonResponse(res)     # 使用JsonResponse返回结果
        res.headers = {'Access-Control-Allow-Origin': '*'}   # 跨域
        return res

2、

今日思维导图：