本文主要是介绍不良信息公示，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
系统应用于对各类不良信息进行公示
1、背景
针对目前各类打工人的工作生活，所遇仲裁无门，投诉无果的现象，以及各类公司有恃无恐的态度作为背景，特此对开源项目进行修改，诞生了此套系统
2、系统信息收集
为保障小人物权益，本系统退出匿名收集信息功能，所需的账号以及密码，完全由用户自主输入，不收集用户敏感信息作为保障
体验网址:www.weshir.com
3、部分源码以及项目截图
信息发布页面
在这里插入代码片<el-row :gutter="20"><!-- <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>--><el-col :xs="10" :sm="14"><el-card style="background-color: rgba(255,255,255,0.9)" class="left-item"><div slot="header" class="total"><div class="titleIndex"><i v-if="selected" class="el-icon-back" @click="updateBlogList"></i><span>{{ selectMethod }}</span></div><!-- <span>共 <span style="color: #3a8ee6; font-size: 20px">{{totalcount}}</span> 篇</span> --></div><el-row type="flex" align="middle" style="flex-wrap: wrap" :gutter="20" v-for="blog in blogList":key="blog.id"shadow="never" class="blog-content"><div ><!-- <el-col class="img" :xs="24" :sm="6">--><!-- </el-col>--><el-col :xs="24" :sm="18"style="padding-left: 10px;padding-right: 10px;margin-bottom: 5px;margin-top: -5px;"><div><h3 style="font-weight: bold;font-size: 30px" @click="getBlogInfo(blog.id)"><svg-icon icon-class="Topping" v-show="blog.top==1"/>{{ blog.title }}</h3><div style="margin-bottom: 10px;" @click="getBlogInfo(blog.id)"><span style="color: rgba(0, 0, 0, .4);"> {{ blog.blogDesc }}</span></div><div v-html="blog.content" @click="getBlogInfo(blog.id)"></div><div style="margin-bottom: 10px;"><el-tag effect="plain" size="mini" v-for="tag in blog.tags" :key="tag.tagId" type="success">{{ tag.tagName }}</el-tag></div><div class="blog-info"><div class="user-info"><i class="el-icon-user"></i><span class="header" style="font-size: 15px"> {{ blog.createBy }}</span></div><div class="blog-date"><i class="el-icon-date"></i><span style="font-size: 15px"> {{ blog.createTime }}</span></div><div><i class="el-icon-view"></i><span> {{ blog.views }}</span></div><div class="blog-type"><el-tag size="mini" v-for="tag in blog.types" :key="tag.typeId" type="info">{{ tag.typeName }}</el-tag></div></div></div><el-image v-if="blog.blogPicType === '0'" lazy :src="blog.blogPicLink" @click="getBlogInfo(blog.id)"><div slot="error" class="image-slot"><el-image src="/errorImg.jpg" fit="cover" class="blogPic"></el-image></div></el-image><el-image v-if="blog.blogPicType === '1'" style="width:60%;height: 60%" lazy @click="getBlogInfo(blog.id)":src="blog.blogPic"></el-image></el-col></div></el-row><pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"background layout="total, sizes, prev, pager, next, jumper" @pagination="getBlogList"style="margin-bottom: 30px;float: right;margin-right: 10px;"/></el-card></el-col><el-col :xs="24" :sm="5"><el-card style="background-color: rgba(255,255,255,0.9)" class=" right-item"><div slot="header" class="attributes"><b>分类</b></div><ul class=" blog-type-ul" style="margin-top: 5px;"><li class=" blog-type-li" v-for="cmsType in typeList" :key="cmsType.typeId" @click="selectType(cmsType)":class="cmsType.typeId === typeId? 'activeType':''"><div style="display: flex;align-items: center"><el-image style="width: 28px;height: 28px; border-radius: 50%; margin-right: 10px" lazy:src="cmsType.typePicLink" v-show="cmsType.typePicType == '0'"><div slot="error" style="width: 28px;height: 28px; border-radius: 50%;"><i class="el-icon-collection" style="margin-left:6px;"></i></div></el-image><el-image style="width: 28px;height: 28px; border-radius: 50%; margin-right: 10px" lazy:src="cmsType.typePic" v-show="cmsType.typePicType == '1'"><div slot="error" style="width: 28px;height: 28px; border-radius: 50%;"><i class="el-icon-collection" style="margin-left:6px;"></i></div></el-image>{{ cmsType.typeName }}</div><div>{{ cmsType.blogNum }}</div></li></ul><div class="more" @click="dealType"><i v-if="moreType" class="el-icon-arrow-down"></i><i v-else class="el-icon-arrow-up"></i></div></el-card><el-card style="background-color: rgba(255,255,255,0.9)" class=" right-item"><div slot="header" class="attributes"><b>标签</b></div><div class="tags"><div class=" tag-item" v-for="tag in tagList" :key="tag.tagId" @click="selectTag(tag)":class="tag.tagId === tagId? 'activeTag':''"><div class="sjx-outer"><div class="sjx-inner"></div></div><div class="tag">{{ tag.tagName }}{{ tag.blogNum }}</div></div></div><div class="more" @click="dealTag"><i v-if="moreTag" class="el-icon-arrow-down"></i><i v-else class="el-icon-arrow-up"></i></div></el-card><el-card style="background-color: rgba(255,255,255,0.9)" class=" right-item"><div slot="header" class="attributes"><b>最新推荐</b></div><div class=" recommend-blog l-text" v-for="blog in recommendList" :key="blog.id"@click="getBlogInfo(blog.id)"><a class="recommend-a">{{ blog.title }}</a></div></el-card></el-col><el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col></div></el-row>``````bash
//获取屏幕尺寸，用于用户滑动屏幕，数据停顿
window.addEventListener('scroll', this.handleScroll)this.$nextTick(function () {// 仅在整个视图都被渲染之后才会运行的代码this.getTypeList()this.getBlogList();this.getTagList()this.getRecommendList()let str = '这是我的个人博客、会分享关于编程，开发以及其他方面的一些内容，希望可以对您有所帮助...';let idx = 0;let that = thislet timer = setTimeout(function fn() {// console.log(this.intro)that.intro = that.intro + str.substring(idx, idx + 1)idx++if (idx > str.length) {that.intro = ''idx = 0}setTimeout(fn, 200)}, 2000)this.screenWidth = document.documentElement.clientWidth})```handleScroll() {const scrollTop = window.pageYOffset || document.documentElement.scrollTopthis.isSticky = scrollTop > 100 // 当页面滚动超过100px时启用固定},
// 开始进入主页startRead() {this.$nextTick(() => {document.getElementById('index').scrollIntoView({behavior: 'smooth',block: 'start',// inline: 'nearest'});})},compare(property) {return function (a, b) {let value1 = a[property].length;let value2 = b[property].length;return value2 - value1;}},// 获取推荐不良信息列表async getRecommendList() {cmsListRecommend(this.queryParams).then(response => {const {data: res} = response;this.recommendList = response.rows.slice(0, 10);this.total = response.total;});},// 获取不良信息类型列表async getTypeList() {getBlogDetail(this.$route.query.id).then(response => {for (let i = 0; i < response.types.length; i++) {let typeInfo = response.types[i];if (typeInfo.typePic.length > 0) {response.types[i].typePic = process.env.VUE_APP_BASE_API + typeInfo.typePic}};const {data: res} = response;this.fullTypeList = response.typesthis.typeList = response.types.slice(0, 7);});},
### 评论
```bash<div class="container"><div class="comment" v-for="item in comments"><div class="info" :id="item.id"><el-avatar v-if="item.avatar!==''&&item.avatar!=null" :src="item.avatar"></el-avatar><el-avatar v-else icon="el-icon-user-solid"></el-avatar><div class="right"><div class="name">{{item.createBy}}</div><div class="date">{{item.createTime}}</div></div></div><div class="content">{{item.content}}</div><div class="control"><span class="like" :class="{active: item.isLike}" @click="likeClick(item)"><svg-icon icon-class="like" /><span class="like-num" style="margin-left: 5px;">{{item.likeNum > 0 ? item.likeNum + '人赞' : '赞'}}</span></span><span class="comment-reply" @click="showCommentInput(item)"><svg-icon icon-class="comment" /><span style="margin-left: 5px;">回复</span></span></div><div class="reply"><div class="item" v-for="reply in item.children" :id="reply.id"><div class="reply-content"><span class="from-name">{{reply.createBy}}</span><span>: </span><span class="to-name" v-show="reply.parentId!=reply.mainId">@{{reply.pcreateBy}}</span><span v-show="reply.delFlag=='0'">{{reply.content}}</span><span v-show="reply.delFlag=='1'" style="color: #909399;">该评论已被删除！</span></div><div class="reply-bottom"><span>{{reply.createTime}}</span><span class="reply-text" @click="showCommentInput(item, reply)"><svg-icon icon-class="comment" /><span style="margin-left: 5px;">回复</span></span></div></div><div class="write-reply" v-if="item.children!=null" @click="showCommentInput(item)"><i class="el-icon-edit"></i><span class="add-comment">添加新评论</span></div><input-component :show="showItemId === item.id":value="inputComment":toComment="name":toId="id"@cancel="cancelInput"@confirm="commitComment"></input-component><!--<transition name="fade">--><!--<div class="input-wrapper" v-if="showItemId === item.id">--><!--<el-input class="gray-bg-input"--><!--v-model="inputComment"--><!--type="textarea"--><!--:rows="3"--><!--autofocus--><!--placeholder="写下你的评论">--><!--</el-input>--><!--<div class="btn-control">--><!--<span class="cancel" @click="cancel">取消</span>--><!--<el-button class="btn" type="success" round @click="commitComment">确定</el-button>--><!--</div>--><!--</div>--><!--</transition>--></div></div></div>
这篇关于不良信息公示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
