sweetalert模态提示框的封装与初次使用


发布时间:2019-02-15 13:08    作者: Uncle Hui   已过去:1 年,7 月   阅读总量:390 已被赞:0


sweetalert模态提示输入框非常美观,我们来学习如何使用它。可以前往官网下载相关代码和阅读相关文档,也可以查看这篇博文,我比较喜欢去哪里看。https://www.yanjiayu.cn/posts/52f4e444.html

代码我喜欢用黄勇封装的代码,使用方便,封装代码完整代码下载

代码的使用:

解压封装好的代码,放到自己的静态文件目录,并在base.html里引用,因为全站使用,所以在覆膜板里引用。

我这里以一个后台CMS添加新闻分类为例介绍使用:

1.建立新闻分类存储表

class NewsCategory(models.Model):
    name = models.CharField(max_length=100)

2.建立后台添加,显示HTML页面这些,并给添加按钮指定一个唯一的ID,便于后面JS获取点击事件

3.新建列表显示的视图

from django.views.decorators.http import require_POST,require_GET #请求方式限制装饰器(非必须)
from apps.news.models import NewsCategory #引入表
from utils import restful #引入错误提示封装的(非必须)
@require_GET
def news_category(request):
    categories = NewsCategory.objects.all()
    context = {
        'categories': categories
    }
    return render(request,'cms/news_category.html',context=context) #显示分类的页面

URL:

path('news_fenlei/', news_category,name='news_fenlei'),#新闻分类

4.建立添加新闻分类的处理视图

@require_POST
def add_news_category(request):
   #获取提交来的name
    name = request.POST.get('name')
   #查看是否已存在
    exists = NewsCategory.objects.filter(name=name).exists()
    if not exists:
      #不存在就添加保存进去
        NewsCategory.objects.create(name=name)
        return restful.ok()
    else:
        return restful.params_error(message='该分类已经存在!')

URL:

path('add_news_fenlei/', add_news_category,name='add_news_fenlei'),#添加新闻分类

5.前端代码做好跳转URL

6.给添加按钮写一个JS,并引入,代码如下:不知道理解得是否完全正确,如有错误,请留言。

function NewsCategory() {

};
// 上面这句是说定义一个叫(1)NewsCategory的函数。
//(2)prototype
NewsCategory.prototype.run = function () {
    var self = this;
    self.listenAddCategoryEvent();
};
//上面这句是说给NewsCategory的运行函数。(3)listenAddCategoryEvent()为下面的方法
//(1).(2).(3)
NewsCategory.prototype.listenAddCategoryEvent = function () {
    var addBtn = $('#add-btn');//获取这个按钮的ID,ID获取用#,类获取用.
    //给这个变量邦一个点击事件
    addBtn.click(function () {
        //调用封装的xfzalert,alertOneInput是封装代码里只有一个输入框的方法
        xfzalert.alertOneInput({
            'title': '添加新闻分类',
            'placeholder': '请输入新闻分类',
            //inpuValue是输入的值
            //confirmCallback向服务器提交
            'confirmCallback': function (inpuValue) {
                //使用封装的ajax代码来提交
                xfzajax.post({
                    //前后/杠不能少,如果url定义的时候尾部/这里就必须有
                    'url': '/cms/add_news_fenlei/',
                    //字典格式传送,name是后台接受的K
                    'data': {
                        'name': inpuValue
                    },
                    //如果成功就打印下结果,并刷新页面
                    'success': function (result) {
                        if(result['code'] === 200){
                            console.log(result);
                            window.location.reload();
                        }else{
                            //失败就关闭模态框
                            xfzalert.close();
                        }
                    }
                });
            }
        });
    });
};

//最后统一执行(1)
$(function () {
    var category = new NewsCategory();
    category.run();
});

JS下载

测试,完成,感觉不错!

点赞

0




登陆后方可评论