zoukankan      html  css  js  c++  java
  • 用django 写个用户管理页面

    1. 新建一个app01

    python manage.py startapp app01
    
    
    1 # 在 project 在外层 urls 的配置:
    
    from django.contrib import admin
    from django.urls import path
    from django.conf.urls import url,include
    #from . import views
    from app01 import views
    
    
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        # 访问 cmdb 时候匹配到 app01 的url
        url(r'^cmdb/', include("app01.urls")),
        url(r'^monitor/', include("app02.urls")),
    ]
    
    
    2 # 配置settings.py 文件
    
    MIDDLEWARE = [
        'django.middleware.security.SecurityMiddleware',
        'django.contrib.sessions.middleware.SessionMiddleware',
        'django.middleware.common.CommonMiddleware',
        #'django.middleware.csrf.CsrfViewMiddleware',  #注释这样,用来解决跨域问题
        'django.contrib.auth.middleware.AuthenticationMiddleware',
        'django.contrib.messages.middleware.MessageMiddleware',
        'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ]
    
    # 配置数据库连接
    DATABASES = {
        'default': {
            #'ENGINE': 'django.db.backends.sqlite3',
            #'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
            'ENGINE': 'django.db.backends.mysql',    # 数据库引擎
            'NAME': 'project2', # 数据库名称
            'HOST': '192.168.0.90', # 数据库地址,本机 ip 地址 127.0.0.1
            'PORT': 3306, # 端口
            'USER': 'cs',  # 数据库用户名
            'PASSWORD': 'cs123',
            'OPTIONS': {
                'isolation_level': "repeatable read",
            },
        }
    }
    
    # 配置静态文件位置
    
    STATIC_URL = '/static/'
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, 'static'),
    )
    
    
    
    3 #  project 的 __init__.py  修改mysql 信息 
    
    import  pymysql
    
    pymysql.install_as_MySQLdb()
    

    2. 编写app01 的models 文件

    from django.db import models
    
    # Create your models here.
    
    class  UserGroup (models.Model):
        uid = models.AutoField(primary_key=True)
        caption = models.CharField(max_length=32,unique=True)
        ctime = models.DateTimeField(auto_now_add=True, null=True)
        uptime = models.DateTimeField(auto_now=True, null=True)
       
    
    class UserInfo (models.Model):
        username = models.CharField(max_length=32)
        password = models.CharField(max_length=32)
    
    
    # 会在 mysql 里面生成这两张表
    

     3 . 编写app01 的 views.py 文件

         实现通过页面查询查询、删除、修改功能

    from django.shortcuts import render,HttpResponse,redirect
    from django.views import View
    from app01 import models
    #class Home(View):
    
    
    def detail(request, nid):
        detail_info = USER_DICT[nid]
        #obj = models.UserInfo.objects.filter(id=nid).first()
         
        return render(request, 'detail.html', {'obj': detail_info})
    
    def index(request):
        return render(request, 'index.html')
    
    def user_info(request):
        if request.method == "GET":
            user_list = models.UserInfo.objects.all()
    
            #group_list = models.UserGroup.objects.all()
    
            return render(request, 'user_info.html', {'user_list': user_list})
        elif request.method == 'POST':
            u = request.POST.get('user')
            p = request.POST.get('pwd')
            models.UserInfo.objects.create(username=u, password=p)
            return redirect('/cmdb/user_info/')
    
    def user_detail(request, nid):
        obj = models.UserInfo.objects.filter(id=nid).first()
        
        return render(request, 'user_detail.html', {'obj': obj})
    
    def user_del(request, nid):
        models.UserInfo.objects.filter(id=nid).delete()
        return redirect('/cmdb/user_info/')
    
    def user_edit(request, nid):
        if request.method == "GET":
            obj = models.UserInfo.objects.filter(id=nid).first()
            return render(request, 'user_edit.html',{'obj': obj})
        elif request.method == "POST":
            nid = request.POST.get('id')
            u = request.POST.get('username')
            p = request.POST.get('password')
            models.UserInfo.objects.filter(id=nid).update(username=u,password=p)
            return redirect('/cmdb/user_info/')
    
    
    
    

      

    4. 编写html 页面

      4.1  user_info.html 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    body{
    margin: 0;
    }
    .menu{
    display: block;
    padding: 5px;
    ">darkgreen;

    }
    </style>
    </head>
    <body>
    <div style="height: 48px;">black;color: white">
    userinfo
    </div>
    <div>
    <div style="position: absolute;top:48px;bottom: 0;left: 0; 200px;">lightblue;">
    <a class="menu" href="/cmdb/user_info/">用户管理</a>
    <a class="menu" href="/cmdb/user_group/">用户组管理</a>
    </div>
    <div style="position:absolute;top:48px;left: 210px;bottom: 0;right: 0;overflow: auto">

    <h3>添加用户</h3>
    <form method="POST" action="/cmdb/user_info/">
    <input type="text" name="user" />
    <input type="text" name="pwd" />

    <select name="group_id">
    {% for item in group_list %}
    <option value="{{ item.uid }}">{{ item.caption }}</option>
    {% endfor %}
    </select>

    <input type="submit" value="添加"/>
    </form>

    <h3>用户列表</h3>
    <ul>
    {% for row in user_list %}
    <li>
    <a href="/cmdb/userdetail-{{ row.id }}/">{{ row.username }}</a> |
    <span> {{ row.user_group.caption }} </span>
    <a href="/cmdb/userdel-{{ row.id }}/">删除</a> |
    <a href="/cmdb/useredit-{{ row.id }}/">编辑</a>
    </li>
    {% endfor %}
    </ul>
    </div>

    </div>

    </body>
    </html>

     4.2 用户编辑 user_edit.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
            }
            .menu{
                display: block;
                padding: 5px;
    
            }
        </style>
    </head>
    <body>
        <div style="height: 48px;background-color: black;color: white">
            用户编辑
        </div>
        <div>
            <div style="position: absolute;top:48px;bottom: 0;left: 0; 200px;background-color: brown;">
                <a class="menu" href="/cmdb/user_info/">用户管理</a>
                <a class="menu" href="/cmdb/user_group/">用户组管理</a>
            </div>
            <div style="position:absolute;top:48px;left: 210px;bottom: 0;right: 0;overflow: auto">
    
                <h1>编辑用户</h1>
                <form method="post" action="/cmdb/useredit-{{ obj.id }}/">
                    <input style="display: none" type="text" name="id" value="{{ obj.id }}" />
                    <input type="text" name="username" value="{{ obj.username }}" />
                    <input type="text" name="password" value="{{ obj.password }}"/>
                    <input type="submit" value="提交" />
                </form>
            </div>
    
        </div>
    
    </body>
    </html>
    

      4.3  用户详细信息 user_detail.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: 0;
            }
            .menu{
                display: block;
                padding: 5px;
    
            }
        </style>
    </head>
    <body>
        <div style="height: 48px;background-color: black;color: white">
            user-detail
        </div>
        <div>
            <div style="position: absolute;top:48px;bottom: 0;left: 0; 200px;background-color: brown;">
                <a class="menu" href="/cmdb/user_info/">用户管理</a>
                <a class="menu" href="/cmdb/user_group/">用户组管理</a>
            </div>
            <div style="position:absolute;top:48px;left: 210px;bottom: 0;right: 0;overflow: auto">
    
                <h1>用户详细信息</h1>
    
                <h5>{{ obj.id }}</h5>
                <h5>{{ obj.name }}</h5>
                <h5>{{ obj.password }}</h5>
    
            </div>
    
        </div>
    

      

    5.  效果验证

     点击删除 会把用户删除 ,点击用户名字 显示 用户的id 和密码信息

     

     编辑

  • 相关阅读:
    Tomcat报错:Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/JFreeChartTest]]
    Md5 加密,加盐值
    ajax 分页 步骤和代码
    【每天学习一点点】numpy中的reshape中参数为-1
    smali文件语法参考
    google zxing 二维码扫描(android client分析)
    cygwin编译ffmpeg移植到android平台问题集锦
    Sequoyah 本机开发Native Development: Invalid path for NDK(路径无效) 解决方案
    优化模式--数据局部性
    程序猿,你也配吃10元的盒饭?
  • 原文地址:https://www.cnblogs.com/yyselisa/p/13477236.html
Copyright © 2011-2022 走看看