Django+semanticui +jquery增删改查

作者: 蒲小帅丶 | 来源:发表于2019-03-29 16:37 被阅读0次

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

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>

semanticui 很语义化，比如图片

这样的按钮.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) {
                }
            })
        })
    })

Django+semanticui +jquery增删改查

1.使用pythoncharm创建django项目

2.引入semantiui 已经jquery

home.html代码

views.py 中

urls.py

home.js

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读