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

什么，你说啥⊙ω⊙

已于 2022-05-25 19:31:11 修改

阅读量659

点赞数 1

分类专栏：笔记文章标签：前端 flask

于 2022-05-24 23:15:04 首次发布

本文链接：https://blog.csdn.net/qq_59970317/article/details/124952611

版权

笔记专栏收录该内容

13 篇文章 1 订阅

订阅专栏

摘要：

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

框架如下：

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

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

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

写入一个简单的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../static/css/demo.css">
    <title>flask编写网页</title>
</head>
<body>
    <div id="task"></div>
    <script src="../../static/js/demo.js"></script>
    <script src="../../static/js/res.js"></script>
</body>
</html>

js，css样式如下：

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


// 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 '<h1>hello world</h1>'

@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

<link rel="stylesheet" href="{{ url_for('static',filename='css/demo.css') }}">

<script src="{{ url_for('static',filename='js/demo.js') }}"></script>

<script src="{{ url_for('static',filename='js/res.js') }}"></script>

运行效果如下：

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

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

（这个数值是可改的）

什么，你说啥⊙ω⊙

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
win端flask编写部署含js/css的简单网页+内网穿透

摘要：flask部署网页的框架，静态文件的加载方法，内网穿透napapp框架如下：静态文件（css、js）放入static文件夹内，templates里面放html，文件夹名不能改（固定用法）；到这步都懂的，下面就不用继续了 ˙▽˙写入一个简单的html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <li...
复制链接

扫一扫