111 lines
3.4 KiB
Vue
111 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 引用导航 -->
|
|
<AddHeader></AddHeader>
|
|
<br>
|
|
<div class="m_content">
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
|
<el-form-item label="标题" prop="title">
|
|
<el-input v-model="ruleForm.title"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="摘要" prop="description">
|
|
<el-input type="textarea" v-model="ruleForm.description"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="内容" prop="content">
|
|
<!-- 特殊组件 -->
|
|
<mavon-editor v-model="ruleForm.content"></mavon-editor>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm('ruleForm')">立即发布</el-button>
|
|
<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<br>
|
|
<Footer></Footer>
|
|
<br>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
import AddHeader from "../components/AddHeader";
|
|
import Footer from "../components/Footer";
|
|
|
|
export default {
|
|
components: {AddHeader, Footer},
|
|
beforeRouteEnter(to, from, next) {
|
|
// 在组件进入之前，将页面滚动到顶部
|
|
window.scrollTo(0, 0);
|
|
next();
|
|
},
|
|
data() {
|
|
return {
|
|
ruleForm: {
|
|
id: "",
|
|
title: "",
|
|
description: "",
|
|
content: "",
|
|
},
|
|
rules: {
|
|
title: [
|
|
{ required: true, message: "请输入标题", trigger: "blur" },
|
|
{
|
|
min: 5,
|
|
max: 100,
|
|
message: "长度在 5 到 100 个字符",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
description: [
|
|
{ required: true, message: "请输入摘要", trigger: "blur" },
|
|
],
|
|
content: [{ required: true, message: "请输入内容", trigger: "blur" }],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
submitForm(formName) {
|
|
//提交表单
|
|
this.$refs[formName].validate((valid) => {
|
|
if (valid) {
|
|
//提交表单
|
|
axios.post('/addBlog', {
|
|
// id: this.ruleForm.id,
|
|
title: this.ruleForm.title,
|
|
description: this.ruleForm.description,
|
|
content: this.ruleForm.content,
|
|
created: new Date()
|
|
}).then(function (response) {
|
|
console.log(response.data)
|
|
//跳转到主页
|
|
window.location.href = "/"
|
|
})
|
|
} else {
|
|
console.log("error submit!!");
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
resetForm(formName) {
|
|
console.log(formName)
|
|
this.$refs[formName].resetFields();//Element的一个方法,用于重置表单为初始值。
|
|
|
|
|
|
}
|
|
},
|
|
|
|
name: "BlogEditView",
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
|
|
|
|
.m_content {
|
|
margin: 0 auto;
|
|
}
|
|
</style> |