数据分析之Ajax(完成easyui项目，用户列表，用户信息的增删改)

最新推荐文章于 2022-12-23 20:04:44 发布

岁月y

最新推荐文章于 2022-12-23 20:04:44 发布

阅读量812

点赞数

文章标签：数据分析 ajax easyui python

本文链接：https://blog.youkuaiyun.com/weixin_66448906/article/details/123134734

版权

首先在PyCharm中创建一个django包
完成以下步骤
在这里插入图片描述
开始创建app—hw_008并新建好4个py文件

在数据库里导入sql文件—创建tdb：

DROP DATABASE IF EXISTS tdb;
CREATE DATABASE tdb;
USE tdb;
CREATE TABLE t_user(
id VARCHAR(40) PRIMARY KEY,
username VARCHAR(32),
`password` VARCHAR(255),
NAME VARCHAR(10),
regdate DATETIME,
state INT
)ENGINE=INNODB CHARSET=utf8;
INSERT INTO t_user(id,username,PASSWORD,NAME,regdate,state)VALUES(UUID(),'admin','admin','管理员', NOW(),0 );
INSERT INTO t_user(id,username,PASSWORD,NAME,regdate,state)VALUES(UUID(),'zs','123','张三', NOW(),0 );

CREATE TABLE t_role(
id INT AUTO_INCREMENT PRIMARY KEY,
NAME VARCHAR(10)
)ENGINE=INNODB CHARSET=utf8;
INSERT INTO t_role(id,NAME) VALUES(1,'超级管理员'),(2,'管理员'),(3,'操作员');

CREATE TABLE t_user_role(
uid VARCHAR(40) NOT NULL,
rid INTEGER NOT NULL
)ENGINE=INNODB CHARSET=utf8;

INSERT INTO t_user_role(uid,rid) SELECT id,2 FROM t_user WHERE username='admin';
INSERT INTO t_user_role(uid,rid) SELECT id,3 FROM t_user WHERE username='zs';

CREATE TABLE t_menu(
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(20) NOT NULL,
url VARCHAR(255),
icon VARCHAR(255),
state INT ,
pid INT
) ENGINE=INNODB CHARSET=utf8;
INSERT INTO t_menu VALUES(1,'系统管理',NULL,NULL,0,0),(11,'参数设置',NULL,NULL,0,1),(12,'数据备份',NULL,NULL,0,1);
INSERT INTO t_menu VALUES(2,'权限管理',NULL,NULL,0,0),(22,'用户管理','user/list',NULL,0,2),(21,'角色管理',NULL,NULL,0,2);
INSERT INTO t_menu VALUES(3,'业务管理',NULL,NULL,0,0),(31,'采购业务',NULL,NULL,0,3),(32,'销售业务',NULL,NULL,0,3);
INSERT INTO t_menu VALUES(311,'采购计划',NULL,NULL,0,31),(312,'采购单据',NULL,NULL,0,31),(313,'采购报表',NULL,NULL,0,31);
INSERT INTO t_menu VALUES(321,'销售计划',NULL,NULL,0,32),(322,'销售单据',NULL,NULL,0,32),(323,'销售报表',NULL,NULL,0,32);

SELECT * FROM t_user;
SELECT * FROM t_role;
SELECT * FROM t_menu;

UPDATE t_menu SET url='hw_008ui:user_list' WHERE id =22;

在这里插入图片描述
反向解析并生成models.py文件

接下来就是代码部分了

hw_08
commons.py

from datetime import datetime, date
import json


class JsonResult:
    def __init__(self, *, code=0, msg=None, data=None):
        self.code = code
        self.msg = msg
        self.data = data


class CJsonEncoder(json.JSONEncoder):
    def default(self, obj):
        if isinstance(obj, datetime):
            return obj.strftime('%Y-%m-%d %H:%M:%S')
        elif isinstance(obj, date):
            return obj.strftime('%Y-%m-%d')
        else:
            return json.JSONEncoder.default(self, obj)


class JsonResultUtils:
    @staticmethod
    def fail(*, code=0, msg=None):
        return JsonResult(code=code, msg=msg, data=None)

    @staticmethod
    def success(*, code=1, data=None):
        return JsonResult(code=code, msg=None, data=data)

urls.py

from django.contrib import admin
from django.urls import path, include
from . import views

urlpatterns = [
    path('login/', views.login, name='login'),
    path('admin/', include('hw_008.urls')),
    path('ui/admin/', include('hw_008.urls_ui'))
]

views.py

import json

from django.http import JsonResponse, HttpResponse
from django.shortcuts import render

from hw_008.blls import TUserManager
from hw_08 import commons


def login(req):
    if req.method == 'GET':
        return render(req, 'login.html')
    elif req.method == 'POST':
        username = req.POST.get('username', '')
        password = req.POST.get('password', '')
        userManager = TUserManager()
        r = userManager.login(username, password)
        print(r, type(r))
        s = json.dumps(r, cls=commons.CJsonEncoder)
        print(s)
        resp = HttpResponse(s)
        resp['content-type'] = 'application/json;charset=utf-8'
        return resp

hw_008
blls.py

import math
import time
import datetime
import uuid

from django.urls import reverse
from django.utils import timezone

from hw_008 import models
from hw_08.commons import JsonResultUtils


class TUserManager:
    def __init__(self):
        pass

    def login(self, username, password):
        try:
            user = models.TUser.objects.get(username__exact=username)
            if user.password == password:
                r = JsonResultUtils.success(data={k: v for k, v in user.__dict__.items() if k != '_state'})
            else:
                r = JsonResultUtils.fail(code=-2, msg="密码错误")

        except Exception as e:
            print(e)
            r = JsonResultUtils.fail(code=-1, msg='用户名不存在')
        return r.__dict__

    def user_list(self, *, page=1, rows=10):
        qs = models.TUser.objects.all()
        cnt = qs.count()
        if rows is None or rows < 1: rows = 10
        page_count = int(math.ceil(cnt / rows))
        if page > page_count: page = page_count
        if page < 1: page = 1
        start = (page - 1) * rows
        end = page * rows
        qs = qs[start:end]
        return {
            'total': cnt,
            'rows': [item for item in qs.values()],
            'page': page,
            'size': rows,
            'count': page_count
        }

    def check_username(self, username, id=None):
        if id:
            data = models.TUser.objects.filter(username__exact=username).exclude(id__exact=id).count()
        else:
            data = models.TUser.objects.filter(username__exact=username).count()
        return data > 0

    def add(self, username, password, name, state):
        id = uuid.uuid4().urn[9:]
        regdate = timezone.now()
        if self.check_username(username) > 0:
            return {
                'code': -10,
                'msg': '用户名已经存在'
            }
        try:
            user = models.TUser.objects.create(id=id, username=username, password=password, name=name, state=state)
            return {
                'code': 0,
                'data': {k: v for k, v in user.__dict__.items() if k != '_state'}
            }
        except Exception as e:
            print(e)
            return {
                'code': -1,
                'msg': '数据保存失败'
            }

    def edit(self, id, username, name, state):
        if self.check_username(username, id) > 0:
            return {
                'code': -10,
                'msg': '用户名已经存在'
            }
        try:
            user = models.TUser.objects.get(id__exact=id)
            user.username = username
            user.name = name
            user.state = state
            user.save()
            return {
                'code': 0,
                'data': {k: v for k, v in user.__dict__.items() if k != '_state'}
            }
        except Exception as e:
            print(e)
            return {
                'code': -1,
                'msg': '数据保存失败'
            }

    def remove(self, id):
        try:
            user = models.TUser.objects.get(id__exact=id)
        except:
            return {
                'code': -10,
                'msg': '未找到待删除的数据'
            }
        try:
            models.TUser.objects.filter(id__exact=id).delete()
            return {
                'code': 0
            }
        except:
            return {
                'code': -1,
                'msg': '数据删除失败'
            }


class TMenuManager:
    def __init__(self):
        pass

    def get_roots(self):
        roots = models.TMenu.objects.filter(pid__exact=0).values()
        return [item for item in roots]

    def __item2vo(self, item):
        result = {
            "id": item['id'],
            "text": item['title'],
            "iconCls": item['icon'],
            "state": item['state']
        }
        if item.get('url', None) is not None:
            url = reverse(item['url'])
            result["attributes"] = {"url": url}
        return result

    def get_items(self, pid):
        result = []
        items = models.TMenu.objects.filter(pid__exact=pid).values()
        for item in items:
            vo = self.__item2vo(item)
            sub = self.get_items(item['id'])
            if sub is not None and len(sub) > 0:
                vo['children'] = sub
            result.append(vo)
        return result

urls.py

app_name = 'hw_008'
from django.urls import path
from . import views

urlpatterns = [
    path('menu/roots/', views.menu_roots, name="menu_roots"),
    path('menu/items/', views.menu_items, name="menu_items"),
    path('user/list/', views.user_list, name="user_list"),
    path('user/add/', views.user_add, name="user_add"),
    path('user/checkusername/', views.user_checkusername, name="user_checkusername"),
    path('user/remove/', views.user_remove, name="user_remove"),
    path('user/edit/', views.user_edit, name="user_edit"),

]

urls_ui.py

app_name = 'hw_008ui'
from django.urls import path
from . import views_ui

urlpatterns = [
    path('index/', views_ui.index, name='index'),
    path('', views_ui.index),
    path('user/list/', views_ui.user_list, name='user_list'),
    path('user/add/', views_ui.user_add, name='user_add'),
    path('user/edit/', views_ui.user_edit, name='user_edit'),

]

views.py

import json

from django.http import HttpResponse
from django.shortcuts import render
from hw_008 import blls
from hw_08 import commons


def menu_roots(req):
    data = blls.TMenuManager().get_roots()
    jsons = json.dumps(data)
    resp = HttpResponse(jsons)
    resp['content-type'] = 'application/json;charset=utf-8'
    return resp


def menu_items(req):
    id = req.GET.get('id', '')
    data = blls.TMenuManager().get_items(id)
    jsons = json.dumps(data)
    resp = HttpResponse(jsons)
    resp['content-type'] = 'application/json;charset=utf-8'
    return resp


def user_list(req):
    page = int(req.GET.get('page', '1'))
    rows = int(req.GET.get('rows', '10'))
    data = blls.TUserManager().user_list(page=page, rows=rows)
    jsons = json.dumps(data, cls=commons.CJsonEncoder)
    resp = HttpResponse(jsons)
    resp['content-type'] = 'application/json;charset=utf-8'
    return resp


def user_checkusername(req):
    id = req.GET.get('id', None)
    username = req.GET.get('username', '')
    if req.method == 'POST':
        id = req.POST.get('id', None)
        username = req.POST.get('username', '')
    data = not blls.TUserManager().check_username(username, id=id)
    jsons = json.dumps(data, cls=commons.CJsonEncoder)
    resp = HttpResponse(jsons)
    resp['content-type'] = 'application/json;charset=utf-8'
    return resp


def user_add(req):
    username = req.POST.get('username', '')
    password = req.POST.get('password', '')
    repassword = req.POST.get('repassword', '')
    name = req.POST.get('name', '')
    state = req.POST.get('state', '0')
    if password != repassword:
        r = {
            'code': -2,
            'msg': '两次输入的密码不一致'
        }
    else:
        r = blls.TUserManager().add(username, password, name, state)
    jsons = json.dumps(r, cls=commons.CJsonEncoder)
    resp = HttpResponse(jsons)
    resp['content-type'] = 'application/json;charset=utf-8'
    return resp


def user_remove(req):
    id = req.GET.get('id', '')
    if req.method == 'POST':
        id = req.POST.get('id', '')
    r = blls.TUserManager().remove(id)
    jsons = json.dumps(r)
    resp = HttpResponse(jsons)
    resp['content-type'] = 'application/json;charset=utf-8'
    return resp


def user_edit(req):
    id = req.POST.get('id', '')
    username = req.POST.get('username', '')
    name = req.POST.get('name', '')
    state = req.POST.get('state', '0')
    r = blls.TUserManager().edit(id, username, name, state)
    jsons = json.dumps(r, cls=commons.CJsonEncoder)
    resp = HttpResponse(jsons)
    resp['content-type'] = 'application/json;charset=utf-8'
    return resp

views_ui.py

from django.shortcuts import render

from hw_008 import models


def index(req):
    return render(req, 'hw_008/index.html')


def user_list(req):
    return render(req, 'user/list.html')


def user_add(req):
    return render(req, 'user/add.html')


def user_edit(req):
    id = req.GET.get('id', '')
    data = None
    try:
        data = models.TUser.objects.get(id__exact=id)
    except:
        pass
    if data:
        data = {k: v for k, v in data.__dict__.items() if k != '_state'}
    return render(req, 'user/edit.html', {'data': data})

templates
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学生管理系统--管理后台</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static '/libs/jquery-easyui/themes/default/easyui.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static '/libs/jquery-easyui/themes/icon.css' %}">
    <script type="text/javascript" src="{% static '/libs/jquery-3.3.1.js' %}"></script>
    <script type="text/javascript" src="{% static '/libs/jquery-easyui/jquery.easyui.min.js' %}"></script>
    <script type="text/javascript" src="{% static '/libs/jquery-validate/jquery.validate.js' %}"></script>
    <script type="text/javascript" src="{% static '/libs/jquery-validate/additional-methods.js' %}"></script>
    <script type="text/javascript" src="{% static '/libs/jquery-validate/localization/messages_zh.js' %}"></script>
</head>

<body class="easyui-layout">
<div data-options="region:'north',title:' ',split:true" style="height:100px;">
    LOGO
</div>
<div data-options="region:'south',title:''" style="height:30px;"></div>
<div data-options="region:'west',title:'系统菜单',split:true" style="width:200px;" id="west">


</div>
<div data-options="region:'center',title:''" style="padding:5px;background:#eee;" id="center">


</div>
<script>
    $(function () {
        $('#west').accordion({
            animate: false
        });
        $.ajax({
            url: "{% url 'hw_008:menu_roots' %}",
            type: 'post',
            data: {'csrfmiddlewaretoken': "{{ csrf_token }}"},
            dataType: 'json',
            success: function (data) {
                //console.log(data)
                if (data && data.length > 0) {
                    $.each(data, function (i, e) {
                        $('#west').accordion('add', {
                            title: e.title,
                            content: '<ul id="m_' + e.id + '" class="easyui-tree" data-options="url:\'{% url 'hw_008:menu_items' %}?id=' + e.id + '\',method:\'get\',anumate:true"></ul>',
                            selected: false
                        });
                        $('#m_' + e.id).tree({
                            onClick: function (node) {
                                if (node.children && node.children.length > 0) return
                                //alert(node.text)
                                if ($('#center').tabs('tabs').length > 6) {
                                    $.messager.show({
                                        title: '提示',
                                        msg: '同时只能打开6个选项卡',
                                        timeout: 2000,
                                        showType: 'slide'
                                    })
                                    return
                                }
                                var tab = $('#center').tabs('getTab', node.text)
                                if (!tab) {
                                    var options = {
                                        title: node.text,
                                        closable: true,
                                        selected: true,
                                    }
                                    if (node.attributes && node.attributes.url) {
                                        options.href = node.attributes.url
                                    }
                                    $('#center').tabs('add', options);
                                } else {
                                    $('#center').tabs('select', node.text)
                                }
                            }
                        });
                    })
                    $('#west').accordion('select', 0)
                }
            }
        })


        $('#center').tabs({
            border: false,
            onSelect: function (title) {

            }
        });
        $('#center').tabs('add', {
            title: '首  页',
            content: '',
            closable: false /*,
		    tools:[{
		        iconCls:'icon-mini-refresh',
		        handler:function(){
		            alert('refresh');
		        }
		    }]    */
        });
        $(window).on('resize', function () {
            $('#center').tabs('resize')
        })
    })
</script>
</body>
</html>

add.html

<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>学生管理系统--新增用户</title>
    <!--
	<link rel="stylesheet" type="text/css" href="{% static '/libs/jquery-easyui/themes/default/easyui.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static '/libs/jquery-easyui/themes/icon.css' %}">

	<script type="text/javascript" src="{% static '/libs/jquery-3.3.1.js' %}"></script>
	<script type="text/javascript" src="{% static '/libs/jquery-easyui/jquery.easyui.min.js' %}"></script>
    -->
</head>
<body>
<div style="padding:10px 60px 20px 60px">
    <form id="ff" method="post" action="{% url 'hw_008:user_add' %}">
        {% csrf_token %}
        <table cellpadding="5">
            <tr>
                <td>用户名:</td>
                <td><input type="text" id="username" name="username"></input></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" id="password" name="password"></input></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="password" id="repassword" name="repassword"></input></td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><input type="text" id="name" name="name"></input></td>
            </tr>
            <tr>
                <td>状态:</td>
                <td><input name="state" type="radio" value="0" checked="checked"/>启用 &nbsp;<input name="state"
                                                                                                  type="radio"
                                                                                                  value="1"/>禁用
                </td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" id="btn_ok">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" id="btn_cancel">放弃</a>
    </div>
</div>
<script>
    $(function () {
        $('#ff').validate({
            submitHandler: function () {
                $.ajax({
                    url: '{% url 'hw_008:user_add' %}',
                    type: 'post',
                    data: $('#ff').serialize(),
                    dateType: 'json',
                    success: function (data) {
                        if (data.code == 0) {
                            $.messager.defaults.ok = '确定'
                            $.messager.defaults.cancel = '取消'
                            $.messager.confirm('确认对话框', '数据保持成功，是否继续添加？',
                                function (r) {
                                    if (r) {
                                        $('#ff').form('reset')
                                    } else {
                                        $('#dd').dialog('close')
                                        $('#dg').datagrid('reload')
                                    }
                                })
                        } else {
                            $.messager.show('警告', data.msg, 'info')
                        }
                    }
                })
            },
            rules: {
                name: "required",
                username: {
                    required: true,
                    minlength: 2,
                    remote: { //验证用户名是否存在
                        type: "POST",
                        url: "{% url 'hw_008:user_checkusername' %}",
                        data: {
                            username: function () {
                                return $("#username").val();
                            },
                            'csrfmiddlewaretoken': '{{ csrf_token }}'
                        }
                    }
                },
                password: {
                    required: true,
                    minlength: 5
                },
                repassword: {
                    equalTo: "#password"
                }
            },
            messages: {
                name: '请输入姓名',
                username: {
                    required: "请输入用户名",
                    minlength: "用户名至少{0}个字符",
                    remote: "用户名已经存在"
                },
                password: {
                    required: "请输入密码",
                    minlength: "密码至少{0}个字符"
                },
                repassword: {
                    equalTo: "两次输入的密码不匹配"
                }
            }
        });

        $('#btn_cancel').on('click', function () {
            $.messager.confirm('确认对话框', "您想要放弃吗?", function (r) {
                if (r) {
                    $('#dd').dialog('close')
                }
            })
        })
        $('#btn_ok').on('click', function () {
            $('#ff').submit()
        })

    })
</script>
</body>
</html>

edit.html

<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>学生管理系统--编辑用户</title>
    <!--
	<link rel="stylesheet" type="text/css" href="{% static '/libs/jquery-easyui/themes/default/easyui.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static '/libs/jquery-easyui/themes/icon.css' %}">

	<script type="text/javascript" src="{% static '/libs/jquery-3.3.1.js' %}"></script>
	<script type="text/javascript" src="{% static '/libs/jquery-easyui/jquery.easyui.min.js' %}"></script>
    -->
</head>
<body>
<div style="padding:10px 60px 20px 60px">
    <form id="ff" method="post" action="{% url 'hw_008:user_edit' %}">
        {% csrf_token %}
        <input type="hidden" id="id" name="id" value="{{ data.id }}"/>
        <table cellpadding="5">
            <tr>
                <td>用户名:</td>
                <td><input type="text" id="username" name="username" value="{{ data.username }}"></input></td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><input type="text" id="name" name="name" value="{{ data.name }}"></input></td>
            </tr>
            <tr>
                <td>状态:</td>
                <td>
                    {% if data.state == 0 %}
                        <input name="state" type="radio" value="0" checked="checked"/>启用 &nbsp;
                        <input name="state" type="radio" value="1"/>禁用
                    {% else %}
                        <input name="state" type="radio" value="0"/>启用 &nbsp;
                        <input name="state" type="radio" value="1" checked="checked"/>禁用
                    {% endif %}
                </td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" id="btn_ok">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" id="btn_cancel">放弃</a>
    </div>
</div>
<script>
    $(function () {
        $('#ff').validate({
            submitHandler: function () {
                $.ajax({
                    url: '{% url 'hw_008:user_edit' %}',
                    type: 'post',
                    data: $('#ff').serialize(),
                    dateType: 'json',
                    success: function (data) {
                        if (data.code == 0) {
                            $('#dd').dialog('close')
                            $('#dg').datagrid('reload')
                        } else {
                            $.messager.show('警告', data.msg, 'info')
                        }
                    }
                })
            },
            rules: {
                name: "required",
                username: {
                    required: true,
                    minlength: 2,
                    remote: { //验证用户名是否存在
                        type: "POST",
                        url: "{% url 'hw_008:user_checkusername' %}",
                        data: {
                            username: function () {
                                return $("#username").val();
                            },
                            id: function () {
                                return $('#id').val();
                            },
                            'csrfmiddlewaretoken': '{{ csrf_token }}'
                        }
                    }
                },
                password: {
                    required: true,
                    minlength: 5
                },
                repassword: {
                    equalTo: "#password"
                }
            },
            messages: {
                name: '请输入姓名',
                username: {
                    required: "请输入用户名",
                    minlength: "用户名至少{0}个字符",
                    remote: "用户名已经存在"
                },
                password: {
                    required: "请输入密码",
                    minlength: "密码至少{0}个字符"
                },
                repassword: {
                    equalTo: "两次输入的密码不匹配"
                }
            }
        });

        $('#btn_cancel').on('click', function () {
            $.messager.confirm('确认对话框', "您想要放弃吗?", function (r) {
                if (r) {
                    $('#dd').dialog('close')
                }
            })
        })
        $('#btn_ok').on('click', function () {
            $('#ff').submit()
        })

    })
</script>
</body>
</html>

list.html

<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>学生管理系统--用户列表</title>
    <link rel="stylesheet" type="text/css" href="{% static '/libs/jquery-easyui/themes/default/easyui.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static '/libs/jquery-easyui/themes/icon.css' %}">

    <script type="text/javascript" src="{% static '/libs/jquery-3.3.1.js' %}"></script>
    <script type="text/javascript" src="{% static '/libs/jquery-easyui/jquery.easyui.min.js' %}"></script>
    <script type="text/javascript" src="{% static '/libs/jquery-validate/jquery.validate.js' %}"></script>
    <script type="text/javascript" src="{% static '/libs/jquery-validate/additional-methods.js' %}"></script>
    <script type="text/javascript" src="{% static '/libs/jquery-validate/localization/messages_zh.js' %}"></script>
</head>
<body>
<table id="dg"></table>
<div id="dd"></div>
<script>
    $(function () {
        $('#dg').datagrid({
            url: '{% url 'hw_008:user_list' %}',
            method: 'get',
            loadMsg: '数据加载中,请稍后......',
            singleSelect: true,
            nowrap: true,
            fitColumns: true,
            striped: true,
            columns: [[
                {field: 'id', title: 'ID', width: 100, hidden: true},
                {field: 'username', title: '用户名', width: 100},
                {field: 'password', title: '密码', width: 100},
                {field: 'name', title: '姓名', width: 100},
                {
                    field: 'state', title: '状态', width: 30, align: 'center',
                    formatter: function (value, row, index) {
                        if (!value) {
                            return "<input type='checkbox' value='" + value + "' checked='checked' disabled='disabled'/>";
                        } else {
                            return "<input type='checkbox' value='" + value + "' disabled='disabled'/>";
                        }
                    }
                },
                {
                    field: '_por', title: '操作', width: 100, align: 'center',
                    formatter: function (value, row, index) {
                        var s = "<a name=\"btn_edit\" href=\"javascript:void(0)\" class=\"easyui-linkbutton\" data-options=\"iconCls:'icon-edit'\">编辑</a>&nbsp;"
                        s += "<a name=\"btn_remove\" href=\"javascript:void(0)\" class=\"easyui-linkbutton\" data-options=\"iconCls:'icon-remove'\">删除</a>"

                        return s
                    }
                },
            ]],
            toolbar: [{
                iconCls: 'icon-add',
                handler: function () {
                    $('#dd').dialog({
                        opr: 'add',
                        title: '新增用户',
                        width: 450,
                        height: 300,
                        closed: true,
                        cache: false,
                        href: '{% url 'hw_008ui:user_add' %}',
                        //content:'content',
                        modal: true
                    });
                    $('#dd').dialog('open')
                }
            }, '-', {
                iconCls: 'icon-edit',
                handler: function () {
                    var row = $('#dg').datagrid('getSelected')
                    if (row) {
                        $.messager.defaults.ok = "确定"
                        $.messager.defaults.cancel = '取消'
                        $.messager.confirm('确认对话框', '是否编辑当前行数据？', function (r) {
                            if (r) {
                                $('#dd').dialog({
                                    opr: 'edit',
                                    title: '编辑用户',
                                    width: 450,
                                    height: 300,
                                    closed: true,
                                    cache: false,
                                    href: '{% url 'hw_008ui:user_edit' %}?id=' + row.id,
                                    //content:'content',
                                    modal: true
                                });
                                $('#dd').dialog('open')
                            }
                        })
                    } else {
                        $.messager.show({
                            title: '提示',
                            msg: '请先选中待编辑的数据',
                            timeout: 2000,
                            showType: 'slide'
                        })
                    }
                }
            }, '-', {
                iconCls: 'icon-remove',
                handler: function () {
                    var row = $('#dg').datagrid('getSelected')
                    if (row) {
                        $.messager.defaults.ok = "确定"
                        $.messager.defaults.cancel = '取消'
                        $.messager.confirm('确认对话框', '是否删除当前行数据？', function (r) {
                            if (r) {
                                $.ajax({
                                    url: '{% url 'hw_008:user_remove' %}',
                                    type: 'post',
                                    data: {'csrfmiddlewaretoken': '{{ csrf_token }}', 'id': row.id},
                                    dataType: 'json',
                                    success: function (data) {
                                        if (data.code == 0) {
                                            $.messager.show({
                                                title: '提示',
                                                msg: '输出删除成功',
                                                timeout: 2000,
                                                showType: 'slide'
                                            })
                                            $('#dg').datagrid('reload')
                                        } else {
                                            $.messager.show({
                                                title: '提示',
                                                msg: '输出删除失败',
                                                timeout: 2000,
                                                showType: 'slide'
                                            })
                                        }
                                    }
                                })
                            }
                        })
                    } else {
                        $.messager.show({
                            title: '提示',
                            msg: '请先选中待删除的数据',
                            timeout: 2000,
                            showType: 'slide'
                        })
                    }
                }
            }, '-', {
                iconCls: 'icon-reload',
                handler: function () {
                    $('#dg').datagrid('reload')
                }
            }, '-', {
                iconCls: 'icon-help',
                handler: function () {
                    alert('help')
                }
            }],
            onLoadSuccess: function (data) {
                $('[name=btn_edit]').linkbutton({
                    iconCls: 'icon-edit'
                })
                $('[name=btn_remove]').linkbutton({
                    iconCls: 'icon-remove'
                })
                $('[name=btn_edit]').on('click', function () {
                    var x = $('[name=btn_remove]').index(this);
                    $('#dg').datagrid('selectRow', x)
                    var a = $('#dg').closest('.datagrid').find('.datagrid-toolbar').find('td').eq(2).find('a')
                    a.triggerHandler('click')
                })
                $('[name=btn_remove]').on('click', function () {
                    var x = $('[name=btn_remove]').index(this);
                    $('#dg').datagrid('selectRow', x)
                    var a = $('#dg').closest('.datagrid').find('.datagrid-toolbar').find('td').eq(4).find('a')
                    a.triggerHandler('click')
                })
            }
        });

    })
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>学生管理系统--登录</title>
    <link rel="stylesheet" type="text/css" href="{% static '/libs/jquery-easyui/themes/default/easyui.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static '/libs/jquery-easyui/themes/icon.css' %}">

    <script type="text/javascript" src="{% static '/libs/jquery-3.3.1.js' %}"></script>
    <script type="text/javascript" src="{% static '/libs/jquery-easyui/jquery.easyui.min.js' %}"></script>
</head>
<body>
<div id="container">
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" title="用户登录" style="width:400px">
        <div style="padding:10px 60px 20px 60px">
            <form id="ff" cssClass="easyui-form" method="post" action="{% url 'login' %}">
                {% csrf_token %}
                <table cellpadding="5">
                    <tr>
                        <td>用户名:</td>
                        <td><input id="username" name="username" cssClass="easyui-textbox"
                                   data-options="required:true"/></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><input type="password" id="password" name="password" cssClass="easyui-textbox"
                                   data-options="required:true"/></td>
                    </tr>
                </table>
            </form>
            <div style="text-align:center;padding:5px">
                <a href="javascript:void(0)" class="easyui-linkbutton" id="btn_ok">登录</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" id="btn_clear">重置</a>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {


        $('#btn_ok').on('click', function () {
            $('#ff').form({
                'url': "{% url 'login' %}",
                onSubmit: function () {
                    return $(this).form('enableValidation').form('validate')
                },
                success: function (data) {
                    if (typeof (data) == 'string') {
                        data = JSON.parse(data)
                    }
                    if (data.code == 1) {
                        window.location.href = "{% url 'hw_008ui:index' %}"
                    } else {

                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            showType: 'show'
                        });
                    }
                }
            })

            $('#ff').submit()
            return false
        })


        $('#btn_clear').on('click', function () {
            $('#ff').form('reset')
            return false
        })

    })
</script>
</body>
</html>

最后看看实现效果吧
登录：http://127.0.0.1:8000/login
在这里插入图片描述