python-Web-django-后台

url:

# member 处理
    re_path('member/list/', member.list, name='member/list/'),
    re_path('member/list_part/', member.list_part, name='member/list_part/'),
    re_path('member/add/', member.add, name='member/add/'),
    re_path('member/delete/', member.delete, name='member/delete/'),
    re_path('member/change/', member.change, name='member/change/'),

views:

from django.shortcuts import HttpResponse,redirect,render
from app01.models import *
import json  # 使用json格式数据
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
import re
from back.views.ddff import defense_url,ddff_list

@defense_url
def add(request,aid=None,**kwargs):
    '''管理员添加'''
    res = {'s':None,'info':None}
    # 提交
    print(request.POST)
    if request.method == 'POST':
        # 名字
        if request.POST.get('member_name') == '':
            res['info'] = '名字不能为空'
            return HttpResponse(json.dumps(res))
        member_name = request.POST.get('member_name').strip()

        # 手机号
        if request.POST.get('member_tel') == '':
            res['info'] = '手机号不能为空'
            return HttpResponse(json.dumps(res))
        member_tel = request.POST.get('member_tel').strip()

        # 手机号格式
        if re.match('^[0-9]+$', member_tel) is None:
            res['info'] = '手机号格式不正确'
            return HttpResponse(json.dumps(res))

        # Email
        if request.POST.get('member_email') == '':
            res['info'] = 'Email不能为空'
            return HttpResponse(json.dumps(res))
        member_email = request.POST.get('member_email').strip()

        # Email格式
        if re.match('^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$', member_email) is None:
            res['info'] = 'Email格式不正确'
            return HttpResponse(json.dumps(res))

        # 昵称
        if request.POST.get('member_nickname') == '':
            res['info'] = '昵称不能为空'
            return HttpResponse(json.dumps(res))
        member_nickname = request.POST.get('member_nickname').strip()

        # 密码
        if request.POST.get('pwd') == '':
            res['info'] = '密码不能为空'
            return HttpResponse(json.dumps(res))
        pwd = request.POST.get('pwd').strip()

        # 密码格式
        if re.match('^[0-9a-zA-Z]*$', pwd) is None:
            res['info'] = '密码格式不正确'
            return HttpResponse(json.dumps(res))

        # 会员
        if request.POST.get('member_hy') != '':
            member_hy = request.POST.get('member_hy').strip()
        else:
            member_hy = 0

        # 是否已经存在了
        mm = Member.objects.filter(member_name=member_name)
        # 存在
        print(mm)
        if mm != None:
            # 修改
            mm[0].update(
                    member_name=member_name, member_pwd=pwd,member_tel=member_tel,member_email=member_email,member_nickname=member_nickname,member_hy=member_hy)
            res['s'] = 1
            res['info'] = '修改成功!'
            return HttpResponse(json.dumps(res))
        else:
            # 添加新的
            a_obj = Member(member_name=member_name, member_pwd=pwd,member_tel=member_tel,member_email=member_email,member_nickname=member_nickname,member_hy=member_hy)
            a_obj.save()
            res['s'] = 1
            res['info'] = '添加成功!'
            return HttpResponse(json.dumps(res))

    member_obj = Member.objects.filter(id=aid).first()
    return render(request,'member/add.html',locals())

@ddff_list
def list(request):
    '''Member 列表'''

    member = Member.objects.all()
    return render(request,'member/list.html',locals())


def list_part(request):
    '''ajax分页器'''
    where = getWhere(request)
    member_list = Member.objects.filter(**where).all()
    currentPage = int(request.GET.get('page', 1))
    paginator = Paginator(member_list, 5)
    if paginator.num_pages > 6:
        if currentPage - 2 < 1:
            pageRange = range(1, 6)
        elif currentPage + 2 > paginator.num_pages:
            pageRange = range(currentPage - 2, paginator.num_pages + 1)
        else:
            pageRange = range(currentPage - 2, currentPage + 2)
    else:
        pageRange = paginator.page_range
    try:
        member_list = paginator.page(currentPage)
    except PageNotAnInteger:
        member_list = paginator.page(1)
    except EmptyPage:
        member_list = paginator.page(paginator.num_pages)
    return render(request, 'member/list_part.html', locals())


def getWhere(request)->dict:
    '''where拼接'''
    where = {}
    member_id = request.POST.get('member_id')
    title = request.POST.get('title')
    member_hy = request.POST.get('member_hy')
    manage_select = request.POST.get('manage_select')
    if member_id:
        where['id'] = member_id
    if manage_select:
        where[manage_select+'__icontains'] = title
    if member_hy:
        where['member_hy'] = member_hy
    print(where)
    return where


def delete(request):
    ''''''
    if request.method == 'POST':
        id = request.POST.get('id')
    else:
        id = request.GET.get('id')
    result = Member.objects.filter(id=id).delete()
    import json
    res = {'status': None, 'info': None}
    if result:
        res['status'] = 1
        res['info'] = '操作成功'
    else:
        res['status'] = 0
        res['info'] = '操作失败'
    return HttpResponse(json.dumps(res))  # 把这个结果告诉给前台,ajax


def change(request):
    ''''''
    if request.method == 'POST':
        aid = request.POST.get('id')
    else:
        aid = request.GET.get('id')
    member = Member.objects.filter(id=aid).first()
    print(member)
    return  add(request,aid)

def alldelete(request):
    '''全部删除'''
    print(request.POST)
    res = {'status': None, 'info': None}
    # if result:
    #     res['status'] = 1
    #     res['info'] = '操作成功'
    # else:
    #     res['status'] = 0
    #     res['info'] = '操作失败'
    # return HttpResponse(json.dumps(res))  # 把这个结果告诉给前台,ajax

 

html-list:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表页</title>
<link href="/static/back/css/style.css" rel="stylesheet" type="text/css" />
<link href="/static/back/css/select.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
<script type="text/javascript" src="/static/back/js/jquery.js"></script>
<script type="text/javascript" src="/static/back/js/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="/static/back/js/select-ui.min.js"></script>
<script type="text/javascript" src="/static/layer/layer.js"></script>

 
<script type="text/javascript">
$(document).ready(function(e) {
    $(".select1").uedSelect({
        width : 345              
    });
    $(".select2").uedSelect({
        width : 167  
    });
    $(".select3").uedSelect({
        width : 100
    });
});
</script>

</head>

<body>

    <div class="place">
        <span>位置:</span>
        <ul class="placeul">
            <li><a href="{% url 'back:index/index/' %}">首页</a></li>
{#            <li><a href="{% url 'back:index/index/' %}">系统设置</a></li>#}
        </ul>
    </div>
    
    <div class="formbody">   
    <div id="usual1" class="usual">   
      <div id="tab2" class="tabson">

{#  form表单  #}
<form >
        {% csrf_token %}
    <ul class="seachform">

    <li><label>查询方式</label>
    <div class="vocation">
    <select class="select3" name="manage_select">
        <option value="">全部</option>
        <option value="member_nickname">昵称</option>
        <option value="member_tel">手机号</option>
        <option value="member_email">email</option>
    </select>
    </div>
    </li>

    <li>
        <label>关键字</label><input name="title" type="text" class="scinput" />
    </li>

    <li><label>用户</label>
    <div class="vocation">
    <select class="select3" name="member_id">
        <option value="">全部</option>
        {% for i1 in member %}
    <option value="{{ i1.id }}">{{ i1.member_name }}</option>
        {% endfor %}
    </select>
    </div>
    </li>

    <li><label>是否会员</label>
    <div class="vocation">
    <select class="select3" name="member_hy">
        <option value="">全部</option>
    <option value="1"></option>
    <option value="0"></option>
    </select>
    </div>
    </li>

    <li>
        <label>&nbsp;</label><input name="" type="button" class="scbtn" value="查询" id="search"/>
    </li>
    
    </ul>

{#  文章列表  #}
    <table class="tablelist">
        <thead>
        <tr>
        <th><input name="" type="checkbox" value="" checked="checked"/></th>
        <th>编号<i class="sort"><img src="/static/back/images/px.gif" /></i></th>
        <th>用户</th>
        <th>手机号</th>
        <th>Email</th>
        <th>昵称</th>
        <th>密码</th>
        <th>会员</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        <tbody class="maina">


                </tbody>


        </tbody>
    </table>
</form>

    </div>  
       
    </div>
     <script>
            //首次页面加载,通过ajax拿到数据,放在maina容器里
            show_list();
            function show_list() {
                var url = '{% url 'back:member/list_part/' %}';
                $.post(url, $('form').serialize(), function (data) {
                    $(".maina").html(data);
                });
            }
            //点击分页,点击a连接:
            $(document).on('click', '.pagin a', function () {
                $.post(this.href, $('form').serialize(), function (data) {
                    $(".maina").html(data);
                });
                return false;//让a连接失效
            });

            //点击查看
             $(document).on('click', '.change', function () {
                 id = $(this).parent().data("id");
                 location.href="/back/member/change/?id="+id;
{#                 $.post("{% url 'back:article/delete/' %}", {#}
{#                        "id": id,#}
{#                        "csrfmiddlewaretoken": "{{ csrf_token }}"#}
{#                    }, function (data) {#}
{##}
{#                 })#}
             });

            //点击删除
            $(document).on('click', '.del', function () {
               _this = this;
                layer.confirm('您确定要删除吗?', {
                    btn: ['确定', '取消']
                }, function () {
                    id = $(_this).parent().data("id");
                    $.post("{% url 'back:member/delete/' %}", {
                        "id": id,
                        "csrfmiddlewaretoken": "{{ csrf_token }}"
                    }, function (data) {
                        if (data.status == 1) {
                            layer.msg(data.info, function () {
                                $(_this).parent().parent().remove();
                            });

                        } else {
                            layer.msg(data.info);
                        }
                    }, 'json');
                }, function () {
                });
                return false;//让a连接失效
            });

            //点击全部删除
            $(document).on('click', '.alldel', function () {
               _this = this;
                layer.confirm('您确定要删除吗?', {
                    btn: ['确定', '取消']
                }, function () {
{#                    id = $(_this).parent().data("id");#}
                    $.post("{% url 'back:member/alldelete/' %}",$('form').serialize(), function (data) {
                        if (data.status == 1) {
                            layer.msg(data.info, function () {
                                $(_this).parent().parent().remove();
                            });

                        } else {
                            layer.msg(data.info);
                        }
                    }, 'json');
                }, function () {
                });
                return false;//让a连接失效
            });

            //点击查询按钮
            $(document).on('click', '#search', function () {
                show_list();
            });

        </script>

 
    <script type="text/javascript"> 
      $("#usual1 ul").idTabs(); 
    </script>
    
    <script type="text/javascript">
        $('.tablelist tbody tr:odd').addClass('odd');
    </script>
    
    </div>


</body>

</html>

html-list_part:

{% for i in member_list %}
        <tr>
        <td><input name="memberid[]" type="checkbox" value="{{ i.id }}" /></td>
        <td>{{ forloop.counter }}</td>
        <td>{{ i.member_name }}</td>
        <td>{{ i.member_tel }}</td>
        <td>{{ i.member_email }}</td>
        <td>{{ i.member_nickname }}</td>
        <td>{{ i.member_pwd }}</td>
        <td>{% if i.member_hy == '1' %}是{% else %}否{% endif %}</td>
        <td data-id="{{ i.id }}"><a href="javascript:;" class="tablelink change">修改</a> <a href="javascript:;" class="tablelink del"> 删除</a></td>
        </tr>
        {% endfor %}
<tr class="pagin"><th colspan="9">

{#           <div class="pagin">#}<span class="member" align="left"><a href="javascript:;" class="tablelink alldel">全部删除</a></span>
        <span class="member" align="right"><i class="blue">{{ paginator.count }} </i> 条 记 录 </span>
{#        <ul class="paginList">#}
{##}
{#        </ul>#}
{#    </div>#}



{#分页器#}
    <nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
  {% if paginator.has_previous %}
    <li class="page-item disabled">
      <a class="page-link" href="/back/member/list_part/?page={{ p.previous_page_number }}" tabindex="-1" aria-disabled="true">上一页</a>
    </li>
  {% endif %}
      {% for i in pageRange %}

    <li class="page-item {% if i == currentPage %}current{% endif %}"><a class="page-link" href="/back/member/list_part/?page={{ i }}">{{ i }}<span class="sr-only">(current)</span></a></li>
          {% endfor %}

  {% if paginator.has_next %}
    <li class="page-item">
      <a class="page-link" href="/back/member/list_part/?page={{ p.next_page_number }}">下一页</a>
    </li>
  {% endif %}
  </ul>
</nav>


        </th></tr>

html-add:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="/static/back/css/style.css" rel="stylesheet" type="text/css" />
<link href="/static/back/css/select.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/static/back/js/jquery.js"></script>
<script type="text/javascript" src="/static/back/js/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="/static/back/js/select-ui.min.js"></script>

<script type="text/javascript" src="/static/back/kindeditor/kindeditor-all.js"></script>
    <script>
            KindEditor.ready(function(K) {
                    window.editor = K.create('#content',{
                        width:"800",
                        height:"600",
                        resizeType:0,
                        uploadJson:"/back/article/upload/",
                        extraFileUploadParams:{
                            csrfmiddlewaretoken:"{{ csrf_token }}"
                        },
                        filePostName:"img"//上传图片的名称
                    });
            });
</script>
 
  
<script type="text/javascript">
    $(document).ready(function(e) {
        $(".select1").uedSelect({
            width : 345              
        });
        $(".select2").uedSelect({
            width : 167  
        });
        $(".select3").uedSelect({
            width : 100
        });

{#        //加载富文本编辑器#}
{#            KindEditor.ready(function(K) {#}
{#                K.create('#content', {#}
{#                    allowFileManager : true,#}
{#                    filterMode:true,#}
{#                    afterBlur:function(){#}
{#                        this.sync("#content");#}
{#                    }#}
{#                });#}
{#            });#}
    });

</script>
</head>

<body>
<form action="{% url 'back:member/add/' %}" method="post">
    {% csrf_token %}
    <div class="place">
    <span>位置:</span>
    <ul class="placeul">
    <li><a href="{% url 'back:index/index/' %}">首页</a></li>
{#    <li><a href="#">系统设置</a></li>#}
    </ul>
    </div>
    
    <div class="formbody">
    <div id="usual1" class="usual"> 
      <div id="tab1" class="tabson">
 
    
    <ul class="forminfo">

    <div class="cityright">
    </div>

        <li><label>姓名<b>*</b></label><div><input name="member_name" type='text' class="dfinput" value="{{ member_obj.member_name }}" placeholder="任意字符组合" style="width:518px;"/></div></li>
        <li><label>手机号<b>*</b></label><div><input name="member_tel" type='text' class="dfinput" value="{{ member_obj.member_tel }}" placeholder="123456789" style="width:518px;"/></div></li>
        <li><label>Email<b>*</b></label><div><input name="member_email" type='text' class="dfinput" value="{{ member_obj.member_email }}" placeholder="123@qq.com" style="width:518px;"/></div></li>
        <li><label>昵称<b>*</b></label><div><input name="member_nickname" type='text' class="dfinput" value="{{ member_obj.member_nickname }}" placeholder="任意字符组合" style="width:518px;"/></div></li>
       <li><label>密码<b>*</b></label><div><input name="pwd" type="text" class="dfinput" value="{{ member_obj.member_pwd }}" placeholder="数字和任意大小写字母组合" style="width:518px;"/></div></li>

        <div><li><label>会员<b></b></label><input name="member_hy" type="radio" {% if member_obj.member_hy == '1' %}checked="checked" {% endif %} class="" value="1"  style="width:40px;"/>
            不是<input name="member_hy" type="radio" class="" value="0" {% if member_obj.member_hy == '1' %}{% else %}checked="checked" {% endif %} style="width:40px;"/>
    </li></div>
{#        <li><label>会员<b>*</b></label><div><input name="member_hy" type='text' class="dfinput" value="{{ member_obj.member_hy }}"  style="width:518px;"/></div></li>#}
{#    <li><label>密码<b>*</b></label>#}
{#    <div class="vocation">#}
{#    <select class="select3" name="member_hy">#}
{#    <option value="0"></option>#}
{#    <option {% if member_obj.member_hy == '1' %}selected{% endif %} value="1"></option>#}
{#    </select>#}
{#    </div>#}
{#    </li>#}
    <li><label>&nbsp;</label><input name="dosubmit" type="button" class="btn" value="提交" id="submitBtn"></li>

{#    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="dosubmit" value="提交"/></li>#}


    </ul>

    </div> 
       
    </div> 
 
    </div>
</form>

</body>

</html>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script>
    $(document).ready(function () {
        $("#submitBtn").click( function () {
            // 点击事件
            $.post("/back/member/add/",$('form').serialize() , function (data) {
                //LoginName,Password,code
                if (data['s'] == 1) {
                    layer.msg(data['info']);
                    // 跳转主页面
                    return false
                } else {
                    //登陆失败
                    layer.msg(data['info']);
                }
                return false;
                }, "json");

        })
    })
</script>

转载于:https://www.cnblogs.com/person1-0-1/p/11390911.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 将 Vue-element-admin 与 Django 后台对接需要进行以下步骤: 1. 编写 Django 后台 API 接口,提供数据交互服务; 2. 在 Vue-element-admin 中安装 Axios,用于向后台发送请求; 3. 在 Vue-element-admin 中编写与后台 API 对接的代码; 4. 在 Vue-element-admin 中使用前端路由(vue-router)跳转到对应页面。 具体操作步骤如下: 1. 编写 Django 后台 API 接口 在 Django 中编写后台 API 接口,提供数据交互服务。可以使用 Django REST framework 来快速构建 RESTful API。 2. 安装 Axios 在 Vue-element-admin 中安装 Axios,可以使用以下命令: ``` npm install axios ``` 3. 编写与后台 API 对接的代码 在 Vue-element-admin 中编写与后台 API 对接的代码,可以使用 Axios 发送请求,例如: ``` import axios from 'axios' export default { // 获取用户列表 getUsers() { return axios.get('/api/user/') }, // 创建用户 createUser(user) { return axios.post('/api/user/', user) }, // 删除用户 deleteUser(id) { return axios.delete(`/api/user/${id}/`) } } ``` 4. 使用前端路由跳转到对应页面 在 Vue-element-admin 中使用前端路由(vue-router)跳转到对应页面,例如: ``` import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Dashboard', component: () => import('@/views/dashboard/index') }, { path: '/user', name: 'User', component: () => import('@/views/user/index') }, { path: '/user/create', name: 'CreateUser', component: () => import('@/views/user/create') }, { path: '/user/:id/edit', name: 'EditUser', component: () => import('@/views/user/edit') } ] }) ``` 以上就是将 Vue-element-admin 与 Django 后台对接的基本步骤,具体实现还需要根据具体需求进行调整。 ### 回答2: Vue-element-admin是一个基于Vue.js和Element UI开发的后台管理系统框架,而Django是一个基于Python的Web开发框架。对接Vue-element-admin和Django后台,需要以下几个步骤: 1. 了解Vue-element-admin的架构和功能:首先需要熟悉Vue-element-admin的组件和页面结构,了解其提供的基本功能和接口。 2. 安装Django并配置数据库:在Django中创建一个新的项目,并配置好数据库信息,确保Django与数据库的连接正常。 3. 创建Django的URL和路由:根据Vue-element-admin的路由规则,在Django中创建对应的URL和路由,用于响应前端请求。 4. 编写Django的视图函数:编写Django的视图函数,处理前端请求并返回相应的数据。可以根据需要,操作数据库、调用其他后台服务等。 5. 前后端数据交互:根据Vue-element-admin的接口规范,与Django进行数据交互。可以使用axios库发送请求,同时使用Django的序列化器将数据转化为JSON格式返回给前端。 6. 数据权限控制:在Vue-element-admin中,可以根据用户权限动态显示菜单和路由。可以在Django中实现相应的权限控制逻辑,根据用户角色或权限限制相应的数据访问。 7. 进行前后端联调和测试:在前后端对接完成后,通过联调和测试确保系统的正常运行。可以使用开发者工具进行调试,在两端之间传递数据并检查返回结果。 总结起来,对接Vue-element-admin和Django后台,需要根据Vue-element-admin的组件和路由规则,在Django中进行相应的配置和编码,实现前后端的数据交互和权限控制。通过以上步骤,可以构建一个完整的Vue-element-admin后台管理系统,使用Django作为后台支持。 ### 回答3: vue-element-admin 是一个基于 Vue.js 和 Element UI 的后台管理系统模板。而 Django 是一个使用 Python 编写的高级 Web 开发框架。 对接 vue-element-admin 和 Django 后台的过程中,需要进行以下几个步骤: 1. 安装和配置 vue-element-admin 和 Django 工程。 - 首先,在本地搭建好 Django 工程,确保能够正常运行。 - 然后,在 vue-element-admin 的基础上建立 Vue.js 工程,配置好相关依赖。 - 将 Django 与 vue-element-admin 的工程整合在一起,确保两者可以同时运行。 2. 定义接口和数据交互方式。 - 在 Django 的工程中,根据需求定义后台接口,用于前后台数据的交互。 - 在 vue-element-admin 的工程中,使用 axios 等ajax库,通过 HTTP 请求与 Django 后台进行数据交互。 3. 配置路由和权限控制。 - 在 Django 的工程中,配置好路由,将前端请求映射到对应的后端视图函数。 - 在 vue-element-admin 的工程中,配置好前端路由,确保前端页面可以正确访问,并实现权限控制策略。 4. 前后台数据的处理和展示。 - 在 vue-element-admin 的工程中,通过获取 Django 后台的数据,对数据进行处理和展示。 - 可以使用 vue.js 的组件化开发思想,将数据展示和页面交互的逻辑进行拆分和重复利用。 通过以上步骤的对接,vue-element-admin 和 Django 后台可以实现前后台的数据交互、权限控制和页面展示。以此来构建一个完整的后台管理系统。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值