沿用Python+Flask+Mysql的web建设技术开发网站

Posted 2020-11-19 Leheartset

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了沿用Python+Flask+Mysql的web建设技术开发网站相关的知识，希望对你有一定的参考价值。

1 系统概要说明

1.1开发目的

如今音乐已经成为人们尤其是年轻人的日常必备。走路，坐车，逛街，我们都能看到戴着耳机听音乐的人。古风曲、日韩风、欧美风、hippop等等各种音乐风格多样。随着媒体的发展，微博微信公众号媒体采访等等的发展，人们对音乐的理解也开始不只是限于听，越来越多的人开始了解歌曲背后的含义的故事。每首歌曲背后都有着不一样的情感和故事，每首歌都代表着不一样的经历和成长。总有歌曲里似乎有着我们的身影和故事，在某个瞬间已是如同曲中人。

发现歌曲背后的故事，聊聊属于我们的感受和想法，分享藏着我们记忆和故事的那些歌。在音乐的世界中，放松自己，了解自己，也学会好好爱自己和珍惜身边的人。

2 网站结构设计

1.网站允许不登录的游客访问，游客可以在网站首页查看网站用户发布的相关帖子，可以查看音乐榜单，但是只能看当前页的帖子，不可以过页查看，并且不允许评论和发布帖子。

2.网站用户先注册后登录，注册需要填写不少于3字符的用户名、设置密码；注册后可用用户名和密码登录。密码错误或者用户名错误都无法登录。

3.网站用户登录后，导航栏会显示用户名，用户如若需要下线或者切换帐号可以注销帐号重新登录。

4.网站用户登录后，可以查看网站用户发布的所有帖子，可以进行评论、点赞和收藏，网站也会根据浏览记录推荐相关的帖子。

5.网站用户登录后，可以浏览自己发布过的帖子，发过的评论和查看自己的个人信息，也可以重新修改头像和密码。

6.网站访问者可以通过网站右侧的分类浏览需要的类别帖子，也可以通过搜索关键词浏览帖子，网站也会将热度前五的帖子标题显示在左侧方便浏览。

3.模块详细设计

导航栏（父模版）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}Music世界</title>
     
    {% block link %}{% endblock %}
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
       <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/base.css">
 {% block head %}{% endblock %}
</head>
<body  id="body">
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid dao">
        <ul class="nav nav-pills nav2">
                <li><img src="{{ url_for(\'static\',filename=\'image/logo.png\') }}" style="margin-left: 20px;" ></li>
                <li class="active"><a href="{{ url_for(\'index\') }}">首页</a></li>
                <li><a href="#">音乐分享</a></li>
                <li><a href="#">音乐榜单</a></li>
                <li><a href="#">我的音乐</a></li>
                <li><a href="#">音悦世界</a></li>
                <li><a href="{{ url_for(\'question\') }}">发帖</a></li>

         {% if user_id %}
                    <li style="float: right;margin-right: 100px"><a href="{{ url_for(\'logout\') }}">注销</a></li>
                    <li style="float: right"><a href="{{ url_for(\'comment\',user_id=user.id,num=\'1\') }}">{{ user.username }}</a></li>

                {% else %}
                     <li style="float: right;margin-right: 150px"><a href="{{ url_for(\'regist\') }}" style="color: hotpink">注册</a></li>
                     <li style="float: right"><a href="{{ url_for(\'login\') }}">登录</a></li>
                {% endif %}


        <div >
    <form action="{{ url_for(\'search\') }}" method="get" class="bs-example bs-example-form" role="form">
            <div class="col-lg-6" style="width: 250px;padding-bottom: 30px">
                <div class="input-group">
                    <input name="q" type="text" class="form-control" style="margin-top: 0" placeholder="请输入关键字">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">搜索</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
    </form>
</div>

 </ul>


    </div>

</nav>

<div class="box">
    {% block box %}{% endblock %}
</div>
{% block script %}{% endblock %}
</body>
</html>

首页：

{% extends \'base.html\' %}
{% block title %}
    首页
{% endblock %}

{% block link %}
<link rel="stylesheet" type="text/css" href="{{ url_for(\'static\',filename=\'css/shouye.css\') }}">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% endblock %}

{% block box %}
    <div >
           <div class="col-md-2 column"></div>
            <div  style="margin-left: 150px;">
                <ul class="list-group">
                    {% for foo in questions %}
                        <div class="info">
                         <li class="list-group-item" style="width: 800px">
                        <a  href="{{ url_for(\'comment\',user_id=foo.author.id ,num=\'1\') }}" target="_blank">
                            <img src="{{ url_for(\'static\',filename=foo.author.icon) }}" width="50px">
                        </a>
                        <a href="{{ url_for(\'comment\',user_id=foo.author.id ,num=\'1\') }}" style="color: #337ab7"
                           target="_blank">{{ foo.author.username }}</a>

                        <h4><a href="{{ url_for(\'detail\',question_id=foo.id) }}">{{ foo.title }}</a></h4>
                        <span class="badge">{{ foo.creat_time }}</span>
                        <p style="">{{ foo.detail[0:50] }}...
                        </p>
                        <div>
                            <strong>浏览：
                                <small>{{ foo.look }}</small>
                            </strong>
                            <strong> 分类:{{ foo.cfClass.name }}</strong>
                            <strong style="padding-left: 10px;"> 点赞:{{ foo.click }}</strong>
                        </div>
                        </li>

                        </div>

                    {% endfor %}


                </ul>

            <div style="width: 200px;float: right;margin-right: 80px;margin-top:-900px;text-align: center">

                    <a href="#" class="list-group-item " style="background-color: #337ab7;color: #fff" >
                        帖子分类
                    </a>
                    {% for c in cf %}
                        <a href="{{ url_for(\'c\',cf=c.id) }}" class="list-group-item">{{ c.name }}</a>
                    {% endfor %}
                </div>
     </div>
      <div class="flo">
                        <a href="#" class="list-group-item" style="width: 200px;background-color: #337ab7;color: #fff;text-align: center;">
                            热门推荐
                        </a>
                        {% for q in hot %}
                            <a href="{{ url_for(\'detail\',question_id=q.id) }}" class="list-group-item" style="width: 200px;">
                                <span style="font-size: 16px;color: red;padding-right: 10px;width:105px;">{{ loop.index }}</span>
                                {{ q.title }}
                            </a>
                        {% endfor %}
                    </div>
            </div>
</div>

{% endblock %}

{% block script %}
    <script>
        {% if info %}
            alert(\'{{ info }}\')
        {% endif %}
    </script>
{% endblock %}

{% extends \'base.html\' %}
{% block title %}
    注册
{% endblock %}

{% block link %}
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <link href=\'http://fonts.googleapis.com/css?family=Oleo+Script\' rel=\'stylesheet\' type=\'text/css\'>
{% endblock %}

{% block box %}
    <div class="lg-container">
    <h1 style="color:deeppink;">注册</h1>
    <form action="{{ url_for(\'regist\') }}" method="post" id="lg-form" name="lg-form" >

        <div>
            <label for="username">Username:</label>
                <input class="shuru" type="text" name="username" autocomplete="off" placeholder="请输入用户名">

        </div>

        <div>
            <label for="password">Password:</label>
               <input class="shuru" type="password" id="Password1" name="password" autocomplete="off" placeholder="设置密码" >
        </div>
        <div>
              <label for="password">Password1:</label>
              <input class="shuru" type="password" id="Password2" name="password" autocomplete="off" placeholder="确认密码" >
        </div>

        <div id="error_box"></div>
        <button type="submit" id="regist" onclick="return aaa()">注册</button>

    </form>

</div>

{% endblock %}

{% block script %}
    <script>
    function aaa() {
        var p1 = document.getElementById(\'Password1\')
        var p2 = document.getElementById(\'Password2\')
        if (p1.value != p2.value){
            alert(\'两次密码不一样！\')
            return false;
        }
        return true;
    }

    </script>
{% endblock %}

{% extends \'base.html\' %}
{% block title %}
    登录
{% endblock %}

{% block link %}
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <link href=\'http://fonts.googleapis.com/css?family=Oleo+Script\' rel=\'stylesheet\' type=\'text/css\'>
{% endblock %}

{% block box %}
  <div class="lg-container" >
    <h1 style="color:deeppink;">登录</h1>
    <form action="{{ url_for(\'login\') }}" method="post" id="lg-form" name="lg-form" >

        <div>
                <label for="username">Username:</label>
                <input class="shuru" id="inputEmail3" type="text"  name="username" placeholder="请输入用户名"><br>
        </div>

        <div>
        <label for="password">Password:</label>
              <input class="shuru" id="inputPassword3" type="password" name="password" placeholder="请输入密码" >
        </div>

        <input type="checkbox" name="vehicle" value="true" ><span>记住密码</span>
        <a class="right" href="">登录遇到问题?</a>


        <div id="error_box"></div>
        <button type="submit" value="login" id="login" onclick="return fnLogin()">登录</button>

    </form>
    <div id="message"></div>
</div>
{% endblock %}

发布帖子：

{% extends \'base.html\' %}
{% block title %}
    发布问答
{% endblock %}

<link rel="stylesheet" type="text/css" href="../static/css/release.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

{% block box %}
     <div class="container" style="background-image: url(/static/image/back.jpg);width: 500px" >
    <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
        </div>
       <div class="lg-container">
          <h1 align="center" style="color: salmon">发布帖子</h1>

         <form role="form" action="{{ url_for(\'question\') }}" method="post"><br/>
        <div class="q">

            <label for="inputEmail3">标题</label><br>
            <input type="text" name="author_id" value="{{ user.id }}" hidden>

            <textarea id="title" name="title" class="form-control" cols="80" rows="1"></textarea>


        </div>
        <div class="form-group">
            <label for="name">内容</label><br>
{#            <textarea class="form-control" id="questionDetail" name="questionDetail" cols="60" rows="5" ></textarea>#}
            <textarea placeholder="详情" class="form-control" rows="5" id="detail" name="detail" style="width: 500px"></textarea>
        </div>
            <div class="form-group" style="margin-left:-115px">
                        <div class="col-sm-offset-2 col-sm-5">
                            <select name="cf" id="" class="form-control">
                                <option value="">--选择分类--</option>

                                {% for c in cf %}
                                    <option value="{{ c.id }}">{{ c.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
       <br>
         <div style="margin-top: 30px">
            <button type="submit" class="btn btn-primary" onclick="{{ url_for(\'question\') }}" >发布</button>
         </div>
     </form>

        </div>
    <div class="col-md-4 column">
        </div>
    </div>
</div>
    
{% endblock %}

帖子详情：

{% extends \'base.html\' %}
{% block title %}
    帖子详情
{% endblock %}

{% block link %}
<link rel="stylesheet" href="../static/css/detail.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% endblock %}

{% block box %}
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-2 column">
            </div>
            <div class="col-md-8 column">

                <h3>{{ ques.title }}</h3>
                <div style="padding: 10px;">
                    <span style="padding-left: 5px;">作者:{{ ques.author.username }}</span>

                    <span style="padding-left: 10px;">浏览:{{ ques.look }}</span>
                    <span style="padding-left: 10px;">点赞:{{ ques.click }}</span>
                    <form method="post" style="display: inline-block;padding-left: 10px;">
                        <input name="click" value="1" type="hidden">
                        <button>点赞</button>
                    </form>
                    <form method="post" style="display: inline-block;padding-left: 10px;">
                        <input name="collection" value="1" type="hidden">
                        {% if col %}
                            <button type="button" disabled>已收藏</button>
                        {% else %}
                            <button>收藏</button>
                        {% endif %}
                    </form>
                <br>
                <small class="badge">时间:{{ ques.creat_time }}</small>
                </div>
                <div style="padding: 20px 20px;margin-bottom: 50px;border:1px solid #eee;">
                    <p>
                        {{ ques.detail }}

                    </p>
                </div>


                <hr>
                <form class="form-horizontal" role="form" method="post" action="{{ url_for(\'answer\') }}" style="margin-left: 0">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label" style="text-align: left;font-size: medium;color: #337ab7;">评论</label><br>
                        <div class="col-sm-10" style="margin-left:7px">
                            <input type="text" name="author_id" value="{{ user.id }}" hidden>
                            <input type="text" name="question_id" value="{{ ques.id }}" hidden>
                            <textarea class="form-control" name="detail" rows="10" placeholder="发表评论"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10" style="margin-left:7px">
                            <button type="submit" class="btn btn-default">发布</button>
                        </div>
                    </div>
                </form>
                <hr>
                <h4>用户评论</h4>

                    {% for com in comment %}

                        <ul style="padding-left: 0;margin-bottom: 0;">
                    <li class="list-group-item" style="width: 900px">
                        <a href="#">{{ com.author.username }}</a>
                        <span class="badge">评论时间:{{ com.creat_time }}</span>
                        <p>{{ com.detail }}</p>
                    </li>
                </ul>
                    {% endfor %}

            <hr>
                <div >
                    <h3>推荐帖子</h3><br>
                    {% for foo in questions %}
                        <li class="list-group-item" style="width: 700px管理信息系统 课程设计
 python flask-sqlalchemy如何设置使自动建的mysql表字符集charset为utf8
 Python+Flask+MysqL的web建设技术过程
 Python+Flask+MysqL的web建设技术开发一个网站
 Python+Flask+MysqL的web建设技术过程
 管理信息系统 课程设计