wsydxiangwang / Mood

Vue的Nuxt.js服务端渲染框架,NodeJS为后端的全栈项目,Docker一键部署,面向小白的完美博客系统

Home Page:https://raindays.cn

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

简易博客系统

已转行,欢迎交朋友 add WeChat -> wsydxiangwang

暂停更新,现有已知缺陷以及数据问题,请勿使用

🎃 陌生人,你好呀~~

恭喜你发现了一个宝藏,在这儿能拥有属于自己的网站。

写文章、记笔记、心情说说、个人介绍等,应有尽有,属于自己的一片天 🌞

人们总喜欢称为博客,但我更喜欢把自己的网站称之为:心情小镇

整体风格为简约风,人的心灵到达一定阶段,心思愈渐愈偏向于简单,大道极简也许才是最终的归宿,我是创造者,也是追寻者。



优化列表

前台页面

  • 我回来了
  • 文章页优化,新增更多功能
  • 暗黑主题优化ing
  • 新增留言页面
  • 各个页面的功能代码优化,可扩展及优雅性
  • 评论者信息,默认缓存 localstorage
  • 文章评论
  • 评论优化
  • 背景音乐优化
  • 黑暗主题新增
  • 文章页、列表页优化
  • 首页优化
  • 个人介绍
  • 下雨天页
  • 订阅页面
  • 方法封装优化、mixin等

后台管理

  • 忘记密码
  • 页面自适应兼容优化ing
  • 修改个人信息字段,可读性
  • 各个页面的功能代码优化,可扩展及优雅性
  • 注册功能优化为邮箱验证、以便找回密码
  • 取消所有loadin的setTimeout,加载更快
  • 设置页面功能字段规范化、可扩展性
  • 统一所有提示信息为接口返回
  • 设置页面保存后,优化本地存储的信息
  • 分页数据取消缓存至vuex
  • 评论页面、文章页、短语页,优化
  • 优化各种修改接口的功能,提交及回显的操作
  • 找回密码功能

后端node

  • 功能代码优化,可扩展及优雅性
  • 接口数据优化
  • 优化数据库所有字段,规范化
  • 请求路由信息由后端定义提示信息,再返回
  • 文件上传方式优化,阿里云和本地服务器,错误处理
  • 邮件通知

项目部署

按照这个教程,你不懂代码,也能拥有属于自己的一个网站系统,后台设置均已完善,覆盖了正常博客的功能!!

  1. 在GitHub拉取webserverconfig 3个文件夹和 docker-compose.yml 1个文件。

  2. 修改config文件夹里面的nginx.conf文件,需要指定自己的域名,文件里面有注释说明。

  3. 在服务器目录,创建data文件夹作为项目目录,并上传刚才拉取的3个文件夹1个文件

  4. 打开服务器终端,安装docker(安装教程参考:https://docs.docker.com/engine/install/

  5. 安装成功后,进入刚才创建的data目录,运行docker-compose up -d,进行部署

  6. 运行docker-compose ps or docker ps -a 看看是否正常运行,完美~~

(注:到第5步,如果提示此命令不存在的话,需要根据提示进行安装docker-compose,我记得好像是需要的,在这儿我就不费时间去折腾了~~ )

ok, 搞定, 就是这么简单,docker牛逼

前台网站:http://aa.com,后台则为:http://aa.com/admin,到这里就没问题了~~

然后划重点:先进入后台,设置基本信息,前台才能正常访问,否则报错,ok完美,赶紧回家吃个饭庆祝庆祝~~

一句话搞定部署,docker真香(爆破音)


项目代码

(代码勿喷,好几个月前写的了,后面有时间再优化重构!!)

  • 页面设计

  • 前台页面

    • Vue 的服务端渲染框架 Nuxt.js
    • 样式均为绞尽脑汁的手写
  • 后台页面

    • Vue-cli、Element-ui
  • 后端服务

    • Node.js、MongoDB、Docker
  • 前后台:已适配 PC 和 Mobile

    • 发现了有些手机浏览器兼容异常的情况,我就一部小米,不好测试,所以请见谅(PC模拟器无敌)..
  • 项目代码讲解,点我 🤡


本地开发

  1. 首先,需要在电脑安装数据库mongodb,并且运行mongodb服务。

  2. 在本地的hosts文件添加以下内容:

127.0.0.1 web
127.0.0.1 server
127.0.0.1 mongodb

(为了兼容 docker 部署到线上,所以需要这样操作)

  1. 项目的启动
npm install    ## 每个目录必须
npm run dev    ## web
npm run serve  ## admin & server
  1. 开启之后,需要先进入管理后台,填写首屏的信息,才能正常访问前台,否则前台就会报错。(额...这里偷懒了没做处理,也没必要处理🧐)

  2. 到这里就ok了,如果有建议/优化/bug的,可以随时Issues or 邮件我,感谢支持!!

其他;

localhost:27017,出现一串英文,则mongodb运行成功

(一开始服务端控制台如报错,连接超时等等,均为mongodb运行没成功,不熟悉的话还是挺坑的,请大家了解一下吧!!)

(Mac用户可参考一下这篇mongodb的运行,具体应该是这样的)


前台页面

前台页面就不贴图了,大家可以直接看我的网站

人们总喜欢称个人网站为博客,嗯?不是很喜欢这个词。

在这儿,我更喜欢把自己的网站称之为:心情小镇 or 心灵驿站

页面说起来很简单,功能也很简单,希望这世界也能对我简单!

主要针对路人、游客、所有人开放的,无需注册账号、即可评论和查看。

来看你的网站是给你面子,评个论也是对你有意思。难不成还想我注册个账号,才让我评论和查看文章啊??(告辞🤓

分为以下页面:

# 首页
# 文章详情
# 文章列表
# 短语列表
# 个人介绍
# 心情订阅
# 游客留言
# 下雨天页

(如果你有自己特别想要的功能,可以自己改源代码,或者找我也可以,但是要收钱,收多少看心情吧(一般都是十万八万的收😂))

最亮眼的功能,莫过于文章页有独有的背景音乐,书写一篇心情文章,都可以根据自己的心情来选择适合的背景音乐,一般心情文章以静、温柔、安详为主。(love you)

(你非要弄个蹦迪的音乐、史诗级的纯音乐,我也不敢有意见啊👯~~)

麻雀虽小五脏俱全,完整的展现出一个人的情感,内心的所想所得


后台管理

后台只有管理员才能进入,所以只放后台的页面图片🤔

登录

注册账号:账号只可注册一次,PASS码需与邮箱相对应,且必填。

PASS码可在邮箱账号设置中获取,主要为邮件通知时使用(评论通知,忘记密码....)

输入框效果仿掘金,人们总是对惊艳的事物,羡慕不已😏~~


首页

所有数据的汇总,好比每个月的生活费,如果不记账,一年到头来,你是否知道自己吃了多少,裤兜又剩几张。

土豪&&月光族另当别论,有富婆请联系我一下,邮箱在底部 😂

算了,我还是直接给吧:1915398623@qq.com 😏


发布文章

背景图和背景音乐,可填写链接或本地上传,默认上传到服务器,可在 setting 配置!

为了网站性能,建议压缩图片,并且上传尺寸按照规定的来

隐藏文章,怎么说呢,开心就好~~

编辑器为主流Markdown,如果还不会,真心建议你学一下,三个步骤就一分钟学会:

  1. 拿出笔和纸:写
  2. 拿出手机拍:纸
  3. 上传到博客:发

一分钟从入门到放弃,改用手拿笔写字,拍照发文章,懂得创新的人永远走在最前沿 😂

别人笑我太疯癫,我笑他人看不穿


评论

可删除、回复评论,查看当前评论的文章等操作,就是不允许编辑...

人家说的都是心里话,就算天王老子来了,也不给特权!!👻


设置

注意:首屏信息需要填写完整,前台才能正常访问(备案信息自选)

  • 后台信息:昵称头像等等(头像是前后台统一的)
  • 网站信息:网站名,描述,SEO等等
  • 前台页面:首页信息、页面音乐、、底部备案信息
  • 首屏效果:首页的大图信息
  • 个人介绍:前台的个人介绍页,让大家认识你一下吧~~(可参考我的网站
  • 上传文件:上传图片和音乐,可指定上传位置,默认为服务器(可选阿里云OSS)
  • 邮件类型:目前仅支持QQ、163邮箱(其他需要的邮箱可自行扩展)
  • 评论功能:昵称、邮箱、管理员标识(前台页面突出管理员的标识)
  • 评论标识:也就是管理员标识,按照填写的邮箱和昵称进行确认
  • 评论通知:发布评论时,发送邮件通知被回复者
  • 订阅通知:是否开启新文章通知的功能
  • 留言页面:是否开启游客留言的功能
  • PASS码:开启通知功能,需要填写此码,具体在邮箱设置(开启SMTP服务器)可获得,需跟填写的邮箱一致
  • 修改密码:需要原密码,忘了你自己看着办吧~~

(小窍门:浏览器已保存的账号密码,均可查看F12)

(基础信息,务必填写完整,以免出现无知的bug,解决bug找我一个十块钱,不讲价,除非给我介绍个女朋友🥺)


前台页面LOGO

  • 找到目录,替换里面的图片(需4张,可参考原有的图片)(/web/static/image/logo/)
  • 首页logo两张:456*200(一白一黑透明)
  • 子页面的logo:200*200
  • 标签栏的ico图标:随意

另:logo的尺寸类似即可,可自己调试,上传五花八门的图片当logo也是可以的,主要看个人爱好 注:logo支持iconfont图标,具体可以看源码(为了一些不懂操作的人,所以这里使用图片)

这个设计没想到吧,要不要来给我打个分啊,快来评论,啊哈哈哈~~

在线卑微,GitHub在这里,第一次发帖求个star🥺


闲言细语

俗话说:“做什么就要有个做什么的样子,一刻都不能马虎”。

技术笔记有它存在的意义,纸质书认清了自我的价值,永远懂得自己的生存之道。

毕竟,无规矩不成方圆!

对于我的网站,很多网友问有没有模板,肯定没有啊,这可是我自己手写出来的啊。当然,我明白问这些问题的同学,目前的能力或想法仍需经历时间的磨练。

所以,我决定开源出来,让那些即使是小白鼠、小白兔、小白菜都能上手操作的一个发文章、做笔记、个人介绍的简单系统。

经过这段时间夜以继日的折腾,终于结束了,以实际操作来巩固过往所学,更加深入认识了JavaScript,其中问题最多的非nuxt莫属,代码的学习之路无非就是一路挖坑填坑。

只要心有所归,沿途的风景不管好与坏,一定会成为回忆中最美、最难以忘怀的存在,不虚此行。

过于依赖某些事物,也许事事会有顾虑,不能任凭自我追寻,也许在某一天会一言不发,那么我存在的意义又是什么??

我时常提醒自己,保持学习,不断进步才是最终的归宿,只有属于自己的,才是最终的安全感来源。

不懂??不会?? 没关系,我可以学,学不会就要更加的努力,付出两倍、三倍的时间和真心去学,迟早能有学会的那一天。


最后

分享自己的一个全栈简单项目给大家,有什么建议/bug/优化可以提一下,感谢!!。

最最最重要的一点,求个star🥺

别人会的,我们一样可以做到,请相信自己,这个世界上没有什么事情是不可能的,加油!!

致迷途道路上的我们,感谢大家的支持,欢迎指点一二,接受指点和建议(不接受喷 /小心脏承受不住😩)

期待与有技术要求的同学一同共事,鄙人邮箱:1915398623@qq.com

(一开始码着码着,感觉有点不对劲,这话好像有点多了,又不能算是心情文章,赶紧删减一下,技术大佬估计最烦的就是长篇大论吧~~😂😂)


生命中的未知数总是千变万化的,让人不得不屈服于现实,在25天后,正式加入前端人才库,开始寻找新的方向和机会。

———— 七月 25, 2020 12:30

About

Vue的Nuxt.js服务端渲染框架,NodeJS为后端的全栈项目,Docker一键部署,面向小白的完美博客系统

https://raindays.cn


Languages

Language:Vue 75.7%Language:JavaScript 19.1%Language:CSS 4.1%Language:HTML 0.9%Language:Dockerfile 0.2%