vue——组件(一)
一、与后端交互之ajax
版本1 - 出现了跨域问题
前端:index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <title>title</title> </head> <body> <div id="box"> <button @click="handleClick">美女</button> 美女你好:{{mytext}} </div> </body> <script> var myajax = $ var vm = new Vue({ el: '#box', data: { mytext: "", }, methods: { handleClick() { myajax.ajax({ url: 'http://127.0.0.1:5000', 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()
这里可以看出:前端向后端成功发送了请求,后端也成功响应了,但是前端却报错了
这是因为:跨域问题的存在,浏览器检测到前端和后端不是来自同一个域,所以认为这是不安全的,所以就拦截了该资源的传递
想要解决这个问题,就要实现:CORS,也就是 跨域资源共享
版本2 - 用两行代码解决了跨域问题
前端:index.html ----->同版本1
后端: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": "lili", "age": "18", "gender": "male" }
前端:index.html --->同版本1
后端: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