效果如图，实现简单的增删改查
GIF.gif
环境:django pycharm,semanticui
1.使用pythoncharm创建django项目
- 生成app,
- 创建model
字段很少，目的是演示增删改查
from django.db import models
# Create your models here.
from rest_framework.utils import json
class Student(models.Model):
name = models.CharField(max_length=64, verbose_name="姓名")
age = models.PositiveIntegerField(default=26, verbose_name="年龄")
avtor = models.CharField(default="http://img.52z.com/upload/news/image/20180213/20180213062641_35687.jpg",
max_length=200, verbose_name="头像")
class Meta:
verbose_name = "学生"
verbose_name_plural = "学生"
def __str__(self):
return json.dumps({'name': self.name, 'age': self.age, "avtor": self.avtor})
- 创建超级管理员
- 创建static目录，并在settings中设置
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
2.引入semantiui 已经jquery
如图放置
image.png
？
为什么不把semantic.min.css以及.js放在对应的目录下？也可以放在对应目录下，不过，semantic.min.css中引用主题的路径就要变化了，不然图标是不能正常显示的
home.html代码
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sematic</title>
<link rel="stylesheet" href="{% static 'semantic.min.css' %}">
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src="{% static 'js/jquery3.31.js' %}"></script>
<script src="{% static 'semantic.min.js' %}"></script>
<script src="{% static 'sweetalert/sweetalert.min.js' %}"></script>
<script src="{% static 'sweetalert/xtalert.js' %}"></script>
<script src="{% static 'js/home.js' %}"></script>
</head>
<body>
<div class="ui list">
{% if students.count > 0 %}
{% for student in students %}
<div student_id="{{ student.id }}" student_name="{{ student.name }}" student_age="{{ student.age }}"
student_avtor="{{ student.avtor }}" class="ui item">
<div class="ui segment">
<img src="{{ student.avtor }}" alt="" class="ui middle aligned small image" onerror="this.src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553858522352&di=b9089f9dc0870407b6c3e26530ab2e79&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F69ad7a731f43d4b8729f1a2fbe65c43801ca0f033250-EV1vMf_fw658'">
<span style="margin-left: 16px;font-size: 24px">{{ student.name }}</span>
<span style="margin-left: 16px;font-size:20px">{{ student.age }}</span>
<button class="ui right floated center red button delbutton">删除</button>
<button class="ui right floated center green button editbutton">编辑</button>
<h4>用了一段时间bootstrap，虽然布局方便，但是始终感觉样式过于单一。最终发现了Semantic
UI。真是前所未有的体验。用了一段时间bootstrap，虽然布局方便，但是始终感觉样式过于单一。最终发现了Semantic UI。真是前所未有的体验。</h4>
</div>
</div>
{% endfor %}
{% else %}
<div class="ui basic large segment">暂无数据</div>
{% endif %}
<button class="ui green button editbutton">添加</button>
{# dialog#}
<div class="ui small top aligned modal">
<div class="header">提示</div>
<div class="ui content">
<div class="ui fluid form">
<div class="field">
<div class="ui labeled input edit_item">
<div class="ui label">
姓名:
</div>
<input name="student_name" type="text">
</div>
<div class="ui labeled input edit_item">
<div class="ui label">
年龄:
</div>
<input name="student_age" type="number">
</div>
<div class="ui labeled input edit_item">
<div class="ui label">
头像:
</div>
<input name="student_avtor" type="text" placeholder="请填写网络的地址...">
</div>
</div>
<div class="ui right aligned basic segment">
<div class="actions">
<div class="ui negative black button edit_cancel">取消</div>
{# 很语义化，我想有个button 样式的div,他右边又饿label 的图标 #}
<div class="ui positive right label icon button edit_sure">
愉快添加
<i class="checkmark icon"> </i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
这样的按钮.png
比如上面的按钮就是一个buutton右边有个图标，放在右边，
<div class="ui positive right label icon button edit_sure">
愉快添加
<i class="checkmark icon"> </i>
</div>
views.py 中
from django.http import JsonResponse
from django.shortcuts import render, HttpResponse
from rest_framework.utils import json
from .models import Student
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def index(request):
students = Student.objects.all()
return render(request, 'home.html', context={'students': students})
@csrf_exempt
def del_setudent(request):
stu_id = request.POST.get("id")
student = Student.objects.filter(id=stu_id).first()
student.delete()
return JsonResponse({"code": "100"})
@csrf_exempt
def add_student(request):
name = request.POST.get("name")
age = request.POST.get("age")
avtor = request.POST.get("avtor")
student = Student(name=name, age=age, avtor=avtor)
try:
student.save()
return JsonResponse({"code": "100"})
except:
return JsonResponse({"code": "300"})
@csrf_exempt
def edit_student(request):
id = request.POST.get("id")
name = request.POST.get("name")
age = request.POST.get("age")
avtor = request.POST.get("avtor")
try:
student = Student.objects.get(id=id)
student.name = name
student.age = age
student.avtor = avtor
student.save()
return JsonResponse({"code": "100"})
except:
print("发生了异常")
return JsonResponse({"code": "200"})
@csrf_exempt装饰器，是跨入问题，添加上去的
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.index),
path('del/', views.del_setudent),
path('add/', views.add_student),
path('edit/', views.edit_student),
]
home.js
$(function () {
$(".editbutton").click(function () {
$(".ui.modal").modal("show")
//设置值，值从哪里来呢，从item上获取的
let self=$(this) //这是确定按钮
let item= self.parent().parent()
let student_id=item.attr("student_id")
console.log("学生id"+student_id)
let student_name=item.attr("student_name")
let studentage=item.attr("student_age")
let student_avtor=item.attr("student_avtor")
//设置到dialog中
let inputname=$("input[name='student_name']")
let inputage=$("input[name='student_age']")
let inputavtor=$("input[name='student_avtor']")
let save_button=$(".edit_sure")
//给控件设置值
inputname.val(student_name)
inputage.val(studentage)
inputavtor.val(student_avtor)
//给保存按钮设置id,name为空表示新建
if(!student_name){
save_button.attr("type","add")
}else {
save_button.attr("type","edit")
save_button.attr("id",student_id)
}
})
$(".edit_sure").click(function () {
//获取值,进行提交
let inputname=$("input[name='student_name']").val()
let inputage=$("input[name='student_age']").val()
let inputavtor=$("input[name='student_avtor']").val()
let id=$(this).attr("id")
if(!inputname){
}else {
let type=$(this).attr("type")
let url=""
if(type=="add")
{
url="add/"
}else {
url='edit/'
}
console.log(url)
$.post({
'url':url,
'data':{'id':id,'name':inputname,'age':inputage,'avtor':inputavtor},
'success':function (data) {
console.log(data)
if(data["code"]="100"){
window.location.reload()
}else {
console.log("遗憾失败")
}
}})
}
})
$(".delbutton").click(function () {
let self = $(this)
let item = self.parent().parent() //这里是找到删除按钮的父类的父类，目的是找到student.id
let student_id = item.attr("student_id")
let url = "del/"
$.post({
'url': url,
'data': {
'id': student_id
},
'success': function (data) {
if (data["code"] == "100") {
window.location.reload();
} else {
}
},
'fail': function (data) {
}
})
})
})
