React Hooks 搭建自己的博客(二)

博客系统服务端搭建，采用Koa的上层框架egg.js

egg.js 是由阿里开源的面向企业级开发的Node.js服务端框架,它的底层是Koa2来搭建的。

搭建开发环境

全局安装egg.js的脚手架工具egg-init

npm i egg-init -g

初始化项目,并安装依赖包

egg-init --type=simple
// 项目安装成功后执行下面的命令
npm install
// 安装依赖完成后启动项目
npm run dev

1. 在浏览器中打开网址：http://127.0.0.1:7001/
2. 在页面中显示hi.egg说明环境搭建成功

egg.js目录结构及约定规范

egg.js目录结构介绍，只讲用到的文件

• app: 项目开发文件，大部分的代码都会写在这里
• config: 项目和服务端的配置全部在这里进行
• package.json: 包管理和命令配置文件

egg.js目录约定规范

• 在app目录下egg要求必须有下面的文件

1. controller: 控制器，渲染、简单的业务逻辑、路由配置需要的文件都写在这里
2. public: 公用文件夹，存放公用资源
3. router.js: 项目的路由配置文件，除中间件外最先访问的文件
4. service: 业务逻辑复杂或与数据库交互时，将业务逻辑放到此文件夹
5. middleware: 中间件文件夹，用来写中间件，比如路由守卫

实例如下

// app/router.js
'use strict';
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/list', controller.home.list)
};

// app/controller/home.js
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.body = 'hi, egg';
  }
  async list() {
    const {ctx} = this
    ctx.body = '<h2>Aweiweier192 Blog</h2>'
  }
}
module.exports = HomeController;
// 此时访问,http://127.0.0.1:7001/list,就可以看到页面发生了变化

RESTful API设计简介和路由配置

项目的接口采用RESTful规则，常用的方式如下：

• get(SELECT): 从服务端获取资源
• post(CREATE): 向服务端提交资源
• put(UPDATE): 更新服务器的资源
• delete(DELETE): 删除服务器中指定的资源

在egg.js中配置API接口

1. 在controller文件夹下新建两个文件admin后端管理API和front客户端管理API
2. 在front文件下新建home.js文件，用于管客户端的API接口

// app/controller/front/home.js
'use strict';
const Controller = require('egg').Controller
class HomeController extends Controller{
    async index(){
        this.ctx.body="front-api接口"
    }
}
module.exports = HomeController

在egg.js中配置路由

1. 在app文件中新建一个文件夹router
2. 在router文件中新建front.js和admin.js

// app/router/front.js
module.exports = app =>{
    const {router,controller} = app
    router.get('/front/index',controller.front.home.index)
}

// 修改router.js总配置文件
module.exports = app => {
  require('./router/front')(app)
}
// 此时访问http://127.0.0.1:7001/front/index,如果能出现front-api接口

egg.js连接mysql数据库

在egg.js中使用mysql数据库，需要先安装egg-mysql模块

npm i egg-mysql --save

安装完成后进行插件配置

• egg.js要求外部模块要在plugin.js中进行配置

// config/plugin.js
'use strict'
exports.mysql = {
  // 是否开启
  enable: true,
  // 对应的依赖
  package: 'egg-mysql'
// 此时egg.js可以支持mysql数据库的连接和使用

数据库连接配置

• 确保计算机或服务器安装了mysql
• 使用php Study集成开发环境

// config/config.default.js
  config.mysql = {
    client: {
      host: 'localhost',
      port: '3306',
      user: 'root1', // 根据自己的数据库进行配置
      password: 'root1',
      database: 'react_blog' // 数据库名称
    },
    app: true,
    agent: false
  }

创建数据库并连接

• 数据库名称：react_blog,自随意
• 建表：blog_test, 字段 id、name、title、introduce、content
• 自己填写数据

查询表的数据

// app/controller/front/home.js
'use strict';
const Controller = require('egg').Controller
class HomeController extends Controller{
   async index(){
       //获取用户表的数据
       let result = await this.app.mysql.get("blog_test",{})
       console.log(result)
       this.ctx.body=result
   }
}
module.exports = HomeController
// 此时访问http://127.0.0.1:7001/default/index，如能在页面显示数据表示数据库连接成功

未完待续