python前端界面模板_python2.0_s12_day19_前端模版使用

Django中引用bootstrap

实现在前端可以创建客户信息,可以修改客户信息

我们需要设计一个前端用户交互系统.

我们在设计之前,讨论一些需求:

前端实现:

1. 不同角色的用户,看到的东西是不一样的

销售:

客户纪录

能修改自己的纪录

不能修改别人的纪录

可以看本校区的所有客户纪录(不能修改别人的)

老师:

创建上课纪录,点名,批作业,管理班级

学员:

查看自己的成绩,

交作业

介绍学员

建议投诉

角色结合权限来实现上述需求,这些都实现对于现在的我们要花很长时间的.

那么今天我们不讲这些,我们更多讲的是简单搞一搞页面.

首先我们要做前端,现在主流写前端都是用bootstrap和jQuery

所以我们要在自己的项目中加入这两个.具体如何加入并使用:

1.首先先下载bootstrap和jQuery

bootstrap-3.3.5-dist

jquery-3.1.0.min.js

2.在Django Project中创建静态文件目录,并配置settings.py文件.

bootstrap和jquery都属于静态文件,在Django project中一般创建一个目录statics用于存放静态文件.

然后我们把bootstrap-3.3.5-dist下的文件拷贝到该静态文件目录下.

我们知道bootstrap要基于jquery,所以我们把jquery-3.1.0.min.js文件也放到静态目录下.

准备工作完成!!!

我们要做一个系统,前端首先选好一个前端模版,对于我们来说完全没必要自己写一个.我们可以从bootstrap网站下一个前端模版,直接用.

3.下载一个合适的前端框架模版.

访问:www.bootcss.com

我们选择这么一个简单的后台系统的前端框架模版:http://v3.bootcss.com/examples/dashboard/

打开网址,选择另存为.将整个网页保存下来.

4.打开这个模版文件,查看源代码如下:

5.我们把下载下来的模版文件,放到templates目录下,作为基础模版,其它html模版都开发前都继承这个基础模版.

6. 配置urls.py文件.做一个二级路由的include

7. 在crm 目录下创建urls.py文件并配置(默认没有urls.py文件).

8. 创建dashboard首页.

我们知道一个Django Project项目中可能有多个app,那么每一个app 都有自己的首页和其它页面.页面的名称是有可能重复的.

所以我们应该在templates目录下为每一个app程序创建一个单独的目录,dashboard放在这个单独的目录下,如图:

9. 在dashboard文件中继承base.html基础文件

10. 在crm/views.py文件中定义dashboard视图函数.

1 fromdjango.shortcuts import render2 # Create your views here.3 def dashboard(request):4 return render(request,'crm/dashboard.html')

11. 上面完成,我们访问http://127.0.0.1:8000/crm,看下能否正常访问

我们看到访问正常,说明urls.py配置和views.py都没有问题.问题处在模版文件引入的js文件和css文件的地址不正确

12. 配置settings.py文件,声明静态文件的地址路径

13. 在base.html文件中,将地址更换成

/statics/bootstrap/js/

/statics/bootstrap/css/

14. 访问测试,依然报错

原因是什么?

首先我们看settings.py里是不是可以配置多个静态文件存放的目录,是一个列表.

1 STATIC_URL = '/static/'

2 STATICFILES_DIRS =[3 os.path.join(BASE_DIR, "statics"),4 '/var/www/static/',5 ]

那么问题来了,我们在模版文件里引入css文件时,查找是从这个列表中所有的目录中查找的.你看我们前面在base.html中更改的

/statics/bootstrap/js/

/statics/bootstrap/css/

这路径都是写死的,如果找不到如何从/var/www/static/这个目录查找?

按照上面的写法肯定不行,Django强大的功能又展示了,它在这个列表上定义了一个别名.我们所有的css,js文件的调用,直接引入别名,这样就可以实现从多个目录中查找了.

这个别名的实现就是

STATIC_URL = '/static/'

随你我们的base.html应该改成:

/static/bootstrap/js/

/static/bootstrap/css/

15.最终访问,查看结果

上面的15个小步骤，算是把从bootstrap.com网站shang22

2