vue - blog开发学习4
2024-09-06 01:56:57
1、新建页面的修改，集成富文本编辑 edit-post.vue（新建和修改都用该组件）
<template>
<div class="editor">
<span class="h5 text-left">标题</span>
<Input v-model="title" size="large" placeholder="请输入标题~~~"/>
<span class="h5 text-left">内容</span>
<TinymceEditor ref="editor" v-model="content" :disabled="disabled" @onClick="onClick"></TinymceEditor>
<Button @click="submitPost">发布</Button>
<Button type="dashed" @click="submitPost">保存草稿</Button>
<Button type="warning" @click="clear">重置</Button>
</div>
</template> <script>
import TinymceEditor from '@/components/tinymce-editor' export default {
name: "EidtPost",
components: {
TinymceEditor
},
data() {
return {
title: '',
content: '',
disabled: false
}
},
mounted() {
let postId = this.$route.params.postId
if (postId) {
this.$axios({
url: '/post',
method: 'get',
params: {
postId
}
}).then(response => {
let data = response.data
this.title = data.title
this.content = data.content
}).catch(error => {
alert('出错了')
})
}
},
methods: {
// 鼠标单击的事件(editor)
onClick(e, editor) {
// console.log('Element clicked')
// console.log(e)
// console.log(editor)
},
// 清空内容
clear() {
this.$refs.editor.clear()
this.title = ''
this.content = ''
},
submitPost() {
this.$axios({
url: '/createPost',
method: 'post',
data: {
title: this.title,
content: this.content
}
}).then(response => {
let status = response.status
let data = response.data
if (status === 200 && data.status === 1) {
this.$Notice.success({
title: '成功',
desc: ''
})
this.$router.push({
name: 'Index'
})
} else {
this.$Notice.error({
title: '出错',
desc: data.msg
})
}
}).catch(error => {
alert("出错了")
})
}
}
}
</script> <style scoped>
.editor {
padding: 20px;
height: 100%;
margin-left: 10%;
margin-right: 10%;
text-align: left;
} </style>
2、路由配置
{
path: '/editPost',
name: 'EidtPost',
component: EidtPost
},
3、模拟数据
const create = () => {
return {
status: 1,
msg: '成功'
}
}
Mock.mock('/createPost', 'post', create)
4、编辑页面的修改（和index.vue组件类似，基本上就是复制了一份）
<template>
<div>
<Scroll :on-reach-bottom="handleReachBottom" :distance-to-edge="scroll" :height="height">
<EditPostList v-for="(item,index) in postList" :postId="item.postId" :postTitle="item.title"
:content="item.content"
:postCount="postCount"
:key="index"></EditPostList>
</Scroll>
</div>
</template> <script>
import EditPostList from '@/components/edit-post-list' export default {
name: "EditList",
components: {
EditPostList
},
data() {
return {
height: document.body.clientHeight * 0.85,
scroll: [20, 20],
postList: [],
postCount: 100
}
},
created() {
this.getPostList()
},
methods: {
handleReachBottom() {
this.getPostList()
},
getPostList() {
this.$axios({
url: '/api/posts',
method: 'get'
}).then(response => {
this.postList = [...this.postList, ...response.data.posts]
})
}
} }
</script> <style scoped> </style>
5、修改edit-post-list.vue组件
<template>
<div style="background: #eee;padding: 1px; margin-left: 10%;margin-right: 10%">
<router-link tag="div" :to="{name:'Post',params:{postId}}">
<Card :bordered="false" class="text-left">
<div>
<p slot="title" style="margin-bottom: 0px;height: 25px">
<Avatar icon="ios-paper-outline" size="small"/>
<b> {{postTitle}}</b>
</p>
<p>{{content}}</p>
<div>
<p>2019-05-29</p>
<Button style="position: absolute;right: 20px;bottom: 20px" size="small" @click.stop="editPost(postId)">修改</Button>
</div> </div> </Card>
</router-link>
</div>
</template> <script>
export default {
name: "EditPostList",
props: {
postId: {
type: String,
default: ''
},
postTitle: {
type: String,
default: ''
},
content: {
type: String,
default: ''
},
postCount: {
type: Number,
default: 0
}
},
methods: {
editPost(postId){
this.$router.push({
name:'EidtPost',
params:{
postId
}
}) }
}
}
</script> <style scoped>
div p {
margin-bottom: 0px;
height: 25px
}
</style>
6、模拟的数据
//引入mockjs
const Mock = require('mockjs')
// 获取mock.Random对象
const Random = Mock.Random //mock数据
const postList = () => {
let posts = []
for (let i = 0; i < 10; i++) {
let post = {
postId: Random.integer(1, 1000) + '',
title: Random.csentence(5, 15),
content: Random.csentence(50, 100)
}
posts.push(post)
} return {
posts: posts
}
}
Mock.mock('/api/posts', 'get', postList)
最新文章
- JQuery + JSON作为前后台数据交换格式实践
- 【第二课】深入理解Handler
- [转]highcharts图表入门之：如何让highcharts图表自适应浏览器窗体的大小或者页面大小
- memcached 系列2:memcached实例（转载）
- 空心文字闪动--css3
- （转）ASP.NET(C#) 读取EXCEL ——另加解决日期问题
- CodeForces 589J Cleaner Robot (DFS，或BFS)
- ECMA5.1中Object.seal()和Object.freeze()的区别
- postgresql的psql命令
- javascript ajax 脚本跨域调用全解析
- hdu_5777_domino(贪心)
- Node.js 入门简介
- 定时器(setTimeout和setInterval)调用带参函数失效解决方法
- iOS中 如何将自己的框架更新到cocopods上 韩俊强的博客
- SharePoint如何配置Ipad跳转等问题
- CAN总线网络的传输模式
- 16)django-ajax使用
- centos7下使用rpm包安装clickhouse
- Java 将word转为pdf jacob方式
- ansible实现keepalived和nginx高可用