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

一 购物车案例

- 结算

    
    
    
    



    

        

            
商品名称
            
价格
            
数量
            
选择
        
        

            
{{item.name}}
            
{{item.price}}
            
{{item.number}}
            

        
    
    
已选商品：{{checkGroup}}
    
总价：{{getPrice()}}

- 全选/全不选

    
    
    
    



    

        

            
商品名称
            
价格
            
数量
            
全选/全不选
        
        

            
{{item.name}}
            
{{item.price}}
            
{{item.number}}
            

        
    
    
已选商品：{{checkGroup}}
    
总价：{{getPrice()}}

- 数量加减

    
    
    
    



    

        

            

            

                
商品名称
                
单价
                
数量
                
全选/全不选 
            
            
            

            

                
{{item.name}}
                
{{item.price}}
                

                    -
                    {{item.number}}
                    +
                
                

            
            

                
总价：{{getPrice()}}
            
            
        
    

二：v-model进阶

v-model 之 lazy、number、trim

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

    
    
    



     {{myText1}}
    

     {{myText2}}
    

     {{myText3}}
    

     {{myText4}}

 

三 与后端交互 - ajax

版本1 - 出现了跨域问题

前端：index.html

    
    
    
    



    加载数据

后端：main.py

from flask import Flask    # 这里用轻量级的Flask框架来测试

app = Flask(__name__)


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


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

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

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

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

版本2 - 解决了跨域问题

前端：index.html

    
    
    
    



    加载数据
    
加载的数据：{{myText}}

后端：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()

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

json文件：file.json

{
  "name": "Darker",
  "age": "18",
  "gender": "male"
}

前端：index.html

    
    
    
    



    加载数据
    
加载的数据：{{myText}}

后端：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()

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

    
    
    
    



    加载数据
    
加载的数据：
    

        
姓名：{{name}}
        
年龄：{{age}}
        
性别：{{gender}}