jquery制作简单的网页西安网站建设优化

Django项目入门二

目录

1.修改部门数据

2.新增员工数据

3.修改员工数据

4.删除员工数据

一、修改部门数据

上一篇文章, 我们只剩下修改功能没有做了, 那在这篇文章, 我们给它补上。

在做之前, 我们需要对views.py文件进行调整, 由于我们考虑到有部门信息和员工信息, 如果都写在一块的话, 将来肯定会弄混, 所以我们把部门的views改为depart.py, 员工的views改为user.py。

新建文件夹views, 把views.py拖进views文件夹里面, 并改名为depart.py, 同时再新建一个user.py文件。

然后urls.py文件里面的代码也有所变化:

urls.py:

"""project_simple URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views1. Add an import:  from my_app import views2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views1. Add an import:  from other_app.views import Home2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf1. Import the include() function: from django.urls import include, path2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from project_one.views import depart, userurlpatterns = [# path('admin/', admin.site.urls),path("", depart.index),path("depart/", depart.depart),path("depart/add/", depart.add_depart),path("depart/<int:nid>/modify/", depart.depart_modify),path("depart/<int:nid>/del/", depart.del_depart)
]

我们可以发现, 原本是from project_one import views, 后来变成了

我们在项目里面的app里面的templates文件夹里面创建depart_modify.html文件。from project_one.views import depart, user

在path函数里面, 后面的views.xxx, 变成了depart.xxx, 之后如果有员工信息操作的话, 就是user.xxx。

接下来, 我们需要在templates里面的depart那里创建depart_modify.html文件:

depart_modify.html代码:

{% extends "index/model_tmp.html" %}{% block content %}<div class="container"><h1>修改数据</h1><form method="post">{% csrf_token %}<input type="text" class="form-control" name="title" placeholder="{{ name.title }}"><button type="submit" class="btn btn-success">修改</button></form></div>
{% endblock %}

页面和上一篇文章的添加是差不多的。但是功能实现方面会有所不同, 不过也有相似之处。

我们打开depart.py:

depart.py代码:

from django.shortcuts import render, redirectfrom project_one import models# Create your views here.
def index(request):return render(request, "index/index.html")def depart(request):data_list = models.Department.objects.all()return render(request, "depart/depart.html", {"data_list": data_list})def add_depart(request):if request.method == "GET":title = "添加信息"name = "请输入部门名称"return render(request, "depart/depart_add_modify.html", {'title': title, "name": name})title = request.POST.get("title")models.Department.objects.create(title=title)return redirect("/depart/")# 修改功能代码块
def depart_modify(request, nid):if request.method == "GET":name = models.Department.objects.filter(id=nid).first()print(name.title)return render(request, "depart/depart_modify.html", {"name": name})title = request.POST.get("title")models.Department.objects.filter(id=nid).update(title=title)return redirect("/depart/")def del_depart(request, nid):models.Department.objects.filter(id=nid).delete()return redirect("/depart/")

name = models.Department.objects.filter(id=nid).first()这行代码, 是找到对应要修改的那行数据的部门表的信息(对应哪行, 具体看id的值), 当然这行代码, 是用于先获取原来的部门信息, 进入修改界面后, 在输入框以灰色文字显示, 就代表我要修改哪一行部门数据, 这样就不会搞混, 我们如果想看到部门信息, 那我们需要name.title, 这个title是部门表的一个字段, 这个字段用于存储部门信息的(在前端里面input输入框里面的placeholder里面就用到name.title)。

urls.py:

"""project_simple URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views1. Add an import:  from my_app import views2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views1. Add an import:  from other_app.views import Home2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf1. Import the include() function: from django.urls import include, path2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from project_one.views import depart, userurlpatterns = [# path('admin/', admin.site.urls),path("", depart.index),path("depart/", depart.depart),path("depart/add/", depart.add_depart),path("depart/<int:nid>/modify/", depart.depart_modify),path("depart/<int:nid>/del/", depart.del_depart)
]

其实, 我们也可以将添加和修改, 给它们两结合在一起。

我在templates里面新建一个depart_add_modify.html文件:

depart_add_modify.html代码:

{% extends "index/model_tmp.html" %}{% block content %}<div class="container"><h1>{{ title }}</h1><form method="post">{% csrf_token %}<input type="text" class="form-control" name="title" placeholder="{{ name.title }}"><button type="submit" class="btn btn-success">提交</button></form></div>
{% endblock %}

depart.py的depart_modify那个函数稍作修改, 大体逻辑差不多, 然后我们也可以修改新增数据的函数。

depart.py更新后代码:

from django.shortcuts import render, redirectfrom project_one import models# Create your views here.
def index(request):return render(request, "index/index.html")def depart(request):data_list = models.Department.objects.all()return render(request, "depart/depart.html", {"data_list": data_list})def add_depart(request):if request.method == "GET":title = "添加信息"name = "请输入部门名称"return render(request, "depart/depart_add_modify.html", {'title': title, "name": name})title = request.POST.get("title")models.Department.objects.create(title=title)return redirect("/depart/")def depart_modify(request, nid):if request.method == "GET":title = "修改信息"name = models.Department.objects.filter(id=nid).first()print(name.title)return render(request, "depart/depart_add_modify.html", {'title': title, "name": name})title = request.POST.get("title")models.Department.objects.filter(id=nid).update(title=title)return redirect("/depart/")def del_depart(request, nid):models.Department.objects.filter(id=nid).delete()return redirect("/depart/")

运行:

点击部门页面:

我们随便选择一个部门进行修改(比如说修改医疗部):

我们可以看到输入框里面的灰色文字(这个灰色文字就是我们要修改这行部门信息之前的内容), 就是我们要修改第三行的医疗部的内容, 我们可以在输入框里面输入新的部门信息(比如急诊部)。

然后点击提交。

我们可以发现, 原来的急诊部, 成功修改为急诊部。

二、新增员工数据

在templates下面, 新增user文件夹, 然后里面创建user_add.html文件

user_add.html代码:

{% extends "index/model_tmp.html" %}
{% load static %}{% block css %}<link rel="stylesheet" href="{% static 'css/layui.css' %}">
{% endblock %}{% block content %}<div class="container"><h1>添加信息</h1><form method="post">{% csrf_token %}<div class="form-group"><label for="exampleInputEmail1">姓名</label><input type="text" name="name" class="form-control" placeholder="请输入姓名"></div><div class="form-group"><label for="exampleInputEmail1">年龄</label><input type="text" name="age" class="form-control" placeholder="请输入年龄"></div><div class="form-group"><label for="exampleInputEmail1">性别</label><select name="gender" class="form-control">{% for item in gender_choices %}<option value="{{ item.0 }}">{{ item.1 }}</option>{% endfor %}</select></div><div class="form-group"><label for="exampleInputEmail1">收入</label><input type="text" name="salary" class="form-control" placeholder="请输入收入"></div><div class="form-group"><label for="exampleInputEmail1">入职时间</label><input type="text" name="dtime" id="d_time" class="form-control" placeholder="请输入入职时间"></div><div class="form-group"><label for="exampleInputEmail1">部门</label><select name="depart" class="form-control">{% for item in depart_list %}<option value="{{ item.id }}">{{ item.title }}</option>{% endfor %}</select></div><button type="submit" class="btn btn-success">提交</button></form></div>
{% endblock %}{% block js %}<script src="{% static "js/layui.js" %}"></script><script>layui.use(function () {var laydate = layui.laydate;// 渲染laydate.render({elem: '#d_time'});});</script>
{% endblock %}

同样也是继承了model_tmp.html。

这里需注意:

1.load static必须在继承后面, 否则会出错。

2.我们这里引用了layui组件, layui的网址url: https://layui.dev/, 这个是为了之后网页展示页面内容的时候, 需要用到layui的样式, 进入网址后点击直接下载按钮。

下载好是个压缩包

解压缩后, 里面有font, css两个文件夹, 还有个js文件, 这个需要进去文件夹里面还有个layui文件夹那里面在点进去,

我们打开css文件夹, 里面有layui.css文件。

这个文件, 和我们之前引入的bootstrap文件不冲突, 所以可以直接放入django项目中的static文件夹里面的css文件夹里面。

同样的, 把font直接放入static文件里面, 因为之前bootstrap引入的fonts和layui的font不冲突。

同理, 把layui.js放入static里面的js文件夹下面。(操作和上面一样, 这里我们不再赘述)。

然后我们需要在load static 后面写入以下代码:

{% block css %}<link rel="stylesheet" href="{% static 'css/layui.css' %}">
{% endblock %}

这个就是引入layui里面的css资源。

然后我们也需要引入layui里面的js资源。

代码:

{% block js %}<script src="{% static "js/layui.js" %}"></script><script>layui.use(function () {var laydate = layui.laydate;// 渲染laydate.render({elem: '#d_time'});});</script>
{% endblock %}

第二个script标签里面的elem: ‘#d_time’, 这个elem里面写的是一个id值, 就是绑定代码中的员工入职时间那个输入框, 当我们点击那栏输入框的时候, 会出现时间表。

<div class="form-group">
<label for="exampleInputEmail1">入职时间</label>{# 这个id就是d_time #}<input type="text" name="dtime" id="d_time" class="form-control" placeholder="请输入入职时间">
</div>

3.性别和部门这两栏, 比较特殊, 利用了下拉选择的形式去填写数据, 由于我们知道性别是smallint类型, 但是我们在网页的页面中要展示文字, 所以我们需要在option组件里面的value写入smallint的数值, 然后再标签的中间写入文字数据。

<select name="gender" class="form-control">{% for item in gender_choices %}<option value="{{ item.0 }}">{{ item.1 }}</option>{% endfor %}
</select>

这个gender_choices就是后端user.py里面的user_add函数里面传进来的参数, 之后会写道。（后端的gender_choices为元组, (1: “男”), (2: “女”)）, 所以再value里面写item.0, 代表提取元组里面的1和2数字, 再option标签中间写入{{ item.1 }}, 代表写入元组后面的男和女这样的值。

部门信息填写也是同理:

<select name="depart" class="form-control">{% for item in depart_list %}<option value="{{ item.id }}">{{ item.title }}</option>{% endfor %}
</select>

部门信息是部门的id号和部门进行对应, depart_list是部门信息列表, 里面有id和title两个字段, 我们存放数据到数据库的时候, 存放进去的是id号, 但是我们再页面展现的时候, 需要展现文字(哪个部门)。

同时我们也不能忘记员工展示的页面。

user_list(员工展示页面):

{% extends "index/model_tmp.html" %}{% block content %}<div class="container"><a href="/user/add/" class="btn btn-success">添加信息</a><div class="panel panel-danger"><div class="panel-heading"><h3 class="panel-title">部门表</h3></div><div class="panel-body"><table class="table table-hover"><thead><tr><th>ID</th><th>姓名</th><th>性别</th><th>薪水</th><th>年龄</th><th>入职时间</th><th>部门</th></tr></thead><tbody>{% for data in user_list %}<tr><th scope="row">{{ data.id }}</th><td>{{ data.name }}</td><td>{{ data.get_gender_display }}</td><td>{{ data.salary }}</td><td>{{ data.age }}</td><td>{{ data.create_time|date:"Y-m-d" }}</td><td>{{ data.department.title }}</td><td style="color: green"><a href="#"><span style="color: green;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a><a href="#"><span style="color: red;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td></tr>{% endfor %}</tbody></table></div></div></div>
{% endblock %}

在网页里面, 要展示性别数据的时候, 需要用到get_字段名_display这样的写法, 展现部门数据的时候, 需要用到data.department.title, 因为员工表里面有个department_id这个字段, 恰好和部门表的id联系起来, 然后再对应上部门表对应id的部门, 所以data,department就是获取员工是哪个部门, 目前获取到的是部门id号, 然后再通过这个id去获取部门表里面的部门字段title, 那就是data.department.title

user.py代码:

from django.shortcuts import render, redirectfrom project_one import models# Create your views here.
def user_info(request):user_list = models.UserInfo.objects.all()return render(request, "user/user_list.html", {"user_list": user_list})def user_add(request):if request.method == "GET":# 从后端传给前端的数据, gender_choices是性别, 1代表男, 2代表女, depart_list是获取部门信息表里面的所有数据, 获取到的数据是以数组的形式保存。content = {"gender_choices": models.UserInfo.gender_choices,"depart_list": models.Department.objects.all()}return render(request, "user/user_add.html", content)name = request.POST.get("name")age = request.POST.get("age")gender = request.POST.get("gender")salary = request.POST.get("salary")dtime = request.POST.get("dtime")depart = request.POST.get("depart")models.UserInfo.objects.create(name=name, gender=gender, salary=salary, age=age, create_time=dtime, department_id=depart)return redirect("/user/")

urls.py:

"""project_simple URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views1. Add an import:  from my_app import views2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views1. Add an import:  from other_app.views import Home2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf1. Import the include() function: from django.urls import include, path2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from project_one.views import depart, userurlpatterns = [# path('admin/', admin.site.urls),path("", depart.index),path("depart/", depart.depart),path("depart/add/", depart.add_depart),path("depart/<int:nid>/modify/", depart.depart_modify),path("depart/<int:nid>/del/", depart.del_depart),path("user/", user.user_info),path("user/add/", user.user_add)
]

运行结果:

员工页面:

添加员工信息界面:

三、修改员工数据

在templates里面, 新建文件user_mdify.html

user_mdify.html:

{% extends "index/model_tmp.html" %}{% block content %}<div class="container"><h1>修改信息</h1><form method="post">{% csrf_token %}<div class="form-group"><label for="exampleInputEmail1">姓名</label><input type="text" name="name" class="form-control" placeholder="{{ data.name }}"></div><div class="form-group"><label for="exampleInputEmail1">年龄</label><input type="text" name="age" class="form-control" placeholder="{{ data.age }}"></div><div class="form-group"><label for="exampleInputEmail1">性别</label><select name="gender" class="form-control">{% for item in content.gender_choices %}<option value="{{ item.0 }}">{{ item.1 }}</option>{% endfor %}</select></div><div class="form-group"><label for="exampleInputEmail1">收入</label><input type="text" name="salary" class="form-control" placeholder="{{ data.salary }}"></div><div class="form-group"><label for="exampleInputEmail1">入职时间</label><input type="text" name="dtime" id="d_time" class="form-control" placeholder="{{ data.create_time }}"></div><div class="form-group"><label for="exampleInputEmail1">部门</label><select name="depart" class="form-control">{% for item in content.depart_list %}<option value="{{ item.id }}">{{ item.title }}</option>{% endfor %}</select></div><button type="submit" class="btn btn-success">提交</button></form></div>
{% endblock %}

和新增页面差不多, 但是需要获取我要修改表格的那行数据的内容, 然后再修改界面的输入框里面, 用灰色字展现出来(利用placeholder=“{{ data.字段名来获取 }}”, 其中data是后端传给前端的那个data参数)。

user.py:

from django.shortcuts import render, redirectfrom project_one import models# Create your views here.
def user_info(request):user_list = models.UserInfo.objects.all()return render(request, "user/user_list.html", {"user_list": user_list})def user_add(request):if request.method == "GET":content = {"gender_choices": models.UserInfo.gender_choices,"depart_list": models.Department.objects.all()}return render(request, "user/user_add.html", content)name = request.POST.get("name")age = request.POST.get("age")gender = request.POST.get("gender")salary = request.POST.get("salary")dtime = request.POST.get("dtime")depart = request.POST.get("depart")models.UserInfo.objects.create(name=name, gender=gender, salary=salary, age=age, create_time=dtime, department_id=depart)return redirect("/user/")def user_modify(request, nid):if request.method == "GET":data = models.UserInfo.objects.filter(id=nid).first()content = {"gender_choices": models.UserInfo.gender_choices,"depart_list": models.Department.objects.all()}return render(request, "user/user_modify.html", {"content": content, "data": data})name = request.POST.get("name")age = request.POST.get("age")gender = request.POST.get("gender")salary = request.POST.get("salary")dtime = request.POST.get("dtime")depart = request.POST.get("depart")models.UserInfo.objects.filter(id=nid).update(name=name, gender=gender, salary=salary, age=age, create_time=dtime, department_id=depart)return redirect("/user/")

urls.py:

"""project_simple URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views1. Add an import:  from my_app import views2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views1. Add an import:  from other_app.views import Home2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf1. Import the include() function: from django.urls import include, path2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from project_one.views import depart, userurlpatterns = [# path('admin/', admin.site.urls),path("", depart.index),path("depart/", depart.depart),path("depart/add/", depart.add_depart),path("depart/<int:nid>/modify/", depart.depart_modify),path("depart/<int:nid>/del/", depart.del_depart),path("user/", user.user_info),path("user/add/", user.user_add),path("user/<int:nid>/modify/", user.user_modify)
]

user_list.html:

{% extends "index/model_tmp.html" %}{% block content %}<div class="container"><a href="/user/add/" class="btn btn-success">添加信息</a><div class="panel panel-danger"><div class="panel-heading"><h3 class="panel-title">部门表</h3></div><div class="panel-body"><table class="table table-hover"><thead><tr><th>ID</th><th>姓名</th><th>性别</th><th>薪水</th><th>年龄</th><th>入职时间</th><th>部门</th></tr></thead><tbody>{% for data in user_list %}<tr><th scope="row">{{ data.id }}</th><td>{{ data.name }}</td><td>{{ data.get_gender_display }}</td><td>{{ data.salary }}</td><td>{{ data.age }}</td><td>{{ data.create_time|date:"Y-m-d" }}</td><td>{{ data.department.title }}</td><td style="color: green"><a href="/user/{{ data.id }}/modify/"><span style="color: green;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a><a href="#"><span style="color: red;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td></tr>{% endfor %}</tbody></table></div></div></div>
{% endblock %}

运行结果:

比如我们想要改第二条数据:

我们可以发现, 修改成功。

四、删除员工数据

我们删除员工的数据, 是在user_list.html里面的最右边那里面去操作的。

这个垃圾桶图标就是删除功能。

user.py:

from django.shortcuts import render, redirectfrom project_one import models# Create your views here.
def user_info(request):user_list = models.UserInfo.objects.all()return render(request, "user/user_list.html", {"user_list": user_list})def user_add(request):if request.method == "GET":content = {"gender_choices": models.UserInfo.gender_choices,"depart_list": models.Department.objects.all()}return render(request, "user/user_add.html", content)name = request.POST.get("name")age = request.POST.get("age")gender = request.POST.get("gender")salary = request.POST.get("salary")dtime = request.POST.get("dtime")depart = request.POST.get("depart")models.UserInfo.objects.create(name=name, gender=gender, salary=salary, age=age, create_time=dtime, department_id=depart)return redirect("/user/")def user_modify(request, nid):if request.method == "GET":data = models.UserInfo.objects.all().first()content = {"gender_choices": models.UserInfo.gender_choices,"depart_list": models.Department.objects.all()}return render(request, "user/user_modify.html", {"content": content, "data": data})name = request.POST.get("name")age = request.POST.get("age")gender = request.POST.get("gender")salary = request.POST.get("salary")dtime = request.POST.get("dtime")depart = request.POST.get("depart")models.UserInfo.objects.filter(id=nid).update(name=name, gender=gender, salary=salary, age=age, create_time=dtime, department_id=depart)return redirect("/user/")# 删除功能
def user_del(request, nid):models.UserInfo.objects.filter(id=nid).delete()return redirect("/user/")

urls.py:

"""project_simple URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views1. Add an import:  from my_app import views2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views1. Add an import:  from other_app.views import Home2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf1. Import the include() function: from django.urls import include, path2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from project_one.views import depart, userurlpatterns = [# path('admin/', admin.site.urls),path("", depart.index),path("depart/", depart.depart),path("depart/add/", depart.add_depart),path("depart/<int:nid>/modify/", depart.depart_modify),path("depart/<int:nid>/del/", depart.del_depart),path("user/", user.user_info),path("user/add/", user.user_add),path("user/<int:nid>/modify/", user.user_modify),path("user/<int:nid>/del/", user.user_del),
]

最后我们再完善user_list.html文件里面的内容:

user_list.html:

{% extends "index/model_tmp.html" %}{% block content %}<div class="container"><a href="/user/add/" class="btn btn-success">添加信息</a><div class="panel panel-danger"><div class="panel-heading"><h3 class="panel-title">部门表</h3></div><div class="panel-body"><table class="table table-hover"><thead><tr><th>ID</th><th>姓名</th><th>性别</th><th>薪水</th><th>年龄</th><th>入职时间</th><th>部门</th></tr></thead><tbody>{% for data in user_list %}<tr><th scope="row">{{ data.id }}</th><td>{{ data.name }}</td><td>{{ data.get_gender_display }}</td><td>{{ data.salary }}</td><td>{{ data.age }}</td><td>{{ data.create_time|date:"Y-m-d" }}</td><td>{{ data.department.title }}</td><td style="color: green"><a href="/user/{{ data.id }}/modify/"><span style="color: green;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a><a href="/user/{{ data.id }}/del/"><span style="color: red;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td></tr>{% endfor %}</tbody></table></div></div></div>
{% endblock %}

运行结果:

比如我们要删除第一行数据:

我们可以发现, 成功删除。

那我们的django项目入门的内容, 就到此为止了。

以上就是Django项目入门二的所有内容了, 如果有哪里不懂的地方,可以把问题打在评论区, 欢迎大家在评论区交流!!!
如果我有写错的地方, 望大家指正, 也可以联系我, 让我们一起努力, 继续不断的进步.
学习是个漫长的过程, 需要我们不断的去学习并掌握消化知识点, 有不懂或概念模糊不理解的情况下,一定要赶紧的解决问题, 否则问题只会越来越多, 漏洞也就越老越大.
人生路漫漫, 白鹭常相伴!!!