从0到1实现留言墙 |
您所在的位置：网站首页 › 知识科普图片一等奖 › 从0到1实现留言墙 |
从0到1实现留言墙
这是我参与8月更文挑战的第3天，活动详情查看： 8月更文挑战 项目简介留言墙：一个以在线便利签的形式，也可以扩展成许愿墙、树洞的一个项目。 抽空来完成一个简单的留言墙项目并完整介绍整个过程。留言墙，顾名思义，就是类似一个留言板，上面可以让人留下自己的话。自己当ui和产品，所以外观有点惨不忍睹，但是希望你能耐心看完。整个项目很简单，分为两个区域，一个是展示别人留言的区域；一个是写留言的区域，留言成功自动刷新。 头部标题(留言条数) 中间是墙体+可移动便签 底部是留下足迹(留言)的板块 可以自定义展示的昵称和内容颜色实现效果： 在线预览地址 动手前先技术选型一下前端：vue2 后端：项目小，直接借助leanclound。一个领先的 BaaS 提供商,提供数据存储、文件存储、云引擎、容器、即时通讯、消息推送、短信、游戏云等多项服务,为移动开发提供强有力的后端支持。(没有收取广告费，而是真的好用，当然我用的是免费试用版，不是企业级) 项目初始化 创建项目 vue create guestbook我选了vue2
做一个切图仔该做的事儿，实现上中下三部分，上为标题，中为一个放置便利贴纸的墙体，下为一个提交留言的板块。 这步就写几个标签和css，比较简单和基础就不详细说了，不过因为我也没有好的设计图，这里实现的比较粗糙。 想实现这步，建议先看看Leancloud之JS的SDK安装指南 安装成功进行下一步引用 引用leancloud-storage const AV = require('leancloud-storage') AV.init({ appId: '你自己应用的appId', appKey: '你自己应用的appKey', serverURL: '你自己应用的serverURL' }) this.query = new AV.Query('Message') //查询调用get或者find this.message = new AV.Object('Message') //可以调用save保存分别对应下图的三个地方 PS：如果你借鉴代码，我完全没有意见，不过你要自己申请Leancloud的账号，然后自己去建应用，而不是直接用我的appId和appKey。我之前分享的个人博客留言系统也是分享了代码，但是有人用我的账号，这就很尴尬了，导致数据混乱了，另一个方面说，我是应用拥有者，可以随时设置白名单或者删除你的数据的，所以还是悠着点用 这个就是后台表管理的地方
新建一个Message表，然后新加三列，name(存放昵称的字段)、content(留言内容的字段)、email(可以看留言的联系方式的字段) 代码实现贴几个重要的代码实现，至于数据处理的逻辑之类就不详细说了。 //获取留言列表 this.query.find().then((todos) => { //打印出todos看字段形式 }) //保存留言 this.message.save({ ...obj }) 补充说明上面所说已经实现了留言和获取留言，那取到留言列表的渲染我也不多说了。 便利贴的移动我用了组件vue-xiaoer-drag-ele，可拖拽等功能... 每次获取列表我都会有个让便利贴随机(随机横纵坐标)分布的,第一次我用了这个方法去获取随机横纵坐标，但是有个bug，就是输入框的值变化的时候都会触发重新获取坐标，这点我还没想明白，虽然没想懂为什么，但我先换了个方法去实现随机获取 获取单个横坐标或纵坐标 获取坐标数组 // 获取一个和留言列表一样length的坐标数组 getXY() { this.xyArr = this.msgList.map(() => { return [ Math.round(Math.random() * 800), Math.round(Math.random() * 300) ] }) },PS:服务器部署那些这里就不说明了，我之前也有相关篇幅。还有服务器配置不高，别恶意刷留言等操作，不然我只能被迫关闭了 我刚好发布了个沸点，有人在里面反馈需求。你们尽管提，合理的都实现 已实现或优化 字数限制(bug修复) 内容错乱(bug修复) 增加字体颜色选择(小需求) 换了便利签颜色和背景墙(小需求) 新增前端分页(小需求) 增加随机颜色字体(小需求)待实现 等人提合理小需求 本文小结以上是对留言墙的一些基本说明，各位大佬，如果看见错误的地方感谢帮忙指出，谢谢了！ 熟能生巧(Practice make perfect!)。 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |