小说网站第二章-关于文章的上传的实现

简述

  因为最近比较忙，所以只有时间把以前的东西整理一下。前端方面，我使用了既存md5框架语法来保存数据，原谅我展示没找到好的方法。后端的话，我使用node+mongodb来保存数据。下面我就来简单介绍一下我的东西。

前端的实现

 前端的md5实现框架其实有很多，这里，我使用了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-editorv-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: '',},// 输入的数据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, // codetable: true, // 表格fullscreen: true, // 全屏编辑readmodel: true, // 沉浸式阅读htmlcode: true, // 展示html源码help: true, // 帮助undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: true, // 保存（触发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>

 后端的实现

 后端我采用了node+mongodb的方式，使用mongodb和mysql相比相对繁琐一点，需要预先定义数据模型。

npm install mongoose

数据模型

保存数据

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');
//   // 实例化数据模型,创建数据的时候需要saveconst 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.typeconst series=req.body.seriesconst content =  req.body.contentconst title = req.body.titleconst obj={type:type,series:series,content:content,title:title}console.log(obj)var data = require("./getData")await data(obj)res.send("返回数据")
})

总结

  后续会对页面继续升级优化，今天先到这里吧