欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

页面渲染及跳转

程序员文章站 2022-07-15 12:21:49
...
1. HTML 页面
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #c1c1c1;
        }

        .contain {
            width: 100%;
            padding-top: 50px;
        }

        .contain .login-contain {
            width: 400px;
            margin: auto;
            background: white;
            padding: 0 20px;
        }

        .contain .login-contain .login-top {
            line-height: 60px;
            height: 60px;
            border-bottom: 1px solid #ddd;
        }

        .contain .login-contain .login-top h2 {
            float: left;
            border-bottom: 5px solid blue;
            height: 60px;
            box-sizing: border-box;
        }

        .contain .login-contain .login-top a {
            float: right;
        }

        .contain .login-contain form div {
            margin-top: 20px;
        }

        .contain .login-contain form div input {
            width: 100%;
            height: 50px;
            padding-left: 10px;
            box-sizing: border-box;
        }

        .contain .login-contain form div label input {
            width: 15px;
            height: 15px;
            vertical-align: -2px;
        }

        .contain .login-contain form div a {
            float: right;
            color: #dddddd;
        }

        .contain .login-contain form div input[type=submit] {
            background: skyblue;
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
    <div class="contain">
        <div class="login-contain">
            <div class="login-top">
                <h2>请登录</h2>
            </div>
            <form action="">
                <div><input type="text" placeholder="请输入你的账号"></div>
                <div><input type="password" placeholder="请输入你的密码"></div>
                <div>
                    <label><input type="checkbox">七天内免登录</label>
                    <a href="javascript:void(0);">忘记密码</a>
                </div>
                <div><input type="submit" value="登录"></div>
            </form>
        </div>
    </div>
</body>
</html>
2. tornado

import time
import tornado.web
import tornado.options
from tornado.options import define, options
from tornado.web import RequestHandler
import tornado.httpserver
import tornado.ioloop


define('port', default=8080, help='run port', type=int)


class LoginHandler(RequestHandler):
    def get(self):
        """
        渲染前端页面
        :return:
        """
        self.render('login.html')


class IndexHandler(RequestHandler):
    def get(self):
        """
        重定向到登录页
        :return:
        """
        self.redirect('/login')


app = tornado.web.Application([
    (r'/login', LoginHandler),
    (r'/index', IndexHandler),
])


if __name__ == '__main__':
    tornado.options.parse_command_line()
    print('监听端口: ', options.port)
    server = tornado.httpserver.HTTPServer(app)
    server.listen(options.port)
    tornado.ioloop.IOLoop.instance().start()
3. 效果

页面渲染及跳转
访问http://127.0.0.1:8080/index 会直接跳转到登录页

相关标签： tornado

上一篇： LeetCode之棒球比赛

下一篇： 刷题--数组中只出现一次的数字

推荐阅读