通过django搭建一个简易的web页面（实现数据的查询、添加、修改、删除）

一、创建django项目

　　通过命令创建：

　　django-admin startproject 项目名称

　　创建app应用

　　python3 manage.py startapp 应用名　　　　#这里manage.py是创建完成django项目后产生的文件

　　到此步基础的创建完成，

　　把新增的app应用添加到配置文件中去

　　命令行创建django项目没有templates文件夹，这个文件夹是存放html文件的

　　手动创建一个templates文件夹，把这个文件夹添加到配置文件中去

　　到这里就可以启动django项目了

准备：

　　1、需要提前创建好数据库，设置好表格字段，迁移生成数据库表（ORM）

　　　1.1、修改现有数据库连接方式，修改settings文件：　

DATABASES = {

    'default': {

        'ENGINE': 'django.db.backends.mysql',

        'NAME': 'book_system',

        'HOST': '192.168.100.100',

        'PORT': '',

        'USER': 'root',

        'PASSWORD': 'root'

    }

}

　　　1.2、在__init__.py文件中添加：　

import pymysql

pymysql.install_as_MySQLdb()

　　　1.3、在app应用目录中的models.py文件中添加生成数据库表格字段的语句内容：

from django.db import models

# Create your models here.

class User(models.Model):

    id=models.AutoField(primary_key=True)

    # 定义varchar字段

    username=models.CharField(max_length=32)

    password=models.CharField(max_length=32)

    def __str__(self):

    return self.username

　　1.4、数据库迁移

#执行命令，将数据库中的变动记录到一个文件中去

python3 manage.py makemigrations

# 将数据库变动同步到数据库中

python3 manage.py migrate

　　1.4.1、记录数据库中变动记录的文件：

　　1.5、查看数据库中表是否创建完成，字段是否正确：

　　2.1、设置静态文件

　　　　html页面引入外部资源的两种方式

　　　　　　通过cdn方式在线获取

　　　　　　使用本地static目录中存放的外部资源

　　　　创建一个static文件夹，把bootstrap程序放到次目录中去，也可以不放，使用cdn在线获取

静态文件配置

STATIC_URL = '/static/'

# 静态文件配置

STATICFILES_DIRS = [

    os.path.join(BASE_DIR,'static')

]

# 暴露给外界能够访问服务器静态文件夹下面所有的资源

STATIC_URL = '/xxx/'  # 接口前缀 跟你的静态文件夹的名字一点关系都没有

# 默认情况下这个前缀跟静态文件夹名字一样！！！

# 静态文件配置

STATICFILES_DIRS = [

    os.path.join(BASE_DIR,'static'),  # 就是你的静态文件夹路径

    os.path.join(BASE_DIR,'static1'),

    os.path.join(BASE_DIR,'static2')

]

# ps:会依次查找列表中所有的静态文件路径 找到的话立刻停止，都没有找到返回404

二、通过django做一个登录功能

　　　views文件加入模块

　　HttpResponse:返回字符串
　　render:返回html并且支持模板渲染
　　redirect:重定向
   　　　　既可以重定向到别人的网址也可以定向到自己的

　　1.1、设置urls路径：　　　　

　　url(r'^login/', views.login),
　　1.2、根据路径需要在哎views.py文件中创建login函数

def login(request):

    if request.method=='POST':

        username = request.POST.get('username')  # 获取前台提交的用户

        password = request.POST.get('password')  # 获取前台提交的密码

        user_list=models.User.objects.filter(username=username,password=password).first()

        print(user_list)

        if user_list:

            return HttpResponse('登录成功')

    return render(request, 'login.html')
======================================================================================================
下面这些是介绍：

def login(request):
    print(request.method)  # 查看用户获取的请求方式是get还是post请求
    if request.method == 'POST':
        username = request.POST.get('username')  # 获取前台提交的用户
        password = request.POST.get('password')  # 获取前台提交的密码
        conn = pymysql.connect(
            host='192.168.100.100',
            port=3306,
            user='root',
            password='root',
            database='book_system',
            charset='utf8',
            autocommit=True
        )
        cursor = conn.cursor(pymysql.cursors.DictCursor)
        cursor.execute('select * from userinfo where username=%s and password=%s',(username, password))
        user_info = cursor.fetchall()
        if user_info:
            return HttpResponse('登录成功')
    return render(request,'login.html')
    # if request.method == 'GET':
    #     return render(request, 'login.html')
    # # get请求传递值获取和post方式一样，单个用get，多个用getlist
    # elif request.method == 'POST':
        # <QueryDict: {'username': ['test1', 'test2', 'test3'], 'password': ['1111111111111']}>
        # print(request.POST)
        # print(request.POST.get('username')) # 只会获取最后一个值test3
        # print('=======================')
        # print(request.POST.getlist('username')) # 全部获取列表的形式展示出来['test1', 'test2', 'test3']

===========================================================================================================

　　这里需要调用到login.html文件，在templates中设置login.html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <scrip src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></scrip>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <div class="row">

        <h1>登录页面</h1>

        <div class="col-md-6 col-md-offset-3">

            <form action="" method="post">  {# from表单默认是get请求，修改为post请求}

                <p>username:<input type="text" class="form-control" name="username"></p>

                <p>password:<input type="password" class="form-control" name="password"></p>

                <input type="submit" class="btn btn-success">

            </form>

        </div>

    </div>

</div>

</body>

</html>

　　form表单触发提交数据的动动作两种方式：

<input type="submit">

<button></button>

　　form提交数据的地址如何指定及方式?
   action属性控制提交的地址
   方式:
      1.全路径
         <form action="http://127.0.0.1:8000/login/">
      2.只写路径后缀
         <form action="/login/">
      3.不写 (默认往当前路径提交)
   form表单默认是get请求

三、查看数据

def userlist(request):

    # 获取数据库用户数据

    user_list=models.User.objects.all()　　#获取数据库中所有数据

    # print(user_list.query)  # 只要是queryset对象就可以获取当前queryset对象的语句

    # for user_obj in user_list:

    #     print(user_obj.pk,user_obj.username)

    return render(request,'userlist.html',locals())    #locals() 把本地的参数传递过去

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="container">

    <div class="row">

    <h1>数据展示</h1>

        <div class="col-md-8 col-md-offset-2">

        <a href="/reg/" class="btn btn-success">添加数据</a>

            <table class="table-hover table table-bordered table-striped">

                <thead>

                    <tr>

                        <th>id</th>

                        <th>username</th>

                        <th>password</th>

                        <th>功能</th>

                    </tr>

                </thead>

                <tobdy>

                    {% for foo in user_list %} {# user_list类似列表对象 #}　　#循环打印数据库中获取到的数据

                        <tr>

                            <td>{{ foo.pk }}</td>　　#pk显示的是数据库的主键

                            <td>{{ foo.username }}</td>

                            <td>{{ foo.password }}</td>

                            <td>

                                <a href="/edit/?edit_id={{ foo.pk }}" class="btn btn-success">编辑</a>　　#定义一个编辑模块，设置一个把参数通过get连接的方式传递，

　　　　　　　　　　　　　　　　　　　　#定义一个删除模块，设置一个把参数通过get连接的方式传递，

　　　　　　　　　　　　　　　　　　　<a href="/delete_user/?delete_id={{ foo.pk }} " class="btn btn-danger">删除</a>

</td> </tr> {% endfor %} </tobdy> </table> </div> </div> </div> </body> </html>

四、新增数据：

# views.py

def reg(request):

    if request.method == 'POST':

        username=request.POST.get('username')

        password=request.POST.get('password')

        # 操作数据库插入数据

        #方式一

        # user_obj=models.User.objects.create(username=username,password=password)

        user_obj=models.User(username=username,password=password)

        user_obj.save() # 调用save方法保存数据到数据库

        print(user_obj.pk)  # 获取主键值

        print(user_obj.username)    # 获取用户账号

        print(user_obj.password)    # 获取密码

        # return HttpResponse('注册成功')

        return redirect('/userlist/')

    return render(request,'reg.html')

<! reg.html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <scrip src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></scrip>

    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <div class="row">

        <h1>注册页面</h1>

        <div class="col-md-8 col-md-offset-2">

            <form action="" method="post">

                <p>用户名:<input type="text" class="form-control" name="username"></p>

                <p>密码:<input type="password" class="form-control" name="password"></p>

                <input type="submit" class="btn btn-success">

            </form>

        </div>

    </div>

</div>

</body>

</html>

五、删除数据功能：

def delete_user(request):

    delete_id=request.GET.get('delete_id')

    # res=models.User.objects.filter(id=delete_id).first()    #查看首条数据

    models.User.objects.filter(id=delete_id).delete()   # 删除数据

    return redirect('/userlist/')

    return HttpResponse('删除')

=====================================================

# models.User.objects.filter(id=1).delete()  # 会将queryset所有的数据对象全部删除

六、编辑数据，在编辑模块中需要用到之前数据中的主键，通过查看数据页面中编辑按钮，把主键参数传递过来

def edit(request):

    #判断请求模式

    if request.method == 'POST':

        print(request.POST)

        username=request.POST.get('username')

        password=request.POST.get('password')

        edit_id=request.POST.get('edit_id')　　#这里的id主键通过查看数据页面中编辑按钮传递过来

        # 更新数据库

        models.User.objects.filter(id=edit_id).update(username=username,password=password)

        return redirect('/userlist/')　　#更新完成后重定向页面到查看列表页面

    # 获取用户想要修改的用户id

    edit_id = request.GET.get('edit_id')

    # 将该数据查询出来进行渲染

    # 查案数据方式一

    user_query=models.User.objects.filter(id=edit_id).first()

    # 查询数据方式2

    # user_obj=models.User.objects.get(id=edit_id)

    # print(user_obj,type(user_obj))

    # 将当前数据渲染到页面上去

    return render(request,'edit.html',locals())
========================================================================
#以下仅为介绍：

编辑对象的id的获取方式
方式1:利用input隐藏一个标签
<input type="hidden" name="edit_id" value="{{ user_obj.pk }}">
方式2:
<form action="/edit/?edit_id={{ user_obj.pk }}" method="post">

注意:queryset对象点修改 删除 会作用于对象内部所有的数据对象  类似于批量操作
方式1:
models.User.objects.filter(id=edit_id).update(name=username,password=password)
方式2:获取到当前数据对象
user_obj = models.User.objects.filter(id=edit_id).first()
user_obj.name = username
user_obj.save()
=======================================================================

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<div class="container">

    <div class="row">

        <h1>删除数据</h1>

        <div class="col-md-6 col-md-offset-3">

            <form action="" method="post">

                <input type="hidden" name="edit_id" value="{{ user_query.pk }}">

                <p>username:<input type="text" name="username" value="{{ user_query.username }}" class="form-control"></p>

                <p>password:<input type="text" name="password" value="{{ user_query.password }}" class="form-control"></p>

                <input type="submit" class="btn btn-success">

            </form>

        </div>

    </div>

</div>

</body>

</html>

通过django搭建一个简易的web页面（实现数据的查询、添加、修改、删除）的更多相关文章

如何搭建一个简易的 Web Terminal（一）
前言在介绍本篇文章的时候,先说一下本篇文章的一些背景.笔者是基于公司的基础建设哆啦 A 梦(Doraemon)一些功能背景写的这篇文章,不了解.有兴趣的同学可以去袋鼠云的 github 下面了解 ...
用django搭建一个简易blog系统（翻译）（一）
Django 入门原始网址: http://www.creativebloq.com/netmag/get-started-django-7132932 代码:https://github.com/ ...
用django搭建一个简易blog系统（翻译）（二）
03. Starting the blog app 在这部分,将要为你的project创建一个blog 应用,通过编辑setting.py文件,并把它添加到INSTALLED_APPS. 在你的命令行 ...
用django搭建一个简易blog系统（翻译）（四）
12. Create the templates 你需要做三件事来去掉TemplateDoesNotExist错误第一件,创建下面目录 * netmag/netmag/templates * net ...
python django搭建一个简易博客的解析（按照文件顺序逐一讲解）
上次讲解了一下各py文件的内容,但比较乱,所以这次整理了一个顺序版. 源代码请在http://github/Cheng0829/mysite自行下载 mysite: db.sqlite3:数据库文件. ...
用django搭建一个简易blog系统（翻译）（三）
06. Connecting the Django admin to the blog app Django 本身就带有一个应用叫作Admin,而且它是一个很好的工具在这一部分,我们将要激活admi ...
Angularjs,WebAPI 搭建一个简易权限管理系统
Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一) 1. 目录前言 Angularjs名词与概念权限系统原型权限系统业务数据库设计和实现 Web ...
express + mongodb 搭建一个简易网站（四）
express + mongodb 搭建一个简易网站 (四) 目前网站整体页面都已经能全部展示了,但是,整个网站还有两个块需要做完才能算完整,一个连接数据库,目前网站上的数据都是抓取的本地假数据,所以 ...
express + mongodb 搭建一个简易网站(二)
express + mongodb 搭建一个简易网站 (二) 在搭建网站(一)中,实现了简单的路由功能,这离一个完整的网站还差的有点远,继续撸代码吧. 1.首先在根目录下新建一个views文件夹,用来 ...

随机推荐

PHP0003：PHP基础2
die表示结束,程序到此运行不过来了. 字符串比较是挨个比较
webservice之Http传输错误问题
1.背景:调用第三方webservice服务,正常调用,但是最近由于第三方更换远程调用地址,并且发布服务器(A)是通过代理的方式请求真实服务器地址(B),于是本以为很简单的将客户端调用地址修改为发布地 ...
使用Docker镜像安装saltshaker
要求 Saltstack < 2019 Python >= 3.6 Mysql >= 5.7.8 (支持Json的Mysql都可以) Redis(无版本要求) RabbitMQ (无 ...
JAVA8对象属性的计算
Men men = new Men(); men.setName("UU"); men.setAge("56"); Men men1 = new Men(); ...
youhua
野路子码农系列（8）我终于大致搞懂了GBDT
由于下下周要在组里介绍一个算法,最近开始提前准备,当初非常自信地写下自己最喜欢的GBDT,但随着逐步深入,发现其实自己对这个算法的细节并不是非常了解,了解的只是一些面试题的答案而已……(既然没有深入了 ...
Blue Jeans[poj3080]题解
题目 Description - The Genographic Project is a research partnership between IBM and The National Geog ...
手写数字识别——利用keras高层API快速搭建并优化网络模型
在<手写数字识别——手动搭建全连接层>一文中,我们通过机器学习的基本公式构建出了一个网络模型,其实现过程毫无疑问是过于复杂了——不得不考虑诸如数据类型匹配.梯度计算.准确度的统计等问题,但 ...
0005 uwsgi配置
在配置文件目录Configurations下创建一个名为uwsgi.ini的文件,用于uwsgi服务配置. uwsgi在服务器上使用,接收nginx的转发请求. 内容如下: # 配置文件:这一行必须有 ...
辣些数据结构的思维题（思维题好难一个都不会TAT）
洛谷P1268 树的重量我觉得难点在于把每个叶子节点想象成分出来的叉然后如果c是a--b这条边上分出来的,可以通过Dab,Dca,Dcb算出分叉边的长度, 长度=(Dac+Dbc-Dab)/2 怎 ...

通过django搭建一个简易的web页面（实现数据的查询、添加、修改、删除）

通过django搭建一个简易的web页面（实现数据的查询、添加、修改、删除）的更多相关文章

随机推荐

热门专题