(正在优化更简单的部署方式,docker,还没上文档,请稍等)
这是一个入门全栈之路的小项目,从设计、前端、后端,一路狂飙的学习,开始担心发量了。
-
首先,需要在电脑安装数据库
mongodb
,并且运行mongodb
服务。 -
项目的启动,进入不同的文件夹,执行以下命令:
npm install ## 每个目录必须
npm run dev ## web
npm run serve ## admin & server
(一开始服务端控制台如报错,均为mongodb
运行没成功,不熟悉的话还是挺坑的,请大家了解一下吧!!)
-
开启之后,需要先进入管理后台,填写首屏的信息,才能正常访问前台,否则前台就会报错。(额...这里偷懒了没做处理,也没必要处理🧐)
-
到这里就ok了,如果有建议/优化/bug的,可以随时
Issues
or邮件
我,感谢支持!!
(额... 代码解说就没必要了吧~都看得懂😂)
- 页面设计
- 前台些许借鉴于素锦(开源项目)
- 前台页面
- vue的服务端渲染框架Nuxt.js
- 样式均为手写
- 后台页面
- vue-cli、element-ui
- 后端
- Node.js、MongoDB、Nginx、PM2
- 前后台:已适配PC和Mobile
页面说起来很简单,功能也很简单,简单到可能只有首页首屏,能让人感受到一丝丝的极简。
主要针对路人、游客、所有人开放的,无需注册账号、即可评论和查看。
# 首页
# 文章详情
# 文章列表
# 短语列表
# 订阅通知
# 个人介绍
# 下雨天页
一共7个页面,算是比较简单,正常的个人网站,上面该有功能都有,该有的动画过渡也都有,花里胡哨的没有。
无论何种产品,用户体验永远是最前置的,不仅仅是视觉上、交互上...
(如果你有自己特别想要的功能,可以自己改源代码,或者找我也可以,但是要收钱,收多少看心情吧(一般都是十万八万的收😂))
最亮眼的功能,莫过于文章页有独有的背景音乐,书写一篇心情文章,都可以根据自己的心情来选择适合的背景音乐,一般心情文章以静、温柔、安详为主。(love you)
麻雀虽小五脏俱全,完整的展现出一个人的情感,内心的所想所得
后台只有管理员才能进入,所以只放后台的页面图片🤔
第一次进入后台需先进行注册账号,账号只能注册一次,避免被那啥,如有遗忘,自行操作数据库🤣
输入框效果模仿的掘金,人们总是对牛逼的事物,羡慕不已😏~~
所有数据的汇总
上传背景图和背景音乐,默认上传到服务器,可在setting选择
为了网站性能,建议压缩图片,并且上传尺寸按照规定的来
隐藏文章,怎么说呢,开心就好~~
编辑器为主流Markdown,如果还不会,真心建议你学一下,三个步骤就一分钟学会:
- 拿出笔和纸,写
- 拿出手机拍,纸
- 上传到掘金,发
一分钟从入门到放弃,改用手拿笔写字,拍照发文章,懂得创新的人永远走在最前沿 😂
可删除、回复评论,查看当前评论的文章,就是不允许编辑...
注意:首屏信息需要填写完整,前台才能正常访问(备案信息自选)
- 后台信息:昵称头像等等(头像是前后台统一的)
- 网站信息:网站名,描述,SEO等等
- 前台页面:首页信息、不同页面的背景音乐、底部备案信息
- 个人介绍:前台的个人介绍页,让大家认识你一下吧~~(lichenpro.com.cn/about)
- 上传文件:上传图片和音乐,可指定上传位置,默认为服务器(可选阿里云OSS)
- 邮件类型:目前仅支持QQ、163邮箱(其他需要的邮箱可自行填充)
- 评论功能:昵称、邮箱、管理员标识(前台页面突出管理员的标识)
- 评论通知:发布评论时,发送邮件通知
- 订阅通知:发布文章时,自动发送邮件通知已订阅的邮箱
- PASS码:开启通知功能,需要填写此码,具体在邮箱设置(开启SMTP服务器)可获得,需跟填写的邮箱一致
- 修改密码:忘了你自己看着办吧~~
- 找到目录,替换里面的图片(需4张)(/web/static/image/logo/)
- 首页logo两张:456*200(一白一黑透明)
- 子页面的logo:200*200
- 标签栏的ico图标:随意
另:logo的尺寸类似即可,可自己调试,上传五花八门的图片当logo也是可以的,主要看个人爱好
注:logo支持iconfont
图标,具体可以看源码(为了一些不懂操作的人,所以这里使用图片)
这个设计没想到吧,要不要来给我打个分啊,快来评论,啊哈哈哈~~
你要有一个属于自己的服务器,或者免费的平台,反正能上传程序的都行。
我用的是阿里云的服务器,镜像:Ubuntu 18.04
,意义不大,仅做参考
首先, 需要使用命令行进入操作,安装以下程序:
nodejs => 后端运行程序
mongodb => 数据库
pm2 => 保持不间断运行程序
nginx => 域名指向代理转发
## 安装命令为
apt install nodejs
apt install mongodb-server -y
apt install pm2 -g
apt install nginx -y
- 先在本地打包好项目
## 进入`web`和`admin`目录,分别运行以下两个命令
npm install
npm run build
- 然后上传到服务器
连接服务器的上传工具有:xftp,xshell,FileZilla,为了区分环境, 我们在服务器根目录新建文件夹data
,然后如下:
- 前台项目:在
data
目录新建文件夹web
,然后上传本地web
里面的(.nuxt
,static
,package.json
,nuxt.config.js
)四个文件即可 - 后台及服务:直接把本地
server
上传到data
就行了,因为admin
后台项目是打包到server
文件夹的, 所以在这里不用上传
接着分别进入服务器的web
和server
目录, 各自npm install
一下, 安装成功后, 测试一下是否正常
- 在
server
目录, 执行命令node index.js
, 打印成功则你懂的, 按crtl+c
退出程序 - 在
web
目录, 执行命令npm run start
, 打印成功,可以进入下一步
以上测试都ok的话,我们可以使用pm2
来运行程序,进入指定的目录,使用指定的命令行
## 双引号为运行的名字,为了区分前台和服务
## 后台及服务的命令
pm2 start index.js --name="server"
## 前台web的执行命令
pm2 start npm --name "web" -- run 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请求 (开启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一些操作的命令
$ 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 // 重启
Nginx上传文件大小限制的问题, 所以需要加入以下字段, 方能正常上传
- 打开
nginx
配置文件nginx.conf
, 路径一般是:/etc/nginx/nginx.conf
。 - 在
http{}
段中加入client_max_body_size 20m
; 20m为允许最大上传的大小。 - 保存后,执行
nginx -s reload
,重新加载配置,ok。
以上填写的域名,需要解析到服务器,是否开启https,看个人喜好吧~~
比如你的域名为:http://aa.com
,那么后台则为:http://aa.com/admin
到这里就没问题了,直接先进入后台,设置基本信息,ok完美,赶紧回家吃个饭庆祝庆祝~~
俗话说:“做什么就要有个做什么的样子,一刻都不能马虎”。
技术笔记有它存在的意义,纸质书认清了自我的价值,泳衣懂得自己的生存之道。
毕竟,无规矩不成方圆!
只要心有所归,沿途的风景不管好与坏,一定会成为回忆中最美、最难以忘怀的存在,不虚此行。
过于依赖某些事物,也许事事会有顾虑,不能任凭自我追寻,也许在某一天会一言不发,那么我存在的意义又是什么??
我时常提醒自己,保持学习,不断进步才是最终的归宿,只有属于自己的,才是最终的安全感来源。
不懂??不会?? 没关系,我可以学,学不会就要更加的努力,付出两倍、三倍的时间和真心去学,迟早能有学会的那一天。
分享自己的一个全栈简单项目给大家,感兴趣的可以学习一下,有什么建议/bug/优化可以提一下,感谢!!
到这儿应该没啥问题了吧,如果有啥漏洞补缺的,请联系我一下,谢谢啦~~
我能做到的事,你也可以;别人会的,我们一样可以做到,请相信自己,这个世界上没有什么事情是不可能的,加油!!