Node系列学习之简单博客前台(四)

这是我参与更文挑战的第24天，活动详情查看：更文挑战

上篇文章完成了博客列表的前台页面, 可能做的也不是很好, 但至少不会一眼劝退了~

今天完成博客的新建页面~

新建页面由博客列表页面的写文章点击进入, 先看下效果图吧~

现在只是比较简单的标题,摘要和内容, 其实我还加了很多字段, 比如封面, 标签, 推荐指数等, 但限于目前后端开发还不是很熟练, 所以还是先做简单的, 等这个小项目自己做好后再慢慢优化和添加新功能.

简单介绍

​ 博客新建页面主要使用了 element-ui的 el-form , 编辑器用的是 wangeditor, 这个编辑器UI上我感觉比其他的编辑器更简洁一点, 而且易配置易上手~

上代码

新建 src/views/NewBlog/index.vue, 并在路由里进行简单配置一下。

src/router/index.js

...
  {
    path: '/new-blog',
    name: 'NewBlog',
    component: () => import('@/views/NewBlog/index.vue')
  }
..

src/views/NewBlog/index.vue

<template>
  <div class="new-blog">
    <el-button type="primary" class="common-btn" @click="goBack">返回</el-button>
    <div class="blog-box">
      <el-form ref="formRef" :model="formModel" label-width="90px" label-position="right" :rules="formRules">
        <el-form-item label="标题: " prop="title">
          <el-input v-model.trim="formModel.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="摘要: " prop="abstract">
          <el-input v-model.trim="formModel.abstract" placeholder="请输入摘要"></el-input>
        </el-form-item>
        <el-form-item label="正文: " prop="content">
          <div class="contentBody" id="contentBody"></div>
        </el-form-item>
      </el-form>
      <div class="footBlock">
        <el-button class="common-btn" @click="goBack">返回</el-button>
        <el-button class="light" @click="toAsDraft">存为草稿</el-button>
        <!-- <el-button class="light">保存草稿</el-button> -->
        <el-button type="primary" @click="toPublic" class="common-btn">发布</el-button>
        <!-- <el-button class="deep" @click="toPublish" v-else>发布</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import wangEditor from 'wangeditor'
export default {
  name: 'new-blog',
  components: {},
  data() {
    return {
      formModel: {
        title: '',
        abstract: '',
        recomindex: 9,
        content: '',
        cover: '',
        tags: []
      },
      formRules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        abstract: [{ required: true, message: '请输入博文摘要', trigger: 'blur' }],
        content: [{ required: true, message: '请输入正文', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  mounted() {
    this.editInit()
  },
  methods: {
    // 存为草稿
    toAsDraft() {
      this.$message.info('待开发...')
    },
    // 点击发布
    toPublic() {
      console.log('this.formModel: ', this.formModel);
    },
    // 编辑器初始化
    editInit() {
      const editor = new wangEditor(`#contentBody`)
      // 设置编辑区域高度为 500px
      editor.config.height = 600
      editor.config.showFullScreen = true
      editor.config.pasteFilterStyle = false
      editor.config.uploadImgMaxSize = 50 * 1024 * 1024 // 2M
      // editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
      editor.config.zIndex = 2
      // 取消自动 focus
      editor.config.focus = false
      // 配置 onchange 回调函数，将数据同步到 vue 中
      editor.config.onchange = newHtml => {
        this.formModel.content = newHtml
      }
      // 现在上传几张图片
      editor.config.uploadImgMaxLength = 1
      editor.config.uploadImgShowBase64 = true
      // let _this = this
      // editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
      //   // resultFiles 是 input 中选中的文件列表
      //   // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      //   console.log('resultFiles', resultFiles)
      //   if (resultFiles.length > 1) {
      //     return _this.$message.info('仅允许上传一张图片~')
      //   }
      //   let imgURL = await _this.upAndGetFileURL(resultFiles[0])
      //   // 上传图片，返回结果，将图片插入到编辑器中
      //   if (imgURL) {
      //     insertImgFn(imgURL)
      //   }
      // }
      // 创建编辑器
      editor.create()
      this.editor = editor
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url()
.new-blog {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .blog-box {
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
    .footBlock {
      width: 100%;
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>

编辑器初始化这里需要注意一下, 编辑器提供了三种关于图片保存的方式

• 通过编辑器提供的API配置服务端地址
• 保存为Base64
• 完全自义定上传

这里我选择了保存base64, 因为现在我的服务端还不支持图片, 囧~

所以暂时还是先用base64, 但是在工作中还是建议上传到服务器, 拼接地址显示图片, 这样会更好一些毕竟 base64 的话, 但凡图片一多, 就要Loading一个世纪

好了, 今天的新建博客页面写好了, 明天再写下博客管理的页面, 那个简单多了, 然后争取这两天搞定~