Flask MVVM 开发(vue.js)，Javascript 处理时间
用Vue改版后的 天涯VIP，已经正式上线：http://tianya.heroku.com
--------------------------------------------------------------------------------------------
Flask + Vue
Flask为轻量级Web后台框架，Vue为轻量级网页前台框架，两者配合，快速实现MVVM最合适不过了。
后台 -- Flask 处理M + C，实现数据Model化 + 路由、安全、逻辑控制。对用户响应，返回用Jinjia渲染的HTML模板页面，同时ajax 把数据传给 Vue
前台 -- Vue处理 VM (ViewModel) ，用户浏览器接收到 HTML模板和数据后，Javascript（Vue）处理数据，并按设计显示
解决 Jinja2 {{ }}冲突
2016-10-30：
其实Vue内部占位符{{ }}，都是转换成 v-text 指令的！
{{msg}}所以，最清晰简单的实施方法： Vue内部全部用 v-text，而 Jinja2还是用 {{ }} 占位符，两不相干。
后台 -- Flask用Jinjia渲染HTML页面，并且把数据ajax传给 Vue；
前台 -- 用户浏览器接收到 HTML，Javascript（Vue）处理数据，并按设计显示
============================================
2016-10-20
Link 。但还是会跟 Flask-Bootstrap的 {{ 冲突！
|
1
2
|
app
.jinja_env
.variable_start_string =
'{{ '
app
.jinja_env
.variable_end_string =
' }}'
|
最好的方案就是更改VUE的语法，在所有的项目中都是这样定义的，写在VUE代码的前面即可，这样代码迁移也不会出问题
// ES6 模板字符串
Vue.config.delimiters = ['${', '}']
// 修改文本插值的定界符。
Vue.config.unsafeDelimiters = ['{!!', '!!}']
// 修改原生 HTML 插值的定界符。Javascript 处理时间（类似 moment.js）
timestamp = (parseInt((new Date(timestamp)).getTime())/1000+8*60*60) ; // GMT+8hrtimestamp = parseInt(timestamp);Vue.filter('toSmartDateKevin', function (timestamp) {
if (typeof(timestamp)==='string') {
timestamp = (parseInt((new Date(timestamp)).getTime())/1000+28800) ; // seconds. 如果保存的是UTC DataTime()
}
else if (isNaN(timestamp)) {
return '';
}
else {
timestamp = parseInt(timestamp); // Python time.time() is like: 1477884451.383
}
console.log(timestamp)
var
today = new Date(),
now = today.getTime()/1000, // Javascript getTime() is like: 1477884519957ms, no "."
s = '1分钟前',
t = now - timestamp;
if (t > 604800) {
// 1 week ago:
var that = new Date(timestamp*1000);
var
y = that.getFullYear(),
m = that.getMonth() + 1,
d = that.getDate(),
hh = that.getHours(),
mm = that.getMinutes();
s = y===today.getFullYear() ? '' : y + '年';
s = s + m + '月' + d + '日' + hh + ':' + (mm < 10 ? '0' : '') + mm;
}
else if (t >= 86400) {
// 1-6 days ago:
s = Math.floor(t / 86400) + '天前';
}
else if (t >= 3600) {
// 1-23 hours ago:
s = Math.floor(t / 3600) + '小时前';
}
else if (t >= 60) {
s = Math.floor(t / 60) + '分钟前';
}
return s;
});Vue封装 Bootstrap
https://yuche.github.io/vue-strap/
vue.js+boostrap最佳实践
https://yuche.github.io/vue-strap/
Flask
Vue.js 开发实践：实现精巧的无限加载与分页功能
Vue.js 实践（2）：实现多条件筛选、搜索、排序及分页的表格功能
Vue.js 实践（3）：实现一个漂亮、灵活、可复用的提示组件
Font Awesome
完美的图标字体 只为Bootstrap设计 http://fontawesome.io/examples/TIP:
如果是 spinner，在中间如果加字符（比如 ）的话，旋转起来会偏一边！
class="fa fa-spinner fa-spin fa-3x fa-fw"> 最简单的 Bootstrap + Font Awesome 集成方式
使用这种方式将 Font Awesome 集成到默认的 Bootstrap CSS中。
- 拷贝 font-awesome.min.css 文件到你的项目中。
- 在html文档中的
部分，引入 font-awesome.min.css 文件。
TIP:
Navbar 导航条 发现高度偏高？原因：HTML文件没有保存为： UTF8-no-signature格式！
TIP:
更新网站的 favicon.ico后，有些浏览器不自动更新 icon？
解决方法：
Maxthon3： C:\Users\XXX\AppData\Roaming\Maxthon3\Public\SiteIcon\SiteIcon.dat
Chrome/Firefox: 直接访问 icon地址：https://tianya.herokuapp.com/static/favicon.ico