aemoe / fairy

一个能够支持前后端分离并支持中间层同构的完整框架

Fairy - 一个前后端分离框架

一个能够支持前后端分离并支持中间层同构的完整框架,或许现在它还不够完善,但是我会把构建该框架中遇到的问题都列出来,以方便其他人遇到问题不在需要去到处搜索问题,希望为自己搭建框架的人有一些帮助,文档也会不断更新和优化,你可以watch项目随时看到文档的更新,也希望最后成为一个完整而又完美的框架,如果这些问题对你有帮助,请点个star吧,感谢~ ~

怎么安装

开启本地数据库Mysql,并使用phpmyadmin类似的工具在mysql中创建数据库(名字随意之后要填写),之后将mysql中的文件夹sql文件导入数据库, 最后在server/config/db.json中配置mysql的数据库名称和用户名密码即可

在./clent/中执行, 客户端开发,默认端口5000

npm i
npm start

在根目录,客户端开发及部署,默认开启端口3000

npm i pm2 -g
npm i
npm start

框架优势

• 路由同步(前后端共用一套路由)
• 模板同步(前后端共用一套模板)
• 数据同步(前后端公用一套数据状态机)

同构对比之前非同构加载对比, 可以明显看到白屏时间更少, 页面总计加载速度更快

非同构 VS 同构

前端开发中也支持react,react-router,样式及Redux的动态更新

开发BUG日记

当开发中遇到的问题,我会列在下面,以方便自己查询和其他人进行相同问题的修改和修复

问题列表

如何搭建这样一个框架

Link

协议

MIT

fairy's Issues

【react热加载问题】引入react-hot-loader3之后报错 Warning: ExceptionsManager.js:76 <Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions. Warning: [react-router] You cannot change <Router routes>; it will be ignored

问题

引入react-hot-loader3之后报错
Warning: ExceptionsManager.js:76 does not support changing store on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.
和
Warning: [react-router] You cannot change ; it will be ignored

原因

第一个问题未知,请参考client/redux的文件夹里面的设置可以解决
第二个问题是react-router组件v2和v3版本的问题,官方说并不影响热替换

解决方案

react-router3 在使用react-hot-loader3时会出现报错的问题, 不需要管它, 这并不影响使用 如果想解决可以给router加随机数

或者更换react-router4 即可

bcrypt not found

bcrypt这个轮子npm install找不到，是不是改名字为bcryptjs了呢

【React】如何用方法传参数

问题

使用方法传递参数的正确写法

解决方案

方法一:

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(props0, props1, ...) {
    //code
  }
  render() {
      <button onClick={this.handleClick.bind( props0, props1, ...}></button>
  }
}

方法二:

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(event, arg1, arg,……) {
    console.log(event.target);
    //code
 }
  render() {
      <button onClick={(event, arg1, arg2,……) => {this.handleClick(event, arg1, arg2,……)}>
      </button>
  }
}

【react问题】控制台报错 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the App component.

问题

谷歌报错 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the App component.

原因

原因是未及时清除掉定时器或者变量,造成了报错会造成内存溢出|使用this定义变量,然后用componentWillUnmount()中清除定时器,方法见官方定时器demo,如下:

解决方案

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {secondsElapsed: 0};
  }

  tick() {
    this.setState((prevState) => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
}
ReactDOM.render(<Timer />, mountNode);

请求交流群

如题：准备入坑。

【React】如何制作点击空白部分隐藏弹出层

问题

React点击空白部分隐藏弹出层

原因

React事件的坑，需求可以简化为：点击框体以外的部分则隐藏框体。最直接的想法，document上绑定个事件，设置控制显示隐藏的state为false，在框体上绑定个事件，阻止冒泡。这样点击框体内部就不会触发document上的事件。

解决方案

1.React为了提高效率，把事件都委托给了document，所以 e.stopPropagation() 并非是不能阻止冒泡，而是等他阻止冒泡的时侯，事件已经传递给document了，没东西可阻止了。可以通过在document.body上绑定 alert（3），直观的了解这一点，3 是优先于 1 弹出的。

2.e.stopPropagation()不行，浏览器支持一个好东西，e.stopImmediatePropagation() 他不光阻止冒泡，还能阻止在当前事件触发元素上，触发其它事件。这样即使你都绑定到document上也阻止不了我了吧。
这样做还不行，React对原生事件封装，提供了很多好东西，但也省略了某些特性。

3.e.stopImmediatePropagation() 就是被省略的部分，然而，他给了开口：e.nativeEvent ，从原生的事件对象里找到stopImmediatePropagation()，完活

class Test extends React.Component{
    componentDidMount(){
        document.onclick=this.two;
    }
    one(e){
        e.nativeEvent.stopImmediatePropagation();
        alert(1)
    }
    two(){
        alert(2)
    }
    render(){
        return(<div style={{height:150,width:150,backgroundColor:"#000"}} onClick={this.one}/>)
    }
}

ReactDOM.render(
    <Test/>,
    document.getElementById("test")
);

注册失败

已找到原因：user数据库表很多字段为NOT NULL，注册的时候没有填充这些NOT NULL字段，导致插入数据失败。

【后端权限验证类】使用passport时,一直无法写入cookie,并无法验证通过

问题

使用passport时,一直无法写入cookie,并无法验证通过

原因

原因是由于没有在执行代码的时候,写入await让验证操作执行完在进行后续操作,造成了问题

解决方案

只需要增加await,等待异步执行完成后传接成功内容给http body,代码如下:

 await passport.authenticate('local', function(err, user, info, status) {.....}

你确定你这个可以正常运行？

【react问题】控制台报错 ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$xvrt44g6a8' of null at Object.getClosestInstanceFromNode. 和 Uncaught RangeError: Maximum call stack size exceeded

问题

控制台报错
ReactDOMComponentTree.js:113 Uncaught TypeError: Cannot read property '__reactInternalInstance$xvrt44g6a8' of null
at Object.getClosestInstanceFromNode.
和
Uncaught RangeError: Maximum call stack size exceeded

原因

未知,可能是图片重复使用或者堆栈造成内存溢出和报错

解决方案

将
render((
    <Provider store={store}>
        {routes}
    </Provider>
), document.getElementById('root'));
改为
render((
  <div>
    <Provider store={store}>
        {routes}
    </Provider>
  </div>
), document.getElementById('root'));

【NodeJS后端问题】如何在后端运行时,忽略css文件,防止nodejs后端服务器报错

问题

如何在后端运行时,忽略css文件,防止nodejs后端服务器报错|node服务器不能正确解析css文件,所以会出现报错|使用asset-require-hook插件排除css,也可以排除sass文件,防止nodejs读取css报错.

原因

前后端生成的css-modules不同,造成了部署到服务器时,会造成读不到样式,然后页面闪现问题|原因是由于使用的组件css-modules-require-hook也是根据css-modules的机制,以file-path路径进行生成的hash,所以由于css-modules-require-hook和webpack的目录不同,所以造成了生成的hash不一样只的问题|只需要在css-modules-require-hook组件中使用rootDir,将两个目录一致即可

解决方案

后端React 使用renderToString渲染 图片路径变为hash码名称|原因是由于Nodejs加载文件时,会自动转为hash名称|使用插件asset-require-hook钩子来返回正确的图片名称

require('asset-require-hook')({
  extensions: [
    'jpg', 'png', 'gif', 'webp'
  ],
  name: '[name].[ext]',
  limit: 2000
});

根目录 npm start 报错

MacBook-Pro:fairy jack$ npm start

[email protected] start /Users/alan/Desktop/fairy
cd client && npm run build && cd ../ && cross-env NODE_ENV=production pm2 start ./app.js --watch

[email protected] build /Users/alan/Desktop/fairy/client
npm run clean && npm run build:webpack

[email protected] clean /Users/alan/Desktop/fairy/client
rimraf ../public

sh: rimraf: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] clean: rimraf ../public
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] clean script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/alan/.npm/_logs/2018-10-14T02_39_24_992Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: npm run clean && npm run build:webpack
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/alan/.npm/_logs/2018-10-14T02_39_25_017Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: cd client && npm run build && cd ../ && cross-env NODE_ENV=production pm2 start ./app.js --watch
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/alan/.npm/_logs/2018-10-14T02_39_25_039Z-debug.log