用Django做web前端如何

先回答问题，Django不适合做web前端，Django用于做web的后台。web前端普遍使用基于jquery的框架完成。我曾将使用Django写过几个网络管理程序。下文具体说一说。

Django用来做什么

Django是Python编写的开源web应用框架，采用了MVC的模式，方便快速构建web应用程序；

Django主要由三个层次组成，template层用于实现与前台的交互，收集前端发送的数据；control层用于处理用户数据，实现业务逻辑；model层用于实现与数据库的连接，将数据持久化；

Django的使用非常方便的，集成了大部分的常用功能，用户不用专门处理session,用户登陆等应用。

前台怎么写

web应用程序的前台使用基于jquery的框架完成，jquery是使用javascript脚本需要编写的，简化了用户的编程的难度；

在构建web应用时，我用的是easyui框架，集成了大部分的控件，比如文本框，各种按钮，并且有布局功能，可以快速勾画web应用界面。

读书时我曾经使用java编写web应用，工作后接触了python，简单易用，可以快捷构建应用，后来使用django框架，将平时编写的小应用合并成一个可视化的的网络运维平台。

Django最大的不足在于其落后的前端工具链。现在前端开发几乎必备的包管理器（例如npm,yarn）以及工程化必备的webpack工具链，Django却不支持。Django开发的工作流中，后端的包管理可以用pip，而前端的包只能手动管理。所以，我最近的工程项目中，已不再使用Django提供的前端模块，仅仅把它当作API服务器。这的确很遗憾，因为Django的template引擎也有一些易用的特性，如此抛弃，真的有点不舍。那么有没有可能结合二者的优点呢？

经过一番探索，网上给出最靠谱的答案就是利用 django-webpack-loader 和 webpack-bundle-tracker 这两个插件。其原理是 webpack-bundle-tracker 能够输出webpack的编译过程以及结果。 django-webpack-loader 插件则是Django和webpack之间的桥梁，利用上面的编译结果，自动加载webpack打包后的静态文件。

需要用webpack生成的静态文件时，就在template上面使用下面一段模板语言，能够自动完成静态文件的注入。

简单的试了试，应该能够达到我想要的效果，明天有时间再研究。

快捷键？很简单啊如下例，在窗体pkForm中有个按钮名为tuichu，设置快捷键为CprivatevoidpkForm_KeyDown(objectsender,KeyEventArgse){if(eKeyCode==KeysC){tuichu_Click(null,null);}}要提醒的是先把窗体的KeyPreview设为true。当使用Ctrl+快捷键时privatevoidpkForm_KeyDown(objectsender,KeyEventArgse){if(eKeyCode==KeysF&&eControl){dakai_Click(null,null);//执行单击dakai按钮的单击事件}}

category 与vue 接口对接

首先是需要把所有的category的内容取出来

由于前端vue展示category是分级的

一级 二级 三级 这样展示的

所以我们需要把三个内容都拿出来

但是首先需要取出第一级 然后第一级镶嵌了第二级，然后第二级镶嵌第三季 ，就跟上面goods中显示外键的category的内容一样

我们还是需要写serializer

这样就是一级 镶嵌二级 二级镶嵌三级

但是这里有一个问题不要搞错了 这三个类的位置不能弄错了

因为一级是调用二级 所以二级一定是先写好了的

所以二级一定在一级上面 同理 三级要在二级上面

然后就是view

在过滤中加上category_type = 1 这样就可以直接显示第一大类 然后第一大类中有第二小类 这样更有层次感 如果直接一下子全部取出来 就不好分辨了

同时我们还要处理取出某个单一的信息

所以 我们继承了mixinsRetrieveModelMixin 这个类，这是一个显示详情的类

例如显示某个动物园的某个动物那样

/zoos/id

这样的url

同样这样写了 我们就直接只配置category的url就够了

就不用考虑 后面的id是否还需要配置一个url 这些都不用考虑了，因为我们继承了 viewset这个类

这些问题他都帮我们解决了

这样处理我们后端就能看见了

但是这样处理了 前端对接时 会发现 无法显示

因为有一个跨域问题

这个问题前后端 都可以独自解决 这里学习的是后端，所以讲一下后端的做法

就是修改服务端

在github上搜索django-cors-headers就可以找到这个信息

同样里面介绍如何使用

安装

pip install django-cors-headers

然后settins中INSTALLED_APPS配置和settings中MIDDLEWARE配置

这里要注意 MIDDLEWARE配置中

'corsheadersmiddlewareCorsMiddleware',

'djangomiddlewarecommonCommonMiddleware',

这两个必须放在

'djangomiddlewarecsrfCsrfViewMiddleware',

这个的前面 不然会报错

同时还要配置

CORS_ORIGIN_ALLOW_ALL = True

允许跨域访问 它默认是False

这样前端就可以正常显示了

为什么会产生跨域访问

因为vue中api配置的中 我们调试数据 不可能把所有的host 都修改了 有一些是线上数据 我们调试的是本地的一部分数据 所以要重新定一个localhost

修改部分 host的链接

这样就导致了跨域 本身使用的是一个线上host端口，但是数据中有一部分是请求的是本地host端口 导致了跨域访问

以上就是关于用Django做web前端如何全部的内容，包括:用Django做web前端如何、[Django] 如何在Django中使用前端工具链、如何为django中的按钮绑定事件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！