Flask第一节——路由和模板

mvc设计模式:视图、控制器、模型
**

第一块知识点:路由

**
路由获取信息的方法
@app.route('/user',methods=['GET/POST'])

路由传递参数的两种方法:
1.

@app.route('/users/<id>')
def user_id(id):
    return 'hello user:'+:id

这里就访问xxx/users/123456
返回hello user123456
2.

def query_user():
    id=request.args.get('id')
    return 'query_user'+id

这里访问xxxxx/query_user?id=123456
返回hello user123456

反向路由:

from flask import Flask,request,url_for
@app.route('/query_url')
def query_url():
    return 'query_url'+url_for('query_user')

第二块知识点:模板
通过python内部实现将hello world 字体变得更加好看

from flask import Flask,render_template
app=Flask(__name__)
@app.route('/')
def hello_world():
    return render_template('index.html')
#通过模板来
#在python中加入html,使得python代码难以维护,所以需要模板
if __name__ == '__main__':
    app.debug = True
    app.run()

第二种方法:传入模板实现

#第二种从python输入信息,传递给模板引型
app=Flask(__name__)
@app.route('/')
def hello_world():
    content="hello world!"
    return render_template('index.html',content=content)
#通过模板来
#在python中加入html,使得python代码难以维护,所以需要模板
if __name__ == '__main__':
    app.debug = True
    app.run()

这时html中
<h1>{{content}}<\h1>

模板传入的技巧

1.传入一个类
主函数定义路由

@app.route('/user')
def user_index():
    user=User(1,'jikexueyuan')
    return render_template("user_index.html",user=user)

定义一个类函数

class User(object):
    def __init__(self,user_id,user_name):
        self.user_id=user_id
        self.user_name=user_name

html模板中的操作

<h1>hello {{user.user_name}}</h1>

这样就实现了,访问xxxx/user 输出用户名的操作

2.在模板中使用条件判断语句
1.现在主函数内写一个判断路由

@app.route('/query_user/<user_id>')
def query_user(user_id):
    user = None
    if int(user_id)==1:
        user = User(1,'jikexueyuan')
    return render_template("user_id.html",user = user)

2.类函数

class User(object):
    def __init__(self,user_id,user_name):
        self.user_id=user_id
        self.user_name=user_name

3.html中书写判断语句

<body>
{%if user %}
    hello {{user.user_name}}
{% else %}
    no this user
{% endif %}
</body>

4.结果:
输入:xxxxx/query_user/1 返回:hello jikexueyuan
输入:xxxxx//query_user/其他数字 返回 no this user

3.模板的循环
1.书写循环的路由

@app.route('/users')
def user_list():
    users = []
    for i in range(1,11):
        user=User(1,'jikexueyuan'+str(i))
        users.append(user)
    return render_template("user_list.html",users=users)

2.书写循环的html

<body>
{% for user in users %}
{{user.user_id}}..{{user.user_name}}<br>
{% endfor %}
</body>

输出:
1…jikexueyuan1
1…jikexueyuan2
1…jikexueyuan3
1…jikexueyuan4
1…jikexueyuan5
1…jikexueyuan6
1…jikexueyuan7
1…jikexueyuan8
1…jikexueyuan9
1…jikexueyuan10
4.模板的继承
1.书写路由

@app.route('/one')
def one_base():
    return render_template("one_base.html")
@app.route('/two')
def two_base():
    return render_template("two_base.html")

2.书写html实现继承
被继承的基类

<body>
<div>
    <h1>Header 极客学院</h1>
</div>
{% block content %}
{% endblock %}
<div>
    <h1>Footer 极客学院</h1>
</div>
</body>

两个继承基类的html文件

{% extends "base.html" %}
{% block content %}
    <h2>这是第一页</h2>
{% endblock %}
{% extends "base.html" %}
{% block content %}
    <h2>这是第二页</h2>
{% endblock %}

输入:xxxxx/one
输出:
Header 极客学院
这是第一页
Footer 极客学院
输入:xxxxx.two
输出:
Header 极客学院
这是第二页
Footer 极客学院
使用模板的继承,可以节约成本,一样的功能只需要在基类中写好即可。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前两篇中,我们介绍了 React Router 和由的基础知识,以及如何在应用中使用由。在本篇中,我们将深入学习 React Router,并介绍一些更高级的用法。 ## 动态由 在前面的教程中,我们已经学习了如何定义静态由。但是在实际开发中,我们通常需要处理动态由。例如,我们可能需要在 URL 中传递参数,以便根据参数来渲染不同的组件。 在 React Router 中,我们可以使用 `:param` 来定义动态由参数。例如,我们可以定义一个动态由 `/user/:id`,其中 `:id` 表示一个动态参数,表示用户的 ID。当浏览器访问 `/user/123` 时,React Router 会自动将 `123` 作为参数传递给对应的组件。 下面是一个简单的例子: ```jsx import { BrowserRouter as Router, Route, Link } from "react-router-dom"; function User({ match }) { return <h1>Hello, {match.params.id}!</h1>; } function App() { return ( <Router> <div> <ul> <li> <Link to="/user/123">User 123</Link> </li> <li> <Link to="/user/456">User 456</Link> </li> </ul> <Route path="/user/:id" component={User} /> </div> </Router> ); } ``` 在上面的例子中,我们定义了一个动态由 `/user/:id`,其中 `:id` 表示用户的 ID。当浏览器访问 `/user/123` 时,React Router 会自动将 `123` 作为参数传递给 `User` 组件,并显示 `Hello, 123!`。 同样,当浏览器访问 `/user/456` 时,React Router 会自动将 `456` 作为参数传递给 `User` 组件,并显示 `Hello, 456!`。 ## 嵌套由 在实际开发中,我们经常需要在一个页面中嵌套多个组件。在 React Router 中,我们可以使用嵌套由来实现这个功能。 具体来说,我们可以在一个组件中定义多个 `<Route>` 组件,从而实现嵌套由。例如,我们可以定义一个嵌套由 `/user/:id/posts`,其中 `:id` 表示用户的 ID,`posts` 表示用户的帖子列表。 下面是一个简单的例子: ```jsx import { BrowserRouter as Router, Route, Link } from "react-router-dom"; function User({ match }) { return ( <div> <h1>Hello, {match.params.id}!</h1> <ul> <li> <Link to={`${match.url}/posts`}>Posts</Link> </li> </ul> <Route path={`${match.path}/posts`} component={Posts} /> </div> ); } function Posts() { return <h2>Posts</h2>; } function App() { return ( <Router> <div> <ul> <li> <Link to="/user/123">User 123</Link> </li> <li> <Link to="/user/456">User 456</Link> </li> </ul> <Route path="/user/:id" component={User} /> </div> </Router> ); } ``` 在上面的例子中,我们定义了一个嵌套由 `/user/:id/posts`,其中 `:id` 表示用户的 ID,`posts` 表示用户的帖子列表。当浏览器访问 `/user/123/posts` 时,React Router 会自动将 `123` 作为参数传递给 `User` 组件,并显示 `Posts` 组件。 ## 由守卫 在实际开发中,我们通常需要实现一些由守卫功能,例如登录验证、权限控制等。在 React Router 中,我们可以使用 `Route` 组件的 `render` 属性来实现由守卫。 具体来说,我们可以定义一个高阶组件 `AuthRoute`,用来检查用户是否登录。如果用户已登录,则渲染对应的组件;否则,跳转到登录页面。 下面是一个简单的例子: ```jsx import { BrowserRouter as Router, Route, Link, Redirect } from "react-router-dom"; function AuthRoute({ component: Component, ...rest }) { const isAuthenticated = localStorage.getItem("isAuthenticated"); return ( <Route {...rest} render={(props) => isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to={{ pathname: "/login", state: { from: props.location } }} /> ) } /> ); } function Home() { return <h1>Welcome Home!</h1>; } function Login() { const login = () => { localStorage.setItem("isAuthenticated", true); }; return ( <div> <h2>Login</h2> <button onClick={login}>Login</button> </div> ); } function App() { return ( <Router> <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/login">Login</Link> </li> </ul> <AuthRoute exact path="/" component={Home} /> <Route path="/login" component={Login} /> </div> </Router> ); } ``` 在上面的例子中,我们定义了一个高阶组件 `AuthRoute`,用来检查用户是否登录。如果用户已登录,则渲染对应的组件;否则,跳转到登录页面。具体来说,我们首先从本地存储中检查用户是否已登录,然后根据检查结果来渲染对应的组件或跳转到登录页面。 ## 总结 在本篇教程中,我们深入学习了 React Router,并介绍了一些更高级的用法。具体来说,我们学习了如何定义动态由、嵌套由和由守卫。 希望通过本篇教程,你已经掌握了 React Router 的高级用法,并能够在实际开发中灵活使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值