This is the 24th day of my participation in Gwen Challenge

The last post completed the front page of the blog list. It may not have done very well, but at least it didn’t persuade you to leave at a glance

Complete the new page of the blog today ~

New page from the blog list page to write an article click to enter, first look at the effect of the ~

At present, it is just simple title, summary and content. In fact, I have added many fields, such as cover, label and recommendation index, etc. However, I am not familiar with back-end development at present, so I will do the simple one first, and then slowly optimize and add new functions after completing this small project.

A simple introduction

The new blog page mainly uses the Elder-form of Element-UI, and the editor is wangEditor, which I feel is a little more concise on the UI than the other editors, and easy to configure and use

In the code

New SRC/views/NewBlog/index. Vue, and make a simple configuration in the routing.

src/router/index.js

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

src/views/NewBlog/index.vue

<template> <div class="new-blog"> <el-button type="primary" class="common-btn" @click="goBack"> Return </el-button> <div class="blog-box"> <el-form ref="formRef" :model="formModel" label-width="90px" label-position="right" :rules="formRules"> <el-form-item label=" Trim ="formModel.title" placeholder=" please input the title"> </el-input> </el-form-item> <el-form-item Label = "abstract: "Prop ="abstract"> < el-form-item> < el-form-item> < 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 type="primary" @click="toPublic" Class ="common-btn"> </el-button> <! -- <el-button class="deep" @click="toPublish" V-else > </el-button> --> </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: 'Please enter the title ', trigger: 'blur'}], abstract: [{required: true, message:' Please enter the blog summary ', trigger: 'blur'}], Content: [{required: True, message: 'Please input text ', trigger: 'blur'}]}}}, computed: {}, Mounted () {this.editInit()}, methods: ToAsDraft () {this.$message.info(' to be developed... ')}, // Click publish toPublic() {console.log('this.formModel: ', this.formModel); }, // Editor initializes editInit() {const Editor = new wangEditor(' #contentBody ') // Sets edit area height to 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 Onchange = newHtml => {this.formModel.content = newHtml} // Now upload a few images editor.config.uploadImgMaxLength = 1 editor.config.uploadImgShowBase64 = true // let _this = this // editor.config.customUploadImg = async function (resultFiles, InsertImgFn) {// // resultFiles is a list of files selected in the input // // insertImgFn is a list of files selected after obtaining the image URL, Insert methods into the editor // console.log('resultFiles', ResultFiles) // if (resultFiles.length > 1) {// return _this.$message.info(' Upload only one image ~') //} // let imgURL = await _this.upandGetFileurl (resultFiles[0]) // // Upload image, return result, // if (imgURL) {// insertImgFn(imgURL) //} //} // create editor 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>Copy the code

Editor initialization It is important to note that the editor provides three ways to save images

  • Configure the server address through the API provided by the editor
  • Save as Base64
  • Fully custom upload

I chose to save Base64 because my server doesn’t support images yet

Therefore, base64 is still used first for the time being, but in the work, it is still suggested to upload to the server and splicing the address to display pictures, which will be better. After all, if base64 is used, it will take a century to load any more pictures

Ok, today the new blog page has been written, tomorrow I will write the blog management page, that is much easier, and then try to finish in two days ~