python 学习 40

最新推荐文章于 2021-03-23 01:25:31 发布

gy_334

最新推荐文章于 2021-03-23 01:25:31 发布

阅读量159

点赞数

分类专栏：日记

本文链接：https://blog.csdn.net/gy_334/article/details/81048408

版权

日记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

本文介绍了如何在Django项目中结合EasyUI框架创建网页。首先，详细解释了如何配置Django项目以使用MySQL数据库，并设置静态文件路径。接着，展示了如何在视图、模板和URLs中集成EasyUI组件，实现页面布局。然后，通过创建模型并填充数据，展示了如何展示树状结构和数据网格。最后，给出了实现这些功能的代码示例。

摘要由CSDN通过智能技术生成

django 08

easyUI

EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。

EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。

链接: https://pan.baidu.com/s/1OJiQN7WQd5jFqhtrv_pIyw 密码: eaux

点击上述链接下载easyUI。

首先我们先创建一个django项目，将数据库更改为mysql，并创建一个数据库p7_shopdb。

然后在根目录下创建一个static文件夹，将easyUI中如下4个文件复制到static文件夹中：

总目录如图：

然后在settings中配置static的静态路径：

STATIC_URL = '/static/'
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,  'static'),
]

并且在总urls中创建相关shopping的的urls路径：

from django.contrib import admin
from django.urls import path
from shopping.views import *

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',index),
]

然后在shopping中的views中创建一个index方法：

def index(request):
    return render(request,'manager.html')

之后再在templates中新建一个manager.html。然后打开jquery-easyui-EDT-1.4.2-build1\jquery-easyui-EDT-1.4.2-build1\jquery-easyui-1.4.2\docs（千万别点我）文档，将如下的js复制到manager中：

然后将布局中的 完整页面代码复制到manager页面中：

现在打开localhost:8000即可看到如下页面：

接着我们删除右侧east和下方的south title，并在头部div中添加collapsible:false 属性，使其不可折叠。

接着我们在models中创建两个模型，一个为类别模型Categroy，一个为产品模型Produce，用于接下来的树状结构，并将这个两个模型关联到数据库中:

# Create your models here.

class Category(models.Model):
    #类别模型
    name=models.CharField(max_length=20,null=False)
    parent=models.ForeignKey('Category',on_delete=None,null=True)

class Produce(models.Model):
    #产品
    name=models.CharField(max_length=20)
    price=models.FloatField()
    create_date=models.DateTimeField()
    category=models.ForeignKey('Category',on_delete=None,null=True)

第一个类别模型设置了主键关联自身这个类，第二个产品模型设置了主键关联类别模型。

我们在数据库中创建好表后，需要填写一些数据进入其中（需在15个以上）。

接着我们想让左栏显示第一张表的数据，并以树状结构显示，我们先在views中写一个方法：

from django.http import HttpResponse
from django.shortcuts import render
import json
from django.views.decorators.csrf import csrf_exempt
from shopping.models import Category, Produce

#获取类别表 组装成一个树状结构
@csrf_exempt
#免除了请求的key
def catetree(request):

    #每次请求都是请求某一个类别下的分类
    #id text
    tree=[]
    id=request.POST.get('id',None)
    category=Category.objects.filter(parent_id=id).all()
    for cate in category:
        #每一个类别都是一个字典
        ca={}
        ca['id']=cate.id
        ca['text']=cate.name
        ca['state']='closed'
        tree.append(ca)

    return HttpResponse(json.dumps(tree))

json.dumps()用于将dict类型的数据转成str，因为如果直接将dict类型的数据写入json文件中会发生报错，因此在将数据写入时需要用到该函数。

首先那个装饰器的作用是免除了每次打开网页请求的key，然后我们获取了post提交的id，然后获取了类别模型中父类id为获取id的值的所有数据并复制给了categotry，接着for循环，将category中每个值的id,name,状态(默认close)以字典的形式储存到ca中，并将ca追加到tree中，最后我们转换tree里的数据类型并返回到页面中。

然后我们在manager页面中的左侧div中添加：<ul id="tt"></ul>

并添加js:

    <script type="text/javascript">
        $(function(){
            //创建一个树状菜单
            $('#tt').tree({
                url:'catetree',
            });
        });
    </script>

最后不要忘记在urls中添加路径： path('catetree',catetree),

现在打开页面会左侧会：

最后我们在中间的div中添加一个datagrid表格，首先继续在views中写一个方法：

@csrf_exempt
def ProduceList(request):
    #获取某个类别下的产品
    proSet = Produce.objects.all()
    tree=[]
    for pro in proSet:
        p={}
        p['id']=pro.id
        p['name']=pro.name
        p['price']=pro.price
        p['create_date']=pro.create_date.strftime('%Y-%m-%d')
        p['category']=pro.category.name
        tree.append(p)
    return HttpResponse(json.dumps(tree))

首先不要忘记写装饰器。

这个方法为获取产品类的所有信息并赋值给proSet，并循环遍历proSet，获取proSet的id，name，价格，创建时间，父类名，并以字典的形式存储到p中，并将p添加到tree中，最后将tree返回到页面上。这里需注意要将时间转换格式为年-月-日。

接着在urls中添加路径：path('ProduceList',ProduceList),

然后在manager页面中中间div添加： <table id="dg"></table>

接着在js中添加：

    <script type="text/javascript">
        $(function(){
            //创建一个树状菜单
            $('#tt').tree({
                url:'catetree',
            });
            $('#dg').datagrid({
                 url:'ProduceList',
                 columns:[[
                    {field:'id',title:'编号',width:100},
                    {field:'name',title:'名字',width:100},
                    {field:'price',title:'价格',width:100,align:'right'},
                    {field:'create_date',title:'发布时间',width:100,align:'right'}
                 ]]
            });

        });
    </script>

上述js为为文章添加columns属性，文章内容为views方法传输过来的数据，其展现在页面为：