大事件后台管理系统-功能详解

于 2020-07-30 20:37:46 发布
阅读量1.5k 收藏 9
点赞数 3
分类专栏： web前端基础 文章标签： jquery javascript css html html5
csdn@小芒果cuty
本文链接：https://blog.youkuaiyun.com/caipital/article/details/107700235
版权

       本文写的是前端部分的后台管理系统，功能并未全部完善，但足够前端初学者学习使用ajax发送请求并渲染至页面。完整代码已经上传到我的资源里面，大家可根据需要自行下载，这里只讲述jquery部分的的功能代码。下载地址：https://download.youkuaiyun.com/download/caipital/12669175

文章目录

1.发送ajax请求返回的状态码：（本文主要用到200和400）

状态码含义说明
200OK请求成功
201CREATED创建成功
204DELETED删除成功
400BAD REQUEST请求的地址不存在或者包含不支持的参数
401UNAUTHORIZED未授权
403FORBIDDEN被禁止访问
404NOT FOUND请求的资源不存在
422Unprocesable entity[POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误
500INTERNAL SERVER ERROR内部错误

2.用户登录功能

请求地址：http://localhost:8000/admin/login
请求方式：post

请求参数：

名称类型说明
user_namestring用户名（admin）
passwordstring密码(123456)

返回数据：

名称类型说明
msgstring文字信息 ‘登录成功’ ‘用户名或密码出错’

jQuery部分（原始ajax的写法）：

<script>
        // 阻止表单提交的默认事件
        $(".login_form").on("submit",function(e){
            e.preventDefault();
        })
        // 点击登录按钮触发事件
        $(".input_sub").on("click",function(){
            // 输入为空判断
            if($(".input_txt").val().trim()=="") {
                alert("请输入邮箱或手机号");
                return;
            }
            if($(".input_pass").val().trim()=="") {
                alert("请输入密码");
                return;
            }
            // 向服务器请求数据
            $.ajax({
                url:"http://localhost:8000/admin/login",
                type:"post",
                data:{
                    user_name:$(".input_txt").val().trim(),
                    password:$(".input_pass").val().trim()
                },
                // 请求服务器成功
                success:function(res){
                    // 输入正确
                    if(res.code==200) {
                        // 跳转到首页
                        location.href="./index.html";
                        var obj = {
                            user_name:$(".input_txt").val().trim(),
                            password:$(".input_pass").val().trim()
                        };
                        // 登录成功将账号放入本地缓存
                        localStorage.setItem("user",JSON.stringify(obj));
                        $(".input_txt").val("")
                        $(".input_pass").val("")
                    }else{//输入错误
                        alert("用户名或密码输入错误");
                    }
                    
                },
                // 请求服务器失败
                error:function(){
                    alert("请求登录失败")
                }
            })
        })
</script>

jQuery部分（ajax的promise写法）：

<script>
        // 阻止表单提交的默认事件
        $(".login_form").on("submit",function(e){
            e.preventDefault();
        })
        // 点击登录按钮触发事件
        $(".input_sub").on("click",function(){
            // 输入为空判断
            if($(".input_txt").val().trim()=="") {
                alert("请输入邮箱或手机号");
                return;
            }
            if($(".input_pass").val().trim()=="") {
                alert("请输入密码");
                return;
            }

            // 向服务器请求数据
            $.ajax({
                url:"http://localhost:8000/admin/login",
                type:"post",
                data:{
                    user_name:$(".input_txt").val().trim(),
                    password:$(".input_pass").val().trim()
                },
            }).then(function(res){// 请求服务器成功
                if(res.code==200) {// 输入正确
                    // 跳转到首页
                    location.href="./index.html";
                    var obj = {
                        user_name:$(".input_txt").val().trim(),
                        password:$(".input_pass").val().trim()
                    };
                    // 登录成功将账号放入本地缓存
                    localStorage.setItem("user",JSON.stringify(obj));
                    $(".input_txt").val("")
                    $(".input_pass").val("")
                }else{//输入错误
                    alert("用户名或密码输入错误");
                }
            },function(err){// 请求服务器失败
                alert("请求登录失败")
            })
        })
</script>

3.退出登录功能

请求地址：http://localhost:8000/admin/logout
请求方式：post
请求参数：无
返回数据：无

在首页的dom元素之前判断是否登陆过，若登陆，可直接进入后台管理系统，若未登录，须得登录才能进入后台。

<script>
        // 如果本地缓存中不存在已登录用户，则进不去后台管理系统
        if(!localStorage.getItem("user")){
            location.href="./login.html"
        }
</script>

发送ajax请求退出登录：

<script>
        // 退出登录
        $(".sign-out").on("click",function(){
            // 发送ajax请求退出登录
            $.ajax({
                url:"http://localhost:8000/admin/logout",
                type:"post"
            }).then(function(res){
                // 退出登录后跳转到登录页面
                $(".sign-out").attr("href","./login.html");
                // 删除本地缓存
                localStorage.removeItem("user")
            },function(err){
                alert("请求退出失败")
            })
            
        })
</script>

4.获取用户信息

请求地址：http://localhost:8000/admin/getuser
请求方式：get
请求参数：无

返回数据：

名称类型说明
nicknamestring用户昵称
user_picstring用户图片地址
<script>
        // 获取用户信息
        $.ajax({
            url:"http://localhost:8000/admin/getuser",
            type:"get",
        }).then(function(res){
            $(".user-name").text(res.data.nickname);
            $(".user_info>img").attr("src",res.data.user_pic)
        },function(err){
            alert("请求获取用户信息失败")
        })
</script>

5.文章数量统计

请求地址：http://localhost:8000/admin/article_count
请求方式：get
请求参数：无

返回数据：

名称类型说明
all_countnumber文章总数
day_countnumber当天文章发布文章总数
<script>
        // 文章数量统计
        $.ajax({
            url:"http://localhost:8000/admin/article_count",
            type:"get",
        }).then(function(res){
            $(".all-article-count").text(res.data.all_count);
            $(".day-article-count").text(res.data.day_count);

        },function(err){
            alert("请求文章数量统计失败！")
        })
</script>

6.评论数量统计

请求地址：http://localhost:8000/admin/comment_count
请求方式：get
请求参数：无

返回数据：

名称类型说明
all_countnumber评论总数
day_countnumber当天发布评论总数
<script>
        // 评论数量统计
        $.ajax({
            url:"http://localhost:8000/admin/comment_count",
            type:"get",
        }).then(function(res){
            $(".all-comment-count").text(res.data.all_count);
            $(".day-comment-count").text(res.data.day_count);
        },function(err){
            alert("请求评论数量统计失败！")
        })
</script>

7.文章类别获取

请求地址：http://localhost:8000/admin/category_search
请求方式：get
请求参数：无

返回数据：

名称类型说明
idnumber类别
namestring类别名称
slugstring别名

调用模板引擎的js：

<script src="./js/template-web.js"></script>

定义模板引擎：

<script type="text/html" id="category-tmp">
        {{each data}}
        <tr>
            <td>{{$value.name}}</td>
            <td>{{$value.slug}}</td>
            <td class="text-center">
                <a href="javascript:editTr({&quot;id&quot;:&quot;1&quot;,&quot;slug&quot;:&quot;uncategorized&quot;,&quot;name&quot;:&quot;未分类&quot;});"
                    class="btn btn-info btn-xs" data-id="{{$value.id}}">编辑</a>
                <a href="javascript:deleteTr( 1 );" class="btn btn-danger btn-xs" data-id="{{$value.id}}">删除</a>
            </td>
        </tr>
        {{/each}}
</script>

调用模板引擎，将数据渲染到页面：

<script>
        // 文章类别获取
        $.ajax({
            url:"http://localhost:8000/admin/category_search",
            type:"get",
        }).then(function(res){
            console.log(res)
            var html = template("category-tmp",res);
            $(".table tbody").html(html)

        },function(err){
            alert("请求获取文章类别失败")
        })
</script>

8.新增文章类别

请求地址：http://localhost:8000/admin/category_add
请求方式：post

请求参数：

名称类型说明
namestring类别名称
slugstring别名

返回数据：

名称类型说明
msgstring文字信息 ‘增加成功’ ‘增加失败’
<script>
		// 新增文章类别
        // 点击新增按钮，获取输入框输入的数据，发送ajax请求，局部刷新页面
        $("#model_add").on("click", function () {
            // 获取输入框的值
            var name = $("#recipient-name").val().trim();
            var other_name = $("#recipient-other-name").val().trim();
            // 为空判断
            if(name=="") {
                alert("请输入分类名称");
                return;
            }
            if(other_name=="") {
                alert("请输入分类别名");
                return;
            }
            // 发送新增请求
            $.ajax({
                url: "http://localhost:8000/admin/category_add",
                type: "post",
                data: {
                    name: name,
                    slug: other_name
                }
            }).then(function (res) {//请求成功
                if (res.code === 200) {//新增正确
                    // 重新刷新文章类别获取
                    get_category();
                } else {// 新增错误，如数据已存在等
                    alert(res.msg)
                }
            }, function (err) { // 请求失败
                alert("请求新增文章类别失败")
            })
        })
</script>

9.编辑文章类别

请求地址：http://localhost:8000/admin/category_edit
请求方式：post

请求参数：

名称类型说明
idnumber文章 id
namestring类别名称
slugstring别名

返回数据：

名称类型说明
msgstring文字信息 ‘编辑成功’ ‘编辑失败’
<script>
		// 编辑文章类别
        // 点击新增分类，弹窗编辑按钮消失
        $(".btn-success").on("click",function(){
            $("#model_edit").hide().prev().show()
        })
        // 点击编辑按钮，弹框内新增按钮消失
        $(".table tbody").on("click",".btn-info",function(){
            $("#model_edit").show().prev().hide();
            var id_before = Number($(this).attr("data-id"));
            var name = $(this).parents(".text-center").prev().prev().text();
            var slug = $(this).parents(".text-center").prev().text();

            $("#recipient-name").val(name);
            $("#recipient-other-name").val(slug);

            $("#model_edit").on("click",function(){
                //  点击编辑按钮，重新获取输入框的内容
                var name_changed = $("#recipient-name").val();
                var slug_changed = $("#recipient-other-name").val();
                
                // 发送ajax请求，把修改后的数据传给服务器
                $.ajax({
                    url:"http://localhost:8000/admin/category_edit",
                    type:"post",
                    data:{
                        id:id_before,
                        name:name_changed,
                        slug:slug_changed
                    }
                }).then(function(res){
                    if(res.code===200) {
                        // 重新刷新这个页面
                        get_category();
                    }else{
                        alert(res.msg)
                    }
                },function(err){
                    alert("请求编辑文章类别失败！")
                })
            })
        })
</script>

10.删除文章类别

请求地址：http://localhost:8000/admin/category_delete
请求方式：post

请求参数：

名称类型说明
idnumber类别 id

返回数据：

名称类型说明
msgstring文字信息 ‘删除成功’ ‘删除失败’
<script>
		// 删除文章类别
        $(".table tbody").on("click",".btn-danger",function(){
            var id = $(this).attr("data-id");
            if(confirm("您确定要删除我吗？")) {
                $.ajax({
                    url:"http://localhost:8000/admin/category_delete",
                    type:"post",
                    data:{
                        id:id
                    }
                }).then(function(res){
                    if(res.code===200){
                        // 页面刷新
                        get_category();
                    }
                },function(err){
                    alert("请求删除文章类别失败")
                })
            }
        })
</script>

11.获取用户信息

请求地址：http://localhost:8000/admin/userinfo_get
请求方式：get
请求参数：无

返回数据：

名称类型说明
usernamestring用户名称
nicknamestring用户昵称
emailstring用户邮箱
user_picstring用户图片地址
passwordstring用户密码
<script>
        // 获取用户信息
        $.ajax({
            url:"http://localhost:8000/admin/userinfo_get",
            type:"get"
        }).then(function(res){
            $("#username").val(res.data.username)
            $("#nickname").val(res.data.nickname)
            $("#email").val(res.data.email)
            $(".user_pic").attr("src",res.data.user_pic)
            $("#password").val(res.data.password)
        },function(err){
            alert("请求获取用户信息失败")
        })
</script>

12.编辑用户信息

请求地址：http://localhost:8000/admin/userinfo_edit
请求方式：post

请求参数：使用 formdata 提交

名称类型说明
usernamestring用户名称
nicknamestring用户昵称
emailstring用户邮箱
user_picstring用户图片地址
passwordstring用户密码

返回数据：

名称类型说明
msgstring文字信息 ‘修改成功’ ‘修改失败’
<script>
		//  组织表单的默认事件
        $(".article_form").on("submit",function(e){
            e.preventDefault();
        })

        // 获取选中的文件的路径
        /*
        1 使用change事件监测用户的文件选择操作
​        2 通过 URL.createObjectURL()进行本地图片地址获取
​          - URL是window对象的属性
​          - 用户在本地选择的图片地址我们不可能提前知道
​          - 使用方式：
​            URL.createObjectURL(文件域的files中的文件信息)
​            - 返回值是浏览器自动生成的临时图片地址，可以设置在src中查看
        */
        $("#exampleInputFile").on("change",function(){
            // 要用原生的js写
            var file = ($(this)[0]).files[0];
            var img_src = URL.createObjectURL(file)
            $(".user_pic").attr("src",img_src)
        })

        //  编辑用户信息
        $(".btn-success").on("click",function(){
            // 为空判断
            if($("#username").val().trim()=="") {
                alert("请输入用户名") ;
                return
            }
            if($("#nickname").val().trim()=="") {
                alert("请输入昵称") ;
                return
            }
            if($("#email").val().trim()=="") {
                alert("请输入邮箱") ;
                return
            }
            if($("#exampleInputFile")[0].files.length==0) {
                alert("请选择一张图片") ;
                return
            }
            if($("#password").val().trim()=="") {
                alert("请输入密码") ;
                return
            }
            
            // new FormData($(".article_form")[0])  要用原生的js
            var fd = new FormData($(".article_form")[0])
            $.ajax({
                url:"http://localhost:8000/admin/userinfo_edit",
                type:"post",
                data:fd,
                contentType:false,//不让jquery设置内容类型
                processData:false,// 不让jquery对内容进行处理
            }).then(function(res){
                if(res.code===200){
                    get_user_info();
                }else {
                    alert(res.msg)
                }
            },function(err){
                alert('请求编辑用户失败！');
            })
        })
</script>

14.日期控件的的基本使用

<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./web_back/js/jedate/css/jedate.css">
</head>
​
<body>
  <input type="text" id="test" readonly>
  <button id="btn">显示日期</button>
  <script src="web_back/js/jedate/js/jedate.js"></script>
  <script>
    // 一个原生js编写的日期控件，地址： http://www.jemui.com/uidoc/jedate.html
​
​
    // 设置btn的事件，点击btn后弹出日期控件效果
    document.querySelector('#btn').onclick = function () {
      jeDate("#test", {
        format: "YYYY-MM-DD",
        isTime: false,
        trigger: false, // 不使用内置的事件功能，自己进行设置
        minDate: "2014-09-19 00:00:00"
      });
    };
​
  </script>
</body>
​
</html>

15.分页功能基本使用

<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./web_back/js/bootstrap/css/bootstrap.min.css">
</head>
​
<body>
  <!-- 用来设置分页的标签结构 -->
  <ul id="list"></ul>
​
  <!-- 引入jQuery和插件文件，注意引入顺序 -->
  <script src="./web_back/js/jquery-1.12.4.min.js"></script>
  <script src="./web_back/js/jquery.twbsPagination.js"></script>
​
  <script>
    // 根据文档，设置分页展示功能
    $('#list').twbsPagination({
      totalPages: 20,
      visiblePages: 7, // 设置显示的页码个数为 visiblePages
      first: '首页',
      last: '尾页',
      prev: '上一页',
      next: '下一页',
      onPageClick: function (e, page) {
        console.log(e)
        console.log(page); // 获取当前点击的页码
      }
    });
  </script>
</body>
​
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值