Flask +jinja2+bootstrap+sqlite3+sqlalchemy构建web基础学习总结

本文总结了使用Flask框架结合jinja2模板引擎、bootstrap前端框架、sqlite3数据库以及sqlalchemy ORM进行web开发的基础知识。涵盖了route路由、静态文件处理、模板继承、sqlite3数据库操作和sqlalchemy的使用。通过实例代码展示了如何创建路由、设置静态文件目录、实现模板继承以及数据库交互。
摘要由CSDN通过智能技术生成
  1. source codes
  2. 样例演示, 有一天会失效

1 route 路由

  1. 语法

    
    # 普通路由
    
    @app.route('/')
    def index():
        return 'Hello World!!!'
    
    
    
    # 路由传参
    
    @app.route('/users/<name>')
    def user(name):
        return 'user: ' + name
    
    
    
    # 指定参数类型, 参考下面2
    
    @app.route('/articles/<string:article_name>')
    def article(article_name):
        return 'article: ' + article_name
    
    
    
    # 指定 HTTP Methods  参考下面3
    
    @app.route('/login', methods=['GET', 'POST'])
    def login():
        if request.method == 'POST':
            do_the_login()
        else:
            show_the_login_form()
    
    
    # 获取表单数据
    
    @app.route('/search', methods=['POST'])
    def search():
        return 'key word: ' + request.form.get('search_key') + '<br> Find nothing.'
  2. The following converters exist:

    string accepts any text without a slash (the default)
    int accepts integers
    float like int but for floating point values
    path like the default but also accepts slashes
    any matches one of the items provided
    uuid accepts UUID strings
  3. Http Methods

    GET

    The browser tells the server to just get the information stored on that page and send it. This is probably the most common method.

    HEAD

    The browser tells the server to get the information, but it is only interested in the headers, not the content of the page. An application is supposed to handle that as if a GET request was received but to not deliver the actual content. In Flask you don’t have to deal with that at all, the underlying Werkzeug library handles that for you.

    POST

    The browser tells the server that it wants to post some new information to that URL and that the server must ensure the data is stored and only stored once. This is how HTML forms usually transmit data to the server.

    PUT

    Similar to POST but the server might trigger the store procedure multiple times by overwriting the old values more than once. Now you might be asking why this is useful, but there are some good reasons to do it this way. Consider that the connection is lost during transmission: in this situation a system between the browser and the server might receive the request safely a second time without breaking things. With POST that would not be possible because it must only be triggered once.

    DELETE

    Remove the information at the given location.

    OPTIONS

    Provides a quick way for a client to figure out which methods are supported by this URL. Starting with Flask 0.6, this is implemented for you automatically.

2 static: 通过url直接访问静态文件

静态文件直接放在static目录下,通过url: static/即可访问

Flask 是一个 Python Web 框架,Echarts 是一个基于 JavaScript 的可视化库,Jinja 是 Flask 内置的模板引擎。将它们结合起来,可以开发一个 Web 应用程序,使用 Echarts 展示数据。 以下是一个简单的 Flask+Echarts+Jinja 项目的示例: 1. 安装 Flask 和 Echarts ```python pip install flask pip install pyecharts ``` 2. 创建 Flask 应用程序 ```python from flask import Flask, render_template from pyecharts import options as opts from pyecharts.charts import Bar app = Flask(__name__) @app.route("/") def index(): return render_template("index.html") @app.route("/charts") def charts(): bar = ( Bar() .add_xaxis(["A", "B", "C", "D", "E"]) .add_yaxis("数据", [10, 20, 30, 40, 50]) .set_global_opts(title_opts=opts.TitleOpts(title="数据展示")) ) return bar.dump_options_with_quotes() if __name__ == "__main__": app.run() ``` 3. 创建模板文件 `index.html` ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flask+Echarts+Jinja</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> </head> <body> <div id="bar" style="width: 600px;height:400px;"></div> <script> $(function () { $.ajax({ type: "GET", url: "{{ url_for('charts') }}", dataType: "json", success: function (data) { var chart = echarts.init(document.getElementById('bar')); chart.setOption(JSON.parse(data)); } }); }); </script> </body> </html> ``` 4. 运行应用程序 ```python python app.py ``` 5. 访问应用程序 在浏览器中访问 `http://localhost:5000/`,即可看到数据展示的页面。 以上就是一个简单的 Flask+Echarts+Jinja 项目的示例。你可以根据自己的需求进行修改和扩展。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值