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

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

摘要:

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

框架如下:

 静态文件(css、js)放入static文件夹内,templates里面放html,

文件夹名不能改(固定用法);

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

写入一个简单的html




    
    
    flask编写网页


    
    
    

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个请求

(这个数值是可改的)

                        

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1320233.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表(0条)

保存