vue - blog開發學習4

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.postIdif (postId) {this.$axios({url: '/post',method: 'get',params: {postId}}).then(response => {let data = response.datathis.title = data.titlethis.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.statuslet data = response.dataif (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"/>&nbsp;&nbsp;<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)

?

posted @ 2019-06-08 14:51 巡山小妖N 閱讀(...) 評論(...) 編輯 收藏

總結

以上是生活随笔為你收集整理的vue - blog开发学习4的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。