前端网页调用python python前端页面

今天我们说一下如何优化Django中的界面，这里要用到我们之前给大家总结的一些前端知识：HTML＋CSS

QQ ZHOU：HTML入门速成zhuanlan.zhihu.com

QQ ZHOU：CSS入门速成zhuanlan.zhihu.com

https://pan.baidu.com/s/1KpThNYuZW5ahuTjrtlnHRg

提取码：imzh

经过前端的修改和美化，我们能把图从A—＞＞＞Ｂ

图A

看到这里有没有一点点的心动。跟着一起来学习吧～

先明确目标:

图B有三块,分别是导航栏,左边的文章列表和最右边的文章类型.我们可以通过点击文章类型.

1.左边的文章列表我们需要标题,发布时间,作者和文字分类

2.从分类中可以跳转到这个分类下的所有文章.也即分类可以作为筛选器筛选出用户关心的文章

Step1:因此,我们需要在model.py中建文章模型和文章分类模型

from

Step2:接着,我们要保存,然后将数据重新makemigrations和migrate.

在命令行输入

python

如果你有历史应用请记得删除之前的migrate文件和sqllite库表. 如此才能对新的模型生效

Step3:模型建好

就是要处理这些数据,用到views.py

from

Step4:上述把数据准备好了,就可以渲染页面了.将HTML文件放到templates命名的文件夹.系统将会自动识别到templates下HTML文件的位置,与view.py同级,放在myfrtsite应用当中.

articleDetail.py --文章详情页

<

articleList.html --文章列表页

{

with_type --点击某个分类的列表页

{

上述还用套用了CSS模块,Bootstrap,网上有,大家可以查一下Bootstrap的看框架

全局 CSS 样式 · Bootstrap v3 中文文档v3.bootcss.com

上述的CSS样式是争对整个页面框架的,比如导航.我们在这里引入了Bootstrap,引入是采用link方式嵌入到html文件中

<

Step5:建CSS文件,并且指定CSS文件路径.此处是针对某个元素或者列表格式.然后写入到CSS文件中,存放在以下路径.在myfrtsite文件下创建static文件夹,然后将css文件放入文件夹.CSS文件如下

#

最后,需要让服务器知道你的CSS文件路径,在settings.py最后输入:

STATIC_URL = '/static/'
STATICFILES_DIRS=[
       os.path.join(BASE_DIR, 'static'), 
        ]
# BASE_DIR当前应用根目录绝对路径

完成了上述操作,你也可以看到更Nice的网页,坚持就是胜利,期待我们能建自己的网站应用.

看我写的那么认真,还请大家多多点赞支持~

QQ ZHOU：Python+Django入门通关（一）

QQ ZHOU：Python+Django— 入门通关（二）| Models：创建数据库表

QQ ZHOU：Python+Django— 入门通关（二）| Models：创建数据库表（加餐篇）

QQ ZHOU：Python+Django— 入门通关（三）| admin：后台管理界面

QQ ZHOU：Python+Django— 入门通关（五）| 在公网发布自己的网站