flask--前后端交互

最新推荐文章于 2023-11-20 20:05:39 发布

烟-锁-池-塘-柳

最新推荐文章于 2023-11-20 20:05:39 发布

阅读量1.2k

点赞数 1

分类专栏： flask Python 文章标签： flask

本文链接：https://blog.csdn.net/jiaweide123/article/details/112556711

版权

Python 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

flask

5 篇文章 0 订阅

订阅专栏

1.后端代码

from flask import Flask,request,render_template
app = Flask(__name__)

'''
1.在项目文件夹下创建templates文件夹
2.在templates文件夹中创建html文件
3.如果templates文件下有其他文件夹，那么就需要在render_template()中输入目录地址
4.静态文件（js，css）需要在项目文件夹下创建一个static文件夹，把js或者css文件放在static文件夹下
'''
@app.route('/')
def index():
    return render_template('login.html')

@app.route('/login',methods=['POST','GET'])#设置html文件提交数据的方式，默认是GET
def login():
    my_int = 18
    my_str = 'curry'
    my_list = [1, 5, 4, 3, 2]
    my_dict = {
        'name': 'durant',
        'age': 28
    }
    if request.method =='POST':
        # user = request.form['nm']#获取单个输入框中的内容
        list = request.form    # post方式获取form表单中所有输入框中的数据
        if list['nm'] == 'admin' and list['pw'] == '123456':
            return render_template('index.html',result = list,mystr ='这是单个的内容',my_int=my_int,my_str=my_str,my_list=my_list,my_dict=my_dict)#登录成功之后，跳转到index页面，并把获取的内容输出在页面上,可以发送多个内容
        else:
            return '账号或者密码错误'
    else:
        # user = request.args.get('nm')#get方式获取单个输入框的内容
        # list = request.args#get方式获取所有输入框的内容
        # print(list['nm'],list['pw'])#输出获取的输入框的内容
        return '提交方式错误，用post提交'

if __name__ == '__main__':
   app.run()

2.login.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
    <form action = "http://localhost:5000/login" method = "post"><!--action中的地址，映射的是route()函数-->
        <p>Enter Name:</p>
        <p><input type = "text" name = "nm" /></p>
        <p><input type = "password" name = "pw" /></p>
        <p><input type = "submit" value = "submit" /></p>
    </form>
</body>
</html>

3.index.html

<html>

   <head>
      <!--静态文件需要在项目文件夹下创建一个static文件夹-->
      <!--加载js或者css文件有两种方式，可以直接固定路径加载，也可以使用url_for()加载-->
      <!-- <script type = "text/javascript"
            src = "/static/js/hello.js" ></script>-->
      <script type = "text/javascript"
         src = "{{url_for('static',filename='js/hello.js')}}" ></script>
   </head>

   <body>
   <H1>{{mystr}}</H1>
   <!--显示后端传过来的内容-->

      <table border = 1>
         {% for key, value in result.items() %}
         <tr>
            <th> {{ key }} </th>
            <td> {{ value }}</td>
         </tr>
         {% endfor %}
      </table>
   {{ my_int }}
   <br>
   {{ my_str }}
   <br>
   {{ my_list }}
   <br>
   {{ my_dict }}
   <hr>
   <h2>模板的list数据获取</h2>
   <hr>
   {{ my_list[0] }}
   <br>
   {{ my_list.1 }}
   <hr>
   <h2>字典数据获取</h2>
   <hr>
   {{ my_dict['name'] }}
   <br>
   {{ my_dict.age }}
   <hr>
   <h2>算术运算</h2>
   <br>
   {{ my_list.0 + 10 }}
   <br>
   {{ my_list[0] + my_list.1 }}

      <br/>
      <!--点击按钮调用js方法-->
      <input type = "button" onclick = "sayHello()" value = "Say Hello" />
   </body>

</html>

4.hello.js

function sayHello() {
   alert("Hello World")
}

烟-锁-池-塘-柳

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
flask--前后端交互

1.后端代码from flask import Flask,request,render_templateapp = Flask(__name__)'''1.在项目文件夹下创建templates文件夹2.在templates文件夹中创建html文件3.如果templates文件下有其他文件夹，那么就需要在render_template()中输入目录地址4.静态文件（js，css）需要在项目文件夹下创建一个static文件夹，把js或者css文件放在static文件夹下'''@app.
复制链接

扫一扫