1.个人学期总结
时间过得飞快，转眼间2017年就要过去。这一年，我学习JSP和Python，哪一门都像一样新的东西，之前从来没有学习过。
这里我就用我学习过的Python和大家分享一下，我是怎么从一具小白到菜鸟到初学者到现在的基本可以运用Python去开发自己的
WEB项目。
回想这一年，我的内心是平静的。觉到自己已经不再不羁，青春已然流逝着，岁月从不饶人。从此开始，不再有不着边际的
想象，不再有异想天开的策划。突然觉得自己长大了很多，从无知到渐渐的成熟。我学到了很多。我明白了宽容别人，明白了什
么叫做真诚。然而这些，我从前仅仅是知道，却不明白。
那我来给大家说一下总结Python+Flask+MysqL的web建设技术。
2.总结Python+Flask+MysqL的web建设技术过程，标准如下：
学习 Flask，写完一个 Flask 应用需要部署的时候，就想着折腾自己的服务器。根据搜索的教程照做，对于原理一知半解，磕
磕碰碰，只要运行起来了，谢天谢地然后不再折腾了，到下一次还需要部署时，这样的过程就会重复一次。不知道多少人的膝盖中
箭了呢？我也这样干过，这么做确实很蠢，所以我决定写一篇 Python+Flask+MysqL+Windows 的部署教程，解答一些我自己在这个过
程中的疑问，从原理到方案，以一个小白的角度，总结一下部署、运维这件事，应该对初学 Flask 需要部署的同学有些帮助。
1.环境的搭建和常用工具简介
下载python3.6（登录官网）：https://www.python.org/getit/
下载最新的python版本
下载windows86-64 的基础版，如果是苹果机就下max版
https://www.python.org/ftp/python/3.6.4/python-3.6.4-amd64-webinstall.exe
安装
下载好之后是一个windows可以直接执行的exe程序
点击安装：
注意的是，安装时要点上加入环境变量中，不然之后要自己手动配置环境变量
安装成功之后，怎么检验
win+R键，输入cmd，确定
输入:python
如果有以下的错误的话，就检查一下你的安装路径是否在环境变量之中
成功则显示以下信息：
下载PyCharm（登录官网）
这里有一分PyCharm的介绍：https://baike.baidu.com/item/PyCharm
搭建环境
1、win10_X64，其他Win版本也可以。
2、PyCharm版本：Professional-2016.2.3。
搭建准备
1、到PyCharm官网下载PyCharm安装包。
需要破解版的可以自行百度，这里就不开新的支线，不过我建议还是用正版的，人家开发软件也不容易
2.使用pip进行包管理
pip install flask
pip install pymysql
pip install sqlalchemy
pip install flask_sqlalchemy
3.安装数据库及其可视化工具，这里我用的Mysql数据库
由于安装数据库容易出现各种错误，我在这里推荐一款集成开发软件，是我在开发php的时学习到的一款工具，
这样可以免去了安装mysql出现错误带来问题。
安装成功后：桌面会显示这个图表
右键：以管理员的身份来运行
一是开机自动启动，二是WEB服务器已经成功部署
我是安在D盘的，Mysql的地址在PHPStudy中的mysql文件夹之中
还有一个工具叫sqlyog
下载地址：https://sqlyog.en.softonic.com/
安装成功后:
点击新建：
默认是本机的地址：localhost
用户名：root
密码：root
端口：3306
进入后的界面是：
本项目还用到了Bootsrap框架和layui框架，用到了Uedier插件，要自行下载，这里不作说明
4.环境已经搭建好了之后，开始进入正式的建站之路
4.1用pycharm准备一个Flask的项目
打开pycharm,新建一个项目，要先选好python的版本，还有安装存放的地径
这样就打开了一个Flask项目，在编辑区右键，运行我们可看到项目打来的Hello World!
浏览器中输入http://127.0.0.1:5000
导入库在项目的py文件中
from flask import Flask, render_template, request, redirect, url_for, session
from sqlalchemy import or_
from functools import wraps
from hashlib import md5
from models import User,Book,Classification,Commentaries
from db import db
import os,congif
数据库名的设计
mysql创建数据库mis_db
新建一个py文件 confiy.py的文件存放数据库连接信息
#encoding: utf-8
import os
DEBUG = True SECRET_KEY = os.urandom(24) DIALECT = 'mysql'
DRIVER = 'mysqldb'
USERNAME = 'root'
PASSWORD = 'root'
HOST = 'localhost'
PORT = ''
DATABASE = 'mis_db' SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:root@localhost:3306/mis_db?charset=utf8'
SQLALCHEMY_TRACK_MODIFICATIONS = False
新建一个py文件 db.py的文件存放数据库连接对象和Flask框架
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
新建一个py文件 models.py的文件存放数据库表的对象
其中包括了表的表名和列名及其基本信息
from db import db # 用户信息
class User(db.Model):
__tablename__ = 'user'
id = db.Column(db.String(17), primary_key=True) # 数据库唯识别id
name = db.Column(db.String(20), nullable=False) # 登录账号名
title = db.Column(db.String(30)) # 显示名称
password = db.Column(db.String(42), nullable=False) # 密码
truename = db.Column(db.String(10)) # 真实姓名
sex = db.Column(db.String(1), default='') # 性别
phone = db.Column(db.String(11)) # 电话号码
email = db.Column(db.String(40)) # 邮箱
logo = db.Column(db.String(50)) # 头像
qq = db.Column(db.String(11)) # qq号码
createdate = db.Column(db.DATETIME) # 注册日期
level = db.Column(db.String(2)) # 用户等级
address = db.Column(db.String(60)) # 用户住址 # 图书分类 classification(id,name,content)
class Classification(db.Model):
__tablname__ = 'classification'
id = db.Column(db.String(17), primary_key=True) # 数据库唯识别id
name = db.Column(db.String(30)) # 文章名称
logo = db.Column(db.String(50)) # 头像地址
context = db.Column(db.TEXT) # 分类内容 # 发布图书及问答
class Book(db.Model):
__tablname__ = 'book'
id = db.Column(db.String(17), primary_key=True) # 数据库唯识别id
title = db.Column(db.String(30)) # 文章标题
abstracts = db.Column(db.String(150)) # 文章摘要
content = db.Column(db.TEXT) # 文章内容
createdate = db.Column(db.DATETIME) # 发布时间
author_id = db.Column(db.String(17), db.ForeignKey('user.id')) # 发布者id
size = db.Column(db.String(30)) # 文章长度
chilk = db.Column(db.Integer()) # 阅读数
disc = db.Column(db.Integer()) #点赞数
classification = db.Column(db.String(17), db.ForeignKey('classification.id')) # 文章分类id
authorClass = db.relationship('User', backref=db.backref('book'))
classificationClass = db.relationship('Classification', backref=db.backref('book')) # 评论表
class Commentaries(db.Model):
__tablname__ = 'commentaries'
id = db.Column(db.String(17), primary_key=True) # 数据库唯一识别id
book_id = db.Column(db.String(17), db.ForeignKey('book.id')) # 评论对应的文章的id
question_id = db.Column(db.String(17)) # 问题的提出者id，或者是文章作者id
answer_id = db.Column(db.String(17), db.ForeignKey('user.id')) # 回答问题用户的id
date = db.Column(db.DATETIME) # 回答日期
content = db.Column(db.TEXT) # 回答内容
answer = db.relationship('User', backref=db.backref('commentaries'))
book = db.relationship('Book', backref=db.backref('commentaries',order_by=date.desc))
主项目文件中加上这两行
app.config.from_object(config)
db.init_app(app)
临时在主项目上加上建表的python语句，建表后可以注释了
运行项目，没有错误则可。
可以看到表就稳了
添加触发器一个三个触发器用于生成表的ID
DELIMITER $$ USE `mis_db`$$ DROP TRIGGER /*!50032 IF EXISTS */ `tri_book_id`$$ CREATE
/*!50017 DEFINER = 'mis'@'%' */
TRIGGER `tri_book_id` BEFORE INSERT ON `book`
FOR EACH ROW SET
new.id =CONCAT(DATE_FORMAT(NOW(),'%Y%m%d%H%i%s'),LPAD(FLOOR(RAND()*100),3,'')),
new.createdate=DATE_FORMAT(NOW(),'%Y-%m-%d %H:%i:%s');
$$ DELIMITER ;
DELIMITER $$ USE `mis_db`$$ DROP TRIGGER /*!50032 IF EXISTS */ `tri_classification_id`$$ CREATE
/*!50017 DEFINER = 'mis'@'%' */
TRIGGER `tri_classification_id` BEFORE INSERT ON `classification`
FOR EACH ROW SET
new.id =CONCAT(DATE_FORMAT(NOW(),'%Y%m%d%H%i%s'),LPAD(FLOOR(RAND()*100),3,''));
$$ DELIMITER ;
DELIMITER $$ USE `mis_db`$$ DROP TRIGGER /*!50032 IF EXISTS */ `tri_commentaries_id`$$ CREATE
/*!50017 DEFINER = 'mis'@'%' */
TRIGGER `tri_commentaries_id` BEFORE INSERT ON `commentaries`
FOR EACH ROW SET
new.id =CONCAT(DATE_FORMAT(NOW(),'%Y%m%d%H%i%s'),LPAD(FLOOR(RAND()*100),3,'')),
new.date=DATE_FORMAT(NOW(),'%Y-%m-%d %H:%i:%s');
$$ DELIMITER ;
DELIMITER $$ USE `mis_db`$$ DROP TRIGGER /*!50032 IF EXISTS */ `tri_user_id`$$ CREATE
/*!50017 DEFINER = 'mis'@'%' */
TRIGGER `tri_user_id` BEFORE INSERT ON `user`
FOR EACH ROW SET
new.id =CONCAT(DATE_FORMAT(NOW(),'%Y%m%d%H%i%s'),LPAD(FLOOR(RAND()*100),3,'')),
new.createdate=DATE_FORMAT(NOW(),'%Y-%m-%d %H:%i:%s'),
new.password=MD5(new.password);
$$ DELIMITER ;
在sqlyog中分别执行一下上述代码
前期：新建以文件目录（其中Bootsrap、layui、ueditor自行上网下载）
一、准备一套母模板用被继承 命名为（ Index.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %} -享书</title>
<link rel="icon" href="{{ url_for('static',filename='img/logo.ico') }}">
<!--引入CSS文件-->
<link rel="stylesheet" href="{{ url_for('static',filename='css/second.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}" media="all">
{% block link %}{% endblock %}
</head>
<body class="box" id="body">
<nav>
<div class="layui-row" style="padding-top:8px;">
<div class="layui-col-md8">
<div class="layui-row">
<div class="layui-col-md1"> </div>
<div class="layui-col-md11">
<div class="layui-row">
<div class="layui-col-md1">
<a href="{{ url_for('index') }}">
<div class="layui-nav-img"><img src="{{ url_for('static',filename='img/logo.png') }}"
alt="logo" width="50px"></div>
</a>
</div>
<div class="layui-col-md3" style="font-size: 25px;padding-top: 5px;">
<span class="">
<a href="{{ url_for('index') }}">首页</a> |
<a href="{{ url_for('question') }}">分享你的爱书</a>
</span>
</div>
<div class="layui-col-md8" style="padding-top:3px;">
<form method="get" action="{{ url_for('search') }}">
<div class="layui-row">
<div class="layui-col-md3" style="padding-left: 10px;">
<input type="text" name="q" required lay-verify="required"
placeholder="请输入搜索内容"
autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md3" style="padding-left: 10px;">
<button type="submit" class="layui-btn layui-btn-primary">搜索</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-row">
{% if not title %}
<div class="layui-col-md4" style="padding-top: 5px;padding-left: 30px;">
<a class="layui-btn layui-btn-small layui-btn-radius layui-btn-primary"
href="{{ url_for('login') }}">登录</a>
</div>
<div class="layui-col-md4">
<a class="layui-btn layui-btn-radius layui-btn-danger" href="{{ url_for('regist') }}">注册</a>
</div>
{% else %}
<div class="layui-col-md4" style="padding-top: 5px;padding-left: 30px;">
<div style="margin-top: -13px; width:140px;">
<ul class="layui-nav layui-bg-withe">
<li class="layui-nav-item">
<a href="javascript:;" style="color: black;">个人中心</a>
<dl class="layui-nav-child">
<dd class="dd-item"><a href="{{ url_for('commentaries',user_id=user_id) }}">{{ title }}</a></dd>
<dd class="dd-item"><a href="{{ url_for('resetPassword',user_id=user_id) }}">修改密码</a></dd>
<dd class="dd-item"><a href="{{ url_for('config',user_id=user_id) }}">设置</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-col-md4">
<a class="layui-btn layui-btn-radius layui-btn-danger" href="{{ url_for('logout') }}">注销</a>
</div>
{% endif %} <div class="layui-col-md4">
<button class="layui-btn layui-btn-radius layui-btn-warm" onclick="light()" type="button"
id="light">关灯
</button>
</div>
</div>
</div>
</div>
</nav>
<div class="box">
{% block box %}{% endblock %}
</div>
<footer>
<div class="footer_box">
Copyright@ 2017-2022 个人版权，版权所有 作者：叶在林
</div>
</footer> <!--引入js文件-->
<script src="{{ url_for('static',filename='js/public.js') }}"></script>
<script src="{{ url_for('static',filename='layui/layui.js') }}" charset="utf-8"></script>
<script src="{{ url_for('static',filename='js/jquery.js') }}" charset="utf-8"></script>
<script src="{{url_for('static',filename='bootstrap/js/bootstrap.min.js')}}"></script>
<script>
layui.use('element', function () {
var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块 //监听导航点击
element.on('nav(demo)', function (elem) {
//console.log(elem)
layer.msg(elem.text());
});
});
</script>
{% block script %}{% endblock %}
</body>
</html>
二、注册页
{% extends 'index.html' %}
{% block title %}
注册
{% endblock %}
{% block link %}
{% endblock %}
{% block box %}
<div class="regis_box regis_box_on" id="box">
<!--css-->
<div class="">
<!--头部提示-->
<div class="font_title">
注册新用户
<hr class="">
</div>
<!--表单-->
<form class="layui-form" role="form" id="form_regis" method="post" action="{{ url_for('regist') }}" name="form_regis"
onSubmit="return registration()">
<!--每一行-->
<div class="layui-form-item">
<label class="layui-form-label">登录帐号</label>
<div class="layui-input-block">
<input type="text" name="user_name" id="user_name" autocomplete="off" placeholder="登录用户名，不少于6个字符"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">显示名称</label>
<div class="layui-input-block">
<input type="text" name="user_title" autocomplete="off" placeholder="显示名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="user_password" placeholder="密码6到20位，只能包含字母、数字" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input type="password" name="check_password" placeholder="请输入确认密码" autocomplete="off"
class="layui-input">
</div>
</div>
<div id="error_box" style="color: red;">
<br>
</div>
<!--注册按钮-->
<div class="btn_submit_regis">
<button type="submit" class="layui-btn layui-btn-normal">注册</button>
</div>
<!--协议提示-->
</form>
</div>
</div>
<script>
$('#user_name').change(function () {
$.get(
'{{ url_for('regist') }}',
{
user_name : $('#user_name').val()
},
function (data) {
if(data != 'ok')
$('#error_box').html(data)
}
)
})
</script>
{% endblock %}
三、登陆页
{% extends 'index.html' %}
{% block title %}
注册
{% endblock %}
{% block link %}
{% endblock %}
{% block box %}
<div class="regis_box regis_box_on" id="box">
<!--css-->
<div class="">
<!--头部提示-->
<div class="font_title">
注册新用户
<hr class="">
</div>
<!--表单-->
<form class="layui-form" role="form" id="form_regis" method="post" action="{{ url_for('regist') }}" name="form_regis"
onSubmit="return registration()">
<!--每一行-->
<div class="layui-form-item">
<label class="layui-form-label">登录帐号</label>
<div class="layui-input-block">
<input type="text" name="user_name" id="user_name" autocomplete="off" placeholder="登录用户名，不少于6个字符"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">显示名称</label>
<div class="layui-input-block">
<input type="text" name="user_title" autocomplete="off" placeholder="显示名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="user_password" placeholder="密码6到20位，只能包含字母、数字" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-block">
<input type="password" name="check_password" placeholder="请输入确认密码" autocomplete="off"
class="layui-input">
</div>
</div>
<div id="error_box" style="color: red;">
<br>
</div>
<!--注册按钮-->
<div class="btn_submit_regis">
<button type="submit" class="layui-btn layui-btn-normal">注册</button>
</div>
<!--协议提示-->
</form>
</div>
</div>
<script>
$('#user_name').change(function () {
$.get(
'{{ url_for('regist') }}',
{
user_name : $('#user_name').val()
},
function (data) {
if(data != 'ok')
$('#error_box').html(data)
}
)
})
</script>
{% endblock %}
四、详情页
{% extends 'index.html' %}
{% block title %}
{{ book.title }}
{% endblock %}
{% block link %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/poi.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}">
{% endblock %}
{% block box %}
<div class="context">
<!--左填充-->
<div class="index index-left"></div>
<!--中间主要内容 -->
<div class="index index-center">
<!--轮播图 start-->
<div class="picture">
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="{{ url_for('static', filename='img/index_p1.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p4.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p5.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p6.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p7.png') }}" width="100%"/></div>
</div>
</div>
</div>
<!--轮播图 end-->
<br><br>
<!-- 文章 -->
<div class="poi_note">
<div class="poi_post">
<!-- 文章主体信息 -->
<div class="poi_article">
<h1 class="poi_title">{{ book.title }}</h1>
<!-- 作者区域 -->
<div class="poi_author">
<a class="poi_avatar" href="{{ url_for('commentaries',user_id= book.authorClass.id) }}">
<img src="{{ url_for('static',filename=book.authorClass.logo) }}" width="96px">
</a>
<div class="poi_info">
<span class="poi_name"><a
href="{{ url_for('commentaries',user_id= book.authorClass.id) }}">{{ book.authorClass.title }}</a></span>
<!-- 关注用户按钮 -->
<a class="layui-btn layui-btn-radius layui-btn-xs"><span>关注</span></a>
<!-- 文章数据信息 -->
<div class="poi_meta">
<!-- 如果文章更新时间大于发布时间，那么使用 tooltip 显示更新时间 -->
<span class="poi_publish-time">{{ book.createdate }}</span>
<span class="poi_wordage">字数 {{ book.size }}</span>
<span class="poi_views-count">阅读 {{ book.chilk }}</span>
<span class="poi_comments-count">评论 {{ answer }}</span>
<span class="poi_likes-count">喜欢 {{ book.disc }}</span>
<a href="javascript:void (0)" id="on{{ book.id }}"
onclick="discBook('{{ book.id }}')"> <i
class="layui-icon"
style="font-size: 20px;color: #1E9FFF;"></i></a><span
id="di{{ book.id }}"> {{ book.disc }}</span>
</div>
</div>
</div>
<!-- 文章内容 -->
<div class="poi_show-content">
{{ book.content }}
</div>
<!-- 版权信息 -->
<div class="poi_show-foot">
<a class="poi_notebook"
href="{{ url_for('classfly',classification_id=book.classificationClass.id) }}">
<i class="iconfont ic-search-notebook"></i>
<span>{{ book.classificationClass.name }}</span>
</a>
<div class="poi_copyright">
© 著作权归作者所有
</div>
<a href="javascript:void (0)" id="on{{ book.id }}" onclick="discBook('{{ book.id }}')"> <i
class="layui-icon" style="font-size: 20px;color: #1E9FFF;"></i></a><span
id="di{{ book.id }}"> {{ book.disc }}</span>
<div class="poi_modal-wrap" data-report-note="">
<a id="report-modal">举报文章</a>
</div>
</div>
</div>
<!-- 文章底部作者信息 -->
<div class="poi_follow-detail">
<div class="poi_info" style="width: 100%;">
<a class="poi_avatar" href="{{ url_for('commentaries',user_id= book.authorClass.id) }}">
<img src="{{ url_for('static',filename=book.authorClass.logo) }}" width="64"
alt="96">
</a>
<a class="layui-btn layui-btn-radius layui-btn-xs right"><span>关注</span></a>
<a class="poi_title"
href="{{ url_for('commentaries',user_id= book.authorClass.id) }}">{{ book.authorClass.title }}</a>
<p style="">写了 138734 字，被 8742 人关注，获得了 15903 个喜欢</p>
</div>
<div class="poi_signature">
做一个有意思的菇凉，即使老了也是个有意思的老太太。
微信公众号：MYmaizi-shuo 微信号：291536040
公众号后台回复“必读书籍”免费领取9本电子书。
所有文章均为原创，我已委托杭州快板公司对我的文章进行维权，转载开白事宜请加微信，谢谢！
</div>
</div>
</div>
</div>
<!-- 评论 -->
<div class="poi_comment-list">
<!-- 评论区或登录区 -->
{% if not title %}
<div style="margin-left: 20px;margin-bottom: 50px;">
<form class="new-comment"><a class="avatar" style="position: absolute;left: -48px;">
<img src="{{ url_for('static',filename='img/default_logo.jpg') }}" width="64px"></a>
<div class="poi_sign-container">
<a href="{{ url_for('login',poi=book.id) }}" class="layui-btn">登录</a>
<span>后发表评论</span>
</div>
</form>
</div>
{% else %}
<div style="margin-left: 20px;margin-bottom: 50px;">
<form class="new-comment" style="padding-bottom: 30px;">
<a class="avatar" style="position: absolute;left: -48px;"><img
src="{{ url_for('static',filename=user.logo) }}" width="64px"></a>
<div class="sign-container">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label" for="content">评论内容</label>
<div class="layui-input-block">
<div id="content" style="width: 100%;height: 300px;"></div>
</div>
</div>
<!--注册按钮-->
<div class="btn_submit_regis">
<button type="button" id="btn_submit_regis" class="layui-btn layui-btn-normal">发布
</button>
</div>
</div>
</form>
</div>
{% endif %}
<!-- 查看评论区 -->
<div class="normal-comment-list">
<div>
<div style="margin: 20px;">
<div class="poi_top-title">
<span>{{ answer }}条评论</span>
<a class="poi_author-only">只看作者</a>
<div class="pull-right"><a class="active">按喜欢排序</a><a class="">按时间正序</a><a
class="">按时间倒序</a>
</div>
</div>
</div>
<div id="answer"></div>
</div>
</div>
</div>
</div>
<!--右填充-->
<div class="index index-right"></div>
</div>
{% endblock %}
{% block script %}
<script type="text/javascript" charset="utf-8"
src="{{ url_for('static',filename='ueditor/ueditor.config.js') }}"></script>
<script type="text/javascript" charset="utf-8"
src="{{ url_for('static',filename='ueditor/ueditor.all.min.js') }}"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
src="{{ url_for('static',filename='ueditor/lang/zh-cn/zh-cn.js') }}"></script>
<script>
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('content', {
toolbars: [
['fullscreen', 'undo', 'redo', 'emotion', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain',
'|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc','fontfamily', 'fontsize',
]
],
autoHeightEnabled: true,
autoFloatEnabled: true
});
layui.use('carousel', function () {
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
, width: '100%' //设置容器宽度
, arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
, indicator: 'outside' //窗口内部
{# ,full : true // 满屏#}
});
});
function discBook(id) {
$.get(
"{{ url_for('disc') }}",
{
book_id: id
},
function (data) {
$('#di' + id).html(' ' + data)
$('#on' + id).attr('onclick', '')
}
)
}
$(function () {
$.get(
'{{ url_for('answer') }}',
{
book_id: '{{ book.id }}'
},
function (data) {
$('#answer').html(data)
$('.poi_comment-wrap p').each(function (i, e) {
$(this).html(HTMLDecode($(this).html()))
})
}
)
})
$('#btn_submit_regis').click(function () {
$.post(
'{{ url_for('answer') }}',
{
content: ue.getContent(),
book_id: '{{ book.id }}',
question_id: '{{ book.authorClass.id }}',
answer_id: '{{ user.id }}'
},
function (data) {
ue.execCommand('cleardoc');
$('#answer').html(data)
$('.poi_comment-wrap p').each(function (i, e) {
$(this).html(HTMLDecode($(this).html()))
})
}
)
})
function HTMLDecode(text) {
var temp = document.createElement("div");
temp.innerHTML = text;
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
$('.poi_show-content').html(HTMLDecode($('.poi_show-content').html()))
</script>
{% endblock %}
五、发布页
{% extends 'index.html' %}
{% block title %}
发布问答
{% endblock %}
{% block link %}
<link rel="stylesheet" href="{{ url_for('static',filename='css/posted.css') }}">
<script type="text/javascript" charset="utf-8"
src="{{ url_for('static',filename='ueditor/ueditor.config.js') }}"></script>
<script type="text/javascript" charset="utf-8"
src="{{ url_for('static',filename='ueditor/ueditor.all.min.js') }}"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
src="{{ url_for('static',filename='ueditor/lang/zh-cn/zh-cn.js') }}"></script>
{% endblock %}
{% block box %}
<div style="padding-top: 58px;">
<div class="layui-row layui-col-space5">
<div class="layui-col-md12" style="height: 100px;"> </div>
<div class="layui-col-md12">
<div class="layui-row">
<div class="layui-col-md2"> </div>
<div class="layui-col-md8">
<div class="posted_box">
<form class="layui-form" role="form" id="form_regis" method="post" action=" #"
name="form_regis"
onSubmit="return check_posted()">
<div class="layui-form-item">
<label class="layui-form-label" for="title">标题</label>
<div class="layui-input-block">
<input type="text" name="user_id" value="{{ user_id }}" hidden>
<input type="text" name="title" id="title" autocomplete="off"
placeholder="请输入要发布的标题"
class="layui-input" required>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label" for="content">内容</label>
<div class="layui-input-block">
<textarea name="content" id="content" type="text/plain"
style="width:100%;height:500px;"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">文章分类</label>
<div class="layui-input-block">
<select name="classification" lay-filter="aihao" id="classification">
<option value="">--请选择文章分类--</option>
{% for cl in classfly %}
<option value="{{ cl.id }}">{{ cl.name }}</option>
{% endfor %}
</select>
</div>
</div>
<!--注册按钮-->
<div class="btn_submit_regis">
<button type="button" onclick="submitQuestion()" class="layui-btn layui-btn-normal">
发布
</button>
</div>
</form>
</div>
</div>
<div class="layui-col-md2"> </div>
</div>
</div>
<div class="layui-col-md12" style="height: 200px;"> </div>
</div>
</div>
{% endblock %}
{% block script %}
<script>
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('content');
function submitQuestion() {
var classification = document.getElementById('classification')
if (classification.value == '') {
alert('请选择文章分类！')
return false;
}
$.post(
'{{ url_for("question") }}',
{
'title': document.getElementById('title').value,
'content': ue.getContent(),
'abstracts': ue.getPlainTxt(),
'classification': document.getElementById('classification').value,
'user_id': '{{ user_id }}',
'size': ue.getContentLength()
}, function (data) {
if (data == 'true')
$(location).prop('href', '{{ url_for('index') }}')
}
);
}
layui.use(['form'], function () {
var form = layui.form
, layer = layui.layer
, layedit = layui.layedit
, laydate = layui.laydate;
})
</script>
{% endblock %}
六、修改密码页
七、主页
八、分类列表页
{% extends 'index.html' %}
{% block title %}
首页
{% endblock %}
{% block link %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/classflyList.css') }}">
{% endblock %}
{% block box %}
<div class="context">
<div class="index index-left"></div>
<div class="index index-center" style="background-color: white;padding: 20px;">
<div class="picture">
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="{{ url_for('static', filename='img/index_p1.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p4.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p5.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p6.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p7.png') }}" width="100%"/></div>
</div>
</div>
</div>
<br><br>
<div class="index-question" \>
<div class="row" id="list-container">
{% for cl in classfly %}
<div class="col-xs-8">
<div class="collection-wrap">
<a href="{{ url_for('classfly',classification_id=cl.id) }}">
<img class="avatar-collection" src="{{ url_for('static',filename=cl.logo) }}"
alt="180">
<h4 class="avatar-name">{{ cl.name }}</h4>
<p class="collection-description">{{ cl.context }}</p>
</a>
<a class="layui-btn layui-btn-radius"
href="{{ url_for('classfly',classification_id=cl.id) }}">
<i class="layui-icon"></i><span>参观</span>
</a>
<hr>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %}
{% block script %}
<script>
layui.use('carousel', function () {
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
, width: '100%' //设置容器宽度
, arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
, indicator: 'outside' //窗口内部
{# ,full : true // 满屏#}
});
});
</script>
{% endblock %}
九、回答页
<!-- 评论列表 -->
{% for comment in commentaries %}
<div class="poi_comment">
<div class="poi_comment_item">
<div class="poi_author">
<div style="z-index: 0;display: inline-block;">
<div class="v-tooltip-content">
<a href="{{ url_for('commentaries',user_id= comment.answer.id) }}" target="_blank" class="poi_avatar">
<img src="{{ url_for('static',filename=comment.answer.logo) }}" width="64px">
</a>
</div>
</div>
<div class="poi_info">
<a href="{{ url_for('commentaries',user_id= comment.answer.id) }}" target="_blank" class="poi_name">{{ comment.answer.title }}</a>
<div class="poi_meta"><span>3楼 · {{ comment.date }}</span></div>
</div>
</div>
<div class="poi_comment-wrap"><p>{{ comment.content }}</p>
<div class="poi_tool-group">
<a class="#"><span>13人赞 </span></a>
<a class="#"><span>回复</span></a>
</div>
</div>
</div>
</div>
{% endfor %}
十、个人中心
{% extends 'index.html' %}
{% block title %}
个人中心
{# {{ book.title }}#}
{% endblock %}
{% block link %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/poi.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}">
{# <!--link rel="stylesheet" href="{{url_for('static',filename='bootstrap/css/bootstrap.min.css')}}"-->#}
{% endblock %}
{% block box %}
<div class="context">
<!--左填充-->
<div class="index index-left"></div>
<!--中间主要内容 -->
<div class="index index-center">
<!--轮播图 start-->
<div class="picture">
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="{{ url_for('static', filename='img/index_p1.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p4.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p5.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p6.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p7.png') }}" width="100%"/></div>
</div>
</div>
</div>
<!--轮播图 end-->
<div class="layui-tab layui-tab-card" style="margin-top: 40px;">
<ul class="layui-tab-title">
<li class="layui-this">评论</li>
<li>文章</li>
<li>个人信息</li>
</ul>
<div class="layui-tab-content">
<!-- 评论的列表 -->
<div class="layui-tab-item layui-show">
<!-- 查看评论区 -->
<div class="normal-comment-list" style="background-color: white;padding: 10px;">
<div>
<div style="margin: 20px;">
<div class="poi_top-title">
<span>{{ num }}条评论</span>
<a class="poi_author-only">只看作者</a>
<div class="pull-right"><a class="active">按喜欢排序</a><a class="">按时间正序</a><a
class="">按时间倒序</a>
</div>
</div>
</div>
<div id="answer">
<!-- 评论列表 -->
{% for comment in userCommentaries %}
<div class="poi_comment">
<div class="poi_comment_item">
<div class="poi_author">
<div style="z-index: 0;display: inline-block;">
<div class="v-tooltip-content">
<a href="{{ url_for('commentaries',user_id= comment.answer.id) }}"
target="_blank" class="poi_avatar">
<img src="{{ url_for('static',filename=comment.answer.logo) }}">
</a>
</div>
</div>
<div class="poi_info">
<a href="{{ url_for('commentaries',user_id= comment.answer.id) }}"
target="_blank"
class="poi_name">{{ comment.answer.title }}</a>
<div class="poi_meta"><span>1楼 · {{ comment.date }}</span></div>
</div>
</div>
<div class="poi_comment-wrap"><p>{{ comment.content }}</p>
<div class="poi_tool-group">
<a class="#"><span>13人赞 </span></a>
<a class="#"><span>回复</span></a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<!-- 文章的列表 -->
<div class="layui-tab-item">
<div class="book_list">
{% for book in books %}
<li>
<div class="item-one">
<div class="author">
<a class="avatar" target="_blank"
href="{{ url_for('commentaries',user_id= book.authorClass.id) }}">
<img src="{{ url_for('static',filename=book.authorClass.logo) }}"
width="64px;">
</a>
<div class="info">
<a class="nickname" target="_blank"
href="{{ url_for('commentaries',user_id= book.authorClass.id) }}">{{ book.authorClass.title }}</a>
<span class="time">{{ book.createdate }}</span>
</div>
</div>
<div class="title">
<a target="_blank"
href="{{ url_for('poi',book_id=book.id) }}">{{ book.title }}</a>
</div>
<div class="abstract">
<p>
{{ book.abstracts }}
</p>
</div>
<div class="meta">
<a class="collection-tag"
href="{{ url_for('classfly',classification_id=book.classificationClass.id) }}">{{ book.classificationClass.name }}</a>
<a href="{{ url_for('poi',book_id=book.id) }}"><span> 浏览： {{ book.chilk }}</span></a>
<a href="{{ url_for('poi',book_id=book.id) }}"><span> 评论： {{ book.commentaries|length }}</span></a>
<a href="javascript:void (0)" id="on{{ book.id }}"
onclick="discBook('{{ book.id }}')"> <i
class="layui-icon"
style="font-size: 20px;color: #1E9FFF;"></i></a><span
id="di{{ book.id }}"> {{ book.disc }}</span>
</div>
</div>
</li>
{% endfor %}
</div>
</div>
<!-- 个人信息 -->
<div class="layui-tab-item">
<div style="background-color: #FFFFFF;">
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md2"> </div>
<div class="layui-col-md8">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">名称：</label>
<div class="layui-input-block" style="padding-top:10px; ">
<strong>{{ user2.title }}</strong>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">评论数：</label>
<div class="layui-input-block" style="padding-top:10px; ">
<strong>{{ userCommentaries|length }}</strong>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">文章数：</label>
<div class="layui-input-block" style="padding-top:10px; ">
<strong>{{ books|length }}</strong>
</div>
</div>
</form>
</div>
<div class="layui-col-md2"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--右填充-->
<div class="index index-right"></div>
</div>
{% endblock %}
{% block script %}
<script>
$('.poi_comment-wrap p').each(function (i, e) {
$(this).html(HTMLDecode($(this).html()))
})
function discBook(id) {
$.get(
"{{ url_for('disc') }}",
{
book_id: id
},
function (data) {
$('#di' + id).html(' ' + data)
$('#on' + id).attr('onclick', '')
}
)
}
layui.use('carousel', function () {
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
, width: '100%' //设置容器宽度
, arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
, indicator: 'outside' //窗口内部
{# ,full : true // 满屏#}
});
});
</script>
{% endblock %}
十一、设置页
{% extends 'index.html' %}
{% block title %}
设置中心
{% endblock %}
{% block link %}
<style>
.strong {
padding-top: 9px;
}
</style>
{% endblock %}
{% block box %}
<div class="layui-row">
<div class="layui-col-md3"> </div>
<div class="layui-col-md6"
style="padding-top: 30px;padding-right: 60px; background-color: white;min-height: 900px;">
<form class="layui-form" action="{{ url_for('config',user_id=user.id) }}" method="post">
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block strong">
<strong>{{ user.name }}</strong>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">头像</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
{% if user.logo %}
<img style="margin-left: 30px;" src="{{ url_for('static',filename=user.logo) }}" width="64px" alt="" id="logoFile">
{% else %}
<img style="margin-left: 30px;" src="{{ url_for('static',filename='img/default_logo.jpg') }}" width="64px" alt="" id="logoFile">
{% endif %}
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" name="title" value="{{ user.title }}" placeholder="请输入名称"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">真实姓名</label>
<div class="layui-input-block">
<input type="text" name="truename" value="{{ user.truename }}" placeholder="请输入真实姓名"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<select name="sex" lay-filter="aihao">
<option value="" {% if user.sex == '' %}selected{% endif %}>--请选择性别--</option>
<option value="0" {% if user.sex == '0' %}selected{% endif %}>男</option>
<option value="1" {% if user.sex == '1' %}selected{% endif %}>女</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">QQ</label>
<div class="layui-input-block">
<input type="text" name="qq" value="{{ user.qq }}" placeholder="请输入QQ"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="phone" value="{{ user.phone }}" placeholder="请输入电话"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" value="{{ user.email }}" placeholder="请输入邮箱"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地址</label>
<div class="layui-input-block">
<input type="text" name="address" value="{{ user.address }}" placeholder="请输入地址"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn layui-btn-normal">保存</button>
</div>
</div>
</form>
</div>
<div class="layui-col-md3"> </div>
</div>
{% endblock %}
{% block script %}
<script>
layui.use(['form', 'upload'], function () {
var form = layui.form
, layer = layui.layer
, layedit = layui.layedit
, laydate = layui.laydate;
var upload = layui.upload;
var id = '{{ user.id }}';
//头像上传执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
, url: '/uploadLogo/'+ id//上传接口
,size:1024 // 最大可上传1Mb
,field:'logo'
,accept:'images' //可上传类型
, done: function (res) {
//上传完毕回调
$('#logoFile').attr('src',res.url);
}
, error: function () {
//请求异常回调
}
});
});
</script>
{% endblock %}
十二、分类文章列表页
{% extends 'index.html' %}
{% block title %}
{{ classfly.name }}
{% endblock %}
{% block link %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/home.css') }}">
{% endblock %}
{% block box %}
<div class="context">
<div class="index index-left"></div>
<div class="index index-center">
<div class="picture">
<div class="layui-carousel" id="test1">
<div carousel-item>
<div><img src="{{ url_for('static', filename='img/index_p1.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p4.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p5.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p6.png') }}" width="100%"/></div>
<div><img src="{{ url_for('static', filename='img/index_p7.png') }}" width="100%"/></div>
</div>
</div>
</div>
<br><br>
<div class="index-question">
<div class="recommend-collection">
{% for cl in classflyList %}
<a class="collection" href="{{ url_for('classfly',classification_id=cl.id) }}">
<img src="{{ url_for('static',filename=cl.logo) }}" alt="64">
<div class="name">{{ cl.name }}</div>
</a>
{% endfor %}
<a class="more-hot-collection" href="{{ url_for('classflyList') }}">更多热门专题 <i
class="iconfont ic-link"></i>
</a>
</div>
<div class="question-left">
<ul>
{% for book in books %}
<li>
<div class="item-one">
<div class="author">
<a class="avatar"
href="{{ url_for('commentaries',user_id= book.authorClass.id) }}">
<img src="{{ url_for('static',filename=book.authorClass.logo) }}"
width="64px;">
</a>
<div class="info">
<a class="nickname"
href="{{ url_for('commentaries',user_id= book.authorClass.id) }}">{{ book.authorClass.title }}</a>
<span class="time">{{ book.createdate }}</span>
</div>
</div>
<div class="title">
<a href="{{ url_for('poi',book_id=book.id) }}">{{ book.title }}</a>
</div>
<div class="abstract">
<p>
{{ book.abstracts }}
</p>
</div>
<div class="meta">
<a class="collection-tag"
href="{{ url_for('classfly',classification_id=book.classificationClass.id) }}">{{ book.classificationClass.name }}</a>
<a href="{{ url_for('poi',book_id=book.id) }}"><span> 浏览： {{ book.chilk }}</span></a>
<a href="{{ url_for('poi',book_id=book.id) }}"><span> 评论： {{ book.commentaries|length }}</span></a>
<a href="javascript:void (0)" id="on{{ book.id }}"
onclick="discBook('{{ book.id }}')"> <i
class="layui-icon" style="font-size: 20px;color: #1E9FFF;"></i></a><span
id="di{{ book.id }}"> {{ book.disc }}</span>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="question-right">
<div class="picture">
<img src="{{ url_for('static', filename='img/index_p2.png') }}" width="100%"/>
</div>
<div class="picture">
<img src="{{ url_for('static', filename='img/index_p3.png') }}" width="100%"/>
</div>
</div>
</div>
</div>
<div class="index index-right"></div>
</div>
{% endblock %}
{% block script %}
<script>
$(function () {
$('.abstract').html($(this).html().substr(0, 150))
})
function discBook(id) {
$.get(
"{{ url_for('disc') }}",
{
book_id: id
},
function (data) {
$('#di' + id).html(' ' + data)
$('#on' + id).attr('onclick', '')
}
)
}
layui.use('carousel', function () {
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
, width: '100%' //设置容器宽度
, arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
, indicator: 'outside' //窗口内部
{# ,full : true // 满屏#}
});
});
</script>
{% endblock %}
JS代码，新建一个public.js文件
function validate() {
var oError = document.getElementById('error_box');
oError.innerHTML = "";
if (theForm.user_name.value == "") {
alert("请输入用户名!");
theForm.user_name.focus()
return false;
} else {
if (theForm.user_name.value.length < 6 || theForm.user_name.value.length > 20) {
oError.innerHTML = '用户名请在6到20位之间';
return false;
} else if ((theForm.user_name.value.charCodeAt(0) >= 48) && (theForm.user_name.value.charCodeAt(0) <= 57)) {
oError.innerHTML = '首字母不可为数字';
return false;
} else for (var i = 0; i < theForm.user_name.value.length; i++) {
if (
((theForm.user_name.value.charCodeAt(i) < 48) || (theForm.user_name.value.charCodeAt(i) > 57))
&&
((theForm.user_name.value.charCodeAt(i) < 97) || (theForm.user_name.value.charCodeAt(i) > 122))
) {
oError.innerHTML = '用户名只能包含数字和小写字母';
return false;
}
}
}
if (theForm.user_password.value == "") {
alert("请输入密码！");
theForm.user_password.focus();
return false;
} else {
if (theForm.user_password.value.length < 6 || theForm.user_password.value.length > 20) {
oError.innerHTML = '密码请在6到20位之间';
return false;
}
}
return true;
}
function registration() {
var oError = document.getElementById('error_box');
oError.innerHTML = "<br>";
if (form_regis.user_name.value.length < 6 || form_regis.user_name.value.length > 20) {
oError.innerHTML = '用户名请在6到20位之间';
return false;
} else if ((form_regis.user_name.value.charCodeAt(0) >= 48) && (form_regis.user_name.value.charCodeAt(0) <= 57)) {
oError.innerHTML = '首字母不可为数字';
return false;
} else for (var i = 0; i < form_regis.user_name.value.length; i++) {
if (
((form_regis.user_name.value.charCodeAt(i) < 48) || (form_regis.user_name.value.charCodeAt(i) > 57))
&&
((form_regis.user_name.value.charCodeAt(i) < 97) || (form_regis.user_name.value.charCodeAt(i) > 122))
) {
oError.innerHTML = '用户名只能包含数字和小写字母';
return false;
}
}
if (form_regis.user_password.value.length < 6 || form_regis.user_password.value.length > 20) {
oError.innerHTML = '密码请在6到20位之间';
return false;
} else if (form_regis.user_password.value != form_regis.check_password.value) {
oError.innerHTML = '两次密码不一样';
return false;
}
return true;
}
function light() {
var light = document.getElementById('light');
var switch_ = document.getElementById('body');
var box = document.getElementById('box');
if (light.innerHTML == '关灯') {
light.className = "layui-btn layui-btn-radius layui-btn-primary";
light.innerHTML = '开灯'
switch_.className = "off"
box.className = "regis_box regis_box_off"
} else {
light.className = "layui-btn layui-btn-radius layui-btn-warm";
light.innerHTML = '关灯'
switch_.className = "on"
box.className = "regis_box regis_box_on"
}
}
function resetPassword() {
var password = document.getElementById('password').value;
var password1 = document.getElementById('password1').value;
if(password!= password1){
alert('两次密码不一样');
return false;
}
}
css代码
1.新建一个classflyList.css文件
.row {
margin-left: -15px;
margin-right: -15px;
}
.col-xs-8 {
width: 30%;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
.collection-wrap {
height: 280px;
margin-top: 80px;
padding: 0 20px;
border: 1px solid #e6e6e6;
border-radius: 4px;
background-color: hsla(0, 0%, 71%, .1);
transition: .2s ease;
-webkit-transition: .2s ease;
}
.avatar-collection {
width: 80px;
height: 80px;
margin: -40px 0 10px;
display: inline-block;
border: 1px solid #ddd;
background-color: #fff;
border-radius: 8px;
}
.avatar-name {
display: block;
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-size: 23px;
font-weight: bold;
}
.collection-description {
min-height: 55px;
font-size: 13px;
line-height: 25px;
margin: 0 0 10px;
}
2.新建一个home.css文件
.row {
margin-left: -15px;
margin-right: -15px;
}
.col-xs-8 {
width: 30%;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
.collection-wrap {
height: 280px;
margin-top: 80px;
padding: 0 20px;
border: 1px solid #e6e6e6;
border-radius: 4px;
background-color: hsla(0, 0%, 71%, .1);
transition: .2s ease;
-webkit-transition: .2s ease;
}
.avatar-collection {
width: 80px;
height: 80px;
margin: -40px 0 10px;
display: inline-block;
border: 1px solid #ddd;
background-color: #fff;
border-radius: 8px;
}
.avatar-name {
display: block;
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-size: 23px;
font-weight: bold;
}
.collection-description {
min-height: 55px;
font-size: 13px;
line-height: 25px;
margin: 0 0 10px;
}
3.新建一个one.css文件
html{
height:100%;
overflow:hidden;
}
.login-body{
width:100%;
height:100%;
background:#56ABF8 url(../img/header_bg.png) no-repeat scroll center center / cover;
position:relative;
}
form {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
color: #192E32;
font: 12px Microsoft Yahei, "sans-serif", "Arial", "Verdana";
}
p, td, div {
font: 12px Microsoft Yahei, "sans-serif", "Arial", "Verdana";
}
th {
font: 12px Microsoft Yahei, "sans-serif", "Arial", "Verdana";
font-weight: bold;
}
input, textarea, select, button {
font: 12px Microsoft Yahei, "courier new";
}
input,textarea{
outline:;
}
a:visited {
color: #335B64;
text-decoration: none;
}
a:link {
color: #335B64;
text-decoration: none;
}
a:hover {
color: #EB8A3D;
text-decoration: underline;
}
a:active {
color: #EB8A3D;
text-decoration: underline;
}
.login-hd{
background:transparent none repeat scroll 0% 0%;
height: 44px;
padding: 20px 0 40px 50px;
}
.logo{
width:200px;
}
.login-center {
width: 380px;
margin: 0 auto;
}
.center-wrap{
position: absolute;
top: 50%;
right:;
left:;
width: 475px;
margin: auto auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.center-wrap .bd-logo img {
width: 248px;
height: 65px;
margin-left: 66px;
}
.center-wrap .z-bd {
position: relative;
overflow: hidden;
padding-bottom: 42px;
height: 350px;
background: url(../img/icloud-bar.png) no-repeat 0 bottom;
margin-top: 50px;
}
.z-bd .login-panel {
position: absolute;
left: 16px;
z-index:;
width: 302px;
height: 321px;
background: #fff;
background: rgba(255,255,255,.85);
border: none;
border-radius:;
color: #A1A1A1;
padding: 5px 70px 25px;
overflow: hidden;
box-shadow: 5px 2px 20px rgba(0,0,0,.3);
height:322px;
}
.z-bd .login-panel.cloud{
left: auto;
right: 50px;
box-shadow: -5px 2px 20px rgba(0,0,0,.3);
}
.z-bd .login-cloud.ecshop{
right: auto;
left: 50px;
background: -moz-linear-gradient(359deg, rgba(66,165,224,1) 0%, rgba(86,180,235,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(66,165,224,1)), color-stop(100%, rgba(86,180,235,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(359deg, rgba(66,165,224,1) 0%, rgba(86,180,235,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(359deg, rgba(66,165,224,1) 0%, rgba(86,180,235,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(359deg, rgba(66,165,224,1) 0%, rgba(86,180,235,1) 100%); /* ie10+ */
background: linear-gradient(91deg, rgba(66,165,224,1) 0%, rgba(86,180,235,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42A5E0', endColorstr='#56B4EB',GradientType=1 ); /* ie6-9 */
}
.z-bd .login-cloud.ecshop .btn-tab{
background: url(../images/ecshop-n.png) no-repeat center center;
}
.z-bd .login-cloud.ecshop .btn-tab:hover{
background: url(../images/ecshop-h.png) no-repeat center center;
}
.login-panel .panel-hd{
padding-bottom: 10px;
line-height:;
font-size: 18px;
margin: 18px 0;
text-align: center;
font-weight: normal;
}
.login-panel .controls {
position: relative;
height: 51px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.login-panel .controls.first{
border-radius: 5px 5px 0 0 ;
overflow: hidden;
border-top: 1px solid #ddd;
}
.login-panel .controls.first input{ margin:; padding:1px 0;}
.login-panel .controls.two{
border-radius:0 0 5px 5px;
overflow:hidden;
}
.login-panel .controls.two.active{
border-radius:;
}
.login-panel .controls.third{
border-radius: 0 0 5px 5px ;
overflow: hidden;
display:none;
}
.login-panel .controls.third.active{
display:block;
}
.login-panel .controls.last{
border: none;
}
.login-panel input[type=text], .login-panel input[type=password] {
-webkit-appearance: none;
border: none;
background-color: #fff;
color: #8a8a8a;
width: 100%;
height: 48px;
line-height: 48px;
text-indent: 50px;
box-shadow: inset 30px 30px 0 30px #fff;
}
.login-panel .panel-bd {
height: 255px;
overflow: hidden;
}
.controls .iconphone {
display: block;
width: 20px;
height: 20px;
position: absolute;
left: 15px;
top: 15px;
z-index:;
}
.btn-a {
display: block;
color: #FFF;
width: 180px;
font-size: 16px;
line-height: 51px;
text-align: center;
background-color: #fc7878;
border:;
border-radius: 4px;
letter-spacing: 4px;
margin-top: 0px;
}
.login-panel .btn-a {
cursor: pointer;
width: 100%;
margin-top: 20px;
}
.login-panel .bside {
margin-top: 12px;
overflow: hidden;
height: auto;
}
.login-panel .bside input[type="checkbox"] {
float: left;
width: 15px;
height: 15px;
margin: 2px 8px 0 0;
}
.login-panel .bside label {
color: #666;
float: left;
}
.login-panel .bside a {
float: right;
display: inline-block;
text-align: right;
}
.login-panel .bside .link-forget{
float:left;
margin-left: 25px;
}
.login-cloud{
position: absolute;
right: 50px;
z-index:;
padding: 35px 25px 20px;
margin: 0 auto;
width: 200px;
height: 297px;
color: #fff;
text-align: center;
background: -moz-linear-gradient(359deg, rgba(238,128,53,1) 0%, rgba(251,164,105,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(238,128,53,1)), color-stop(100%, rgba(251,164,105,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(359deg, rgba(238,128,53,1) 0%, rgba(251,164,105,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(359deg, rgba(238,128,53,1) 0%, rgba(251,164,105,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(359deg, rgba(238,128,53,1) 0%, rgba(251,164,105,1) 100%); /* ie10+ */
background: linear-gradient(91deg, rgba(238,128,53,1) 0%, rgba(251,164,105,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee8035', endColorstr='#fba469',GradientType=1 ); /* ie6-9 */
}
.login-cloud .hd{
line-height: 50px;
font-size: 18px;
}
.login-cloud p{font-size: 16px;}
.login-cloud .hd span{
color: #c2bfbd;
}
.login-cloud .btn-tab{
display: block;
width: 110px;
height: 110px;
background: url(../images/cloud-n.png) no-repeat center center;
margin: 50px auto 20px;
}
.login-cloud .btn-tab:hover{
background: url(../images/cloud-h.png) no-repeat center center;
}
.login-cloud img{
width: 100%;
cursor: pointer;
}
.cloud-passw{
margin-top: 20px;
}
.personal-set{
position: relative;
}
.personal-set .panel-hint{
display: none;
position: absolute;
margin:;
left: -7px;
top: 10px;
height: auto;
width: 82px;
padding-top: 10px;
background-color: transparent;
border-radius: 5px;
box-shadow: none;
}
.personal-set .panel-hint ul{
position: relative;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 1px rgba(0,0,0,.3);
}
.personal-set .panel-hint ul:before{
content: '';
position: absolute;
top: -9px;
right: 35px;
border: 5px solid transparent;
border-bottom: 5px solid #fff;
}
#submenu-div .personal-set li{
float: initial;
padding:;
margin:;
border-left: none;
color: #ddeef2;
}
.personal-set li a{
display: block;
padding-left: 5px;
line-height: 20px;
color: #696969 !important;
background-color: transparent;
}
.personal-set li a:hover{
color: #000;
background-color: #ddeef2;
box-shadow: 0 1px 1px 1px #ddd;
}
.personal-set .btn-first a{
border-radius: 5px 5px 0 0;
}
.personal-set .btn-first a:hover{
box-shadow: 0 1px 1px 1px #ddd;
}
.personal-set .btn-exit a{
border-radius: 0 0 5px 5px;
border-top: 1px solid #ddd;
}
4.新建一个poi.css文件
.poi_note {
background-color: white;
}
.poi_title {
font-size: 40px;
font-weight: bold;
text-align: center;
padding: 40px;
}
.poi_author {
margin: 30px 0 40px;
padding-left: 50px;
}
.poi_avatar img {
width: 96px;
border: 1px solid #ddd;
border-radius: 50%;
}
.poi_info {
vertical-align: middle;
display: inline-block;
margin-left: 8px;
}
.poi_name {
margin-right: 3px;
font-size: 25px;
vertical-align: middle;
font-weight: bold;
padding-right: 20px;
}
.poi_meta {
padding-top: 12px;
font-size: 20px;
color: #969696;
}
.poi_meta span {
margin-right: 5px;
}
.poi_show-content {
color: #2f2f2f;
font-size: 16px;
font-weight:;
line-height: 1.7;
padding-left: 50px;
padding-right: 50px;
}
.poi_show-content p {
text-indent: 20px;
margin: 0 0 25px;
}
.poi_show-foot {
margin: 40px 0 30px;
padding-left: 50px;
padding-right: 50px;
}
.poi_copyright {
float: right;
margin-top: 5px;
font-size: 12px;
line-height: 1.7;
color: #9b9b9b;
}
.poi_modal-wrap {
float: right;
margin-top: 5px;
margin-right: 20px;
font-size: 12px;
line-height: 1.7;
}
.poi_follow-detail {
padding: 20px;
background-color: hsla(0, 0%, 71%, .1);
border: 1px solid #e1e1e1;
border-radius: 4px;
font-size: 12px;
margin: 20px;
}
.poi_signature {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e1e1e1;
color: #969696;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.poi_info.poi_avatar {
float: left;
margin-right: 10px;
width: 48px;
height: 48px;
}
.poi_info p {
margin-bottom:;
color: #969696;
padding-left: 130px;
margin-top: -20px;
}
.right {
margin-top: 30px;
float: right;
}
.poi_post {
padding-bottom: 20px;
}
.new-comment {
position: relative;
margin-left: 48px;
}
.poi_sign-container {
text-align: center;
width: 90%;
height: 80px;
font-size: 13px;
border: 1px solid #dcdcdc;
border-radius: 4px;
background-color: hsla(0, 0%, 71%, .1);
resize: none;
display: inline-block;
vertical-align: top;
outline-style: none;
margin-left: 30px;
padding-top: 30px;
}
.poi_comment-list {
background-color: white;
}
.sign-container {
margin-right: 20px;
margin-left: -20px;
}
.poi_top-title {
padding-bottom: 20px;
font-size: 17px;
font-weight:;
border-bottom: 1px solid #f0f0f0;
}
.poi_author-only {
margin-left: 10px;
padding: 4px 8px;
font-size: 12px;
color: #969696;
border: 1px solid #e1e1e1;
border-radius: 12px;
}
.pull-right {
float: right !important;
}
.pull-right a {
margin-left: 10px;
font-size: 12px;
font-weight:;
color: #969696;
display: inline-block;
}
.poi_comment_item {
margin: 10px 10px 10px 10px;
border: 1px solid rgba(0, 0, 0, 0.17);
background-color: rgba(0, 0, 0, 0.02);
border-radius: 5%;
}
.poi_comment-wrap {
margin: 50px 50px 15px 50px;
font-size: 20px;
text-indent: 20px;
}
.poi_comment-wrap p {
line-height: 1.7;
}
.poi_tool-group {
margin-top: 30px;
}
5.新建一个posted.css文件
.posted_box{
border:1px solid #eeeeee;
padding: 50px 50px 50px 0px;
background-color: #d7d7d7;
}
6.新建一个second.css文件
body{
background-color: rgba(6, 6, 6, 0.1);
}
.regis_box {
border: 1px solid #A1A1A1;
padding: 20px 20px 40px 20px;
height: 300px;
width: 500px;
margin-top: 15%;
margin-left: 27%;
}
.regis_box_off{
background-color: #DDDDDD;
}
.regis_box_on{
background-color: #FFFFFF;
}
.font_title {
font-size: 20px;
font-weight: bold;
}
.btn_submit_regis {
text-align: center;
}
.navbar-header {
float: left;
}
nav{
position:fixed;
top:0px;
height: 60px;
background-color:#FCFCFC;
border-bottom:1px solid #DDDDDD;
width:100%;
z-index:;
}
.on{
background-color: #EEEEEE;
}
.off{
background-color: #000000;
}
footer{
position:relative;
bottom:;
width:100%;
float: left;
}
footer .footer_box{
background-color: #002D54;
padding: 10px;
color : #FFFFFF;
text-align: center;
}
.box{
margin-top: 60px;
min-height: 800px;
}
.index_box{
margin-top: 58px ;
}
.dd-item{
color: black;
font-size: 10px;
text-align: center;
}
project.py文件插入以下代码：
登录
@app.route('/login/', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
user_name = request.form.get('user_name')
user_password = request.form.get('user_password')
user = User.query.filter(User.name == user_name,
User.password == md5(user_password.encode("utf-8")).hexdigest()).first()
if user:
session['user_id'] = user.id
session['title'] = user.title
session.permanent = True
poi = request.args.get('poi')
if poi:
return poi
return 'index'
else:
return '用户或密码错误'
else:
return render_template('login.html') # 上下文处理器
@app.context_processor
def myContext():
id = session.get('user_id')
title = session.get('title')
if id:
user = User.query.filter(User.id == id).first()
else:
user = {}
if title:
return {'title': title, 'user_id': id, 'user': user}
else:
return {} # 注册
@app.route('/regist/', methods=['GET', 'POST'])
def regist():
if request.method == 'GET':
user_name = request.args.get('user_name')
if user_name:
user = User.query.filter(User.name == user_name).first()
if user:
return '用户已存在'
else:
return 'ok'
else:
return render_template('regist.html')
else:
user_name = request.form.get('user_name')
user_title = request.form.get('user_title')
user_password = request.form.get('user_password')
user = User.query.filter(User.name == user_name).first()
if user:
return 'error:user exitst'
else:
user = User(id="", name=user_name, title=user_title, password=user_password)
db.session.add(user) # 加入数据库
db.session.commit()
return redirect(url_for('login')) # 定义一个装饰器出验证用户有是否是登陆
# 定义一个参数函数
def loginFirst(func):
# 定义一个函数将其返回
@wraps(func)
def wrapper(*args, **kwargs):
if session.get('title'):
return func(*args, **kwargs)
else:
return redirect(url_for('login')) # 返回一个函数
return wrapper # 发布问答
@app.route('/question', methods=['GET', 'POST'])
@loginFirst
def question():
if request.method == 'GET':
classfly = Classification.query.all()
context = {
'classfly' : classfly
}
return render_template('question.html',**context)
else:
book_title = request.form.get('title')
book_content = request.form.get('content')
abstracts = request.form.get('abstracts')
classification = request.form.get('classification')
user_id = request.form.get('user_id')
size = request.form.get('size')
book = Book(id='', title=book_title, abstracts=abstracts, content=book_content, author_id=user_id,classification=classification,size=size)
db.session.add(book) # 加入数据库
db.session.commit()
return 'true' # 详情页面
@app.route('/poi/<book_id>')
def poi(book_id):
book = Book.query.filter(Book.id == book_id).first()
answer = len(Commentaries.query.filter(Commentaries.book_id==book_id).all())
book.chilk = book.chilk+1
db.session.commit()
id = session.get('user_id')
if id:
user = User.query.filter(User.id == id).first()
else:
user = {}
return render_template('poi.html', book=book, user=user,answer=answer) # 点赞
@app.route('/disc/')
def disc():
book_id = request.args.get('book_id')
book = Book.query.filter(Book.id == book_id).first()
book.disc = book.disc+1
db.session.commit()
return str(book.disc) # 发布评论
@app.route('/answer/', methods=['GET', 'POST'])
def answer():
if request.method == 'POST':
book_id = request.form.get('book_id')
question_id = request.form.get('question_id')
answer_id = request.form.get('answer_id')
content = request.form.get('content')
commentaries = Commentaries(id='', book_id=book_id, question_id=question_id, answer_id=answer_id,
content=content)
db.session.add(commentaries)
db.session.commit()
commentaries = Commentaries.query.filter(Commentaries.book_id == book_id).order_by('-date').all()
context = {
'commentaries': commentaries,
}
return render_template('answer.html', **context)
else:
book_id = request.args.get('book_id')
commentaries = Commentaries.query.filter(Commentaries.book_id == book_id).order_by('-date').all()
context = {
'commentaries': commentaries,
}
return render_template('answer.html', **context) # 某用户发布过的所有评论
@app.route('/commentaries/<user_id>',methods=['GET','POST'])
def commentaries(user_id):
user = User.query.filter(User.id == user_id).first()
content = {
'userCommentaries':user.commentaries,
'books':user.book,
'num': len(user.commentaries),
'user2':user
}
return render_template('commentaries.html', **content) # 设置中心
@app.route('/config/<user_id>',methods=['GET','POST'])
@loginFirst
def config(user_id):
user = User.query.filter(User.id == user_id).first()
if request.method == 'GET':
return render_template('config.html')
else:
user.title = request.form.get('title')
user.truename = request.form.get('truename')
user.sex = request.form.get('sex')
user.qq = request.form.get('qq')
user.phone = request.form.get('phone')
user.email = request.form.get('email')
user.address = request.form.get('address')
db.session.commit()
return render_template('config.html') # 上传头像
@app.route('/uploadLogo/<user_id>',methods=['GET','POST'])
def uploadLogo(user_id):
user = User.query.filter(User.id == user_id).first()
f = request.files['logo']
basepath = os.path.dirname(__file__) # 当前文件所在路径
upload_path = os.path.join(basepath, 'static/uploads', f.filename) # 注意：没有的文件夹一定要先创建，不然会提示没有该路径
f.save(upload_path)
user.logo = 'uploads/'+f.filename
db.session.commit()
return '{"url":"'+url_for('static',filename='uploads/'+f.filename)+'"}'; # 分类列表
@app.route('/classflyList/')
def classflyList():
classfly = Classification.query.all()
context = {
'classfly':classfly
}
return render_template('classflyList.html',**context) # 某个分类下的文章
@app.route('/classfly/<classification_id>')
def classfly(classification_id):
classflyList = Classification.query.all()
classfly = Classification.query.filter(Classification.id == classification_id).first()
context = {
'classfly': classfly,
'books':classfly.book,
'classflyList': classflyList
}
return render_template('classfly.html',**context) # 改密码
@app.route('/resetPassword/<user_id>', methods=['GET', 'POST'])
@loginFirst
def resetPassword(user_id):
user = User.query.filter(User.id == user_id).first()
if request.method == 'GET':
return render_template('resetPassword.html')
else:
password = request.form.get('password')
oldPassword = request.form.get('oldPassword')
if(md5(oldPassword.encode("utf-8")).hexdigest()==user.password):
user.password = md5(password.encode("utf-8")).hexdigest()
db.session.commit()
else:
return '原密码有误';
return render_template('resetPassword.html') # 模糊查找
@app.route('/search', methods=['GET', 'POST'])
def search():
qu = request.args.get('q')
query = Book.query.filter(
or_(
Book.title.contains(qu),
Book.content.contains(qu),
)
).order_by('-createdate').all()
classfly = Classification.query.all()
context = {
'books': query,
'classfly':classfly
}
return render_template('home.html', **context) # 首页
@app.route('/', methods=['GET', 'POST'])
def index():
# context = {
# 'userName' : "AllianceHacker",
# 'toTime' : '11小时前',
# 'title' : 'PHP是世界是最好的语言',
# 'context' : 'PHP是世界是最好的语言,这是一个不需要有疑问的问题，谁不服可以来战啊！！！'
# }
books = Book.query.order_by('-createdate').all()
classfly = Classification.query.all()
context = {
'books': books,
'classfly':classfly
}
return render_template('home.html', **context)
运行项目，打开首页，对成功了吧（我们来测试一下我们的功能）
一、注册
二、登录
三、发布
四、查看