Vue、Nuxt服务端渲染、NodeJS全栈项目~面向小白的完美系统~

时间 2020-07-06

标签 vue nuxt 服务渲染 nodejs 项目面向白的完美系统繁體版

原文原文链接

Hello，你们好，我是李白～～前端

第一次发帖子，有点小紧张，不知道待会给我点赞的会是哪位帅气的哥哥，仍是漂亮的姐姐呢，嘿嘿。vue

浪迹掘金之久，感谢各位大佬们的知识分享，感谢掘金这个平台，让我对本身的能力有了深度的认知，同时认识到诸位优秀、有趣的小伙伴们，请你们继续保持前进！！！node

这是一个入门全栈之路的小项目，从设计、前端、后端，一路狂飙的学习，不发水帖，出贴必属精品。nginx

❝
要么沉默不语，要么一语惊人。git
❞

先后台均为绞尽脑汁的设计，总体风格为简约风，人的心灵到达必定阶段，心思愈渐愈偏向于简单，「大道极简也许才是最终的归宿」。（前台页面有些部分是参考某开源站）github

接触过WordPress，Hexo等第三方网站系统，可是呢，感受太过于冗余臃肿，显得过于杂乱，各类限制和体验很差等等缘由。web

因此决定书写一片属于本身的天地，要什么就有什么，要长什么样就什么样。「我是创造者，也是追寻者」。mongodb

在线卑微，GitHub在这里，求个star🥺vue-cli

闲言细语

俗话说：“作什么就要有个作什么的样子，一刻都不能马虎”。数据库

技术笔记有它存在的意义，纸质书认清了自个人价值，泳衣懂得本身的生存之道。

毕竟，无规矩不成方圆！

对于个人网站，不少网友问有没有模板，确定没有啊，这但是我本身手写出来的啊。固然，我明白问这些问题的同窗，目前的能力或想法仍需经历时间的磨练。

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

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

❝
只要心有所归，沿途的风景无论好与坏，必定会成为回忆中最美、最难以忘怀的存在，不枉此行。
❞

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

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

「不懂？？不会？？」 「不要紧，我能够学」，学不会就要更加的努力，付出两倍、三倍的时间和真心去学，早晚能有学会的那一天。

在线卑微，GitHub在这里，求个star🥺

使用的技术栈

自主设计
前台页面
- vue的服务端渲染框架Nuxt.js
- 样式均为绞尽脑汁的手写
- 适配PC和Mobile端
后台页面
- vue-cli、element-ui
后端
- Node.js、MongoDB、Nginx、PM2

具体代码实现就很少说了，如下主要对功能讲解，有兴趣同窗的可自行看源码学习...

「前台页面」

前台页面就不贴图了，你们能够直接看个人网站

不少人看到网站，只要是本身弄的网站，都叫作「博客」

嗯？不是很喜欢这个词，我比较喜欢称之为：「心情小镇」

页面提及来很简单，功能也很简单，简单到可能只有首页首屏，能让人感觉到一丝丝的惊艳。

主要针对路人、游客、全部人开放的，无需注册帐号、便可评论和查看。

来看你的网站，是给你面子，评个论也是对你有意思。难不成还想我注册个帐号，才让我评论和查看文章啊？？告辞（友好性满分🤓）

首页
文章详情
文章列表
短语列表
我的介绍
下雨天页

一共6个页面，算是比较简单，正常的我的网站，上面该有功能都有，该有的动画过渡也都有，花里胡哨的没有。

不管何种产品，用户体验永远是最前置的，不只仅是视觉上、交互上...

（若是你有本身特别想要的功能，能够本身改源代码，或者找我也能够，可是要收钱，收多少看心情吧（通常都是十万八万的收😂））

最亮眼的功能，莫过于文章页有独有的背景音乐，书写一篇心情文章，均可以根据本身的心情来选择适合的背景音乐，通常心情文章以静、温柔、安详为主。（love you）

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

❝
麻雀虽小五脏俱全，完整的展示出一我的的情感，心里的所想所得
❞

「后台管理」

后台只有管理员才能进入，因此只放后台的页面图片🤔

「登陆」

第一次进入后台需先进行注册帐号，帐号只能注册一次，避免被那啥，若有遗忘，自行操做数据库🤣

输入框效果模仿的掘金，人们老是对牛逼的事物，羡慕不已😏~~

「首页」

全部数据的汇总，比如每月的生活费，若是不记帐，一年到头来，你是否知道本身吃了多少，裤兜又剩几张。

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

算了，我仍是直接给吧：1915398623@qq.com 😏

「发布文章」

上传背景图和背景音乐，默认上传到服务器，可在setting选择

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

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

编辑器为主流「Markdown」，若是还不会，真心建议你学一下，三个步骤就一分钟学会：

拿出笔和纸，写
拿出手机拍，纸
上传到掘金，发

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

❝
别人笑我太疯癫，我笑他人看不穿
❞

「评论」

可删除、回复评论，查看当前评论的文章，就是不容许编辑...

人家说的都是内心话，就算天王老子来了，也不给特权！！👻

「设置」

后台信息：昵称头像等等（头像是先后台统一的）
网站信息：网站昵称，描述，SEO等等
前台页面：首页信息、不一样页面的背景音乐、底部备案信息
我的介绍：前台的我的介绍页，让你们认识你一下吧~~（可参考个人网站）
上传文件：上传图片和音乐，可指定上传位置，默认为服务器（可选阿里云OSS）
评论功能：昵称、邮箱、管理员标识（前台页面突出管理员的标识）
评论通知：是否开启评论邮件通知（需填写QQ邮箱的PASS码，邮箱需一致）
修改密码：忘了你本身看着办吧~~

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

「前台页面LOGO」

找到目录，替换里面的图片（需4张）（/web/static/image/logo/）
首页logo两张：456*200（一白一黑透明）
子页面的logo：200*200
标签栏的ico图标：随意

另：logo的尺寸相似便可，可本身调试，上传五花八门的图片当logo也是能够的，主要看我的爱好

（你一个偏心女孩子的女生，我总不能拦着你追寻本身的幸福吧😅）

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

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

「项目部署」

你要有一个属于本身的服务器，或者免费的平台，反正能上传程序的都行。

我用的是阿里云的服务器，镜像:Ubuntu 18.04

「服务器安装程序」

首先, 须要使用命令行进入操做，安装如下程序：

nodejs   => 后端运行程序
mongodb => 数据库 pm2 => 保持不间断运行程序 nginx => 域名指向代理转发  ## 安装命令为  apt install nodejs apt install mongodb-server -y apt install pm2 -g apt install nginx -y 复制代码

你要接触过服务器的话，不用我教，你也有办法安装，不然仍是挺麻烦的，能够看下面这个视频

具体安装方法，可在b站上学习一下，或则直接找我也可，若是我有时间的话 www.bilibili.com/video/BV18t… (跳过git这一节，up主收益了记得找我😅)

「上传项目文件」

白哥推荐（FileZilla）此工具，为了区分环境, 咱们在根目录新建文件夹data, 并上传web和server两个文件夹, 由于admin后台项目是打包到server文件夹的, 因此在这里不用上传

接着分别进入web和server目录, 各自npm install一下, 安装成功后, 测试一下是否正常

在 server目录, 执行命令 node index.js, 打印成功则你懂的, 按 crtl+c退出程序
在 web目录, 执行命令 npm run start, 打印成功，能够进入下一步

「开启服务」

以上测试都ok的话，咱们可使用pm2来运行程序，进入指定的目录，使用指定的命令行

pm2 start index.js --name="server pm2 start npm --name "web" -- run start 复制代码

「Nginx配置」

最后一步，想要网站域名正常访问的话，还得手动配置nginx, 具体也能够跟着上面的视频教学来

首先：安装后，启动Nginx，命令start nginx

如下为必填的关键字段，打开nginx配置文件nginx.conf, 路径通常是：/etc/nginx/nginx.conf。

server {
 listen 443;   server_name xxx.com; // 你的域名,,,,   ##  # SSL Settings  ##   ssl on;   ##  # 开启https证书地址  ##  ssl_certificate /etc/nginx/xxxx.com.pem;  ssl_certificate_key /etc/nginx/xxxxx.com.key;   ssl_session_timeout 5m;  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;  ssl_prefer_server_ciphers on;   location / {  proxy_pass http://127.0.0.1:8000;  }   location /admin {  proxy_pass http://127.0.0.1:3000;  } }  server {  listen 80;  listen [::]:80;   server_name xxx.com; // 你的域名地址   // 经过rewrite方式把全部http请求也转成了https请求  rewrite ^(.*)$ https://$server_name$1 permanent;   # reverse proxy  location / {  proxy_pass http://127.0.0.1:8000;  }   location /admin {  proxy_pass http://127.0.0.1:3000;  } } 复制代码

Nginx上传文件大小限制的问题, 因此须要加入如下字段, 方能正常上传

打开nginx配置文件 nginx.conf, 路径通常是： /etc/nginx/nginx.conf。
在http{}段中加入 client_max_body_size 20m; 20m为容许最大上传的大小。
保存后重载一下nginx的配置文件，问题解决。(重载命令: nginx -s reload)

以上填写的域名，须要解析到服务器，是否开启https，看我的喜爱吧~~

好比你的域名为：http://aa.com，那么后台则为：http://aa.com/admin

# Nginx一些操做的命令
$ start nginx // 开启nginx $ nginx -t // 检查nginx配置文件 $ nginx -V // 查看版本信息 $ nginx -s reload // 从新加载配置 $ nginx -s quit // 关闭nginx $ nginx -s stop // 中止nginx $ service nginx stop // 中止 $ service nginx start // 启动 $ service nginx restart // 重启 复制代码

到这里就没问题了，直接先进入后台，设置基本信息，ok完美，赶忙回家吃个饭庆祝庆祝~~

「最后」

分享本身的一个全栈简单项目给你们，感兴趣的能够学习一下，有bug/优化能够提一下。

最最最重要的一点，GitHub在这里，新人第一次发帖求个star🥺

到这儿应该没啥问题了吧，若是有啥漏洞补缺的，请联系我一下，谢谢啦~~

我能作到的事，你也能够；别人会的，咱们同样能够作到，请相信本身，这个世界上没有什么事情是不可能的，加油！！

致迷途道路上的咱们，感谢你们的支持，欢迎指点一二，接受指点和建议（不接受喷 /当心脏承受不住😩）

寻机会，期待与有技术要求的同窗一块儿共事，鄙人邮箱：1915398623@qq.com

提醒：网站资源有限，请勿水评论，再三强调，请作个有素养的人，谢谢！！
说明：本人的网站，是来记录心情的，只须要真心和有意义的评论，谢谢！！

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