目录
本次项目为后台管理系统，在本系统内的第五个界面为窗体程序内的文章发表页面，作为首页内大分类下的小分类项目，需要和首页进行联合
文章列表的的功能介绍：
在进行本页面时，我们将进行多个功能的串联
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')
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
