EggJs + Next.js + React + 初探 (更新中)

0、安装

0-1、安装与创建Egg项目

0、注意node版本：建议选择 LTS 版本，最低要求 8.x。
1、命令行安装Egg： npm install egg-init --global
2、新建项目：egg-init 项目名称 --type=simple
3、进入新项目目录：cd 项目名称；
4、安装依赖包：npm install
5、运行：npm run dev（默认端口号7001）。

0-2、安装MobX

1、安装MobX：npm install mobx --save
2、安装React bindings：npm install mobx-react --save

0-3、安装Next／React/React-dom

1、npm install --save next react react-dom

---

1、简单Egg小Demo

首先，在route.js中添加新的路由（跳到自定义的页面）：

module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/nana', controller.nana.index); //新增
};

然后在controller文件夹新增文件nana.js

'use strict';
const Controller = require('egg').Controller;
class NanaController extends Controller {
  async index() {
    this.ctx.body = 'hi, nana';
  }
}
module.exports = NanaController;

（此时运行npm run dev，访问127.0.0.1:7001/nana网页显示‘hi, nana’）

---

2、实际项目（项目中用到了Next.js）

首先，app目录下有一个router.js文件，在其中新增路径

module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/nana/a/:id', controller.ssr.example);
  router.get('/*', controller.ssr.index);
};

在app/controller/ssr.js中配置（example对应router.js中的controller.ssr.example(也是mobx store仓库的名称)，renderSSR中的’/nana/a’对应page文件夹中的文件路径）

	class SSRController extends Controller {
    async index() {
        this.ctx.body = 'hi, egg';
    }
    async example(){
        const { ctx, app } = this;
        await renderSSR(ctx, app, '/nana/a', {...ctx.params, ...ctx.query}, `/nana/a/{id}`);
    }
}
module.exports = SSRController;

在app同级的ssr文件夹中添加page文件夹，其中新建nana/a文件路径，在a文件夹中新建index.js，添加

@inject('example')
@withRouter
export default class Hachi extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false
        }
        this.changeState = this.changeState.bind(this);
    }
    static async getInitialProps(context) {
        const { example } = context.mobxStore;
        const { id = 0 } = context.query;
        const params = { id };
        const initalData = await netService.nanaListTag(params);
        //存入store
        example.initialListData(initalData);
        return {
            ...initalData
        };
    }

在这里发起了一个异步请求，具体的请求配置在page同级的service目录下，network文件夹中NetInterface.js

let urlRoot = 'https://nana.com';
const isServer = typeof window === 'undefined';
static nanaListTag(params){
	const root = isServer ? urlRoot : '';
	return NetUtils.get(`${root}/接口地址`, params);
}

在同级的NetUtils.js中加入fetch实现函数（此处忽略实现代码）

ssr/model/index.js中配置

import Example from './nana/a';

let store = null;

function storeInit(isServer, initialState) {
    
	return {
        example: new Example(isServer, initialState && initialState.example),
	};
}

export function initializeStore(isServer, initialState) {
	if (isServer) {
        return storeInit(isServer, initialState);
	}
	if (store === null) {
        store = storeInit(isServer, initialState);
    }
	return store;
}

ssr/model/nana/a.js中是仓库的存储与使用

import { action, observable, computed } from 'mobx';
class Store {
    @observable id;
	constructor(isServer, initialState) {
        if(initialState) {
            let { id} = initialState;
            this.lists = lists || [];
        }
    }

    // getIntailProps中的异步调用方法返回数据存储在仓库的@observable变量中
    @action 
    initialListData(id = '10') {
        this.id = id;
    }
    //页面中通过this.props.this.props.example.setName('hachi')调用
    @action
    setName(name) {
        this.name = name;
    }

    @computed get ifLoadMore() {
        return this.lists.length < this.total;
    }
}
export default Store;