簡述

? 因為最近比較忙，所以只有時間把以前的東西整理一下。前端方面，我使用了既存md5框架語法來保存數(shù)據，原諒我展示沒找到好的方法。后端的話，我使用node+mongodb來保存數(shù)據。下面我就來簡單介紹一下我的東西。

前端的實現(xiàn)

?前端的md5實現(xiàn)框架其實有很多，這里，我使用了mavon-editor框架?？梢灾苯訉胧褂?，如果是簡單的小說網站，用這個東西其實也夠了。稍微懂點md5語法，其實也可以寫得很好看。

npm install mavon-editor

<template>
    <div class="dashboard-container">
      <el-form  >
        <el-form-item label="標題" label-width="80px">
        <input type="text" v-model="queryinfo.title">
      </el-form-item>
      <el-form-item label="系列" label-width="80px">
        <input type="text" v-model="queryinfo.series">
      </el-form-item>
      <el-form-item label="類型" label-width="80px">
      <input type="text" v-model="queryinfo.type">
      </el-form-item>
      </el-form>
    
      <br>
      <mavon-editor
        v-model="queryinfo.content"
        :toolbars="toolbars"
        @save="save"
      />
    </div>
  </template>
<script>
import qs from 'qs'
export default {
  name: 'MyArticle',
  data() {
    return {
      queryinfo:{
        title:'',
        series:'',
        type:'',
        content: '',
      },
      // 輸入的數(shù)據
      toolbars: {
        bold: true, // 粗體
        italic: true, // 斜體
        header: true, // 標題
        underline: true, // 下劃線
        strikethrough: true, // 中劃線
        mark: true, // 標記
        superscript: true, // 上角標
        subscript: true, // 下角標
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 無序列表
        link: true, // 鏈接
        imagelink: true, // 圖片鏈接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏編輯
        readmodel: true, // 沉浸式閱讀
        htmlcode: true, // 展示html源碼
        help: true, // 幫助
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（觸發(fā)events中的save事件）
        navigation: true, // 導航目錄
        alignleft: true, // 左對齊
        aligncenter: true, // 居中
        alignright: true, // 右對齊
        subfield: true, // 單雙欄模式
        preview: true // 預覽
      },
    }
  },
  mounted() {},
  methods: {
   async  save(){
    console.log()
   // const {data:res} = await this.$http.post("getUserInfo/pagination", qs.stringify(this.queryInfo))
    this.queryinfo.content=this.queryinfo.content.replace(/\n/g, "<br/>");
    const {data:res} = await this.$http.post("data", qs.stringify(this.queryinfo))
    alert(res)
    }
  }
}
</script>
<style>
 .el-form-item {
  display: inline-block !important;
  margin-right: 10px;
}

</style>
  

?后端的實現(xiàn)

?后端我采用了node+mongodb的方式，使用mongodb和mysql相比相對繁瑣一點，需要預先定義數(shù)據模型。

npm install mongoose

數(shù)據模型

保存數(shù)據

async function getData(mydata){
//     const mongoose = require("./mogodb")
//     const OrderSchema = mongoose.Schema({
//     type:String,
//     series:String,
//     data:String,
//     title:String
//   })
// const Order = mongoose.model(mydata.title, OrderSchema, 'order');
//   // 實例化數(shù)據模型,創(chuàng)建數(shù)據的時候需要save

const User = require("./Schema")
const order1 = new User({
  type:mydata.type,
  series:mydata.series,
  data:mydata.content,
  title:mydata.title

})
order1.save()
 
}
module.exports=getData

模塊的引用?

app.post('/data', async function(req,res){
  
  const type = req.body.type
  const series=req.body.series
  const content =  req.body.content
 
  const title = req.body.title
  const obj={type:type,series:series,content:content,title:title}
  console.log(obj)
  var data = require("./getData")
  await data(obj)
  res.send("返回數(shù)據")
})

總結

? 后續(xù)會對頁面繼續(xù)升級優(yōu)化，今天先到這里吧文章來源地址http://www.zghlxwxcb.cn/news/detail-648180.html

到了這里，關于小說網站第二章-關于文章的上傳的實現(xiàn)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！