Flask零基础--基础篇FlaskFlask实现接口Html页面运行跨域问题部署静态页面Flask工作项目中想在自己机器搭建一个服务器使用到了flask因为之前没接触过后台和服务器等知识所以从使用角度进行下整理和总结。上一篇我们搭建了最基础的hello,world服务。这一篇我们来让前端页面和后台有个小互动进行最简单的数据传输。Flask实现接口我们调整下run.py的代码增加一个接口函数fromflaskimportrequest#链接传参方式,通过路由执行方法info传参Keydataapp.route(/info,methods[GET,])defsendinfo():#获取到传入url中参数data对应的值datarequest.args.get(data)returnprocess(id,data)defprocess(id,data):returnxixi,get!your data is:data这样我们的链接需要给我们传入data数据然后我们返回一个经过process处理后的结果。Html页面我们新建一个test.html,脚本比较简单!DOCTYPE htmlhtmlheadmetacharsetutf-8titleflask test/title/headbodyscriptsrchttps://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js/scriptscripttypetext/javascriptfunctiontest(){//获取 输入框的值//alert(document.getElementById(test).value);vsdocument.getElementById(test).value.replace(/\n/g,;)window.open(http://你的IP:5000/info?datavs);}/scriptformactiondemo-form.phptextareaidtestrows4cols50namecommentrequired/textarea/forminputtypesubmitvalue提交onclicktest()//body/html这里说明下我们demo传输的data参数比较少所以使用的GET方式如果是图片这种还是建议使用POST方式本篇就不多介绍POST方式传输数据了如果需要大家可以评论留言进行讨论。运行OK,现在我们运行run.py然后在本地打开页面我们点击提交后编辑框内的字符串作为参数传输到sendinfo函数内然后返回给页面处理后的结果跨域问题如果你的前端页面中使用了jquery在运行过程中可能会出现服务器能成功接收信息但是页面没有反馈的问题 CORS policy No Access-Control-Allow-Origin的错误浏览器打开开发者模式可以看到出错信息这个主要是跨域问题我们在run.py里加入以下代码就可以解决此问题fromflask_corsimportCORS# 跨域支持,解决jquery的跨域请求问题CORS(app,supports_credentialsTrue)部署静态页面我们在使用过程中也不能一直使用本地页面所以需要把我们刚写好的html文件部署到外面服务器上这样直接在浏览器输入链接来测试我们的页面功能。下面看下怎么把页面放到服务上。我们在项目目录下新建一个static文件夹然后把test.html页面放到static目录下然后打开run.py文件添加如下代码#root_path就是你的工程路径appFlask(__name__,static_url_path,root_path/home/yourname/code/flask/yourproject/)# 跨域支持,解决jquery的跨域请求问题CORS(app,supports_credentialsTrue)#加载静态页面app.route(/)defloadhtml():#直接放在staticreturnapp.send_static_file(test.html)然后再浏览器中输入ipport/test.html0.0.0.0:5000/test.html 就可以看到我们的前端页面了。