因陀罗

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

第一章.

web基础

1.认识URL,观察常用网站网址,区分不同组成部分。uscheme://host:port/path/?query-string=xxx#anchor11

2.观察web浏览过程.

3.HTML基础。练习使用标签制作简单的页面。 

第二章.


 

 

1.用div,form制作登录页面,尽可能做得漂亮。

2.练习使用下拉列表选择框,无序列表,有序列表,定义列表。

3.观察常用网页的HTML元素,在实际的应用场景中,用已学的标签模仿制作。

第三章.

导航 头部 CSS基础

1.制作自己的导航条。

2.HTML头部元素:

   <base>  定义了页面链接标签的默认链接地址

   <style>  定义了HTML文档的样式文件

   <link>  定义了一个文档和外部资源之间的关系

3.练习样式表:

   行内样式表

   内嵌样式表

   外部样式表

4.分别练习定义三类选择器:

   HTML 选择器

   CLASS 类选择器

   ID 选择器

第四章.

CSS实例 图片导航块

  1. 认识CSS的 盒子模型。
  2. CSS选择器的灵活使用。
  3. 实例:
    1. 图片文字用div等元素布局形成HTML文件。
    2. 新建相应CSS文件,并link到html文件中。
    3. CSS文件中定义样式
      1. div.img:border,margin,width,float
      2. div.img img:width,height
      3. div.desc:text-align,padding
      4. div.img:hover:border
      5. div.clearfloat:clear

第五章.

JavaScript 基础,登录前端验证

    1. <script></script>的三种用法:
      1. 放在<body>中
      2. 放在<head>中
      3. 放在外部JS文件中
    2. 三种输出数据的方式:
      1. 使用 document.write() 方法将内容写到 HTML 文档中。
      2. 使用 window.alert() 弹出警告框。
      3. 使用 innerHTML 写入到 HTML 元素。
        1. 使用 "id" 属性来标识 HTML 元素。
        2. 使用 document.getElementById(id) 方法访问 HTML 元素。
        3. 用innerHTML 来获取或插入元素内容。

    3. 登录页面准备:
      1. 增加错误提示框。
      2. 写好HTML+CSS文件。
      3. 设置每个输入元素的id
    4. 定义JavaScript 函数。
      1. 验证用户名6-20位
      2. 验证密码6-20位
    5. onclick调用这个函数。

 

第六章.

完成登录与注册页面前端

完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括:

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

 

第七章.

开始Flask项目

  1. 新建Flask项目。
  2. 设置调试模式。
  3. 理解Flask项目主程序。
  4. 使用装饰器,设置路径与函数之间的关系。
  5. 使用Flask中render_template,用不同的路径,返回首页、登录员、注册页。
  6. 用视图函数反转得到URL,{{url_for(‘login’)}},完成导航条里的链接。

 

第八章

夜间模式的开启与关闭,父模版的制作

 

夜间模式的开启与关闭

  1. 放置点击的按钮或图片。
  2. 定义开关切换函数。
  3. onclick函数调用。

第九章.

加载静态文件,父模版的继承与拓展

  1. 用url_for加载静态文件
    1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
    2. flask 从static文件夹开始寻找
    3. 可用于加载css, js, image文件
  2. 继承和扩展
    1. 把一些公共的代码放在父模板中,避免每个模板写同样的内容。base.html
    2. 子模板继承父模板
      1.   {% extends 'base.html’ %}
    3. 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
      1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
      2. {% block head %}{% endblock %}
      3. {% block main %}{% endblock %}
    4. 子模板中写代码实现自己的需求。block
      1.   {% block title %}登录{% endblock %}

第十章.

连接mysql数据库,创建用户模型

  1. 安装与配置python3.6+flask+mysql数据库
    1. 下载安装MySQL数据库
    2. 下载安装MySQL-python 中间件
    3. pip install flask-sqlalchemy (Python的ORM框架SQLAlchemy)
  2. mysql创建数据库
  3. 数据库配置信息config.py
  4. 建立mysql和app的连接
  5. 创建用户模型

第十一章.

通过用户模型,对数据库进行增删改查操作

增加:
user =
db.session.add(user)
db.session.commit()
查询:
User.query.filter(User.username == 'mis1114').first()
修改:
user.password = '111111'
db.session.commit()
删除:
db.session.delete(user)
db.session.commit()

第十二章.

完成注册功能

  1. js文件: onclick函数return True时才提交表单,return False时不提交表单。
  2. html文件:
    1. <form>中设置 action和method="post"
    2. <input> 中设置 name
  3. 主py文件中:
    1. from flask import  request, redirect, url_for
    2. @app.route('/regist/', methods=['GET', 'POST’])

def regist():

   if request.method == 'GET':

        return render_template('regist.html')

   else:

        username = request.form.get(‘username’)#获取form中的数据

        判断用户名是否存在:存在报错

  不存在,存到数据库中

       redirect重定向到登录页

第十三章.

完成登录功能,用session记住用户名

  1. js:设置return
  2. html:设置
    1. form
    2. input
    3. onclick="return fnLogin()"
  3. py:
    1. @app.route设置methods
    2. GET
    3. POST
      1. 读取表单数据
      2. 查询数据库
        1. 用户名密码对:
          1. 记住用户名
          2. 跳转到首页
        2. 用户名密码不对:
          1. 提示相应错误。

session:

  1. 从`flask`中导入`session`
  2. 设置`SECRET_KEY`
  3. 操作字典一样操作`session`:增加用户名`session['username']=`username

第十四章.

登录之后更新导航

  1. 用上下文处理器app_context_processor定义函数
    1. 获取session中保存的值
    2. 返回字典
  2. 在父模板中更新导航,插入登录状态判断代码。
    1. 注意用{% ... %}表示指令。
    2. {{ }}表示变量
  3. 完成注销功能。
    1. 清除session
    2. 跳转

第十五章.

发布功能完成

  • 编写要求登录的装饰器

from functools import wraps

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

@wraps(func)

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

          #要求登录

          return func(*args, ** kwargs)

      return wrapper #返回一个函数

  • 应用装饰器,要求在发布前进行登录,登录后可发布。
@app.route('/question/',methods=['GET','POST'])
@loginFirst
def question():

 

  • 建立发布内容的对象关系映射。
class Question(db.Model):
  • 完成发布函数。

保存到数据库。

重定向到首页。

 

第十六章.

制作首页的显示列表

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

无序列表

<ul >

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

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

第十七章.

首页列表显示全部问答,完成问答详细页布局

  1. 首页列表显示全部问答:
    1. 将数据库查询结果传递到前端页面 Question.query.all()
    2. 前端页面循环显示整个列表。
    3. 问答排序
  2. 完成问答详情页布局:
    1. 包含问答的全部信息
    2. 评论区
    3. 以往评论列表显示区。
  3. 在首页点击问答标题,链接到相应详情页。

第十八章.

从首页问答标题到问答详情页

主PY文件写视图函数,带id参数。 

首页标题的标签做带参数的链接。
      {{ url_for('detail',question_id = foo.id) }}

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

建立评论的对象关系映射:

class Comment(db.Model)

   __tablename__='comment'

尝试实现发布评论。              

 

 

第十九章.

完成评论功能

 

第二十章.

评论列表显示及排序,个人中心显示

  1. 显示所有评论
    {% for foo in ques.comments %}

  2. 所有评论排序
    uquestion = db.relationship('Question', backref=db.backref('comments', order_by=creat_time.desc))

  3. 显示评论条数
    {{ ques.comments|length }}

  4. 完成个人中心

1.个人中心的页面布局(html文件及相应的样式文件)

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

3.向前端页面传递参数

4.页面显示相应数据

发布的全部问答

发布的全部评论

个人信息

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

第二十一章.

个人中心标签页导航

    1. 新页面userbase.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>

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

    3. 让上次作业完成的个人中心页面,继承userbase.html,原个人中心就自动有了标签页导航。

    4. 制作个人中心的三个子页面,重写userbase.html中定义的user块,分别用于显示问答、评论、个人信息。

    5. 思考 如何实现点标签页导航到达不同的个人中心子页面。   

第二十二章.

完成个人中心.导航标签

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

 

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

 

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

第二十三章.

实现搜索功能

  1. 准备视图函数search()

  2. 修改base.html 中搜索输入框所在的
    1. <form action="{{ url_for('search') }}" method="get">
    2.    <input name="q" type="text" placeholder="请输入关键字">

  3. 完成视图函数search()
    1. 获取搜索关键字
      q = request.args.get('q’)
    2. 条件查询
      qu = Question.query.filter(Question.title.contains(q)).order_by('-creat_time’)
    3. 加载查询结果:
      return render_template('index.html', question=qu)

  4. 组合条件查询
    from sqlalchemy import or_, and_ 

示例:

Lobby.query.filter(
    or_(
        and_(
            Lobby.id == Team.lobby_id,
            LobbyPlayer.team_id == Team.id,
            LobbyPlayer.player_id == player.steamid
        ),
         and_(
            Lobby.id == spectator_table.c.lobby_id,
            spectator_table.c.player_id == player.steamid
        )
    )
)

第二十四章.

密码保护

1.更新User对象,设置对内的_password

class User(db.Model):

    __tablename__ = 'user' 

    _password = db.Column(db.String(200), nullable=False) #内部使用

 

2.编写对外的password

from werkzeug.security import generate_password_hash, check_password_hash

    @property

    def password(self):  #外部使用,取值

        return self._password

    @password.setter

    def password(self, row_password):#外部使用,赋值

        self._password = generate_password_hash(row_password)

 

3.密码验证的方法:

    def check_password(self, row_password): #密码验证

        result = check_password_hash(self._password,row_password)

        return result

 

4.登录验证:

        password1 = request.form.get('password')

        user = User.query.filter(User.username == username).first()

        if user:

            if user.check_password(password1):

 

个人总结心得:

    本学期通过老师的课程教导与个人实践,完成了24章的课程实践,学习的内容有:python基础,管理信息系统理论学习,web网页开发设计基础等。

   通过本学期的学习,接触了新的开发工具python也学会了基本的web网页开发与设计,其中课程特点:对于初学门槛低,容易上手,能够从编程和网页设计中得到对于开发的自信心提升,降低了学习信管专业学生对于编程网页开发的难度,提高积极性。对于以后的python项目程序设计也是一个稳步基础,经过一个学期的学习,每个人都能通过自己的努力一步一个脚印做出属于自己的页面项目。

   以后也会专门向该方向进行学习与专研。

 

posted on 2018-01-03 15:42  068冯斐然  阅读(176)  评论(0编辑  收藏  举报