Eggjs配合Nextjs使用

2019-11-09 本文已影响0人 duangdong

[TOC]

Eggjs-Nextjs

先使用Nextjs的脚手架搭建整体架构

这里使用
```
npx create-next-app my-next-app
```

安装egg.js

我们先进入到项目的根文件夹中(与创建的package.json同级)，然后在根文件夹下，建立一个service的文件夹，这就是中台的文件夹了。
推荐直接使用脚手架，只需几条简单指令，即可快速生成项目（npm >=6.1.0）
cd到根目录下的service目录，在下面输入命令
```
npm init egg --type=simple
```
初始化后需要安装包
```
npm install
```
安装后即可启动服务，注意是在service目录下
```
npm run dev
```

路由配置

与koa的路由配置基本相同

让egg为前端提供Api接口，实现中台主要的功能；这里使用restful-api接口设计

在controller控制器中，eggjs默认给我们一个示例home.js

创建eggjs的项目之后都会有home.js
在controller中写我们逻辑代码可以写service

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.body = 'hi, egg';
  }
}
module.exports = HomeController;

在router.js中配置路由

也是框架提供给我们的

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
};

可以看出：框架在加载router.js中路由，会去找controller下对应的找对应的文件夹/文件，找问价中对应的方法；当然配置路由时需要指定每个路由对应的方法
可以启动egg服务后通过修改ctx.body的值可以看到不同的返回值，那个即是我们在访问接口的时候的返回值

为了让router.js只是为了暴露配置，在app文件夹下面创建router文件夹

├─controller
│  ├─client
│  └─server
├─public
└─router
│  ├─client.js
│  └─server.js
 ─router.js

可在router/client.js中配置访问的路由

'use strict';
/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/client/getList', controller.client.home.getArticleList);
}

//这里请求方式和我们正常的请求一样，像get/put/post/delete

在router.js中引入

'use strict';

const client = require('./router/client');
/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  client(app);
};

在controller也是一样创建client/home.js；只需在其写方法即可;

连接数据库

这里是使用mysql数据库

使用egg-mysql插件

如果eggjs是npm/i创建的那么最好使用npm安装插件，使用yarn可能会导致安装失败以及其他原因，这里使用npm进行安装
```
npm i egg-mysql --save
```

和我们之前不一样的是，安装后不能直接使用，需要配置插件

插件配置config下面的plugin.js以及config.default.js两者都需要配置
config/plugin.js
- 如果有要安装其他的egg-plugin插件都要在这里进行配置

'use strict';

//这里是框架提供的，可以直接注释掉
/** @type Egg.EggPlugin */
// module.exports = {
//   // had enabled by egg
//   // static: {
//   //   enable: true,
//   // }
// };

// 配置插件
exports.mysql = {
  enable: true,
  package: 'egg-mysql',
};

config/config.default.js

在其本身基础上增加对象config的属性即可
里面的keys最好先不要动，不然会引起报错

/* eslint valid-jsdoc: "off" */
'use strict';
/**
 * @param {Egg.EggAppInfo} appInfo app info
 */
module.exports = appInfo => {
  /**
   * built-in config
   * @type {Egg.EggAppConfig}
   **/
  const config = exports = {};
  // use for cookie sign key, should change to your own and keep security
  config.keys = appInfo.name + '_1572838718244_4569';
  // add your middleware config here
  config.middleware = [];
  // add your user config here
  const userConfig = {
    // myAppName: 'egg',
  };
  config.mysql = {
    // database configuration
    client: {
      // host
      host: 'localhost',
      // port
      port: '3306',
      // username
      user: 'root',
      // password
      password: 'qd1224',
      // database
      database: 'blog_demo',
    },
    // load into app, default is open
    app: true,
    // load into agent, default is close
    agent: false,
  };
  return {
    ...config,
    ...userConfig,
  };
};

可在egg-mysql找到其配置 https://github.com/eggjs/egg-mysql
根据自己的数据库配置进行修改即可

  config.mysql = {
    // database configuration
    client: {
      // host
      host: 'localhost',
      // port
      port: '3306',
      // username
      user: 'root',
      // password
      password: 'qd1224',
      // 数据库名称
      database: 'blog_demo',
    },
    // load into app, default is open
    app: true,
    // load into agent, default is close
    agent: false,
  };

创建基本数据

在数据库创建一个表，随意设计一个表录入一条数据

到controller中写接口以及返回值，记得配置对应的路由

// 使用get请求
router.get('/client/index', controller.client.home.index);

'use strict';
const Controller = require('egg').Controller;

class HomeController extends Controller {  
  async index() {
        //从全局this中结构出上下文的 ctx
      const { ctx } = this;
        //数据库查询命令可以在egg-mysql/github中查，这里是查询 表blog_title的全部数据
      const result = await this.app.mysql.select('blog_title', {});
        //可打印返回值，这是启动的命令行那里，不在浏览器中
      // console.log(result);
        //返回的值
      ctx.body = result;
      }
}

在浏览器中输入对应的路由，如果看到返回的json数据即可

接口拿取数据

进入项目的根目录下面，注意是最外层的package.json同级目录
安装axios
```
yarn add axios
```
在写请求之前我们可以先进行接口地址的配置，将其放在一个文件中去

这里在根目录下创建config文件夹，在下面创建url.js的文件专门用来放地址

const baseUrl = 'http://127.0.0.1:7001/client/'

const urlPath = {
  getIndex: `${baseUrl}index`,
}

export default urlPath

在pages下的index.js中开始写请求

这里使用hooks写
这里使用getInitialProps在其中写异步请求并且返回值
接收props参数，这个参数可以打印出来，可以看到有data属性其中就是接口的返回值，
拿到的值可以赋值给myList（自定义参数）就可以在jsx中循环生成数据了

import React, { Fragment, useState, useEffect } from 'react'
import Head from 'next/head'
import axios from 'axios'

import urlPath from '../config/url'

const { getIndex: getList } = urlPath;

const Home = (props) => {
  const list = props.data
  const [myList, setMyList ] = useState(list)

  return (
    <Fragment>
      <Head>
        <title>Home</title>
      </Head>
      <ul>
          {myList.map(item => {
          return (<li>item.title</li>)
        })}
      </ul>
   </Fragment>
  )
}

Home.getInitialProps = async () => {
  const promiseList = new Promise((resolve) => {
    axios.get(getList).then((res) => {
      resolve(res.data)
    })
  })
  return await promiseList, 
}

export default Home

解决跨域问题

请求数据时会出现跨域的报错，虽然我们是都在本地，在端口不同而会导致跨域问题
安装egg-cors
```
npm install --save egg-cors
```

配置插件 (和数据库插件一样需要进行配置)

plugin.js

exports.cors = {
  enable: true,
  package: 'egg-cors',
};

config.default.js

 // egg-cors 解决跨域
  config.security = {
    csrf: { enable: false },
    domainWhiteList: [ '*' ],
  };
  config.cors = {
    origin: 'http://localhost:3000', // 只允许这个域进行访问接口
    credentials: true, // 开启认证
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',
  };

在两个文件加入配置即可解决跨域请求了

小结：

基本的流程就是这些，其他的也就是业务逻辑不同导致的接口以及数据不同而已，都是按照这样来从数据库拿数据，接口返回值，页面请求数据，页面显示数据