10

分享一个 JavaScript 前后端系统

 4 years ago
source link: https://github.com/Rannie/pems
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

pems

A javascript full-stack power equipment management system.

Demo

Demo Address: Power Equipment Management System

Account: admin/admin

Screenshots

  • Login Page

ZR7jymf.png!web

  • List Page

iAJfueA.png!web

  • Add Page

vA3aqav.png!web

  • Add Popup

E3uQZzJ.png!web

Tech Stack

Frontend

  • Typescript
  • React
  • React-Router
  • React-Redux
  • Ant Design
  • Axios
  • GraphQL
  • AliOSS
  • i18n
  • Sass
  • ESLint
  • Babel
  • Webpack

Backend (Node)

  • Koa2
  • Express
  • Egg
  • MongoDB

Setup

Backend

  • MongoDB

Add your MongoDB path in server/config/index.js .

me22QzB.png!web

  • Other Config

JWT Secret, expire date , serve path also can be modified in server/config/index.js .

Frontend

  • Aliyun OSS

Set OSS_REGION , OSS_ACCESS_KEY_ID , OSS_ACCESS_KEY_SECRET , OSS_BUCKET in views/src/constants.js .

  • Home URL

Set HOME_URL in views/src/constants.js , system will redirect to this address when JWT expires.

  • API Base URL

Set SERVICE_URL in views/config/prod.env.js . (Deploy Mode)

Debug

  • build
cd views/
npm run build
  • serve page & start api server

require pm2 

cd server/
npm run dev

Then you can open http://127.0.0.1:3010

Deployment

Upload website dist & server code to your server, and run npm run start in server folder. (default webpage path is /var/www/pems , you can config it in server/config/index.js )

Wechat Official Account

mINjMvV.jpg!web

License

MIT License

Copyright (c) 2019 Hanran Liu


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK