Front Python Tech

用django-webpack-loader实现Django和Webpack的绑定

django-webpack-loader是Django去年的热门App之一,实现Django和Webpack的绑定。做法很简洁,就是用一个nodejs模块处理Webpack的输出,Django再去读取这个模块生成的JSON文件,加载对应的bundle文件就行了。最近在cygwin里重新部署了一次,分享其中的关键点。环境是: Django 1.9.5 NodeJS v6.0.0 Win7(64)+Cygwin2.4.1 场景是将现有的一个Django项目,转成用Webpack来处理静态文件。因为没有执行npm init,安装时会提示找不到package.json。使用Webpack的人应该都知道自己在干什么,所以一些常见的基础配置、错误提示等本文不会涉及。 Install & Settings 首先用npm/pip安装相关的包:

然后设置Django(settings.py),把webpack_loader加到INSTALLED_APPS中,指定templates和static目录,新增WEBPACK_LOADER:

这样Django会从/static/js/dist/读取Webpack生成的文件。接下来配置Webpack,在目录中新建webpack.config.js,内容如下:

Usage 在当前目录执行webpack(全局或是项目),会自动读取/static/js/src/index.js,生成/static/js/dist/main.dev.js。当然,现在会报错提示找不到entry,要创建对应的js文件,以下只写了import语句来验证loader已经加载:

执行后在dist中生成js文件。现在要自动把生成的文件(bundle)加载到模板,django-webpack-loader使用template tag的方式来实现。创建一个模板文件,内容为:

这样生成的js文件就会以script标签的形式自动插入当前模板了。Webpack执行的结果(通过webpack-bundle-tracker)会写入webpack-stats.json文件中,Django运行时会读取这个json文件,如果出错会抛出500错误。 Extension render_bundle也接受参数来指定文件扩展,可以处理css文件。例如要在Django中使用AdminLET,执行以下步骤可以通过Webpack来加载:

上列命令安装AdminLET和需要的loader,因为css文件中通常都会指定图片文件(还是字体等),所以还需要url-loader/file-loader。extract-text-webpack-plugin用来把css合并到一个文件中。 修改webpack.config.js:

最后修改/static/js/src/index.js文件和模板文件:

可以看到按钮已经应用了样式。

Continue Reading
Front

React.js最佳实践

虽然标题是最佳实践,其实是这一年来自己挖的各种坑,填了之后发现“其实这样写就不会有坑了”的总结…环境为桌面浏览器,因为目前后端还是Python为主,暂时没机会在NodeJS中使用各种便利的特征/插件。 代码顺序 定义一个React组件通常是包含以下代码:

以空行分割,有4个部分:

Continue Reading
Front

重新学习HTML5的HTML

经过媒体的渲染,目前大众认为的HTML5大致等于:酷炫的效果,复杂的技术,手机能正常浏览的网页。于是经常有人问我:某个功能,某个效果,HTML5能实现吗?这种表现层的问题,如果排除平台因素回答就是:以前实现不了的,HTML5还是实现不了;以前能实现的,HTML5通常能实现得更好。比如通知,以前用轮询,现在可以用websocket;比如想直接读取客户Windows目录下的文件(…),现在(正常情况下)还是实现不了… 广义的HTML5是一系列技术组合,希望能减少浏览器对插件(Flash/Silverlight/JAVA)的依赖。于是大家关注的重点主要是各种新增的API,HTML作为一种标记语法就没太重视。结果当我用canvas做好表格,用localStorage实现缓存,用video+websocket改进了视频播放后,回头来看我写的HTML代码其实还不够规范。 所以这篇文章是关于HTML的,内容顺序按照HTML的顺序:从doctype到metadata,然后是部分常见标签,总之都是非常浅显的内容。嵌入内容的标签(例如img/object/video)不在讨论的范围,跟CSS或JS关联太紧密的标签(例如各种事件绑定和output标签)也不会涉及。全文没有截图,很多HTML代码是直接写在页面上的,Firefox/Chrome测试正常,但我没办法控制您的浏览器以及爬虫,因此如果样式出现误差请更换浏览器或找找原文链接…

Continue Reading
Front Product

Erya – 基于SemanticUI + Django的内容发布系统

Erya是基于SemanticUI开发的内容发布系统,主要用来搭建BBS。遵守GPLV3协议。 系统的后端是简单的发布主题/回复/评论的功能,目前是基于Django(Python)的。使用Python3.2 + Django1.7的架构,Python2.7测试通过。 在界面上模仿NodeBB,前端使用SemanticUI,支持自适应,编辑器使用Quilljs,同样也是支持自适应的: 因为是面向国内中文用户,所以没有Google的JS/字体API等容易被墙掉的性能,用户头像是使用Gravatar的,因为目前Gravatar可以正常访问。 安装 下载zip包解压或是直接clone,用pip3安装Django1.7。建议使用Python3运行。 git clone https://github.com/perchouli/erya.git cd erya pip3 install -r requirements.txt 执行migration相关命令,添加管理账号。如果使用默认的sqlite可以跳过这一步,默认的管理账号/密码是: root/root python3 manage.py migrate python3 manage.py createsuperuser 进入管理后台,添加分类,分类icon请参看: http://semantic-ui.com/elements/icon.html 回到首页,可以开始使用了。 演示地址: http://bbs.dmyz.org Github: https://github.com/perchouli/erya

Continue Reading
Front

Backbone.js简单入门范例

11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要因为它简单、灵活,无论是富JS应用还是企业网站都用得上。相比React针对View和单向数据流的设计,Backbone更能体现MVC的思路,所以针对它写一篇入门范例,说明如下: 1. 结构上分4节,介绍Model/View/Collection,实现从远程获取数据显示到表格且修改删除; 2. 名为“范例”,所以代码为主,每节的第1段代码都是完整代码,复制粘贴就能用,每段代码都是基于前一段代码来写的,因此每段代码的新内容不会超过20行(大括号计算在内); 3. 每行代码没有注释,但重要内容之后有写具体的说明; 4. 开发环境是Chrome,使用github的API,这样用Chrome即使在本地路径(形如file://的路径)也能获取数据。 0. Introduction 几乎所有的框架都是在做两件事:一是帮你把代码写在正确的地方;二是帮你做一些脏活累活。Backbone实现一种清晰的MVC代码结构,解决了数据模型和视图映射的问题。虽然所有JS相关的项目都可以用,但Backbone最适合的还是这样一种场景:需要用JS生成大量的页面内容(HTML为主),用户跟页面元素有很多的交互行为。 Backbone对象有5个重要的函数,Model/Collection/View/Router/History。Router和History是针对Web应用程序的优化,建议先熟悉pushState的相关知识。入门阶段可以只了解Model/Collection/View。将Model视为核心,Collection是Model的集合,View是为了实现Model的改动在前端的反映。

Continue Reading
Front

Semantic-UI和其他几个前端框架

本来是想介绍Semantic-UI的,但如果只介绍这个框架,没什么内容,框架相关feature站点上有不需要说,所以干脆列出自己常用的几个前端框架,算是做个阶段性总结。 本文的核心是侧重于HTML/CSS的框架,JS框架或以JS为核心的框架不讨论(比如YUI);多屏已是既定事实,虽然不是所有开发都要考虑自适应,但有自适应功能至少说明了这框架短期内不会被淘汰,所以不带自适应功能的框架不讨论(比如flaminwork);非开源、不可商用,或是需要付费的框架不讨论(比如easyframework)。 先说Bootstrap,这两年都在用它,如今Bootstrap有点烂大街了,难免有些审美疲劳。但想想在Bootstrap这种框架出现之前,程序员做的界面实在是惨不忍睹,如今至少升级成“还能看”的级别了,所以“泛滥”这个问题是瑕不掩瑜的。平时开发个小工具用它来做界面,写个底层脚本用它来做文档界面,工作环境中也可以用来做原型或是布局,谁都看得懂没什么学习成本。总体来说,这个框架对于互联网的美化实在是功不可没。

Continue Reading
Front Python

用Django和Backbone.js生成表单

Django带了Forms框架,但如果不用Model Form,就要把在Model中定义的字段再写一遍。而且现在项目中都会用到前端工具包/框架,比如Bootstrap,于是as_table/as_ul/as_p就不能直接用了,每个字段都要手动写到HTML里。我之前是用django-crispy-forms这个模块来简化。 Backbone.js是一个基础框架,没有生成表单的功能,但有一个依赖于Backbone.js,很好用的Forms框架—— backbone-forms。 django-crispy-forms和backbone-forms做的事非常相近(至少render出的结果是一样的),没必要同时使用。理想的方案是Django搭配backbone-forms,后者从Django定义的Model/Object中获得Schema,生成表单。目前代码是跑通了,但比较折腾,是用Python的JS解析器,引入需要的JS库,执行从Django Model生成的JS代码,最后返回Form的HTML代码到前端。有些步骤还需要改进。这篇文章先分享:从Django的Model生成JS代码,传到前台,生成表单的方法。 Install 在html模板中引入需要的JS库(引用的都是在线的库,可能会出现无法访问的情况),bootstrap.js会自动给表单添加上Bootstrap的样式,要在backbone-forms.min.js后引入。在DOM之后加入script标签,之后得到一个Customer的object,在script标签内调用render_form方法,生成JS代码。

Continue Reading
Front

初学前端的MVC架构

Web应用的功能越来越强,Javascript代码也越来越多,大量的JS代码要以何种架构来组织就成了一个亟待解决的问题。老牌软件架构模式MVC(Model-View-Controller)就是一种相当不错的方案,虽然它定义不明确需要很多时间来思考如何组织,崇尚代码分离增加了调试难度,但毕竟脸熟(……),从用CakePHP的时候就接触过这个概念,以我能理解的方式描述就是:Models用来处理数据,View将处理结果呈现给用户,Controller用来连接这两者。所以一个Web应用的流程通常是这样的: 1. 用户在View上进行操作——比如在文本框输入数值或是点击按钮 2. Controller处理这个动作 3. Controller通过Model对数据进行增删改查,将其传递到View 4. View将数据展示给用户 以上描述来自Javascript Web Applications一书,其中有用MVC组织JS代码的具体方法。如果想偷懒的话,也有一些现成的JS框架来做这件事。说到JS框架可能最先想到的是jQuery,这类MVC框架和jQuery解决的问题不同,jQuery主要用来对页面元素进行操作上,比如我要移动一个按钮,或是将某个按钮设置为隐藏。而前端MVC框架除了将代码合理的组织以外,操作上也不是侧重于设置一个动作,当触发时进行某些处理这种方式。而是绑定Model,当Model改变时,View接收到通知,重新渲染。不需要手动指定页面元素更新HTML,改变Model时直接改变View。

Continue Reading
Front Python

在Django中使用LESS

上次振宇介绍duoshuo的开发,前台用的是backbone和LESS,backbone很久之前mentor就提到过,当时没弄懂,等下周休息的时候抽空学学,LESS倒是没什么学习成本。 LESS一种动态样式语言,简单来说就是对CSS语言的扩展,可以类比于coffeescript对javascript提炼。我因为javascript写习惯了,转到coffeescript效率不升反降。但用LESS重写了几个CSS文件,绝对是快了很多。因为LESS没有改变CSS的写法(唯一变化的是注释可以用//了),所以没有转换障碍。LESS拥有语言的特征,例如变量、函数、命名空间等,和只是样式表的CSS比起来灵活了许多。 在前台使用LESS的方式和coffeescript很像,也是载入一个js文件用来处理less后缀的文件,将其转换成CSS。

当然如果真这么处理,就和Django没什么关系了,我一般是在模板里直接用{%block style%}写CSS样式,所以如果能自定义一个templatetag,直接在里面写LESS那是最顺手的。

Continue Reading
Front Product

Justproto:Linux下Axure的替代方案

要在Linux下运行Windows程序,最好是用虚拟机。当然这是在通常情况下的最佳方案,如果是连接投影仪,进行双桌面操作的时候,还用虚拟机就会非常不顺手,只能想其他方案。退而求其次,自然就是用wine来运行了,我常在wine上运行Photoshop 9.0,一直非常顺利。wine0.9以后增加了对.Net Framewrok2.0的支持,理论上是满足Axure之前版本运行条件的。但在wine1.2/1.3下模拟winxp/win2000,测试了Axure 4.0/5.5/5.6三个版本,可以安装,不能运行(Axure 6.0基于.Net Framework4.0,直接放弃测试了)。昨天折腾了一晚上,把Axure 5.6所有用到的dll文件都复制到wine中,仍然报错。至此算是暂时放弃用wine来运行Axure了。 Linux下有一些不错的原型工具,比如Pencil。但要找到一个Axure的替代方案比较困难,因为它的功能很强大,长期使用我也习惯了它的界面布局,所以Linux桌面的原型工具都没有能用得很顺手的。而在线原型工具,至今为止我用过的十多个在线原型工具中,最接近的Axure的是Justproto(收费……)。

Continue Reading