• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

CQBoyBrand/Koa2-nuxt-MySQL: Koa2+nuxt+MySQL重构博客,项目中包括前端,后端和服务 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

CQBoyBrand/Koa2-nuxt-MySQL

开源软件地址:

https://github.com/CQBoyBrand/Koa2-nuxt-MySQL

开源编程语言:

TypeScript 53.8%

开源软件介绍:

Blog System

博客线上地址:

http://www.brandhuang.com

分支介绍

  • v-ts 分支(默认分支):目前一直在更新的版本,计划用 TypeScript 重构

该分支前端使用 Nuxt.js,管理端使用 Vue2.X.js(已换成 React.js),服务端使用 Nest.js,数据库使用 MySQL

  • v-new 分支:后续应该不会在更新了,项目能完整跑起来,能正常使用(如有需要,可自行克隆修改~)

该分支前端使用 Nuxt.js,管理端使用 Vue2.X.js,服务端使用 Koa2,数据库使用 MySQL

项目目录介绍

  1. blog :该文件夹存放前端代码(即用户访问的页面代码)
  2. admin :该文件夹存放管理后台代码(即博主用来管理博客内容的地方)
  3. server : 该文件夹用来提供 API 服务(即为 blog 和 admin 提供接口,进行与数据库的交互)
  4. nginxConfig : 该文件夹是通过域名访问服务器的一些简单配置(请自行修改,更深了解请自行 Google)
  5. blog.sql :该文件是本博客线上使用的数据库文件(方便想使用本项目的人能轻松运行起来,数据库采用的 MySQL,请自行安装)

注意:新的sql文件调整了字段

如果已经部署了之前的代码的朋友,想要使用新的代码,请照sql文件自行调整~(数据库字段更改日期:2020年8月27日)

世界不毁灭,折腾不停止!

本分支将继续折腾我的个人博客,计划如下

  • blog:打算采用 TypeScript 重构。
  • admin:计划用 React 重构。
  • server:计划近期用 nest.js 进行重构(纯粹是想学习用用 TypeScript

后续主要按 Vue + React + nodejs 这样的技术栈来玩,博客功能应该暂时就这么多了,后面主要是优化代码,写的代码实在是太烂了。。

使用:

分别在 adminblogserver 文件夹下执行依赖安装

安装依赖

npm install
# 或者
yarn install

本地运行

servre 端需要先全局安装 nestjs 脚手架

   npm install -g @nestjs/cli

然后在 server 文件夹执行如下代码

    启动 admin 端服务:nest start -w backend
    启动 blog 端服务:nest start -w frontend

打包

//blog
       执行打包:npm run build

       // 打包部署需要上传以下 4 个文件(夹)
       .nuxt
       server
       pakage.json
       nuxt.config.js

       最好在服务器这四个文件(夹)的同一级目录下新建一个static来放favicon.ico文件,要不然这个图片显示不出来

       上传好文件后,记得执行 npm install 安装依赖

       pm2启动服务:
       pm2 start npm --name "blog" -- run start


// admin
       在.env,  .env.production中配置不同的环境

       执行打包:npm run build

       上传 dist 文件夹

// server
   
       // 这个不用打包,直接上传服务器

       node_modules下的文件就不要上传了,太大了,把其他文件上传服务器后运行  npm install 就好了
       
       注意自己复制 .env.example 粘贴为 .env 并修改其中内容

       修改 backend 和 frontend 下的 main.js,处理跨域问题

       const app = await NestFactory.create(AppModule,{
           // cors: {
           //     "origin": ['http://www.brandhuang.com','https://www.brandhuang.com','http://admin.brandhuang.com','https://admin.brandhuang.com'],
           //     "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
           //     "preflightContinue": false,
           //     "optionsSuccessStatus": 204
           // }
           cors: true
       });
       
       在 server 端的根目录下(此启动方式用于本地开发,服务端部署时,启动方式请看最下面!)

       运行:
       nest start -w backend 启动 admin 端的接口服务

       运行:
       nest start -w frontend 启动 web 端的接口服务
           
      
// blog.sql

       本项目的数据库结构文件。数据库用的mysql
       
       
       根据前面的配置,本地安装的有mysql,导入数据库文件后,应该就能把整个项目跑起来了

初次使用本项目请注意

由于数据库没有初始数据,要登录后台需要先注册用户

(2020年8月更新:sql文件中内置了一条用户数据:账号:admin,密码:123; 如果没有数据,请自行注册。)

操作详情参考:issues #8

部署 Server 端注意了!!!

建议在本地执行 npm run build frontendnpm run build backend 完后

dist 目录下的 frontendbackend 文件夹放到服务器上的 dist 文件夹中。

然后启动(我用 pm2):

pm2 start npm --name "frontend" -- run frontend
pm2 start npm --name "backend" -- run backend

(请执行完一个就部署一个,因为 dist 文件夹会被覆盖,在本地运行的时候你会发现 dist 目录下可以同时存在 frontendbackend 两个文件夹,但是 build 的时候不会!!)

服务器部署教程

  1. 项目比较详细、完整的部署请看我的文章:http://www.brandhuang.com/article/1552997590733

  2. 项目比较详细、完整的部署请看我的文章(备用地址一):https://juejin.im/post/6844903558895124488

  3. 项目比较详细、完整的部署请看我的文章(备用地址二):https://segmentfault.com/a/1190000013095046

我 1 核 1G 的垃圾服务器在服务器直接执行 nest start frontend ,直接卡爆。。。,高配置的应该没啥问题吧

有问题可以来公众号找我,扫码或微信搜索「九零后重庆崽儿」

公众号

感谢你的支持




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap