Django+semanticui +jquery增删改查

效果如图，实现简单的增删改查

GIF.gif

环境:django pycharm,semanticui

1.使用pythoncharm创建django项目

1. 生成app,
2. 创建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})

3. 创建超级管理员
4. 创建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 %}



    
    
    
    
    
    
    
    
    



    {% if students.count > 0 %}
        {% for student in students %}
            

                

                    
                    {{ student.name }}
                    {{ student.age }}
                    删除
                    编辑
                    
用了一段时间bootstrap，虽然布局方便，但是始终感觉样式过于单一。最终发现了Semantic
                        UI。真是前所未有的体验。用了一段时间bootstrap，虽然布局方便，但是始终感觉样式过于单一。最终发现了Semantic UI。真是前所未有的体验。
                
            

        {% endfor %}
    {% else %}
        
暂无数据
    {% endif %}
    添加
    {#  dialog#}
    

        
提示
        

            

                

                    

                        

                            姓名:
                        
                        
                    
                    

                        

                            年龄:
                        
                        
                    
                    

                        

                            头像:
                        
                        
                    
                
                

                    

                        
取消
                        {#      很语义化，我想有个button 样式的div,他右边又饿label 的图标                   #}
                        

                            愉快添加
                             
                        
                    
                
            
        
    

semanticui 很语义化，比如图片

这样的按钮.png

比如上面的按钮就是一个buutton右边有个图标，放在右边，

 

                            愉快添加
                             
                        

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) {
                }
            })
        })
    })