一、系统概要说明
过使用Python、Flask、Mysql的web建设技术,开发一个文章发布的网站,从中能够实现文章的发布和列表显示、文章的评论、文章的点赞、文章的分类筛选、文章的特定搜索以及登录、注册、注销等功能
二、网站结构设计顶部导航条:
三、模块详细设计
首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}首页</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="{{ url_for('static',filename='js/switch.js') }}"></script> <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/base.css') }}"> {% block head %}{% endblock %} </head> <body id="myBody" style="background-image:url(/static/img/2345_image_file_copy_4.jpg)"> <nav class="navbar"> <img src="{{ url_for('static',filename='img/1.jpg') }}" alt="" width="50px"> <a href="{{ url_for('index') }}">首页</a> <a href="{{ url_for('questions') }}">提问</a> <form action="{{ url_for('search')}}" method="get" class="navbar-form navbar-right"> <input name="q" type="text" name="title" required lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input"> <button class="seek" style="padding-left: 10px;" type="submit">搜索</button> </form> {% if username %} <a href="{{ url_for('usercenter',user_id=user.id,tag=1) }}">{{user.username }}</a> {# <a href="#">{{ username }}</a>#} <a href="{{ url_for('logout') }}">注销</a> {% else %} <a class="login" href="{{ url_for('login') }}">登录</a> <a class="enroll" href="{{ url_for('enroll') }}">注册</a> {% endif %} <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="25px"> </nav> {% block main %} <div> <ul> {% for foo in fenlei %} <li><a href="{{url_for('index',bd= foo.id)}}">{{foo.name}}</a></li> {% endfor %} </ul> </div> <ul class="list-group"> {% for foo in questions %} <li class="list-group-item" style="padding-left: 0px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 0px 0px; 600px;margin: auto"> <span class="glyphicon glyphicon-leaf" aria-hidden="true"></span> <a href="{{ url_for('detail',questions_id=foo.id) }}">{{ foo.title }}</a>{#链接到相关详情页#} <span class="badge" >{{ foo.create_time }}</span> <p style="margin: 20px">{{ foo.detail }}</p> <span class="glyphicon glyphicon-user" aria-hidden="true"></span> <a href="{{ url_for('usercenter',user_id=foo.author_id,tag=1) }}">{{ foo.author.username }}评论:({{ foo.comments|length }})</a><br> </li> {% endfor %} </ul> {% endblock %} </body> <footer> <div class="footer_box"> 版权@LHH </div> </footer>
注册
{% extends'base.html' %} {% block title %}注册{% endblock %} {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/enroll.css') }}"> <script src="{{ url_for('static',filename='js/enroll.js') }}"></script> {% endblock %} {% block main %} <div class="box"> <h2>注册</h2> <form action="{{ url_for('enroll') }}" method="post"> <div class="input_box"> username:<input id="zname" type="text"placeholder="设置您的用户名" name="username"><br> <!--yourname:<input id="znickname" type="text"placeholder="设置您的昵称" name="nickname">--> </div> <div class="input_box"> password:<input id="zpass1" type="password"placeholder="设置您的密码" name="password"><br> <!--</div>--> <!--<div class="input-box">--> twowrite:<input id="zpass2" type="password" placeholder="重新输入一样的密码"> </div> <div class="input_box"> <a href="{{ url_for('login') }}" style="margin: 10px">已有账号,登录</a> </div> <div id="error_box"><br></div> <div class="input_box"> <button class="button" onclick="fnEnroll()">立即注册</button> </div> </form> </div> {% endblock %}
登陆
{% extends'base.html' %} {% block title %}登录{% endblock %} {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/login.css') }}"> <script src="{{ url_for('static',filename='/js/login.js')}}"></script> {% endblock %} {% block main %} <div class="box"> <h2>登录</h2> <form action="{{ url_for('login') }}" method="post"> <div class="input_box"> username:<input id="uname" type="text"placeholder="请输入用户名" name="username"> </div> <div class="input_box"> yourname<input id="unickname" type="text"placeholder="请输入昵称" name="nickname"> </div> <div class="input_box"> password:<input id="upass" type="password"placeholder="请输入密码" name="password"> </div> <div class="input_box"> <a href="{{ url_for('enroll') }}">没有账号?立即注册</a> </div> <div id="error_box"><br></div> <div class="input_box"> <button class="button" onclick="fnLogin()">登录</button> </div> </form> </div> {% endblock %}
发布信息
{% extends'user.html' %} {% block title %}个人中心{% endblock %} {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/usercenter.css') }}"> {% endblock %} {% block main %} {% endblock %} {% block user %} {#<div class="page-header">#} {# <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br>#} {# <small>全部问答<span class="badge"></span></small>#} {# </h3>#} {# <ul class="list-group">#} {# {% for foo in questions %}#} {# <li class="list-group-item">#} {# <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>#} {# <a href="{{ url_for('usercenter',user_id=foo.author_id,tag=1 )}}">{{ foo.author.username }}</a>#} {# <span class="badge">{{ foo.create_time }}</span>#} {# <p>{{ foo.detail }}</p>#} {##} {# </li>#} {# {% endfor %}#} {# </ul>#} {#</div>#} {##} {#<div class="page-header">#} {# <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br>#} {# <small>全部评论<span class="badge"></span></small>#} {# </h3>#} {# <ul class="list-group">#} {# {% for foo in comments %}#} {# <li class="list-group-item">#} {# <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>#} {# <a href="{{ url_for('usercenter',user_id=foo.author_id,tag=2 )}}">{{ foo.author.username }}</a>#} {# <span class="badge">{{ foo.create_time }}</span>#} {# <p>{{ foo.detail }}</p>#} {##} {# </li>#} {# {% endfor %}#} {# </ul>#} {#</div>#} {##} {#<div class="page-header">#} {# <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br>#} {# <small>个人信息<span class="badge"></span></small>#} {# </h3>#} {# <ul class="list-group">#} {# <li class="list-group-item">用户:{{ username }}</li>#} {# <li class="list-group-item">编号:{{ id }}</li>#} {# <li class="list-group-item">昵称:{{ nickname }}</li>#} {# <li class="list-group-item">评论次数:{{ comments|length }}</li>#} {##} {# </ul>#} {#</div>#} {% endblock %}
(3) 评论信息
{% extends 'user.html' %} {% block user %} <div class="page-header"> <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br> <small>全部评论<span class="badge"></span></small> </h3> <ul class="list-group"> {% for foo in comments %} <li class="list-group-item"> <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> <a href="{{ url_for('usercenter',user_id=foo.author_id ,tag=2)}}">{{ foo.author.username }}</a> <span class="badge">{{ foo.create_time }}</span> <p>{{ foo.detail }}</p> </li> {% endfor %} </ul> </div> {% endblock %}
个人信息
{% extends 'user.html' %} {% block user %} <div class="page-header"> <h3><span class="glyphicon glyphicon-user" aria-hidden="true"></span>{{ username }}<br> <small>个人信息<span class="badge"></span></small> </h3> <ul class="list-group"> <li class="list-group-item"> {% if user.img %} <img src="/static/{{ user.img }}" alt="" width="150px" height="200px"> {% else %} 无上传图片 {% endif %} <form action="{{ url_for('img',user_id=user.id )}}" method="post" enctype="multipart/form-data"> <input type="file" required name="img"> <button type="submit">上传</button> </form> </li> <li class="list-group-item">用户:{{ user.username }}</li> <li class="list-group-item">编号:{{ user.id }}</li> <li class="list-group-item">昵称:{{ nickname }}</li> <li class="list-group-item">评论次数:{{ comments|length }}</li> <li class="list-group-item">问答次数:{{ questions|length }}</li> <li class="list-group-item"><a href="{{ url_for('updata_password',user_id=user.id) }}">修改密码</a></li> </ul> </div> {% endblock %}
三、网站结构设计
注册、登录
评论详情页
发布问答页
详细页,点赞,收藏,评论,