一、前言（个人学期总结）

个人总结一下这学期对于Python+Flask+MysqL的web建设技术过程的学习体会，Flask小辣椒框架相对于其他框架而言，更加稳定，不会有莫名其妙的错误，容错性强，运行效果好，报错信息明了， Python是近几年流行起来的语言，简单易懂，很好上手，强大的库让我们可以站在巨人的肩膀上写代码，应证了人们常说的那句“人生苦短，我用python”，MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，目前属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一，基本功能都能准确无误的给予数据支持。在本次建站过程中，前端界面采用的是html、css、JavaScript，后端采用python作为支持。

从一开始接触的是turtle库绘制图形，在没有接触基本语法的情况下，以为会因为基础不扎实而学起来吃力，然而，turtle库的学习，打开了我们对python的学习兴趣的闸门，这是一门多么简洁实用的语言，python的第三方库是多么的强大，逐渐的，在对库的使用中熟悉了python的语法，学起来一点也不吃力，有了html基础，加上Bootstrap框架的引用，就可以制作出一个静态页面，再有了python基础以及连接数据库的知识，就可以完成web建站了。

本次的mysql运用的是远程数据库，便于搭建环境和数据存储，可视化软件是SQLyog。

二、使用工具

主要工具有：pycharm64.exe + Python 3.6 64-bit + MySQL +SQLyog（辅助工具）

 Python下载地址：https://www.python.org/downloads/

MySQL下载地址：https://www.mysql.com/downloads/

Pycharm下载地址：https://www.jetbrains.com/pycharm/download/#section=windows

 

 三、完成基本的页面设计

①导航条

②登陆界面

③注册界面

④发布问答界面

 四、Flask & 概览

1、初始化
在这章，你将学到Flask应用程序的不同部分。同时，你将编写和运行你的第一个Flask web应用程序。

所有的Flask应用程序都必须创建一个 应用程序实例 。使用web服务器网关接口协议将所有从客户端接收的请求传递给这个对象处理。这个应用程序实例就是Flask类的一个对象，通常使用下面的方式创建：

1
2
from flask import Flask
app = Flask(__name__)

Flask类构造函数唯一需要的参数就是应用程序的主模块或包。对于大多数应用程序，Python的__name__变量就是那个正确的、你需要传递的值。

注：对于Flask开发者来说，传给Flask应用程序构造函数的name参数是比较容易弄混淆的。Flask使用这个参数来确定应用程序的根目录，这样以后可以相对这个路径来找到资源文件。
稍后你可以看到更复杂的应用程序实例初始化，但是对于简单应用程序这些已经足够了。

2、路由和视图函数
客户端例如web浏览器发送 请求 给web服务，进而将它们发送给Flask应用程序实例。应用程序实例需要知道对于各个URL请求需要运行哪些代码，所以它给Python函数建立了一个URLs映射。这些在URL和函数之间建立联系的操作被称之为 路由 。

在Flask应程序中定义路由的最便捷的方式是通过显示定义在应用程序实例之上的app.route装饰器，注册被装饰的函数来作为一个路由。下面的例子会演示怎样使用装饰器来申明一个路由：

1
2
3
@app.route('/')
def index():
 return '<h1>Hello World!</h1>'

注：装饰器是Python语言的标准特性；它们可以以不同方式改变函数的行为。一个常见的模式是使用装饰器来注册函数作为一个事件处理程序。
在上一个示例给应用程序的根URL注册index()函数作为事件的处理程序。如果这个应用程序被部署在服务器上并绑定了 www.example.com 域名，然后在你的浏览器地址栏中输入 http://www.example.com 将触发index()来运行服务。客户端接收到的这个函数的返回值被称为 响应 。如果客户端是web浏览器，响应则是显示给用户的文档。

类似于index()的函数被称作 视图函数 。通过视图返回的响应可以是简单的HTML内容的字符串，但它也可以市更复杂的形式，正如您将看到的。

注：响应字符串嵌入在Python代码中导致代码难以掌控，在此只是介绍响应的概念。你将在第三章学习正确的方法来生成响应。
如果你注意到你每天使用的一些网站URLs如何形成的，你将会发现很多都有变量。例如，你的Facebook个人信息页的URL是 http://www.facebook.com/<username> ，所以你的用户名是它的一部分。Flask在路由装饰器中使用特殊的语法支持这些类型的URLs。下面的示例定义了一个拥有动态名称组件的路由：

1
2
3
@app.route('/user/<name>')
def user(name):
 return '<h1>Hello, %s!</h1>' % name

用尖括号括起来的部分是动态的部分，所以任何URLs匹配到静态部分都将映射到这个路由。当视图函数被调用，Flask发送动态组件作为一个参数。在前面的示例的视图函数中，这个参数是用于生成一个个性的问候作为响应。

在路由中动态组件默认为字符串，但是可以定义为其他类型。例如，路由/user/<int:id>只匹配有一个整数在id动态段的URLs。Flask路由支持int、float和path。path同样是字符串类型，但并不认为斜杠是分隔符，而认为它们是动态组件的一部分。

3、服务启动
应用程序实例有一个run方法用于启动Flask集成的web服务：

1
2
if __name__ == '__main__':
 app.run(debug=True)

__name__ == '__main__'在此处使用是用于确保web服务已经启动当脚本被立即执行。当脚本被另一个脚本导入，它被看做父脚本将启动不同的服务，所以app.run()调用会被跳过。

一旦服务启动，它将进入循环等待请求并为之服务。这个循环持续到应用程序停止，例如通过按下Ctrl-C。

有几个选项参数可以给app.run()配置web服务的操作模式。在开发期间，可以很方便的开启debug模式，将激活 debugger 和 reloader 。这样做是通过传递debug为True来实现的。

注：Flask提供的web服务并不用于生产环境。你将在十七章学习生产环境的web服务。

4、一个完整的应用程序
在上一节，你学习了Flask web应用程序的不同部分，现在是时候写一个了。整个 hello.py 应用程序脚本只不过将前面描述的三个部分结合在一个文件中。应用程序示例2-1所示。

示例 hello.py：一个完整的Flask应用程序

1
2
3
4
5
6
7
8
9
10
11
12
13
from flask import Flask
app = Flask(__name__)
 
@app.route('/')
def index():
 return '
 
<h1>Hello World!</h1>
 
'
 
if __name__ == '__main__':
 app.run(debug=True)

经过这个过程，一个完整的Flask应用程序就搭建起来了。

五、加载静态文件，父模板与其他界面的继承

1.加载静态文件

  1.    <script language="javascript" type="text/javascript" src="{{ url_for('static',filename="js/basic.js") }}"></script>
  2.     <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename="css/basic.css") }}">
  3.

2.父模板的设置

  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.   <title>{% block title %}{% endblock %}</title>
  6.  
  7. </head>
  8. <body id="myBody" style="min-width: 1500px;" background="{{ url_for('static',filename="img/timg1.jpg") }}">
  9.  
  10. {% block aa %}{% endblock %}
  11.  
  12. </body>
  13. </html>

3.子模板继承

主页：

  1. {% extends 'base.html' %}
  2. {% block title %} 主页{% endblock %}
  3. {% block aa %}
  4. {% endblock %}

注册：

  1.   {% extends 'base.html'%}
  2. {% block title %} 注册{% endblock %}
  3.   {% block aa %}
  4.  {% endblock %}

登录：

  1. {% extends 'base.html' %}
  2. {% block title %} 登录{% endblock %}
  3. {% block aa %}
  4.     <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename="css/login.css") }}">
  5.     <script language="javascript" type="text/javascript" src="{{ url_for('static',filename="js/login.js") }}"></script>
  6.  
  7. {% endblock %}

个人父模板：

  1. {% extends 'base.html' %}
  2. {% block title %} 个人中心{% endblock %}
  3.  
  4. {% block aa %}
  5.  
  6. {% block user %}{% endblock %}
  7.  </div>
  8. {% endblock %}

个人子模板：

  1. {% extends 'user.html' %}
  2.  
  3. {% block user %}
  4.  
  5. {% endblock %}

问答页：

  1. {% extends 'base.html' %}
  2. {% block title %} 互动{% endblock %}
  3. {% block aa %}
  4. {% endblock %}

六、数据库连接池

数据库工具：mysql

  1. import os
  2. DEBUG=True
  3. SECRET_KEY=os .urandom(24)
  4. #
  5. # DIALECT='mysql'
  6. # DRIVER='mysqldb'
  7. # USERNAME='yu'
  8. # PASSWORD='bozhi'
  9. # HOST='www.decade.wang'
  10. # PORT='3306'
  11. # DATABASE='python'
  1. SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://yu:bozhi@www.decade.wang:3306/decade?charset=utf8'
  1. SQLALCHEMY_TRACK_MODIFICATIONS = False

建立连接：

主py

  1. from werkzeug.security import generate_password_hash,check_password_hash
  2. from datetime import datetime
  3. from exts import db
  4.  
  5. class User(db.Model):
  6.     __tablename__ = 'user'
  7.     # 建立一个表user
  8.     id = db.Column(db.Integer,primary_key=True,autoincrement=True)
  9.     username = db.Column(db.String(20),nullable=False)
  10.     _password = db.Column(db.String(200),nullable=False)
  11.     image = db.Column(db.String(100))
  12.     say = db.Column(db.String(50))
  13.  
  14.     @property
  15.     def password(self):#外部使用
  16.         return self._password
  17.  
  18.     @password.setter
  19.     def password(self,row_password):
  20.         self._password=generate_password_hash(row_password)
  21.  
  22.     def check_password(self,row_password):
  23.         result=check_password_hash(self._password,row_password)
  24.         return result
  25. #db.create_all()
  26. # 建立一表question
  27. class Question(db.Model):
  28.     __tablename__ = 'question'
  29.  
  30.     id = db.Column(db.Integer,primary_key=True,autoincrement=True)
  31.     title = db.Column(db.String(100),nullable=False)
  32.     detail = db.Column(db.Text,nullable=False)
  33.     creat_time = db.Column(db.DateTime,default=datetime.now)
  34.     author_id=db.Column(db.Integer,db.ForeignKey('user.id'))
  35.     author=db.relationship('User',backref=db.backref('question'))
  36.     classify=db.Column(db.Enum('散文拾贝', '心灵鸡汤','笑谈风声', '随心所欲'),nullable=False)
  37.     click = db.Column(db.INT, default=0)
  38.  
  39. class Comment(db.Model):
  40.     __tablename__ = 'comment'
  41.     # 建立一个表log
  42.     id = db.Column(db.Integer,primary_key=True,autoincrement=True)
  43.     author_id = db.Column(db.Integer,db.ForeignKey('user.id'))
  44.     question_id = db.Column(db.Integer,db.ForeignKey('question.id'))
  45.     creat_time = db.Column(db.DateTime,default=datetime.now)
  46.     detail = db.Column(db.Text,nullable=False)
  47.     question = db.relationship('Question', backref=db.backref('comment',order_by=creat_time.desc))
  48.     author=db.relationship('User',backref=db.backref('comment'))
  49. #db.create_all()

exts

  1. from flask_sqlalchemy import SQLAlchemy
  2.  
  3. db = SQLAlchemy()

七、通过用户模型，对数据库进行增删改查

  1. 添加数据
  2. user=User(username='yujiujiu2',password='11111')
  3. db.session.add(user)
  4. db.session.commit()
  5.  
  6. 添加数据
  7. comment=Comment(detail='6666666')
  8. db.session.add(comment)
  9. db.session.commit()
  10.  
  11. 查找数据
  12. user=User.query.filter(User.username=='yujiujiu').first()
  13. print(user.username,user.password)
  14.  
  15. 修改数据
  16. user=User.query.filter(User.username=='yujiujiu').first()
  17. user.password='666667'
  18. print(user.username,user.password)
  19. db.session.commit()
  20.  
  21. 删除数据
  22. user=User.query.filter(User.username=='yujiujiu2').first()
  23. db.session.delete(user)
  24. db.session.commit()

八、完成注册功能

1.js文件： onclick函数return True时才提交表单，return False时不提交表单。

 

  1.  function miao(){
  2.         var oUname=document.getElementById("uname");
  3.         var oUpass=document.getElementById("upass");
  4.         var oUpass2=document.getElementById("upass2");
  5.         var oError=document.getElementById("error_box");
  6.         var isError=true;
  7.         oError.innerHTML="<br>"
  8.     if (oUname.value.length<6 || oUname.value.length>12){
  9.      oError.innerHTML="用户名6-12位";
  10.      isError=false;
  11.      return isError;
  12.     } else if((oUname.value.charCodeAt(0)>=48)&&(oUname.value.charCodeAt(0)<=57)){
  13.        oError.innerHTML="first letter";
  14.        isError=false;
  15.        return isError;
  16.     }
  17.     else for(var i=0;i<oUname.value.length;i++) {
  18.             if (((oUname.value.charCodeAt(i) < 48) || (oUname.value.charCodeAt(i) > 57)) && ((oUname.value.charCodeAt(i) < 97) || (oUname.value.charCodeAt(i) > 122))) {
  19.                 oError.innerHTML = "only letter or number";
  20.                 isError=false;
  21.                 return isError;
  22.             }
  23.  
  24.         }
  25.  
  26. if (oUpass.value.length<6 || oUpass.value.length>12){
  27.    oError.innerHTML="密码6-12位";
  28.    return false;
  29. }
  30.     else if (oUpass.value!==oUpass2.value){
  31.         oError.innerHTML="两次密码不一致";
  32.         return false;
  33.     }
  34.     return true;
  35.     // window.alert("注册成功！")
  36.  
  37.     }
  38.  function mySwitch() {
  39.     var oBody = document.getElementById("myBody");
  40.  
  41.     var oOnOff = document.getElementById("myOnOff");
  42.     var ogui = document.getElementById("gui");
  43.     if (oOnOff.src.match('bulbon')) {
  44.  
  45.         oOnOff.src = "http://www.runoob.com/images/pic_bulboff.gif";
  46.         oBody.style.backgroundColor = "black";
  47.         oBody.background="../static/img/h.jpg"
  48.         oBody.style.color = "white";
  49.         ogui.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509563443074&di=b1bbb3f5714a580e2211e281124636c2&imgtype=0&src=http%3A%2F%2Fpic15.nipic.com%2F20110709%2F7854247_221301558161_2.jpg";
  50.     } else {
  51.         oOnOff.src = "http://www.runoob.com/images/pic_bulbon.gif";
  52.         oBody.style.backgroundColor = "white";
  53.         oBody.style.color = "black";
  54.         ogui.src = "";
  55.         oBody.background="../static/img/timg1.jpg"
  56.     }
  57. }

运行结果：

2.html文件：

    1. <form>中设置 action和method="post"
    2. <input> 中设置 name
  1.   {% extends 'basic.html'%}
  2.   {% block aa %}
  3.     <link rel="stylesheet" type="text/css" href="{{url_for('static',filename="css/zhuce.css")  }}">
  4.         <script language="javascript" type="text/javascript" src="{{url_for('static',filename="js/zhuce.js")  }}"></script>
  5. <div id=mao ><p></p>
  6.     <div id="header"><h2 align="center"></h2></div>
  7.     <div id="content" >
  8.  
  9.         <form action="{{ url_for('zhuce')}}" method="post"><br/>
  10.             <div class="form-group">
  11.                 <label for="uname" class="col-sm-2 control-label">Username:</label>
  12.                 <div class="col-sm-10">
  13.                     <input type="text" class="form-control" id="uname" name="username"
  14.                            placeholder="make your username"><br>
  15.                 </div>
  16.             </div>
  17.             <div class="form-group">
  18.                 <label for="upass" class="col-sm-2 control-label">Password:</label>
  19.                 <div class="col-sm-10">
  20.                     <input type="text" class="form-control" id="upass" name="password"
  21.                            placeholder="make your password"><br>
  22.                 </div>
  23.             </div>
  24.             <div class="form-group">
  25.                 <label for="upass2" class="col-sm-2 control-label">AgainPass:</label>
  26.                 <div class="col-sm-10">
  27.                     <input type="text" class="form-control" id="upass2"
  28.                            placeholder="again your password"><br>
  29.                 </div>
  30.             </div>
  31. <div class="form-group1"><label for="question" >SomethingSay</label>
  32. <textarea class="col-sm-10" rows="3" id="question" name="say"></textarea><br><br><br><br>
  33. </div>
  34.             <div >
  35.             <br>  &nbsp &nbsp <input type="radio" name="role" value="stu">student
  36.             <input id="tea" type="radio" name="role" value="tea">teacher<br/>
  37.             </div>
  38.             <div id="error_box"  ></div>
  39.             <div align="center">
  40.                <input id="input_box" type="button" class="btn btn-default btn-lg active" value="注册" onclick="miao()">
  41.              </div>
  42.           </form>
  43. </div>
  44. </div>
  45.  
  46.   {% endblock %}

3.主py文件中：

    1. from flask import  request, redirect, url_for
    2. @app.route('/regist/', methods=['GET', 'POST’])
  1. @app.route('/zhuce/',methods=['GET','POST'])
  2. def zhuce():
  3.     if request.method=='GET':
  4.         return render_template('zhuce.html')
  5.     else:
  6.         username=request.form.get('username')
  7.         password=request.form.get('password')
  8.         say=request.form.get('say')
  9.         user=User.query.filter(User.username==username).first()
  10.         #判断用户名是否存在
  11.         if user:
  12.             return u' username existed'
  13.         else:
  14.             user=User(username=username,password=password,say=say)
  15.             db.session.add(user)
  16.             db.session.commit()
  17.             return redirect(url_for('login'))
  18. #重新定向到登录页

运行结果：

九、完成登陆功能

登录功能完成：

1.js:设置return

同注册，onclick函数return True时才提交表单，return False时不提交表单。

2.html:设置

  1. form
  2. input
  1.    <form action="{{ url_for('login')}}" method="post"><br/>
  2.  
  3.             <div class="form-group">
  4.                 <label for="uname" class="col-sm-2 control-label">Username:</label>
  5.                 <div class="col-sm-10">
  6.                     <input type="text" class="form-control" id="uname" name="username"
  7.                            placeholder="input your username"><br>
  8.                 </div>
  9.  
  10.             </div>
  11.             <div class="form-group">
  12.                 <label for="upass" class="col-sm-2 control-label">Password:</label>
  13.                 <div class="col-sm-10">
  14.                     <input type="password" class="form-control" id="upass" name="password"
  15.                            placeholder="input your password"><br>
  16.                 </div>
  17.             </div>
  18.  
  19.            <div >
  20.             <br> &nbsp &nbsp &nbsp <input type="radio" name="role" value="stu">student&nbsp
  21.             <input id="tea" type="radio" name="role" value="tea">teacher<br/><br/>
  22.             </div>
  23.  
  24.             <div align="center">
  25.             <input id="rem" type="checkbox" value="true"><span>remember me</span> &nbsp &nbsp &nbsp &nbsp<a href="http://help.clouddream.net/newsitem/277741776" target="_blank">Login problem</a><br/>
  26.             <br>
  27.             </div>
  28.       <div id="error_box" ></div>
  29.             <div align="center">
  30.                <input id="input_box" type="submit" class="btn btn-default btn-lg active" value="登录" onclick=" return miao()">
  31.              </div>
  32.           </form>

3.py:

  1. @app.route设置methods
  2. GET
  3. POST
    1. 读取表单数据
    2. 查询数据库
      1. 用户名密码对：
        1. 记住用户名
        2. 跳转到首页
      2. 用户名密码不对：
        1. 提示相应错误。
  1. @app.route('/login/',methods=['GET','POST'])
  2. def login():
  3.     if request.method=='GET':
  4.         return render_template('login.html')
  5.     else:
  6.         usern=request.form.get('username')
  7.         passw=request.form.get('password')
  8.  
  9.         user=User.query.filter(User.username==usern).first()
  10.         #判断用户名是否存在
  11.         if user:
  12.             session['user']=usern
  13.             session.permanent=True
  14.             if user.password==passw:
  15.                 return redirect(url_for('index'))
  16.             else:
  17.                 return u' password error'
  18.         else:
  19.             return u' username  not existed'

十、登录后更新导航

1.用上下文处理器app_context_processor定义函数

  1. 获取session中保存的值
  2. 返回字典
  1. #判断是否登陆，有则在导航栏显示用户名
  2. @app.context_processor
  3. def mycontext():
  4.     usern=session.get('user')
  5.     if usern:
  6.         return {'username':usern}
  7.     else:
  8.         return {}

2.在父模板中更新导航，插入登录状态判断代码。、

  1. 注意用{% ... %}表示指令。
  2. {{ }}表示变量
  1.     {% if username %}
  2.  
  3.     <li><a href="#"><h2>{{ username }}</h2></a></li>
  4.     <li><a href="{{ url_for('logout') }}"><h2>注销</h2></a></li>
  5.     {% else %}
  6.     <li><a href="{{ url_for('login') }}"><h2>登录</h2></a></li>
  7.     <li><a href="{{ url_for('zhuce') }}"><h2>注册</h2></a></li>
  8.     {% endif %}
  9.     <li><a href="#"><h2>联系我</h2></a></li>
  10. </ul>
  11.  
  12. <img id="gui" onclick="mySwitch()" src="" width="1700px">
  13.  
  14. {% block aa %}{% endblock %}

3.完成注销功能。

  1. 清除session
  2. 跳转
  1. #登出，清除session
  2. @app.route('/logout')
  3. def logout():
  4.     session.clear()
  5.     return redirect(url_for('index'))

十一、完成发布功能

1.编写要求登录的装饰器

from functools import wraps

def loginFirst(func): #参数是函数

@wraps(func)

def wrapper(*args, ** kwargs): #定义个函数将其返回

#要求登录

return func(*args, ** kwargs)

return wrapper #返回一个函数

2.应用装饰器，要求在发布前进行登录，登录后可发布。

  1. @app.route('/question/',methods=['GET','POST'])
    @loginFirst
    def question():
  1. #发布前登陆装饰器
  2. def loginFirst(func):  # 参数是函数
  3.     @wraps(func)
  4.     def wrapper(*args, **kwargs):  # 定义个函数将其返回
  5.         if session.get('user'):
  6.             return func(*args, **kwargs)
  7.         else:
  8.             return redirect(url_for('login'))
  9.     return wrapper  # 返回一个函数

3.建立发布内容的对象关系映射。

  1. class Question(db.Model):

4.完成发布函数。

保存到数据库。

重定向到首页。

  1. #登陆前验证，进入评论进入问答页
  2. @app.route('/question/',methods=['GET','POST'])
  3. @loginFirst
  4. def question():
  5.     if request.method=='GET':
  6.         return render_template('question.html')
  7.     else:
  8.         title=request.form.get('title')
  9.         detail = request.form.get('detail')
  10.         author_id = User.query.filter(User.username ==session.get('user')).first().id
  11.         question = Question(title=title, detail=detail, author_id=author_id)
  12.         db.session.add(question)
  13.         db.session.commit()
  14.         return redirect(url_for('index'))

十二、在首页显示问答列表

1. 在首页添加显示问答的列表，并定义好相应的样式。

  1. <ul class="list-group">
  2.  
  3.     <li class="list-group-item" style="width: 800px">
  4.  
  5. {#列表内容开始        #}
  6.      <a class="wrap-img" href="#" target="_blank">
  7.       <img src="http://www.bookmarkye.com/9.jpg" width="50px" >
  8.     </a>
  9.       <span class="glyphicon glyphicon-left" aria-hidden="true"></span>
  10.         <a  href="#" target="_blank">{{ user }}</a>
  11.         <br>
  12.          <a  href="#">{{ title }}</a>
  13.      <span class="badge">发布时间:{{time  }}</span>
  14.               <p style="">{{ detail }}
  15.     </p>
  16.  
  17. {#  列表内容结束      #}
  18.     </li>
  19.  
  20. </ul>

2. 用字典向index.html传递参数。

  1. @app.route('/')
  2. def index():
  3.     context={
  4.         'user':'yubozhi',
  5.         'title':'硬盘不是“背锅侠”',
  6.         'time':'2017-11-29',
  7.         'detail':'昔日上将悬梁，今天硬盘入党。说这话的是一位资深前媒体人。 光天化日之下，硬盘竟然坏了！众目睽睽之下，硬盘竟然坏了！！大庭广众之下，硬盘竟然坏了！！！ 重要的事情说三遍！！！ ...',
  8.  
  9.     }
  10.     return render_template('basic.html',**context)

十三、从首页问答列表标题链接到详情页

1.主PY文件写视图函数，带id参数。 

代码如下：

  1. #进入每篇文章详情页
  2. @app.route('/detail/<question_id>')
  3. @loginFirst
  4. def detail(question_id):
  5.     quest=Question.query.filter(Question.id==question_id).first()
  6.  
  7.     context={
  8.        'comments':Comment.query.order_by('-creat_time').all()
  9.  
  10.     }
  11.     return render_template('detail.html',**context,ques=quest)

2.首页标题的标签做带参数的链接。

代码如下：

  1.   {% for foo in questions %}
  2.  
  3.             <li class="list-group-item" style="width: 800px">
  4.  
  5.                 <a class="wrap-img" href="#" target="_blank">
  6.                     <img src="{{ foo.author.image }}" width="50px">
  7.                 </a>
  8.                 <span class="glyphicon glyphicon-left" aria-hidden="true"></span>
  9.                 <a href="#" target="_blank">{{ foo.author.username }}</a>
  10.                 <br>
  11.                 <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title }}</a>
  12.  
  13.                 <br>
  14.                 <span class="badge">发布时间:{{ foo.creat_time }}</span>
  15.                 <p style="">{{ foo.detail }}
  16.                 </p>
  17. {#                {{ url_for('usercenter',user_id=foo.author.id) }}#}
  18. {#                <a href="#" target="_blank"><br>评论({{ foo.comments.length }})</a>#}
  19.  
  20.             </li>
  21.         {% endfor %}

运行结果：

3.在详情页将数据的显示在恰当的位置。

1.首页列表显示全部问答：

  1. 将数据库查询结果传递到前端页面 Question.query.all()
  2. 前端页面循环显示整个列表。
  3. 问答排序
  1. @app.route('/')
  2. def index():
  3.     context={
  4.  
  5.         'questions':Question.query.order_by('-creat_time').all()
  6.  
  7.     }
  8.     return render_template('basic.html',**context)

2.完成问答详情页布局：

  1. 包含问答的全部信息
  2. 评论区
  3. 以往评论列表显示区。

代码如下：

  1. <div class="page-header">
  2.     <h3>{{ ques.title }}<br><br>
  3.     <small>作者：{{ ques.author.username }}&nbsp&nbsp&nbsp
  4.     <span class="badge">{{ ques.creat_time }}</span>
  5.         </small></h3>
  6. </div>
  7.             <p class="lead">{{ ques.detail }}</p>
  8.             <hr>
  9.             <form action="{{ url_for('comment') }}" method="post" style="">
  10.                 <div class="form-group">
  11.                     <input type="text" value="{{ ques.id }}" name="question_id" hidden>
  12.                     <input type="text" value="{{ user.id }}" name="author_id" hidden>
  13.                     <textarea name="detail" class="form-control"  row="3" id="new-comment" placeholder="write your comment"></textarea>
  14.                 </div>
  15.                 <button type="submit" class="btn btn-default">发送</button>
  16.             </form>
  17.         <hr>

3.在首页点击问答标题，链接到相应详情页。

  1. #进入每篇文章详情页
  2. @app.route('/detail/<question_id>')
  3. def detail(question_id):
  4.     quest=Question.query.filter(Question.id==question_id).first()
  5.     return render_template('detail.html',ques=question_id)

运行结果：

4.建立评论的对象关系映射：

代码如下：

  1. class Comment(db.Model):
  2.     __tablename__ = 'comment'
  3.     # 建立一个表log
  4.     id = db.Column(db.Integer,primary_key=True,autoincrement=True)
  5.     author_id = db.Column(db.Integer,db.ForeignKey('user.id'))
  6.     question_id = db.Column(db.Integer,db.ForeignKey('question.id'))
  7.     creat_time = db.Column(db.DateTime,default=datetime.now)
  8.     detail = db.Column(db.Text,nullable=False)
  9.     question = db.relationship('Question', backref=db.backref('comments'))
  10.     author=db.relationship('User',backref=db.backref('comments'))

运行结果：

十四、实现发布评论，并显示评论区

代码如下：

  1. <h3>评论区:
  2. {#    ({{ ques.comments.length }})#}
  3. </h3><br>
  4.  
  5. <div class="basic_box" style="padding-bottom: 50px;">
  6.     <ul class="list-group" style="margin-bottom: 10px">
  7.       {% for qu in comments %}
  8.  
  9.             <li class="list-group-item" style="width: 800px">
  10.  
  11.                 <a class="wrap-img" href="#" target="_blank">
  12.                     <img src="{{ qu.author.image }}" width="50px">
  13.                 </a>
  14.                 <span class="glyphicon glyphicon-left" aria-hidden="true"></span>
  15.  
  16.                 <br>
  17.                 <a href="#">{{ qu.author_id }}</a>
  18.                 <span class="badge">评论时间:{{ qu.creat_time }}</span>
  19.                 <p style="">{{ qu.detail }}
  20.                 </p>
  21.  
  22.             </li>
  23.      {% endfor %}

运行结果：

十五、完成个人中心相关信息

1.个人中心的页面布局

html文件如下：

  1. {% extends 'basic.html' %}
  2. {% block title %} 个人中心{% endblock %}
  3.  
  4. {% block aa %}
  5.  
  6. <div class="container">
  7.     <div class="row clearfix">
  8.         <div class="col-md-2 column">
  9.         </div>
  10.         <div class="col-md-6 column">
  11.  
  12. <h1><img src="{{ img }}" width="50px">{{usern }}</h1>
  13.  
  14.     <br>全部问答
  15.  
  16. <div class="basic_box" style="padding-bottom: 50px;">
  17.     <ul class="list-group">
  18.  
  19.            {% for qu in ques %}
  20.  
  21.             <li class="list-group-item" style="width: 800px">
  22.  
  23. <a class="wrap-img" href="#" target="_blank">
  24.                     <img src="{{ qu.author.image }}" width="50px">
  25.                 </a>
  26.                 <span class="glyphicon glyphicon-left" aria-hidden="true"></span>
  27.                 <a href="{{ url_for('person',user_id=qu.author.id) }}" target="_blank">{{ qu.author.username }}</a>
  28.                 <br>
  29.                 <a href="{{ url_for('detail',question_id=qu.id) }}">{{qu.title }}</a>
  30.  
  31.                 <br>
  32.                 <span class="badge">发布时间:{{ qu.creat_time }}</span>
  33.                 <p style="">{{ qu.detail }}
  34.                 </p>
  35.             </li>
  36.      {% endfor %}
  37.     </ul>
  38. </div>
  39.  
  40. <h1><img src="{{ img }}" width="50px">{{usern }}</h1>
  41.     <br>全部评论
  42.  
  43. <div class="basic_box" style="padding-bottom: 50px;">
  44.     <ul class="list-group" style="margin-bottom: 10px">
  45.       {% for qu in users %}
  46.  
  47.             <li class="list-group-item" style="width: 800px">
  48.  
  49.                 <a class="wrap-img" href="#" target="_blank">
  50.                     <img src="{{ qu.author.image }}" width="50px">
  51.                 </a>
  52.                 <span class="glyphicon glyphicon-left" aria-hidden="true"></span>
  53.  
  54.                 <br>
  55.                 <a href="#">{{ qu.author.username }}</a>
  56.                 <span class="badge">评论时间:{{ qu.creat_time }}</span>
  57.                 <p style="">{{ qu.detail }}
  58.                 </p>
  59.  
  60.             </li>
  61.      {% endfor %}
  62.     </ul>
  63. <br>
  64. <br>
  65. <h1><img src="{{ img }}" width="50px">{{usern }}</h1>
  66.     <br>个人信息
  67.  
  68. <div class="basic_box" style="padding-bottom: 50px;">
  69.     <ul class="list-group" style="margin-bottom: 10px">
  70. {#      {% for qu in users %}#}
  71.  
  72.           <li class="list-group-item" style="width: 800px"> 用户：{{ usern }}</li>
  73.           <li class="list-group-item" style="width: 800px"> 编号：{{ id }}</li>
  74.           <li class="list-group-item" style="width: 800px"> 问答数：{{ ques|length }}</li>
  75.           <li class="list-group-item" style="width: 800px"> 评论数：{{ comment|length }}</li>
  76.  
  77. {#      {% endfor %}#}
  78.     </ul>
  79.  
  80.         </div>
  81.         <div class="col-md-4 column">
  82.         </div>
  83.     </div>
  84. </div>
  85.  
  86. </div>
  87.  
  88. </div>
  89.  
  90. {% endblock %}

2.定义视图函数def usercenter(user_id):

  1. # 个人中心
  2. @app.route('/person/<user_id>',methods=['GET','POST'])
  3. def person(user_id):
  4.     user = User.query.filter(User.id == user_id).first()
  5.  
  6.     context = {
  7.         'img':user.image,
  8.         'id':user_id,
  9.         'usern':user.username,
  10.         'ques': Question.query.filter(Question.author_id == user_id).order_by('-creat_time').all(),
  11.         'users': Comment.query.filter(Comment.author_id == user_id).order_by('-creat_time').all(),
  12.         'comment': user.comments
  13.     }
  14.     return render_template('person.html', **context)

3.向前端页面传递参数

  1.   context = {
  2.         'img':user.image,
  3.         'id':user_id,
  4.         'usern':user.username,
  5.         'ques': Question.query.filter(Question.author_id == user_id).order_by('-creat_time').all(),
  6.         'users': Comment.query.filter(Comment.author_id == user_id).order_by('-creat_time').all(),
  7.         'comment': user.comments
  8.     }
  1. <h1><img src="{{ img }}" width="50px">{{usern }}</h1>
  2.  
  3.     <br>全部问答
  4.  
  5. <h1><img src="{{ img }}" width="50px">{{usern }}</h1>
  6.     <br>全部评论
  7.  
  8.           <li class="list-group-item" style="width: 800px"> 用户：{{ usern }}</li>
  9.           <li class="list-group-item" style="width: 800px"> 编号：{{ id }}</li>
  10.           <li class="list-group-item" style="width: 800px"> 问答数：{{ ques|length }}</li>
  11.           <li class="list-group-item" style="width: 800px"> 评论数：{{ comment|length }}</li>

4.页面显示相应数据：发布的全部问答、发布的全部评论、个人信息

效果如下：

5.各个页面链接到个人中心

导航栏的昵称连接：

  1.  {% if username %}
  2.  
  3.         <li><a href="{{ url_for('person',user_id=user.id) }}"><h2>{{ username }}</h2></a></li>
  4.         <li><a href="{{ url_for('logout') }}"><h2>注销</h2></a></li>
  5.     {% else %}
  6.         <li><a href="{{ url_for('login') }}"><h2>登录</h2></a></li>
  7.         <li><a href="{{ url_for('zhuce') }}"><h2>注册</h2></a></li>
  8.     {% endif %}
  9.     <li><a href="{{ url_for('question') }}"><h2>问答</h2></a></li>
  10. </ul>

主页昵称连接：

  1.   <a href="{{ url_for('person',user_id=foo.author.id) }}" target="_blank">{{ foo.author.username }}</a>

评论列表里面的昵称连接：

  1.                 <a href="{{ url_for('person',user_id=qu.author.id) }}">{{ qu.author.username }}</a>

文章中作者名字连接：

  1.    作者：<a href="{{ url_for('person',user_id=ques.author.id) }}">{{ ques.author.username }}</a>

6.新页面user.html,用<ul ><li role="presentation"> 实现标签页导航。
<ul class="nav nav-tabs">
  <li role="presentation"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

  1. <ul class="nav nav-tabs">
  2.  
  3.     <li class="nav"  role="presentation"><a href="#"><h3>全部问答</h3></a></li>
  4.     <li class="nav"  role="presentation"><a href="#"><h3>全部评论</h3></a></li>
  5.     <li class="nav"  role="presentation"><a href="#"><h3>个人中心</h3></a></li>
  6.  
  7. </ul>

7.user.html继承base.html。
重写title,head,main块.
将上述<ul>放在main块中.
定义新的块user。

如下：

user.html

  1. {% extends 'basic.html' %}
  2. {% block title %} 个人中心{% endblock %}
  3.  
  4. {% block aa %}
  5. {% block user %}{% endblock %}
  6.  </div>
  7. {% endblock %}

person.html

  1. {% extends 'user.html' %}
  2.  
  3. {% block user %}
  4. {% endblock %}

8.个人中心—视图函数带标签页面参数tag
@app.route('/usercenter/<user_id>/<tag>')
def usercenter(user_id, tag):
   if tag == ‘1':
       return render_template('usercenter1.html', **context)

  1. # 个人中心
  2. @app.route('/person/<user_id>/<tag>',methods=['GET','POST'])
  3. def person(user_id,tag):
  4.     user = User.query.filter(User.id == user_id).first()
  5.  
  6.     context = {
  7.         'img':user.image,
  8.         'id':user_id,
  9.         'usern':user.username,
  10.         'ques': Question.query.filter(Question.author_id == user_id).order_by('-creat_time').all(),
  11.         'users': Comment.query.filter(Comment.author_id == user_id).order_by('-creat_time').all(),
  12.         'comment': user.comments,
  13.         'user1':user
  14.     }
  15.     if tag=='1':
  16.          return render_template('person.html', **context)
  17.     elif tag=='2':
  18.          return render_template('person2.html', **context)
  19.     else:
  20.          return render_template('person3.html', **context)

9.个人中心—导航标签链接增加tag参数
<li role=“presentation”><a href=“{{ url_for(‘usercenter’,user_id = user.id,tag = ‘1’) }}">全部问答</a></li>

  1.     <li class="nav" role="presentation"><a href="{{url_for('person',user_id=user1.id,tag=1)}}"><h3>全部问答</h3></a></li>
  2.     <li class="nav" role="presentation"><a href="{{url_for('person',user_id=user1.id,tag=2)}}"><h3>全部评论</h3></a></li>
  3.     <li class="nav" role="presentation"><a href="{{url_for('person',user_id=user1.id,tag=3)}}"><h3>个人中心</h3></a></li>

10.个人中心—有链接到个人中心页面的url增加tag参数
u <a href="{{ url_for('usercenter',user_id = session.get('userid'), tag=1) }}">{{ session.get('user') }}</a>

  1.    <a href="{{ url_for('person',user_id=qu.author.id,tag=1) }}" target="_blank">{{ qu.author.username }}</a>
  2.  
  3.    <a class="wrap-img" href="{{ url_for('person',user_id=foo.author.id,tag=1) }}" target="_blank">
  1.  
  1.    <a href="{{ url_for('person',user_id=foo.author.id,tag=1) }}" target="_blank">{{ foo.author.username }}</a>

运行结果：

十六、实现导航条中的搜索功能

1.准备视图函数search()

  1. # 查找
  2. @app.route('/search/')
  3. def search():
  4.   p

Python+Flask+MysqL的web建设技术过程的更多相关文章

  1. 个人学期总结及Python+Flask+MysqL的web建设技术过程

    一个学期即将过去,我们也迎来了2018年.这个学期,首次接触了web网站开发建设,不仅是这门课程,还有另外一门用idea的gradle框架来制作网页. 很显然,用python语言的flask框架更加简 ...

  2. Python+Flask+MysqL的web技术建站过程

    1.个人学期总结 时间过得飞快,转眼间2017年就要过去.这一年,我学习JSP和Python,哪一门都像一样新的东西,之前从来没有学习过. 这里我就用我学习过的Python和大家分享一下,我是怎么从一 ...

  3. 前端和后端的数据交互(jquery ajax+python flask+mysql)

    上web课的时候老师布置的一个实验,要求省市连动,基本要求如下: 1.用select选中一个省份. 2.省份数据传送到服务器,服务器从数据库中搜索对应城市信息. 3.将城市信息返回客户,客户用sele ...

  4. 实战接口开发：python + flask + mysql + redis（根据反馈，持续细化更新。。。）

    前言 自动化已经成为测试的必备技能之一了,所以,很多想跳槽的测试朋友都在自学,特别是最实用的接口自动化, 但是很多人因为没有可以练手的项目而苦恼,最终导致缺乏实战经验,其实,完全可以自己开发个简单项目 ...

  5. Python Flask+Mysql练习题

    #!/usr/bin/pythonfrom flask import Flask,render_template,request,redirect,sessionimport MySQLdb as m ...

  6. Python flask 与 GO WEB服务器性能对比

    测试环境: 系统: CentOS 7.1 Mem: 8G CPU: 虚拟机16核 Python版本: python3.6 Flask版本: 0.12.2 Golang版本: 1.6.3 1.首先写一个 ...

  7. 使用 Python & Flask 实现 RESTful Web API

    环境安装: sudo pip install flask Flask 是一个Python的微服务的框架,基于Werkzeug, 一个 WSGI 类库. Flask 优点: Written in Pyt ...

  8. demo项目开发（Python+flask+mysql+redis只包含后端接口）

    [demo项目开发需求] 用户信息管理,可以注册.登录.添加用户.删除用户 注册:任何用户可以注册,对用户提交的注册信息进行校验,返回对应的信息,其中: 用户名:必填,唯一 密码:必填,只能6-12位 ...

  9. Python flask 基于 Flask 提供 RESTful Web 服务

    转载自 http://python.jobbole.com/87118/ 什么是 REST REST 全称是 Representational State Transfer,翻译成中文是『表现层状态转 ...

随机推荐

  1. IIS7.5站点配置

    1. 创建站点映射目录: c:\website\release 2. 创建系统用户: a.本地用户和组-->用户-->新用户-->用户名\密码:WebUSR.xxxyyy--> ...

  2. api收录

    ip地址查询api http://ip.taobao.com/service/getIpInfo.php?ip= 如: http://ip.taobao.com/service/getIpInfo.p ...

  3. mysql 数据操作 单表查询 where 约束 目录

    mysql 数据操作 单表查询 where约束 between and or mysql 数据操作 单表查询 where约束 is null in mysql 数据操作 单表查询 where约束 li ...

  4. python之celery队列模块

    一.celery队列简介 Celery 是一个 基于python开发的分布式异步消息任务队列,通过它可以轻松的实现任务的异步处理, 如果你的业务场景中需要用到异步任务,就可以考虑使用celery. 1 ...

  5. 【转】Deep Learning（深度学习）学习笔记整理系列之（四）

    九.Deep Learning的常用模型或者方法 9.1.AutoEncoder自动编码器 Deep Learning最简单的一种方法是利用人工神经网络的特点,人工神经网络(ANN)本身就是具有层次结 ...

  6. 网络协议TCP、Http、webservice、socket区别

    网络协议TCP.Http.webservice.socket区别 http 和 webservice 都是基于TCP/IP协议的应用层协议 webservice是基于http的soap协议传输数据 w ...

  7. hdu4758 Walk Through Squares

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=4758 题目: Walk Through Squares Time Limit: 4000/20 ...

  8. DB 异常

    1. ORA-00947: Not enough values 没有足够的值  执行insert的时候出现这个错误. 例如:insert into 表1 values (?,?,?); 表1的结构有4 ...

  9. React 根据 state 修改className

    className={ this.state.isLike ? 'active iconfont icon-xihuan' : 'iconfont icon-xihuan1' }

  10. DB开发之postgresql

    1.环境变量配置: PGLIB=/usr/local/pgsql/lib PGDATA=$HOME/data PATH=$PATH:/usr/local/pgsql/bin MANPATH=$MANP ...