django开发web小项目

django开发web小项目

引言

近期使用django开发了个小web项目,使用了bootstrap模板样式,以及echart图形控件,在这里对它们的基本使用做一些小总结.

Why

django是由python开发的开源网站框架,可以快速的搭建高性能的web站点,个人觉得特别合适于公司级的小项目,Cloudera的hue就是基于django开发的.

bootstrap具有强大的模板样式,拿来即用,界面简洁,使用方便.

echart百度开源的良心产品,图形界面全面,且清爽,炫酷,官方帮助文档详细.

版本

以我当前前的开发环境为例:

- django 1.8.3

- bootstrap 3.3.5

- python 2.7.3

注意:django对于版本要求比较高,可能不同版本的django不兼容,尽量保证相同的项目都使用开发时的版本,不然可能出现”意外”的问题;另外bootstrap不同版本样式也不太一样.

How

django

安装

建议使用pip安装或者apt-get安装,源码包install安装后,若要卸载麻烦,直接删除python包的django路径可能不干净,源码包安装也是挺不错的.

sudo apt-get install python-pip
sudo pip install Django==1.8.3

注意:有些系统默认是低版本的python例如1.6.X,当升级到1.7.X后,pip不好用,同样需要升级pip.

常用的命令

新建项目

python /usr/local/bin/django-admin.py/django-admin.py startproject project-name

新建app

python manage.py startapp app-name

同步数据库

python manage.py syncdb

注意:在models.py新增了类时,会自动在数据库中创建相应的表

启动开发服务器

python manage.py runserver
#指定端口
python manage.py runserver 8001

注意:一般发布django工程,需要借助apache或者ngnix,个人觉得内部使用,且访问量并发量小,runserver方式启动和使用完全够用,用起来也挺稳定

5. 创建超级管理员

python manage.py createsuperuser

注意:django自带用户管理和权限管理,创建的用户可以在login模块中直接使用.

6. 登陆配置好的数据库

python manage.py dbshell

常用的几个文件

urls.py

网址的入口,关联到相同目录下views.py的对应方法,不同版本的urls.py貌似有些区别,使用时参见对应的官方文档.

views.py

处理urls.py对应的请求,然后渲染templates的页面.

models.py

于数据库相关,一般此文件中的类会与数据库表一一对应(models.Model).上边提到过同步数据库,同时views.py的方法中一般调用models.py来操作数据库,无非就是增删改查.

settings.py

django的配置文件,一个工程只有一个,配置app,静态文件的位置,session设置,日志设置等等.

目录结构

project-name
project-name
urls.py
views.py
models.py
settings.py
......
app1
templates
htmls
urls.py
views.py
models.py
......
app2
......
templates
htmls
js
static
......

登陆

网上有很多资料,不多赘述,注意几点.

1. 返回login.html的views.py方法

例如

return render_to_response('login.html',context_instance=RequestContext(request))

直接返回return render_to_response(‘login.html’) csrf支持会有问题,必须返回原有的request信息.

2. session控制

SESSION_COOKIE_AGE = 60*5#5分钟超时
SESSION_EXPIRE_AT_BROWSER_CLOSE = True#关闭浏览器超时

登陆方法

form提交的views.py方法不能为login(request),与django模块的方法名冲突,修改成其他名称.

bootstrap

下载bootstrap压缩包,放在静态文件夹内,在html中引用即可.

<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

echart

下载echart js包,放在静态文件夹中,在html中引用即可.

<script src="{% static 'js/echarts/echarts.js' %}"></script>

后台返回值

以线性趋势图为例:

1. legend

图形界面上方选择的项,可要也可不要.

2. x轴series

一般是个list.

3. y轴series

一般是个dict,key为对应的legend值,value是个list,个数与x轴series按顺序一一对应.

example

<script type="text/javascript">
require.config({
paths: {
echarts: '/static/js/echarts'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line' , // 折线图
'echarts/chart/pie'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main_chart1'));
var option = {
title : { text: 'Jobs Monitor', x:'center'},
tooltip: {
show: 'false'
},
color: [ '#ff7f50', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'],
legend: {
x: 80,
y: 30,
data:[{% for leg in legend_list %}{% if leg %}'{{leg}}'{% endif %}{% if not forloop.last %},{% endif %}{% endfor %}]
},
xAxis : [
{
type : 'category',
axisLabel: {interval: 'auto', rotate:35},
data : [{% for day in series %}'{{day}}'{% if not forloop.last %},{% endif %}{% endfor %}]
}
],
yAxis : [{
type : 'value',
axisLabel:{formatter: '{value}'}

}],
series : [
{% for key, value in out_line_dic.items %}
{% if key != None and value != None%}
{
"name": "{{key}}",
"type": "line",
"smooth":true,
"data": [{% for item_data in value %}{% if item_data %}{{item_data}}{% else %}0{% endif %}{% if not forloop.last %},{% endif %}{% endfor %}],
"markLine":{data:[{type:"average",name:"avg"}]},
itemStyle:{
normal:{
label:{
show: true,
},
labelLine :{show:true}
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
}
{% if not forloop.last %},{% endif %}
{% endif %}
{% endfor %}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
})
</script>

参考资料

自强学堂django教程

官方django文档

bootstrap官方文档

bootstrap中文教程

echarts官方文档