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"/>
<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)
vue - blog开发学习4的更多相关文章
- vue - blog开发学习5
基本功能和后台联调 1.首页的所有博客 因为是前后台都是本地开发,所以前端vue需要设置proxy:修改/config/index.js中的这个proxyTable proxyTable: { '/a ...
- vue - blog开发学习2
首页博客列表的开发 1.修改index.vue,使能够支持列表功能 <template> <div> <PostList v-for="(item,index) ...
- vue - blog开发学习1
1.安装vue-cli vue intall -g vue-cli 2.创建项目 vue init webpack nblog 3.按提示要求配置项目 ? Project name nblog ? P ...
- vue - blog开发学习6
1.问题,如下图,使用iviewui中的card导致页面不能出现滚动条(不太会弄,在网上查了一个vue组件vuescroll,因此使用这个做滚动条) 2.安装vuescroll cnpm instal ...
- vue - blog开发学习3
1.添加less 和less-loader支持 npm install less less-loader --save-dev 2.新建main.less,将这个样式添加到home.vue中的cont ...
- vue - blog开发学7
将基本的项目部署到linux上(前后台只是实现了基本的功能,本次只是记录一些基本的开发流程,完善,等后续) 1.linux环境准备(我用的是阿里云服务器) ①jre.mysql,Nginx基本上这些就 ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- 前端开发 Vue -1windows环境搭建Vue Node开发环境
解决几个疑问: 想学习下vue.js,我理解的它是一个前端的框架,主要作用是对数据的处理,和juqery类似,所以不太理解为什么要在nodejs中npm install vue呢?在html文件中引入 ...
- Android开发学习路线图
Android开发学习方法: Android是一个比较庞大的体系,从底层的Linux内核到上层的应用层,各部分的内容跨度也比较大.因此,一个好的学习方法对我们学习Android开发很重要. 在此建议, ...
随机推荐
- C#windows向窗体传递泛型类
修改窗体代码文件*.cs public partial class FormName<T> : Form partial说明此类还有一半在另外的cs文件中,正是系统替你写好的*.desig ...
- 2.Web中使用iReport 整合----------创建html格式的
转自:https://wenku.baidu.com/view/104156f9770bf78a65295462.html 1.
- MySQL--15 MHA简介
目录 一.MHA简介 二.工作流程 三.MHA架构图 四.MHA工具介绍 五.基于GTID的主从复制 六.部署MHA 一.MHA简介 松信嘉範: MySQL/Linux专家 2001年索尼公司入职 ...
- gvfs错误导致tilda和thunar启动缓慢问题的解决
tilda是一个非常轻便的下拉终端,但是安装之后启动发现要过十几秒才会出现界面.命令行启动发现报错如下: 用这条信息到处搜索也找不到有用的解答. 后来终于发现这是一个dbus超时的问题,虽然原因和这个 ...
- 关于Insufficient space for shared memory file解决办法
发现这个目录使用率100%,但是这个只是逻辑卷,具体是由于/tmp目录下,日志文件太多,导致空间被占满了.
- Sass函数:列表函数nth
语法: nth($list,$n) nth() 函数用来指定列表中某个位置的值.不过在 Sass 中,nth() 函数和其他语言不同,1 是指列表中的第一个标签值,2 是指列给中的第二个标签值,依此类 ...
- git,提交错了分支,想把远程的分支恢复到上一个版本
1.先将本地分支回滚到上一个版本 2.删除远程分支(可以先备份一下) 3.创建新的分支,将本地分支push上去
- Struts2之param标签的使用
struts2的s:param标签主要有两个属性name与value: 传值 若想在value属性中输入字符串,则可以这样写:<s:param name="tableTitle&quo ...
- jQuery中keyup() 和 keydown()方法
kuydown()方法与上方用法一样:一个按键松开执行代码,一个按键按下执行.
- 开源大数据生态下的 Flink 应用实践
过去十年,面向整个数字时代的关键技术接踵而至,从被人们接受,到开始步入应用.大数据与计算作为时代的关键词已被广泛认知,算力的重要性日渐凸显并发展成为企业新的增长点.Apache Flink(以下简称 ...