Vue、Nuxt服务端渲染,NodeJS全栈项目,面试小白的博客系统~~

时间:2023-03-10 06:51:55
Vue、Nuxt服务端渲染,NodeJS全栈项目,面试小白的博客系统~~

Vue、Nuxt服务端渲染,NodeJS全栈项目,面试小白的博客系统~~

Holle,大家好,我是李白!!

一时兴起的开源项目,到这儿就告一段落了。

这是一个入门全栈之路的小项目,从设计、前端、后端、服务端,一路狂飙的学习,发量正在欣喜若狂~~

接触过WordPress,Hexo等第三方网站系统,虽说简单,但是感觉太过于冗余臃肿,显得过于杂乱,各种限制和体验不好等等原因。

所以决定书写一片属于自己的天地,我是创造者,也是追寻者

前后台均为绞尽脑汁的设计,整体风格为简约风,人的心灵到达一定阶段,心思愈渐愈偏向于简单,大道极简也许才是最终的归宿

在线卑微,求个star https://github.com/wsydxiangwang/Mood」

  • 项目部署
  • 本地开发
  • 前台页面
  • 后台管理
  • 闲言细语(肺腑之言,请一定要看)

项目部署

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

  1. 在 GitHub 拉取项目 Mood

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

  3. 在服务器目录,创建data文件夹作为项目目录

  4. 上传webserverconfig 3 个文件夹和docker-compose.yml1 个文件。

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

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

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

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

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

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



一句话搞定部署,docker 真香

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

本地开发

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

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

127.0.0.1 web
127.0.0.1 server
127.0.0.1 mongodb

使用docker部署的时候,需要用不同的主机名进行互相连接容器,所以需要指定不同项目的名字!!

初学者目前还没找到更好的方式,如有的话,欢迎给予建议~~

3.项目的启动

npm install    ## 每个目录必须
npm run dev ## web
npm run serve ## admin & server

4.开启之后,需要先进入管理后台,填写首屏的信息,才能正常访问前台,否则前台就会报错。

(额...这里偷懒了没做处理,也没必要处理