使用nuxt,express,mysql,nginx创建个人博客系列-15
264
2020-01-24 18:37
10 个月前
添加 articles_edit.html文件
目录：server/admin/views/articles_edit
<!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">
<% include header.ejs%>
<title>articles_edit</title>
<style>
.imgSrc{
width:150px;
height:150px;
background-position:center;
background-repeat: no-repeat;
background-size:contain;
<% if(defaultForm.articles_img!=""){ %>
background-image:url('<%= defaultForm.articles_img%>')
<% } %>
}
</style>
</head>
<body>
<% include nav.ejs%>
<div class="container mt-3">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-md-12 mb-3">
<a href="<%= module_dir%>/articles" class="btn btn-link btn-lg btn-block">返回文章列表</a>
</div>
<div class="col-md-12 mb-3">
<label for="firstName">文章名称</label>
<input type="text" class="form-control" id="firstName" value="<%= defaultForm.title%>" placeholder="请输入文章标题名称">
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-12 mb-3">
<label for="keyword">文章关键字</label>
<input type="text" class="form-control" id="keyword" value="<%= defaultForm.keyword%>" placeholder="请输入文章网页关键字">
</div>
<div class="col-md-12 mb-3">
<label for="category">文章类型</label>
<select class="form-control form-control-lg" id="category">
<%categorys.forEach((item)=>{%>
<option value="<%= item.id%>" <%= item.id == defaultForm.category_id ? "selected": "" %>><%=item.name%></option>
<%})%>
</select>
</div>
<div class="col-md-12 mb-3">
<label for="tag">标签类型</label>
<select class="form-control form-control-lg" id="tag">
<%tags.forEach((item)=>{%>
<option value="<%= item.id%>" <%= item.id==defaultForm.tag_id ? "selected": "" %> ><%=item.name%></option>
<%})%>
</select>
</div>
<div class="col-md-12 ">
<div class="row">
<div class="col-md-6 mb-3">
<label for="tag">图片</label>
<input type="file" accept="image" name="file" class="form-control-file" id="exampleFormControlFile1">
<button type="button" id="delete_img" class="mt-3 btn btn-primary btn-lg btn-block">删除图片</button>
</div>
<div class="col-md-6 mb-3">
<label for="tag">图片</label>
<div class="imgSrc"></div>
</div>
</div>
</div>
<div class="col-md-12 mb-3">
<label for="md">文章说明</label>
<textarea id="introduction" class="form-control" style="height:100px;" placeholder="请输入描述"><%= defaultForm.introduction%></textarea>
</div>
<div class="col-md-12 mb-3">
<label for="md">内容</label>
<textarea id="md" class="form-control" style="height:800px;" placeholder="请输入Markdown代码"><%= defaultForm.content%></textarea>
</div>
<div class="col-md-12 mb-3">
<label for="html">显示的样式</label>
<div id="html">
<%- defaultForm.content_html%>
</div>
</div>
<div class="col-md-12 mb-3">
<button type="button" name="" id="btn-submit" class="btn btn-dark btn-lg btn-block">提交</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var module_dir = "<%= module_dir%>";
var id = "<%= id%>"
var end_tag_id = "<%= defaultForm.tag_id%>";
var end_category_id = "<%= defaultForm.category_id%>"
var articles_img = "<%= defaultForm.articles_img%>"
</script>
<script>
$(function () {
$('#btn-submit').on('click', function () {
var title = $('#firstName').val();
var content = $('#md').val();
var category = $('#category').val();
var tag = $('#tag').val();
var introduction = $('#introduction').val();
var keyword = $('#keyword').val();
if (title && tag && category) {
$axios.post(`${module_dir}/articles/edit`, {
id,
pushForm:{
title,
content,
category,
tag,
introduction,
articles_img,
keyword,
end_category_id,
end_tag_id
}
}).then(resp => {
if (resp.status == 1) {
end_tag_id = tag;
end_category_id = category
window.location = `${module_dir}/articles`
// alert('保存成功')
}
})
} else {
alert('请输入文章名称，分类，标签')
}
})
//markdown语法
$('#md').on('input',function(){
let val = $(this).val();
document.getElementById('html').innerHTML = marked(val);
})
$('#delete_img').on('click',function(){
articles_img = "";
$('.imgSrc').css('background-image',`url("")`)
})
$('#exampleFormControlFile1').on('change',function(e){
e = e || window.event
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
let picFile = files[0];
let formData = new FormData();
formData.append('file',picFile,picFile.name)
let url = getObjectURL(picFile);
$('.imgSrc').css('background-image',`url(${url})`)
//上传图片
axios({
method:'post',
url:`${module_dir}/upload/file`,
data:formData,
headers:{
'Content-Type': 'multipart/form-data'
}
}).then(resp=>{
let {data} = resp;
if(data.status==1){
articles_img = data.data.Location;
}
})
})
var getObjectURL = function(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
})
</script>
</html>
篇幅有限，上面有个/upload/file的接口我会放在下章节说。
网页效果如下所示：
上一篇-使用nuxt,express,mysql,nginx创建个人博客系列-14
下一篇-使用nuxt,express,mysql,nginx创建个人博客系列-16