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.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"/>&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)