【亲测免费】 Planka 项目管理工具使用教程

1. 项目的目录结构及介绍

Planka 项目的目录结构如下：

planka/
├── client/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── containers/
│   │   ├── redux/
│   │   ├── styles/
│   │   ├── index.js
│   │   └── App.js
│   ├── package.json
│   └── README.md
├── server/
│   ├── api/
│   ├── config/
│   ├── migrations/
│   ├── seeders/
│   ├── src/
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── services/
│   │   ├── index.js
│   │   └── server.js
│   ├── package.json
│   └── README.md
├── docker-compose.yml
├── LICENSE
└── README.md

目录结构介绍

• client/: 前端代码目录，使用 React 和 Redux 构建。

  • public/: 公共资源文件。
  • src/: 前端源代码。
    • components/: React 组件。
    • containers/: 容器组件。
    • redux/: Redux 相关文件。
    • styles/: 样式文件。
    • index.js: 入口文件。
    • App.js: 主应用组件。
  • package.json: 前端项目依赖配置。

• server/: 后端代码目录，使用 Sails.js 和 PostgreSQL。

  • api/: API 路由和控制器。
  • config/: 配置文件。
  • migrations/: 数据库迁移文件。
  • seeders/: 数据库种子文件。
  • src/: 后端源代码。
    • controllers/: 控制器。
    • models/: 数据模型。
    • services/: 服务层。
    • index.js: 入口文件。
    • server.js: 服务器启动文件。
  • package.json: 后端项目依赖配置。

• docker-compose.yml: Docker 配置文件，用于一键启动项目。

• LICENSE: 项目许可证。

• README.md: 项目说明文档。

2. 项目的启动文件介绍

前端启动文件

前端的启动文件位于 client/src/index.js，主要负责渲染 React 应用到 DOM 中。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

后端启动文件

后端的启动文件位于 server/src/index.js，主要负责启动 Sails.js 服务器。

const sails = require('sails');
const rc = require('sails/accessible/rc');

sails.lift(rc('sails'));

3. 项目的配置文件介绍

前端配置文件

前端的配置文件主要是 client/package.json，包含了项目的依赖和脚本命令。

{
  "name": "planka-client",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  }
}

后端配置文件

后端的配置文件主要是 server/config/ 目录下的文件，例如 server/config/env/development.js 包含了开发环境的配置。

module.exports = {
  port: process.env.PORT || 1337,
  models: {
    connection: 'localDiskDb',
    migrate: 'alter'
  },
  datastores: {
    localDiskDb: {