从0开始搭建flask web 程序（2）
templates/base.html
{% block head %}
{% endblock %}
{% block title %}PoleStar {% endblock %}
{% block navbar %}
{% endblock %}
{% block content %}
{% for message in get_flashed_messages() %}
{{ message }}
{% endfor %}
{% block page_content %}{% endblock %}
{% endblock %}
{% block scripts %}
{% endblock %}
宏模板templates/_macros.html (分页)
{% macro pagination_widget(pagination, endpoint, fragment='') %}
{% endmacro %}templates/main/index.html
{% extends "base.html" %}
{% import "_macros.html" as macros %}
{% block title %}PoleStar - 首页{% endblock %}
{% block page_content %}
{{ g.user.username }}的博客
个人资料
{{g.user.nickname}}
原创
粉丝
喜欢
评论
{{g.user.original}}
{{g.user['fans']}}
{{g.user['like']}}
{{g.user['comment']}}
等级: {{g.user['level']}}
访问量： {{g.user['visitor_volume']}}
积分: {{g.user['integral']}}
排名: {{g.user['ranking']}}万+
文章分类
{% for bc in g.blogcategory %}
{{ bc.category }}
({{ bc.total}})
{% endfor %}
阅读排行
{% if blogs%}
{% for blog in blogs %}
{% endfor %}
{% if pagination %}
{{ macros.pagination_widget(pagination, '.index') }}
{% endif %}
{% else %}
博主很懒什么也没有~
{% endif %}
{% endblock %}
{% block scripts %}
{{ super() }}
{% endblock%}
main/403.html
{% extends "base.html" %}
{% block title %}PoleStar - Forbidden{% endblock %}
{% block page_content %}
Forbidden
{% endblock %}main/404.html
{% extends "base.html" %}
{% block title %}PoleStar - Page Not Found{% endblock %}
{% block page_content %}
Not Found
{% endblock %}写博客templates/main/Create_blog.html
{% extends "base.html" %}
{% block title %}PoleStar - 写博客{% endblock %}
{% block head %}
{{super()}}
{% endblock %}
{% block page_content %}
{% endblock %}
{% block scripts %}
{{ super() }}
{% endblock %}
查看博客templates/main/Details_blog.html
{% extends "base.html" %}
{% import "main/comment_macros.html" as macros %}
{% block title %}{{blog.title}}{% endblock %}
{% block page_content %}
{{blog.title}}
{{blog.published_time}}
阅读:{{blog.read}}
{% if comments %}
{% for i in comments %}
{{i.timestamp}}
{{i.content}}
{% endfor %}
{% endif %}
{% if pagination %}
{{ macros.pagination_widget(pagination, '.details', blog.id) }}
{% endif %}
{% endblock %}
{% block scripts %}
{{ super() }}
{% endblock%}
编辑博客templates/main/Edit_blog.html
{% extends "base.html" %}
{% block title %}PoleStar - 编辑博客{% endblock %}
{% block page_content %}
{% endblock %}
{% block scripts %}
{{ super() }}
{% endblock %}
static/main/css/style.css
.navbar-default {
background-color: #fdfdfd;
border-color: #ffffff;
}
.navbar-default .navbar-brand {
color: #101111;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #c70f11;
}
.navbar-default .navbar-text {
color: #101111;
}
.navbar-default .navbar-nav > li > a {
color: #101111;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #c70f11;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #fdfdfd;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #101111;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #c70f11;
background-color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
background-color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #c70f11;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #c70f11;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #c70f11;
background-color: #ffffff;
}
.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #101111;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #101111;
}
.navbar-default .navbar-link {
color: #101111;
}
.navbar-default .navbar-link:hover {
color: #c70f11;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #101111;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #c70f11;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #c70f11;
background-color: #ffffff;
}
}
body {
background-image: url("/static/images/tree.jpg");
background-repeat: repeat-y;
background-attachment:fixed;
background-size:100%;
}
.navbar-form navbar-left {
position: fixed;
right: 20%;
}
.hr0{ height:2px;border:none;border-top:1px dashed #1E90FF;}
.edit{
width: 100%;
display: flex;
}
.edit>label{
text-align: right;
width: 5%;
margin-right: 10px;
}
.edit>input,textarea,select{
width: 80%;
margin-bottom: 10px;
}
.edit>textarea{
height: 600px;
}
.center{
display: flex;
justify-content: center;
margin: 10px 0;
}
.edit> input[type=button], input[type=reset], input[type=submit]{
width: 80px;
}
@charset "utf-8";
/* track base Css */
.container {
margin-top:15px;
}
.red {
color:red;
}
#ehong-code-input {
width:42px;
letter-spacing:2px;
margin:0px 8px 0px 0px;
}
.ehong-idcode-val {
position:relative;
padding:1px 4px 1px 4px;
top:0px;
*top:-3px;
letter-spacing:4px;
display:inline;
cursor:pointer;
font-size:16px;
font-family:"Courier New",Courier,monospace;
text-decoration:none;
font-weight:bold;
}
.ehong-idcode-val0 {
border:solid 1px #A4CDED;
background-color:#ECFAFB;
}
.ehong-idcode-val1 {
border:solid 1px #A4CDED;
background-color:#FCEFCF;
}
.ehong-idcode-val2 {
border:solid 1px #6C9;
background-color:#D0F0DF;
}
.ehong-idcode-val3 {
border:solid 1px #6C9;
background-color:#DCDDD8;
}
.ehong-idcode-val4 {
border:solid 1px #6C9;
background-color:#F1DEFF;
}
.ehong-idcode-val5 {
border:solid 1px #6C9;
background-color:#ACE1F1;
}
.ehong-code-val-tip {
font-size:12px;
color:#1098EC;
top:0px;
*top:-3px;
position:relative;
margin:0px 0px 0px 4px;
cursor:pointer;
}js static/main/lib/js/check_input.js
var settings = {
e: 'idcode',
codeType: {
name: 'follow',
len: 4
}, //len是修改验证码长度的
codeTip: '换个验证码?',
inputID: 'idcode-btn' //验证元素的ID
};
var _set = {
storeLable: 'codeval',
store: '#ehong-code-input',
codeval: '#ehong-code'
}
$.idcode = {
getCode: function(option) {
_commSetting(option);
return _storeData(_set.storeLable, null);
},
setCode: function(option) {
_commSetting(option);
_setCodeStyle("#" + settings.e, settings.codeType.name, settings.codeType.len);
},
validateCode: function(option) {
_commSetting(option);
var inputV;
if (settings.inputID) {
inputV = $('#' + settings.inputID).val();
} else {
inputV = $(_set.store).val();
}
if (inputV.toUpperCase() == _storeData(_set.storeLable, null).toUpperCase()) { //修改的不区分大小写
return true;
} else {
_setCodeStyle("#" + settings.e, settings.codeType.name, settings.codeType.len);
return false;
}
}
};
function _commSetting(option) {
$.extend(settings, option);
}
function _storeData(dataLabel, data) {
var store = $(_set.codeval).get(0);
if (data) {
$.data(store, dataLabel, data);
} else {
return $.data(store, dataLabel);
}
}
function _setCodeStyle(eid, codeType, codeLength) {
var codeObj = _createCode(settings.codeType.name, settings.codeType.len);
var randNum = Math.floor(Math.random() * 6);
var htmlCode = ''
if (!settings.inputID) {
htmlCode = '';
}
htmlCode += '' + _setStyle(codeObj) + '' + '' + settings.codeTip + '';
$(eid).html(htmlCode);
_storeData(_set.storeLable, codeObj);
}
function _setStyle(codeObj) {
var fnCodeObj = new Array();
var col = new Array('#BF0C43', '#E69A2A', '#707F02', '#18975F', '#BC3087', '#73C841', '#780320', '#90719B', '#1F72D8', '#D6A03C', '#6B486E', '#243F5F', '#16BDB5');
var charIndex;
for (var i = 0; i < codeObj.length; i++) {
charIndex = Math.floor(Math.random() * col.length);
fnCodeObj.push('' + codeObj.charAt(i) + '');
}
return fnCodeObj.join('');
}
function _createCode(codeType, codeLength) {
var codeObj;
if (codeType == 'follow') {
codeObj = _createCodeFollow(codeLength);
} else if (codeType == 'calc') {
codeObj = _createCodeCalc(codeLength);
} else {
codeObj = "";
}
return codeObj;
}
function _createCodeCalc(codeLength) {
var code1, code2, codeResult;
var selectChar = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9');
var charIndex;
for (var i = 0; i < codeLength; i++) {
charIndex = Math.floor(Math.random() * selectChar.length);
code1 += selectChar[charIndex];
charIndex = Math.floor(Math.random() * selectChar.length);
code2 += selectChar[charIndex];
}
return [parseInt(code1), parseInt(code2), parseInt(code1) + parseInt(code2)];
}
function _createCodeFollow(codeLength) {
var code = "";
var selectChar = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
for (var i = 0; i < codeLength; i++) {
var charIndex = Math.floor(Math.random() * selectChar.length);
if (charIndex % 2 == 0) {
code += selectChar[charIndex].toLowerCase();
} else {
code += selectChar[charIndex];
}
}
return code;
}
var regUsername = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}$/;
var regPasswordSpecial = /[~!@#%&=;':",./<>_\}\]\-\$\(\)\*\+\.\[\?\\\^\{\|]/;
var regPasswordAlpha = /[a-zA-Z]/;
var regPasswordNum = /[0-9]/;
var password;
var check = [false, false, false, false, false, false];
//校验成功函数
function success(Obj, counter) {
Obj.parent().parent().removeClass('has-error').addClass('has-success');
$('.tips').eq(counter).hide();
$('.glyphicon-ok').eq(counter).show();
$('.glyphicon-remove').eq(counter).hide();
check[counter] = true;
}
// 校验失败函数
function fail(Obj, counter, msg) {
Obj.parent().parent().removeClass('has-success').addClass('has-error');
$('.glyphicon-remove').eq(counter).show();
$('.glyphicon-ok').eq(counter).hide();
$('.tips').eq(counter).text(msg).show();
check[counter] = false;
}
// 用户名匹配
$('.container').find('input').eq(0).change(function() {
if ($(this).val().length < 5) {
fail($(this), 0, '用户名太短，不能少于5个字符');
}
});
// 昵称
$('.container').find('input').eq(1).change(function() {
if ($(this).val().length < 20) {
success($(this), 1);
}
else {
fail($(this), 1, '昵称过长,不能超过20个字符!');
}
});
// 邮箱
$('.container').find('input').eq(2).change(function() {
var myReg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
if (myReg.test($(this).val())) {
success($(this), 2);
} else if ($(this).val().length < 5) {
fail($(this), 2, '邮箱格式不对!');
} else {
fail($(this), 2, '邮箱格式不对!')
}
});
// 密码匹配
// 匹配字母、数字、特殊字符至少两种的函数
function atLeastTwo(password) {
var a = regPasswordSpecial.test(password) ? 1 : 0;
var b = regPasswordAlpha.test(password) ? 1 : 0;
var c = regPasswordNum.test(password) ? 1 : 0;
return a + b + c;
}
$('.container').find('input').eq(3).change(function() {
password = $(this).val();
if ($(this).val().length < 8) {
fail($(this), 3, '密码太短，不能少于8个字符');
} else {
if (atLeastTwo($(this).val()) < 2) {
fail($(this), 3, '密码中至少包含字母、数字、特殊字符的两种')
} else {
success($(this), 3);
}
}
});
// 再次输入密码校验
$('.container').find('input').eq(4).change(function() {
if ($(this).val() == password) {
success($(this), 4);
} else {
fail($(this), 4, '两次输入的密码不一致');
}
});
// 验证码
$.idcode.setCode();
$('.container').find('input').eq(5).change(function() {
var IsBy = $.idcode.validateCode();
if (IsBy) {
success($(this), 5);
} else {
fail($(this), 5, '验证码输入错误');
}
});
$('#submit').click(function(e) {
if (!check.every(function(value) {
return value == true
})) {
e.preventDefault();
for (key in check) {
if (!check[key]) {
$('.container').find('input').eq(key).parent().parent().removeClass('has-success').addClass('has-error')
}
}
}
});
$('#reset').click(function() {
$('input').slice(0, 6).parent().parent().removeClass('has-error has-success');
$('.tips').hide();
$('.glyphicon-ok').hide();
$('.glyphicon-remove').hide();
check = [false, false, false, false, false, false, ];
});引入editormd在线markdown编辑js 下载地址：http://pandao.github.io/editor.md/examples/
