win端flask编写部署含jscss的简单网页+内网穿透

摘要：

flask部署带js、css、http请求的网页，静态文件的加载方法，内网穿透napapp

框架如下：

 静态文件（css、js）放入static文件夹内，templates里面放html，

文件夹名不能改（固定用法）；

到这步都懂的，下面就不用继续了 ˙▽˙

写入一个简单的html

js，css样式如下：

// demo.js部分
var task = document.getElementById('task');
task.innerHTML = '这个是js写入的内容';


// res.js部分
function resp() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET','http://127.0.0.1:5000/task');
    xhr.send();
    xhr.onload = function (res) {
        if (xhr.status == 200) {
            alert(res.target.responseText)
        };
}}


/* css部分 */
span{
    color: coral;
}

task接口也要写在app.py里，这样就不会出现跨域问题了

flask写接口的方法如下：

from flask import Flask,jsonify,render_template


app = Flask(__name__)

@app.route('/task',methods=['post','get'])
def task():
    return jsonify(code=0,result="hello world")
    # return 'hello world'

@app.route('/demo',methods=['get'])
def demo():
    return render_template("html/demo.html")


if __name__ == "__main__":
    app.run(host="0.0.0.0",port=5000,debug=True)

return虽然能处理html数据，但像大的网页就需要render_template可以直接指定文件

要想加载静态的js和css还需要对路劲进一步处理

url_for可以动态精准的构造获取url

这里有个坑，css一定要带 ` rel="stylesheet" ` 不然会报错

还有{{ ** }}，花括号左右两边都要留有空格，

这样就不会出现奇奇怪怪的bug

{ url_for('static',filename='css/demo.css') }}">

运行效果如下：

到这步，也就只能局域网内访问

natapp可以穿透内网，让外网也能访问到这些内容  ◐▽◑ 

NATAPP-内网穿透 基于ngrok的国内高速内网映射工具

登录，

构建隧道，在 `我的隧道` 里面配置如下内容，

 

 复制上图的authtoken的值

新建一个config.ini文件，与exe文件同级

#将本文件放置于natapp同级目录 程序将读取 [default] 段
#在命令行参数模式如 natapp -authtoken=xxx 等相同参数将会覆盖掉此配置
#命令行参数 -config= 可以指定任意config.ini文件
[default]
authtoken=6e3b7*****7523a                   #对应一条隧道的authtoken
clienttoken=                    #对应客户端的clienttoken,将会忽略authtoken,若无请留空,
log=none                        #log 日志文件,可指定本地文件, none=不做记录,stdout=直接屏幕输出 ,默认为none
loglevel=ERROR                 #日志等级 DEBUG, INFO, WARNING, ERROR 默认为 DEBUG
http_proxy=                     #代理设置 如 http://10.123.10.10:3128 非代理上网用户请务必留空

 文件只需修改authtoken=6e3b7*****7523a  ，这个值

以后启用直接运行exe文件即可

下面涂掉的那行并不是必要的，

之后还需修改res.js里的127.0.0.1:5000改成你的域名网址，通过域名访问

flask编写网页http://thinkloading.natapp1.cc/demo

源码：https://gitee.com/tkgzone/CSDN.git

扩展：

        flask不适和高并发，一般都会使用Gunicorn或者是tornado来处理，再搭载nginx就能处理绝大部分的高并发问题

        Gunicorn不支持win端；以tornado为例： pip install tornado

from tornado.wsgi import WSGIContainer
from tornado.httpserver import HTTPServer
from tornado.ioloop import IOLoop
from app import app    
http_server = HTTPServer(WSGIContainer(app))

# 单进程模式，5000为端口，
http_server.listen(5000)   

# 3为进程数，不开的话就是单进程，0和负数是开cpu能开的进程数
# http_server.start(num_processes=3)
IOLoop.instance().start()


# 多进程还是比较建议下面这种方式

from tornado.netutil import bind_sockets
from tornado.process import fork_processes

# sockets = bind_sockets(5000)
# fork_processes(3)
# server = HTTPServer(WSGIContainer(app))
# server.add_sockets(sockets)
# IOLoop.instance().start()

要注意的是win端只支持单进程，并发比较多的还是买服务器比较好

（后台数会比进程数多一个）

第一个app是app.py，第二个是flask的实例

之后只启动这个文件即可

nginx下载后，修改conf > nginx.conf 文件，添加在http{}里面

 server {
        listen       8080;   # 此处可以不用改

        server_name   http://thinkloading.natapp1.cc;  # 你的IP地址

        #access_log  logs/host.access.log  main;  # 此处是日志

        location / {
            proxy_pass http://127.0.0.1:5000;  # 你的端口号
        }}

然后双击运行即可，

proxy_pass反向代理，转发 请求/返回的数据，在队列满时，默认会帮你存储1024个请求

（这个数值是可改的）