5功能完善

角色管理

和用户管理类似

文章编辑相关功能

wangeditor插件
富本文本编辑器

<template>
    <div>
        <div style="padding:20px">
            <el-button type="primary" @click="uptext">提交</el-button>
            {{$store.state.user.info.profile.name}}
        </div>
        <div class="titlenav" style="padding:20px 0;">
            <el-form ref="form" :model="form" label-width="80px">
            <el-row :gutter="20">
            <el-col :span="18">
                    <el-input v-model="form.title" placeholder="标题"></el-input>
            </el-col>
            <el-col :span="6">
                    <el-select v-model="form.idChannel" placeholder="选择类型" v-if="channellistview">
                        <el-option v-for="i in channellistview" :label="i.name" :value="i.id"></el-option>
                    </el-select>
            </el-col>
            </el-row>
        </el-form>
        </div>
        <div style="background:#fff;">
            <div ref="widthcontent" class="widthcontent"></div>
        </div>
    </div>
</template>
<script>
import wangeditor from 'wangeditor'
import {http,channellist,file,article} from '../../api/api'
export default {
    data(){
        return{
            form:{
                idChannel:'',
                title:''
            },
            channellistview:'',
            editor:''
        }
    },
    mounted(){
        //开启动画
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)'
			});
			
        this.editor = new wangeditor(this.$refs.widthcontent)
        this.editor.customConfig.showLinkImg = false
        this.editor.customConfig.uploadImgServer = '/upload'
        this.editor.customConfig.uploadImgMaxLength = 1
        this.editor.customConfig.customUploadImg =(files, insert)=>{
            // files 是 input 中选中的文件列表
            // insert 是获取图片 url 后，插入到编辑器的方法
               let f = files[0]
               let d = new FormData
               d.append('file',f)
               this.$http.post(http+file,d,{
                   headers:{
                       'constnet-type':'multipart/form-data',
                       'Authorization':localStorage.token
                   }
               }).then((data)=>{
                if(data.data.msg == '成功') {
                    insert(data.data.data.realFileName)
				} else {
					this.$message.error(data.data.msg);
				}
               },(err)=>{
                   this.$message.error(err.data.message);
               })
        }
        this.editor.create();
        this.getchannellist()
        //结束动画
                setTimeout(() => {
                    loading.close();
                }, 1000);
    },
    methods:{
        uptext(){
            //提交文章
            let json ={
                author:this.$store.state.user.info.profile.name,
                content:this.editor.txt.html().replace(/\%/g,'%25'),
                idChannel:this.form.idChannel,
                title:this.form.title
            }
            var type = true
            for(var i in json){
                if(json[i]==''){
                    type = false
                }
            }
            if(type){
                this.$http.post(http+article,JSON.stringify(json)).then((data)=>{
                    if(data.data.msg == '成功') {
                        this.$message({
                        message: '提交成功了',
                        type: 'success'
                        });
                        console.log(data.data)
                    } else {
                        this.$message.error(data.data.msg);
                    }
                    console.log(data.data)
                },(err)=>{
                    this.$message.error(err.data.message);
                })
            }else{
                this.$message.error('请补全数据');
            }
            
            console.log(json)
        },
        getchannellist(){
            //获取分类
            this.$http.get(http+channellist).then((data)=>{
                if(data.data.msg == '成功') {
					this.channellistview = data.data.data
				} else {
					this.$message.error(data.data.msg);
				}
                console.log(data.data)
            },(err)=>{
                this.$message.error(err.data.message);
            })
        }
    }
}
</script>
<style>
    .widthcontent{
        position: relative;
        z-index: 1;
    }
    .titlenav{
        position: relative;
        z-index: 2;
    }
</style>

图片上传

this.editor.customConfig.customUploadImg =(files, insert)=>{
            // files 是 input 中选中的文件列表
            // insert 是获取图片 url 后，插入到编辑器的方法
               let f = files[0]
               let d = new FormData
               d.append('file',f)
               this.$http.post(http+file,d,{
                   headers:{
                       'constnet-type':'multipart/form-data',
                       'Authorization':localStorage.token
                   }
               }).then((data)=>{
                if(data.data.msg == '成功') {
                    insert(data.data.data.realFileName)
				} else {
					this.$message.error(data.data.msg);
				}
               },(err)=>{
                   this.$message.error(err.data.message);
               })
        }

选择文章分类

getchannellist(){
            //获取分类
            this.$http.get(http+channellist).then((data)=>{
                if(data.data.msg == '成功') {
					this.channellistview = data.data.data
				} else {
					this.$message.error(data.data.msg);
				}
                console.log(data.data)
            },(err)=>{
                this.$message.error(err.data.message);
            })
        }

 <el-col :span="6">
                    <el-select v-model="form.idChannel" placeholder="选择类型" v-if="channellistview">
                        <el-option v-for="i in channellistview" :label="i.name" :value="i.id"></el-option>
                    </el-select>
            </el-col>

.widthcontent{
position: relative;
z-index: 1;
}
覆盖下面一层，规定上下叠加关系

提交文章

uptext(){
            //提交文章
            let json ={
                author:this.$store.state.user.info.profile.name,
                content:this.editor.txt.html().replace(/\%/g,'%25'),
                idChannel:this.form.idChannel,
                title:this.form.title
            }
            var type = true
            for(var i in json){
                if(json[i]==''){
                    type = false
                }
            }
            if(type){
                this.$http.post(http+article,JSON.stringify(json)).then((data)=>{
                    if(data.data.msg == '成功') {
                        this.$message({
                        message: '提交成功了',
                        type: 'success'
                        });
                        console.log(data.data)
                    } else {
                        this.$message.error(data.data.msg);
                    }
                    console.log(data.data)
                },(err)=>{
                    this.$message.error(err.data.message);
                })
            }else{
                this.$message.error('请补全数据');
            }
            
            console.log(json)
        },

文章管理

获取文章列表

加入时间起始，筛选文章

offset 值得分栏偏移的栏数

获取api
然后 列出 params

修改文章

 //对话框打开时的回调
            this.$nextTick(() => {
                this.editor = new wangeditor(this.$refs.width)
                this.editor.customConfig.showLinkImg = false
                this.editor.customConfig.uploadImgServer = '/upload'
                this.editor.customConfig.uploadImgMaxLength = 1
                this.editor.customConfig.customUploadImg = (files, insert) => {
                    // files 是 input 中选中的文件列表
                    // insert 是获取图片 url 后，插入到编辑器的方法
                    let f = files[0]
                    let d = new FormData
                    d.append('file', f)
                    this.$http.post(http + file, d, {
                        headers: {
                            'constnet-type': 'multipart/form-data',
                            'Authorization': localStorage.token
                        }
                    }).then((data) => {
                        if (data.data.msg == '成功') {
                            insert(data.data.data.realFileName)
                        } else {
                            this.$message.error(data.data.msg);
                        }
                    }, (err) => {
                        this.$message.error(err.data.message);
                    })
                }
                this.editor.create();
                this.editor.txt.html(this.form.content)
                this.getchannellist()
            })

        },

创建之后 再渲染不能放错位置

删除文章

后端数据删除后，前端数据不再渲染

加载动画

一个一个加动画感觉好麻烦