zoukankan      html  css  js  c++  java
  • python为前端提供API

    作为一名前端来学习后端语言,有难度啊.这里把第一次尝试的过程做个记录

    1.网上看到Python给前端提供API可以使用python的flaskweb框架

    #py文件
    import json
    from flask import Flask 
    app = Flask(__name__)
    
    @app.route("/")
    def index():
        result = {
            'status': "200",
            'data': 'Hello, world!',
        }
        return json.dumps(result)
    
    if __name__ == '__main__':
      app.run()
    

    2.最早是在w3cschool上看的python语法,有讲到CGI编程,自己感觉差不多.那好吧,启动一个apache服务器apache配置

    这里就是apache的各种安装,配置,启动
    反正又是搞了一通
    简单几点:
    1.安装的pache24,需要在apache>conf>httpd.conf 配置文件中设置 Define SRVROOT "D:Apache24"
    2.设置监听端口 ,默认80,改改吧 Listen 8888
    3.设置下访问权限 <Directory /> AllowOverride none Require all granted Header set Access-Control-Allow-Origin http://localhost:8888/ </Directory>
    反正这里是搞的我一脸懵逼,至少这里这样子对我来说是可以的
    4.apache默认前端页面放在根目录下的htdocs文件夹中.DocumentRoot "${SRVROOT}/htdocs",执行文件放在根目录下cgi-bin文件夹ScriptAlias /cgi-bin/ "${SRVROOT}/cgi-bin/"
    5.<Directory "${SRVROOT}/cgi-bin"> AllowOverride All Options +ExecCGI -MultiViews +SymLinksifOwnerMatch Require all granted </Directory>这里就不描述了,反正我到现在还是懵逼,后面再看看
    6.添加.py为可执行的文件 AddHandler cgi-script .cgi .py .php .pl
    搞不懂的地方还是再百度吧,虽然东西杂点,但是还能找到比我这里描述的到位的
    apache的启动,可能需要使用管理员权限

    启动命令apache -k start,结束命令apache -k stop

    3.作为前端,我就too simple了.启动了apache的服务器,我居然天真的以为就可以直接用ajax在页面上请求py文件中的地址了.没有运行执行文件

    <body>
    <fieldset id="field">
          <legend>表单</legend>
          <div>
            直接点击"请求"按钮,请求当天的爱词霸今日一句
          </div>
          <div id="requestWay">
            <input type="radio" name="requestWay" value="GET" id="get"><label for="get">Get方式请求</label> <br />
            <input type="radio" name="requestWay" value="POST" id="post"><label for="post">Post方式请求</label>
          </div>
          <p>
            <button id="btn">请求</button>
          </p>
        </fieldset>
    </body>
    <script>
    var type = "";
        var baseUrl ="http://localhost:8888"
        $("#btn").click(function(){
          type = $('input:radio:checked').val() || "get";
          $.ajax({
            url: "http://192.168.1.198:5000/", // 在公司局域网只能用本机iP(后端flask设置host=0.0.0.0的情况下),使用127.0.0.1或者0.0.0.0或者localhost都报错-找不到路径
            data:{},
            type: type,
            // dataType: "JSON",
            success:function(res){
              console.log(res)
            },
            error: function(xhr){
              console.log(xhr)
            }
          })
        })
    </script>
    
    结果这里各种找不到路径.可怜小白如我.一直在想apache哪里配置错了.好想哭....
    后面问了下同事:你的可执行文件运行起来了吧.瞬间懵逼.接着来了一句:你执行文件没有运行起来,它里面配置的那些路由怎么识别...
    豁然开朗有没有...
    运行py文件吧..哭唧唧...
    `python xx.py`,果然运行起来了.cmd提示我:` Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)`
    

    *** 这里有个问题:直接打开cmd能够在全局运行python -v命令,但是却不能找到pip,而使用管理员运行的cmd能够全局运行pip install xx却不能执行python -v....黑人疑问***

    4.把运行py文件的地址http://127.0.0.1:5000/作为前端请求地址,发起请求.找不到路径;

    仍然找不到这个路径...
    路径改成http://localhost:5000/,找不到...
    路径改成'http://0.0.0.0:5000/',也不对...
    **最后把,py文件中的 `app.run()`加上几个参数-->`app.run(host='0.0.0.0', port=5000, debug = True)`,前端请求地址改成当前局域网的ip地址`192.168.1.x',好了..**.
    

    5.在最开始使用apache地址出错的时候,出现过跨域的问题.

    在py文件中

    from flask_cors import CORS # 跨域
    app = Flask(__name__)
    CORS(app, resources=r'/*') # 请求跨域的问题
    
    #设置响应头
    @app.after_request
    def apply_caching(response):
        response.headers['Access-Control-Allow-Origin'] = '*'
        response.headers['Access-Control-Allow-Methods'] = 'OPTIONS,HEAD,GET,POST'
        response.headers['Access-Control-Allow-Headers'] = "*" #'x-requested-with'
        return response
    

    虽然最终原因是因为最开始设置的apahce的端口忘了改了...这个解决跨域的方法可以做下记录.

  • 相关阅读:
    深入JVM系列(二)之GC机制、收集器与GC调优
    使用C++ Builder XE5获取Sensor值之Light Sensor
    Xilinx FFT IP v9.0 使用
    用十句简单英语激活你的口语
    Android编译系统中的Android.bp【转】
    【定制Android系统】Android O 在ROM中添加自己的 so 库(1)——Android.mk 与 Android.bp 的区别【转】
    高通平台framework,hal,kernel打开log【转】
    如何在andorid native layer中加log function.【转】
    Android Java层,Native层,Lib层打印Log简介【转】
    Android 系统(64)---Android中m、mm、mmm、mma、mmma的区别【转】
  • 原文地址:https://www.cnblogs.com/whitewen/p/11381650.html
Copyright © 2011-2022 走看看