后台管理系统窗体程序:文章管理 > 文章发表

 

目录

文章列表的的功能介绍:

        1、进入页面

        2、页面内的各种功能设计

        (1)进入选择

        (2)当获取到唯一标识符时

        (3)当没有标识符时

        (4)发布按钮,存为草稿

一、网页设计

二、html代码

三、css代码

四、js代码


本次项目为后台管理系统,在本系统内的第五个界面为窗体程序内的文章发表页面,作为首页内大分类下的小分类项目,需要和首页进行联合

文章列表的的功能介绍:

        在进行本页面时,我们将进行多个功能的串联

        1、进入页面

        在首页进入时需要变换分类的样式,使用排他思想即可进行该项操作,而在大分类展开小分类的事件中使用基础动画效果即可

        2、页面内的各种功能设计

        (1)进入选择

        我们需要注意在进入该页面时间,由于有前置页面的跳转和直接点击该选项进入两种选择,所以我们需要进行判断进入该页面时是否携带唯一标识符值,并对其进行分步处理。

        (2)当获取到唯一标识符时

        我们需要通过标识符获取到该标识符下所携带的数据并对其进行渲染

        (3)当没有标识符时

        我们将清空所有输入框的内容并重新进行写入

        (4)发布按钮,存为草稿

        首先判断id是否带值,且判断我们点击的按钮是否该按钮,将该按钮的值携带并进行判断,进行分步操作,后续将输入框的内容返回数据库并写入,同时跳转至文章列表界面

一、网页设计

二、html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发表文章</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/publish.css">
</head>

<body>
    <div class="header" id="header">写文章</div>

    <div class="main" id="main">

        <span class="mainsp1" id="mainsp1">文章标题:</span>
        <input type="text" placeholder="文章标题" class="mainipt" id="mainipt">

        <img src="" alt="" class="mainimg" id="mainimg">

        <span class="mainsp2" id="mainsp2">文章封面:</span>
        <input type="file" class="mainfile" id="mainfile1">

        <span class="mainsp3" id="mainsp3">文章类别:</span>
        <select name="" id="mainslt1" class="mainslt1">

        </select>

        <span class="mainsp4" id="mainsp4">文章时间:</span>
        <input type="text" class="form-control date" placeholder="YYYY-MM-DD"
            style="top:270px ; position: absolute;  left: 220px;margin-top: -3px; width: 40vw;height:3vh; outline: none;">

        <span class="mainsp5" id="mainsp5">文章内容:</span>

        <div class="editor" id="editor"></div>

        <button class="mainbtn1" id="mainbtn1">发布</button>

        <button class="mainbtn2" id="mainbtn2">存为草稿</button>

    </div>



</body>
<script src="./JS/jquery.min.js"></script>
<script src="./JS/wangEditor.min.js"></script>
<script src="./JS/bootstrap.bundle.js"></script>
<script src="./JS/move.js"></script>
<script src="./JS/publish.js"></script>

</html>

三、css代码

body{
    font-size:16px
}
button
{
    cursor: pointer;
}
.header
{
    width: 88vw;
    height: 4vh;
    background-color: #fbfbfb;
    margin: 3vh auto;
    margin-bottom: 0px;
    line-height: 4vh;
    border: 1px solid #a2a2a3;
    padding-left: 2vw;
}

.main   
{        
    color: #5b5b5b;
    font-size: 13px;
    width: 88vw;
    height: 85vh;
    background-color: #ffffff;
    margin: 0vh auto;
    border: 1px solid #a2a2a3;
    border-top: none;
    padding: 3vh 1vw;
    padding-top:2vh;
    position: relative;
}

.main span,.mainbtn1,.mainbtn2  {
    position: absolute;
    left: 130px;
}

.main .mainipt,.mainimg,.mainfile,.mainslt1
{
    position: absolute;
    left: 220px;
    cursor: pointer;

}
#mainipt
{
    top:20px;
    width: 70vw;
    height: 3vh;    
    padding-left: 10px;
    outline: none;
    cursor: text;
}
.mainslt1{
    margin-top: -3px;
    width: 40vw;
    height: 3vh;    
    padding-left: 10px;
    outline: none;
}
.mainsp2 ,.mainimg
{
    top:80px
}
.mainsp1
{
    top:25px
}

.mainfile{
    top:190px;
    cursor: pointer;
    
}
.mainsp3 ,.mainslt1
{
    top:230px
}
.mainsp4 ,.date
{
    top:270px
}.mainsp5
{
    top:310px
}

.mainbtn1
{
    bottom:20px;
    padding : 4px 10px;
    left: 150px;
    background-color: #5cb85c;
    color: white;
    border: 1px solid #a2a2a3;
    border-radius: 3px;

}
.mainbtn2
{
    bottom:20px;
    left:240px;
        border: 1px solid #a2a2a3;
    border-radius: 3px;
        padding : 4px 10px;
}

.editor
{
    position: absolute;
    
    width: 70vw;
    top: 310px;
    left: 220px;
}

四、js代码

//定义一个id变量来获取这个唯一标识符
var id = location.search.slice(1).split("=")[1]

//定义一个a的值来存储所需的值
var a

// 定义一个值来存储我们点击发布和存为草稿按钮时所携带的值
var btnbuff

//编辑时分类进行加载并渲染,再渲染内容
$(function () {

    // 如果id有唯一标识符时
    if (id) {
        //编辑
        // 调用接口
        $.ajax({
            // 接口
            url: "http://localhost:8080/api/v1/admin/article/search?id=" + id,
            // 请求方式
            type: "get",
            // 请求头
            headers: {
                "Authorization": sessionStorage.getItem("token")
            },
            // 请求成功
            success(res) {
                // 如果msg的值返回为成功时
                if (res.msg == "获取成功") {
                    // 定义一个值来存储我们获取到的数组
                    var arr = res.data
                    // 将该值的唯一标识符赋给a
                    a = arr.categoryId;
                    // 调取分类
                    getlist()
                    // 将数据库返回的的值赋给编辑框,完成编辑状态下的数据渲染
                    $("#mainipt").val(arr.title)
                    $("#mainimg").attr("src", arr.cover).css({
                        width: "120px",
                        height: "90px"
                    })
                    $(".date").val(arr.date)
                    editor.txt.text(arr.content)
                }

            },
            // 请求失败
            error(err) {
                // 打印错误
                console.log(err);
            }
        })

    }



    //如果id没有唯一标识符时,我们将进入发表状态
    else {
        // 调用接口
        $.ajax({
            // 接口
            url: "http://localhost:8080/api/v1/admin/category/list",
            // 请求方式
            type: "get",
            // 请求头
            headers: {
                "Authorization": sessionStorage.getItem("token")
            },
            // 请求成功
            success(res) {
                // 如果msg的值返回为成功时
                if (res.msg == "获取成功") {
                    // 定义一个空白字符串来拼接
                    var str = ""
                    // 定义一个值来存储我们获取到的数组
                    var arr1 = res.data
                    // 遍历该伪数组,拼接option标签
                    for (var item of arr1) {
                        // 因为没有默认选中值,所以在遍历循环时我们可以直接写入返回数据中的所有分类
                        str += `<option value="${item.id}">${item.name}</option>`
                    }
                    // 将拼接好的字符串赋给select标签
                    $("#mainslt1").html(str)
                }
            },
            // 请求失败
            error(err) {
                // 打印错误
                console.log(err);

            }
        })
    }

}

)




// 获取分类,且需要多次调取,我们需要将其封装为函数
function getlist() {
    // 调用接口
    $.ajax({
        // 接口
        url: "http://localhost:8080/api/v1/admin/category/list",
        // 请求方式
        type: "get",
        // 请求头
        headers: {
            "Authorization": sessionStorage.getItem("token")
        },
        // 请求成功
        success(res) {
            // 如果msg的值返回为成功时
            if (res.msg == "获取成功") {
                // 定义一个空白字符串来拼接
                var str = ""
                // 定义一个值来存储我们获取到的数组
                var arr1 = res.data
                // 遍历该伪数组,拼接option标签
                for (var item of arr1) {
                    // 因为没有默认选中值,所以在遍历循环时我们可以直接写入返回数据中的所有分类
                    str += `<option value="${item.id}">${item.name}</option>`
                }
                // 将拼接好的字符串赋给select标签
                $("#mainslt1").html(str)
                // 且该值的唯一标识符赋给a后,我们将a的值赋值给该select标签
                $("#mainslt1").val(a)

            }
        },
        // 请求失败
        error(err) {
            // 打印错误
            console.log(err);

        }
    })
}







//发布按钮点击事件

$("#mainbtn1").on("click", function (e) {
    // 获取到该按钮点击时的按钮的html值
    btnbuff = $(this).html()
    // 调用getpub()函数
    getpub()
})


//发布草稿按钮点击事件
$("#mainbtn2").on("click", function (e) {
    // 获取到该按钮点击时的按钮的html值
    btnbuff = $(this).html()
    // 调用getpub()函数
    getpub()
})

//将发布,存为草稿按钮点击事件封装为函数
function getpub() {
    // 判断是否携带id值
    if (id) {
        // 定义一个变量来存储按钮的html值
        var state = ""
        // 判断点击按钮的html值,来决定state的值
        if (btnbuff == "发布") state = "已发布"

        // 定义变量来存储我们再输入框内键入的值
        var title = $("#mainipt").val()
        var cover = $("#mainfile1")[0].files[0]
        var categoryId = $("#mainslt1").val()
        var date = $(".date").val()
        var content = editor.txt.text()

        // 定义一个FormData的方式来提交数据
        var params = new FormData()
        // 在其中插入我们通过变量来获取的值
        params.append('title', title)
        params.append('cover', cover)
        params.append('categoryId', categoryId)
        params.append('date', date)
        params.append('content', content)
        params.append('state', state)
        // 由于编辑时我们获取到了id值,所以编辑修改时需要将其插入params中
        params.append('id', id)

        // 调用接口
        $.ajax({
            // 接口
            url: "http://localhost:8080/api/v1/admin/article/edit",
            // 请求方式
            type: "post",
            // 提交的数据
            data: params,
            processData: false,
            contentType: false,
            // 请求头
            headers: {
                "Authorization": sessionStorage.getItem("token")
            },
            // 请求成功
            success(res) {
                // 判断msg的值是否为修改成功
                if (res.msg == "修改成功") {
                    // 弹出提示框提示用户
                    alert("文章修改成功")
                    // 跳转到文章列表页
                    location.href = "./article.html"
                }
            },
            // 请求失败
            error(err) {
                // 打印错误
                console.log(err);
            }
        })
    }


    // 如果id没有存值
    else {
        // 定义一个变量来存储按钮的html值
        var state = ""
        // 判断点击按钮的html值,来决定state的值
        if (btnbuff == "发布") state = "已发布"
        // 定义变量来存储我们再输入框内键入的值
        var title = $("#mainipt").val()
        var cover = $("#mainfile1")[0].files[0]
        var categoryId = $("#mainslt1").val()
        var date = $(".date").val()
        var content = editor.txt.text()

        // 定义一个FormData的方式来提交数据
        var params = new FormData()
        params.append('title', title)
        params.append('cover', cover)
        params.append('categoryId', categoryId)
        params.append('date', date)
        params.append('content', content)
        params.append('state', state)
        // 由于编辑时我们没有获取到id值,所以编辑修改时不用提交

        // 调用接口
        $.ajax({
            // 接口
            url: "http://localhost:8080/api/v1/admin/article/publish",
            // 请求方式
            type: "post",
            // 提交的数据
            data: params,
            processData: false,
            contentType: false,
            // 请求头
            headers: {
                "Authorization": sessionStorage.getItem("token")
            },
            // 请求成功
            success(res) {
                console.log(res);
                // 判断msg的值是否为修改成功
                if (res.msg == "文章新增成功") {
                    // 弹出提示框提示用户
                    alert("文章发布成功")
                    // 跳转到文章列表页
                    location.href = "./article.html"
                }
            },
            // 请求失败
            error(err) {
                console.log(err);
            }
        })
    }
}






//页面的富文本输入框
var E = window.wangEditor
var editor = new E('#editor')
editor.create()


//页面的头像替换和选择
$('#mainfile1').change(function () {
    // 获取到图片的src
    var src = URL.createObjectURL(this.files[0])
    // 将图片的src赋值给img标签
    $(".mainimg").attr('src', src)
    // 设置img标签的宽高
    $(".mainimg").css({
        width: "100px",
        height: "100px"
    })

})



//文章时间加载
$('.date').focus(function () {
    $(this).prop('type', 'date')
})
$('.date').blur(function () {
    $(this).prop('type', 'text')
})


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/912421.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux服务控制及系统基本加固

一. liunx操作系统的开机引导的过程 1. 开机自检 根据bios的设置&#xff0c;对cpu,内存&#xff0c;显卡&#xff0c;键盘等等设备进行初步检测如果以上检测设备工作正常&#xff0c;系统会把控制权移交到硬盘 总结:检测出包含系统启动操作系统的设备&#xff0c;硬盘&#…

通过 SSH 隧道将本地端口转发到远程主机

由于服务器防火墙,只开放了22端口,想要通过5901访问服务器上的远程桌面,可以通过下面的方式进行隧道转发。 一、示例命令 这条代码的作用是通过 SSH 创建一个 本地端口转发,将你本地的端口(5901)通过加密的 SSH 隧道连接到远程服务器上的端口(5901)。这种方式通常用于在…

WPF+MVVM案例实战与特效(二十八)- 自定义WPF ComboBox样式:打造个性化下拉菜单

文章目录 1. 引言案例效果3. ComboBox 基础4. 自定义 ComboBox 样式4.1 定义 ComboBox 样式4.2 定义 ComboBoxItem 样式4.3 定义 ToggleButton 样式4.4 定义 Popup 样式5. 示例代码6. 结论1. 引言 在WPF应用程序中,ComboBox控件是一个常用的输入控件,用于从多个选项中选择一…

C#中日期和时间的处理

目录 前言 时间对于我们的作用 一些关于时间的名词说明 格里高利历 格林尼治时间(GMT) 协调世界时(UTC) 时间戳 DateTime 初始化 获取时间 计算时间 字符串转DateTime 存储时间 TimeSpan 初始化它来代表时间间隔 用它相互计算 自带常量方便用于和ticks进行计…

pdb和gdb的双剑合璧,在python中调试c代码

左手编程&#xff0c;右手年华。大家好&#xff0c;我是一点&#xff0c;关注我&#xff0c;带你走入编程的世界。 公众号&#xff1a;一点sir&#xff0c;关注领取python编程资料 问题背景 正常情况下&#xff0c;调试python代码用pdb&#xff0c;调试c代码用gdb&#xff0c;…

【Apache ECharts】<农作物病害发生防治面积>

在vs Code里打开&#xff0c; 实现 1. 首先引入 echarts.min.js 资源 2. 在body部分设一个 div&#xff0c;设置 id 为 main 3. 设置 script 3.1 基于准备好的dom&#xff0c;初始化echarts实例 var myChart echarts.init(document.getElementById(main)); 3.2 指定图表的…

Docker + Jenkins + gitee 实现CICD环境搭建

目录 前言 关于Jenkins 安装Jenkins docker中运行Jenkins注意事项 通过容器中的Jenkins&#xff0c;把服务打包到docker进行部署 启动Jenkins 创建第一个任务 前言 CI/CD&#xff08;持续集成和持续交付/持续部署&#xff09;&#xff0c;它可以实现自动化的构建、测试和部署…

Leetcode 买卖股票的最佳时机 Ⅱ

使用贪心算法来解决此问题&#xff0c;通过在价格上涨的每一天买入并在第二天卖出的方式&#xff0c;累计所有上涨的利润&#xff0c;以实现最大收益。关键点是从第二天开始遍历&#xff0c;并且只要当前比前一天价格高&#xff0c;我们就在前一天买入然后第二天卖出去。下面是…

【Linux系列】命令行中的文本处理:从中划线到下划线与大写转换

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

使用Docker快速部署FastAPI Web应用

Docker是基于 Linux 内核的cgroup、namespace以及 AUFS 类的Union FS 等技术&#xff0c;对进程进行封装隔离&#xff0c;一种操作系统层面的虚拟化技术。Docker中每个容器都基于镜像Image运行&#xff0c;镜像是容器的只读模板&#xff0c;容器是模板的一个实例。镜像是分层结…

【go从零单排】迭代器(Iterators)

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 &#x1f4d7;概念 在 Go 语言中&#xff0c;迭代器的实现通常不是通过语言内置的迭代器类型&#x…

C语言--结构体的大小与内存对齐,位段详解

一.前言 为了保证文章的质量和长度&#xff0c;小编将会分两篇介绍&#xff0c;思维导图如下&#xff0c;上篇已经讲过了概念部分&#xff0c;本文主要讲解剩余部分&#xff0c;希望大家有所收获&#x1f339;&#x1f339; 二.结构体的大小与内存对齐 2.1 存在对齐的原因 平…

UnicodeDecodeError: ‘utf-8‘ codec can‘t decode bytes ... - python 报错解决方案

背景 加载数据集突然出问题&#xff0c; 详细报错为&#xff1a;UnicodeDecodeError: utf-8 codec cant decode bytes in position 606-607: invalid continuation byte 解决方案 源文件另存 UTF-8 版的 csv。 即可运行&#xff1a;

MQTT协议解析 : 物联网领域的最佳选择

1. MQTT协议概述 1.1 MQTT协议是什么 MQTT : Message Queuing Telemetry Transport 模式 : 发布 / 订阅主题优点 : 代码量小、低带宽、实时可靠应用 : 物联网、小型设备、移动应用MQTT 常用端口 : 1883 MQTT是一个网络协议&#xff0c;和HTTP类似&#xff0c;因为轻量简单&…

快速入门Zookeeper

Zookeeper ZooKeeper作为一个强大的开源分布式协调服务&#xff0c;扮演着分布式系统中至关重要的角色。它提供了一个中心化的服务&#xff0c;用于维护配置信息、命名、提供分布式同步以及提供组服务等。通过其高性能和可靠的特性&#xff0c;ZooKeeper能够确保在复杂的分布式…

「Mac玩转仓颉内测版1」入门篇1 - Cangjie环境的搭建

本篇详细介绍在Mac系统上快速搭建Cangjie开发环境的步骤&#xff0c;涵盖VSCode的下载与安装、Cangjie插件的离线安装、工具链的配置及验证。通过这些步骤&#xff0c;确保开发环境配置完成&#xff0c;为Cangjie项目开发提供稳定的基础支持。 关键词 Cangjie开发环境搭建VSC…

从0开始学习机器学习--Day20--优化算法的思路

确定执行的优先级(Prioritizing what to work on : Spam classification example) 在建立学习系统前&#xff0c;我们不仅要梳理框架&#xff0c;更重要的是我们要弄清楚有哪些事情是要优先做的&#xff0c;这可以帮我们节约大量的时间。 以垃圾邮件为例&#xff0c;按照之前…

H5播放器EasyPlayer.js 流媒体播放器是否支持npm(yarn) install 安装?

EasyPlayer.js H5播放器是一款功能强大的H5视频播放器&#xff0c;它支持多种流媒体协议播放&#xff0c;包括WebSocket-FLV、HTTP-FLV、HLS&#xff08;m3u8&#xff09;、WebRTC等格式的视频流。它不仅支持H.264和H.265编码格式&#xff0c;还具备实时录像、低延时直播等功能…

SpringCloud篇(微服务)

目录 一、认识微服务 1. 单体架构 2. 分布式架构 3. 微服务 3.1. 特点 3.2. 优点 3.3 缺点 二、微服务设计、拆分原则 1. AKF 拆分原则 2. Y轴&#xff08;功能&#xff09;关注应用中功能划分&#xff0c;基于不同的业务拆分 3. X轴&#xff08;水平扩展&#xff09…

【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇(下)

系列文章目录 【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器&#xff08;上&#xff09; 【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器&#xff08;下&#xff09; 【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇&#xff08;上&#xff09; 【…