├── .prettierignore
├── src
├── redux
│ ├── middleware
│ │ ├── index.js
│ │ └── logger.js
│ ├── reducers
│ │ ├── user
│ │ │ ├── index.js
│ │ │ └── userList.js
│ │ ├── home
│ │ │ ├── index.js
│ │ │ ├── login.js
│ │ │ └── register.js
│ │ └── index.js
│ ├── store
│ │ └── configureStore.js
│ └── actions
│ │ ├── User.js
│ │ └── Home.js
├── index.css
├── components
│ ├── Login
│ │ ├── cool-background.png
│ │ ├── form.module.css
│ │ ├── Login.js
│ │ └── Register.js
│ └── UserList.js
├── App.module.css
├── index.js
├── App.test.js
├── constants
│ ├── ConstTypes.js
│ └── ActionTypes.js
├── containers
│ ├── User
│ │ └── UserList.js
│ └── Home
│ │ ├── Login.js
│ │ └── Register.js
├── App.js
├── common
│ └── NotFound
│ │ ├── NotFound.js
│ │ └── NotFound.css
├── routes
│ └── index.js
├── api
│ └── http.js
└── registerServiceWorker.js
├── public
├── favicon.ico
├── manifest.json
└── index.html
├── .prettierrc
├── server
├── db
│ ├── config
│ │ ├── config.js
│ │ └── mongoose.js
│ ├── models
│ │ └── UserModel.js
│ ├── README.md
│ └── schemas
│ │ └── UserSchema.js
├── constant
│ └── constant.js
├── routes
│ ├── jwt.js
│ ├── index.js
│ └── user.js
├── package.json
├── server.js
└── yarn.lock
├── .eslintrc
├── .gitignore
├── config-overrides.js
├── LICENSE
├── README.md
└── package.json
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | build/
3 | public/
--------------------------------------------------------------------------------
/src/redux/middleware/index.js:
--------------------------------------------------------------------------------
1 | import logger from './logger';
2 |
3 | export { logger };
4 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luffyZh/express-react-scaffold/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/src/redux/middleware/logger.js:
--------------------------------------------------------------------------------
1 | import logger from 'redux-logger';
2 |
3 | export default logger;
4 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": true,
3 | "singleQuote": true,
4 | "tabWidth": 2,
5 | "trailingComma": "none",
6 | "printWidth": 80
7 | }
8 |
--------------------------------------------------------------------------------
/src/components/Login/cool-background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luffyZh/express-react-scaffold/HEAD/src/components/Login/cool-background.png
--------------------------------------------------------------------------------
/server/db/config/config.js:
--------------------------------------------------------------------------------
1 | // 数据库地址： 'mongodb://用户名:密码@ip地址:端口号/数据库';
2 | // 一般如果没设置用户名和密码直接写IP地址就可以,数据库你可以新建一个
3 | module.exports = {
4 | mongodb: 'mongodb://127.0.0.1:27017/luffy_blog'
5 | };
6 |
--------------------------------------------------------------------------------
/src/redux/reducers/user/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import userList from './userList';
3 |
4 | const user = combineReducers({
5 | userList
6 | });
7 |
8 | export default user;
9 |
--------------------------------------------------------------------------------
/src/App.module.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .AppHeader {
6 | background-color: #00BFFF;
7 | height: 150px;
8 | padding: 20px;
9 | color: white;
10 | }
11 |
12 | .AppTitle {
13 | font-size: 1.5em;
14 | }
--------------------------------------------------------------------------------
/server/db/models/UserModel.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose');
2 | const UserSchema = require('../schemas/UserSchema');
3 | //创建model，这个地方的user对应mongodb数据库中users的conllection。
4 | const User = mongoose.model('user', UserSchema);
5 | module.exports = User;
6 |
--------------------------------------------------------------------------------
/server/db/README.md:
--------------------------------------------------------------------------------
1 | ### config文件夹
2 | #### 用于配置mongodb的文件夹
3 | #### config.js用于配置本机的MongoDB链接地址
4 | #### mongoose.js用于连接MongoDB数据库并且建立Schema和Model
5 |
6 | ### schemas文件夹
7 | #### schema.js用于定义各种Schema
8 |
9 | ### model文件夹
10 | #### model.js用于定义各种Model
11 |
--------------------------------------------------------------------------------
/src/redux/reducers/home/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import login from './login';
3 | import register from './register';
4 |
5 | const home = combineReducers({
6 | login,
7 | register
8 | });
9 |
10 | export default home;
11 |
--------------------------------------------------------------------------------
/src/redux/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import user from './user/index';
3 | import home from './home/index';
4 |
5 | const rootReducer = combineReducers({
6 | home,
7 | user
8 | });
9 |
10 | export default rootReducer;
11 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import RootRouter from './routes/index';
4 | import registerServiceWorker from './registerServiceWorker';
5 |
6 | ReactDOM.render(, document.getElementById('root'));
7 | registerServiceWorker();
8 |
--------------------------------------------------------------------------------
/server/db/schemas/UserSchema.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose');
2 | const Schema = mongoose.Schema;
3 | //创建Schema
4 | const UserSchema = new Schema({
5 | username: String,
6 | password: String,
7 | email: String,
8 | role: Number
9 | });
10 | module.exports = UserSchema;
11 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/src/constants/ConstTypes.js:
--------------------------------------------------------------------------------
1 | // 所有操作的状态值
2 | export const OperationStatus = {
3 | initial: 'initial',
4 | loading: 'loading',
5 | load_success: 'load_success',
6 | load_fail: 'load_fail',
7 | editing: 'editing',
8 | saving: 'saving',
9 | save_success: 'save_success',
10 | save_fail: 'save_fail'
11 | };
12 |
--------------------------------------------------------------------------------
/server/constant/constant.js:
--------------------------------------------------------------------------------
1 | const crypto = require('crypto');
2 |
3 | module.exports = {
4 | MD5_SUFFIX: 'luffyZhouNodeCrawler我是一个固定长度的盐值',
5 | md5: pwd => {
6 | let md5 = crypto.createHash('md5');
7 | return md5.update(pwd).digest('hex');
8 | },
9 | secretKey: 'luffy_youdao_1993711_26_jwttoken'
10 | };
11 |
--------------------------------------------------------------------------------
/server/routes/jwt.js:
--------------------------------------------------------------------------------
1 | const expressJwt = require('express-jwt');
2 | const { secretKey } = require('../constant/constant');
3 |
4 | const jwtAuth = expressJwt({
5 | secret: secretKey,
6 | credentialsRequired: true // 设置为false就不进行校验了，游客也可以访问
7 | }).unless({
8 | path: ['/api/user/login', '/api/user/register']
9 | });
10 |
11 | module.exports = jwtAuth;
12 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "parserOptions": {
4 | "ecmaVersion": 6,
5 | "sourceType": "module",
6 | "ecmaFeatures": {
7 | "jsx": true
8 | }
9 | },
10 | "env": {
11 | "browser": true,
12 | "node": true
13 | },
14 | "rules": {
15 | "semi": 2,
16 | "no-unused-vars": "off"
17 | }
18 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /server/node_modules
6 |
7 | # testing
8 | /coverage
9 |
10 | # production
11 | /build
12 |
13 | # misc
14 | .DS_Store
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 |
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 |
24 | .idea
25 |
--------------------------------------------------------------------------------
/server/db/config/mongoose.js:
--------------------------------------------------------------------------------
1 | // 用于连接数据库并且定义Schema和Model
2 | const mongoose = require('mongoose');
3 | const config = require('./config');
4 | module.exports = () => {
5 | mongoose.connect(config.mongodb); //连接mongodb数据库
6 | // 实例化连接对象
7 | var db = mongoose.connection;
8 | db.on('error', console.error.bind(console, '连接错误：'));
9 | db.once('open', callback => {
10 | console.log('MongoDB连接成功！！');
11 | });
12 | return db;
13 | };
14 |
--------------------------------------------------------------------------------
/src/containers/User/UserList.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import UserList from '../../components/UserList';
3 | import { fetchAllUserList } from '../../redux/actions/User';
4 |
5 | const mapStateToProps = state => ({
6 | list: state.user.userList.list
7 | });
8 |
9 | const mapDispatchToProps = dispatch => ({
10 | fetchAllUserList() {
11 | dispatch(fetchAllUserList());
12 | }
13 | });
14 |
15 | export default connect(
16 | mapStateToProps,
17 | mapDispatchToProps
18 | )(UserList);
19 |
--------------------------------------------------------------------------------
/src/containers/Home/Login.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import Login from '../../components/Login/Login';
3 | import { postUserLogin, resetLoginStatus } from '../../redux/actions/Home';
4 |
5 | const mapStateToProps = state => ({
6 | loginMsg: state.home.login.loginMsg,
7 | status: state.home.login.status
8 | });
9 |
10 | const mapDispatchToProps = dispatch => ({
11 | postUserLogin(postData) {
12 | dispatch(postUserLogin(postData));
13 | },
14 | resetLoginStatus() {
15 | dispatch(resetLoginStatus());
16 | }
17 | });
18 |
19 | export default connect(
20 | mapStateToProps,
21 | mapDispatchToProps
22 | )(Login);
23 |
--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "server",
3 | "version": "1.0.0",
4 | "description": "server config",
5 | "main": "server.js",
6 | "author": "luffy",
7 | "license": "MIT",
8 | "dependencies": {
9 | "babel-cli": "^6.26.0",
10 | "babel-preset-es2015": "^6.24.1",
11 | "body-parser": "^1.18.2",
12 | "crypto": "^1.0.1",
13 | "express": "^4.16.3",
14 | "express-jwt": "^5.3.1",
15 | "jsonwebtoken": "^8.2.1",
16 | "mongoose": "^5.0.16",
17 | "morgan": "^1.9.0"
18 | },
19 | "scripts": {
20 | "start": "nodemon ./server.js",
21 | "build": "babel ./server.js --out-file server-compiled.js",
22 | "serve": "node server-compiled.js"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/config-overrides.js:
--------------------------------------------------------------------------------
1 | /* config-overrides.js */
2 | const { injectBabelPlugin } = require('react-app-rewired');
3 | const rewireLess = require('react-app-rewire-less');
4 | const rewireCssModules = require('react-app-rewire-css-modules');
5 |
6 | module.exports = function override(config, env) {
7 | config = injectBabelPlugin(
8 | ['import', { libraryName: 'antd', style: true }],
9 | config
10 | );
11 | config = rewireCssModules(config, env);
12 | config = rewireLess.withLoaderOptions({
13 | modifyVars: {
14 | '@primary-color': '#00BFFF',
15 | '@input-height-base': '40px',
16 | '@btn-height-base': '40px'
17 | }
18 | })(config, env);
19 | return config;
20 | };
21 |
--------------------------------------------------------------------------------
/src/containers/Home/Register.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import Register from '../../components/Login/Register';
3 | import {
4 | postUserRegister,
5 | resetRegisterStatus
6 | } from '../../redux/actions/Home';
7 |
8 | const mapStateToProps = state => ({
9 | registerMsg: state.home.register.registerMsg,
10 | registerResult: state.home.register.registerResult
11 | });
12 |
13 | const mapDispatchToProps = dispatch => ({
14 | postUserRegister(postData) {
15 | dispatch(postUserRegister(postData));
16 | },
17 | resetRegisterStatus() {
18 | dispatch(resetRegisterStatus());
19 | }
20 | });
21 |
22 | export default connect(
23 | mapStateToProps,
24 | mapDispatchToProps
25 | )(Register);
26 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from 'react-router-dom';
3 | import { Button } from 'antd';
4 | /* 此处注意，如果使用CSS Module，则必须命名css文件为*.module.css的形式 */
5 | /* More detail can see from https://github.com/codebandits/react-app-rewire-css-modules */
6 | import styles from './App.module.css';
7 |
8 | class App extends Component {
9 | render() {
10 | return (
11 |
12 |
13 |
Express-JWT-Auth
14 |
15 |
16 |
17 |
18 | );
19 | }
20 | }
21 |
22 | export default App;
23 |
--------------------------------------------------------------------------------
/src/constants/ActionTypes.js:
--------------------------------------------------------------------------------
1 | // 获取所有用户信息
2 | export const FETCH_ALL_USER_LIST = 'FETCH_ALL_USER_LIST';
3 | export const FETCH_ALL_USER_LIST_SUCCESS = 'FETCH_ALL_USER_LIST_SUCCESS';
4 | export const FETCH_ALL_USER_LIST_FAIL = 'FETCH_ALL_USER_LIST_FAIL';
5 |
6 | // 用户注册
7 | export const USER_REGISTER = 'USER_REGISTER';
8 | export const USER_REGISTER_SUCCESS = 'USER_REGISTER_SUCCESS';
9 | export const USER_REGISTER_FAIL = 'USER_REGISTER_FAIL';
10 | export const RESET_REGISTER_STATUS = 'RESET_REGISTER_STATUS';
11 |
12 | // 用户登录
13 | export const USER_LOGIN = 'USER_LOGIN';
14 | export const USER_LOGIN_SUCCESS = 'USER_LOGIN_SUCCESS';
15 | export const USER_LOGIN_FAIL = 'USER_LOGIN_FAIL';
16 | export const RESET_LOGIN_STATUS = 'RESET_LOGIN_STATUS';
17 |
--------------------------------------------------------------------------------
/src/redux/store/configureStore.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware } from 'redux';
2 | import thunkMiddleware from 'redux-thunk';
3 | import { logger } from '../middleware';
4 | import rootReducer from '../reducers';
5 |
6 | const nextReducer = require('../reducers');
7 |
8 | function configure(initialState) {
9 | const create = window.devToolsExtension
10 | ? window.devToolsExtension()(createStore)
11 | : createStore;
12 |
13 | const createStoreWithMiddleware = applyMiddleware(thunkMiddleware, logger)(
14 | create
15 | );
16 |
17 | const store = createStoreWithMiddleware(rootReducer, initialState);
18 |
19 | if (module.hot) {
20 | module.hot.accept('../reducers', () => {
21 | store.replaceReducer(nextReducer);
22 | });
23 | }
24 | return store;
25 | }
26 | export default configure;
27 |
--------------------------------------------------------------------------------
/src/components/Login/form.module.css:
--------------------------------------------------------------------------------
1 | .formContainer {
2 | position: absolute;
3 | width: 100%;
4 | height: 100%;
5 | background: url('./cool-background.png');
6 | background-size: cover;
7 | }
8 | .cardStyle {
9 | width: 40%;
10 | top: 50%;
11 | left: 50%;
12 | transform: translate(-50%, -50%);
13 | }
14 | .formTitle {
15 | text-align: center;
16 | font-weight: 600;
17 | font-size: 26px;
18 | }
19 | .formButton {
20 | width:100%;
21 | }
22 | .otherInfo {
23 | text-align: center;
24 | color: #00bfff;
25 | }
26 | .otherInfo > span {
27 | font-size: 16px;
28 | cursor: pointer;
29 | margin: 0 4px;
30 | }
31 | .spinContainer {
32 | position: absolute;
33 | width: 100%;
34 | height: 100%;
35 | display: flex;
36 | justify-content: center;
37 | align-items: center;
38 | z-index: 9;
39 | background-color: rgba(0, 0, 0, 0.26);
40 | }
--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const path = require('path');
3 | const logger = require('morgan');
4 | const bodyParser = require('body-parser');
5 | const mongoose = require('./db/config/mongoose'); // 连接mongodb数据库
6 | const router = require('./routes/index.js');
7 |
8 | const app = express();
9 | const db = mongoose();
10 | // 加载日志的中间件
11 | // 每一次服务请求都会将信息打印在控制台中
12 | app.use(logger('dev'));
13 | // 给app配置bodyParser中间件
14 | // 通过如下配置再路由种处理request时，可以直接获得post请求的body部分
15 | app.use(bodyParser.urlencoded({ extended: true }));
16 | app.use(bodyParser.json());
17 |
18 | //app.use('/',express.static(path.join(__dirname,"..",'build')));
19 | // app.use('/',express.static(path.join(__dirname,"..",'static')));
20 |
21 | // 所有的路由会加上“／api”前缀
22 | app.use('/api', router); //添加router中间件
23 |
24 | // express 自动帮我们创建一个server，封装的node底层http
25 | app.listen(3003, () => {
26 | console.log('node server is listening 3003');
27 | });
28 |
--------------------------------------------------------------------------------
/src/redux/reducers/user/userList.js:
--------------------------------------------------------------------------------
1 | import {
2 | FETCH_ALL_USER_LIST,
3 | FETCH_ALL_USER_LIST_SUCCESS,
4 | FETCH_ALL_USER_LIST_FAIL
5 | } from '../../../constants/ActionTypes';
6 | import { OperationStatus } from '../../../constants/ConstTypes';
7 |
8 | const initialState = {
9 | list: []
10 | };
11 |
12 | const userList = (state = initialState, { type, payload }) => {
13 | switch (type) {
14 | case FETCH_ALL_USER_LIST:
15 | return {
16 | ...state,
17 | status: OperationStatus.initial
18 | };
19 | case FETCH_ALL_USER_LIST_SUCCESS:
20 | return {
21 | ...state,
22 | list: payload,
23 | status: OperationStatus.load_success
24 | };
25 | case FETCH_ALL_USER_LIST_FAIL:
26 | return {
27 | ...state,
28 | status: OperationStatus.load_fail
29 | };
30 | default:
31 | return state;
32 | }
33 | };
34 |
35 | export default userList;
36 |
--------------------------------------------------------------------------------
/src/redux/actions/User.js:
--------------------------------------------------------------------------------
1 | import {
2 | FETCH_ALL_USER_LIST,
3 | FETCH_ALL_USER_LIST_SUCCESS,
4 | FETCH_ALL_USER_LIST_FAIL
5 | } from '../../constants/ActionTypes';
6 | // import axios from 'axios';
7 | import http from '../../api/http';
8 |
9 | // 获取用户列表
10 | const getAllUserList = () => ({
11 | type: FETCH_ALL_USER_LIST
12 | });
13 | const getAllUserListSuccess = payload => ({
14 | type: FETCH_ALL_USER_LIST_SUCCESS,
15 | payload
16 | });
17 | const getAllUserListFail = () => ({
18 | type: FETCH_ALL_USER_LIST_FAIL
19 | });
20 | export const fetchAllUserList = () => dispatch => {
21 | dispatch(getAllUserList());
22 | // 获取用户列表
23 | // 因为设置了proxy的缘故，所以不需要写http://localhost:3003
24 | // 会自动定向到后端服务器
25 | return http
26 | .get('/user/list')
27 | .then(res => {
28 | return dispatch(getAllUserListSuccess(res.data));
29 | })
30 | .catch(error => {
31 | console.log(error);
32 | dispatch(getAllUserListFail());
33 | });
34 | };
35 |
--------------------------------------------------------------------------------
/server/routes/index.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const user = require('./user');
3 | const jwtAuth = require('./jwt');
4 | // 注册路由
5 | const router = express.Router();
6 | // 所有请求过来都会进行身份验证
7 | router.use(jwtAuth);
8 | // 路由中间件
9 | router.use((req, res, next) => {
10 | // 任何路由信息都会执行这里面的语句
11 | console.log('this is a api request!');
12 | // 把它交给下一个中间件，注意中间件的注册顺序是按序执行
13 | next();
14 | });
15 |
16 | router.use('/user', user);
17 | // 处理 404
18 | router.use((req, res, next) => {
19 | var err = new Error('Not Found');
20 | err.status = 404;
21 | next(err);
22 | });
23 | // 处理5错误
24 | router.use((err, req, res, next) => {
25 | if (err.name === 'UnauthorizedError') {
26 | res.status(401).json({
27 | code: 401,
28 | message: 'invalid token',
29 | data: err
30 | });
31 | } else {
32 | res.status(err.status || 500).json({
33 | code: err.status || 500,
34 | message: err.message,
35 | data: err
36 | });
37 | }
38 | });
39 |
40 | module.exports = router;
41 |
--------------------------------------------------------------------------------
/src/redux/reducers/home/login.js:
--------------------------------------------------------------------------------
1 | import {
2 | USER_LOGIN,
3 | USER_LOGIN_SUCCESS,
4 | USER_LOGIN_FAIL,
5 | RESET_LOGIN_STATUS
6 | } from '../../../constants/ActionTypes';
7 | import { OperationStatus } from '../../../constants/ConstTypes';
8 |
9 | const initialState = {
10 | loginMsg: '',
11 | status: OperationStatus.initial
12 | };
13 |
14 | const login = (state = initialState, { type, payload }) => {
15 | switch (type) {
16 | case USER_LOGIN:
17 | return {
18 | ...state,
19 | status: OperationStatus.initial
20 | };
21 | case USER_LOGIN_SUCCESS:
22 | return {
23 | ...state,
24 | loginMsg: payload.message,
25 | status: OperationStatus.load_success
26 | };
27 | case USER_LOGIN_FAIL:
28 | return {
29 | ...state,
30 | loginMsg: payload.message,
31 | status: OperationStatus.load_fail
32 | };
33 | case RESET_LOGIN_STATUS:
34 | return initialState;
35 | default:
36 | return state;
37 | }
38 | };
39 |
40 | export default login;
41 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 luffyZhou
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/common/NotFound/NotFound.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button } from 'antd';
3 | import EmptyData from 'uxcore-empty-data';
4 | import './NotFound.css';
5 |
6 | class NotFound extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.onMainClick = this.onMainClick.bind(this);
10 | }
11 | onMainClick(e) {
12 | this.props.history.push('/');
13 | }
14 | render() {
15 | return (
16 |
17 |
18 |
19 |
20 |
21 |
22 |
页面出错了
23 |
24 | 您访问的页面不存在，请确认链接无误后再试。
25 |
26 |
27 |
30 |
31 |
32 |
33 |
37 |
用户列表页
38 |
39 |
record._id}
43 | />
44 |
45 |
46 | );
47 | }
48 | }
49 | export default UserList;
50 |
--------------------------------------------------------------------------------
/src/routes/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Router, Route, Switch, Redirect } from 'react-router-dom';
3 | import { Provider } from 'react-redux';
4 | import { createBrowserHistory } from 'history';
5 | import configure from '../redux/store/configureStore';
6 | import App from '../App';
7 | import UserList from '../containers/User/UserList';
8 | import LoginForm from '../containers/Home/Login';
9 | import RegisterForm from '../containers/Home/Register';
10 | import NotFound from '../common/NotFound/NotFound';
11 |
12 | const history = createBrowserHistory();
13 | const store = configure();
14 |
15 | class RootRouter extends Component {
16 | render() {
17 | return (
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | );
31 | }
32 | }
33 |
34 | export default RootRouter;
35 |
--------------------------------------------------------------------------------
/src/common/NotFound/NotFound.css:
--------------------------------------------------------------------------------
1 | #scene-defaultpage-demo-basic {
2 | position:relative;
3 | height:500px;
4 | }
5 | .fillErrorDemo {
6 | position:absolute;
7 | left:50%;
8 | top:50%;
9 | transform:translate(-50%,-50%);
10 | width:684px;
11 | height:220px;
12 | }
13 | .fillErrorDemo .errorLeft {
14 | float:left;
15 | width:220px;
16 | height:220px;
17 | }
18 | .fillErrorDemo .errorLeft .kuma-empty-data-icon{
19 | height:220px;
20 | width:220px;
21 | }
22 | .fillErrorDemo .errorLeft .kuma-empty-data-content{
23 | display:none;
24 | }
25 | .fillErrorDemo .errorRight {
26 | float:right;
27 | display:table;
28 | width:400px;
29 | height:100%;
30 |
31 | }
32 | .fillErrorDemo .errorRight .tips{
33 | display:table-cell;
34 | vertical-align:middle;
35 | margin-right:64px;
36 | width:400px;
37 | }
38 | .fillErrorDemo .errorRight .tipsTitle {
39 | margin-bottom:28px;
40 | line-height:32px;
41 | font-size:32px;
42 | color:rgba(31,56,88,1);
43 | letter-spacing:0;
44 | }
45 | .fillErrorDemo .errorRight .errorRips{
46 | line-height:22px;
47 | font-size:14px;
48 | letter-spacing:0;
49 | color: rgba(-2147483648,26,-2147483648,0.60);
50 | }
51 | .fillErrorDemo .errorRight .errorButtons{
52 | margin-top:28px;
53 | }
54 | .fillErrorDemo .errorButtons button{
55 | margin-right:12px;
56 | }
57 | .kuma-button span {
58 | display:inline-block;
59 | line-height:12px;
60 | }
61 | .kuma-empty-data-icon {
62 | background-size: cover;
63 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # express-react-scaffold
2 | 后端使用express，前端使用react的精简全家桶脚手架。
3 | ### 目录
4 | ```
5 | express-react-scaffold
6 | - public
7 | - server //后端
8 | - db //数据库目录
9 | - routes //后端路由
10 | - public
11 | - server.js // 后端入口文件
12 | - src //前端
13 | - common // 公共组件
14 | - components // 展示组件
15 | - constants // 系统常量
16 | - containers // 状态组件
17 | - redux // redux相关
18 | - actions
19 | - reducers
20 | - store
21 | - middleware
22 | - App.js
23 | - index.js // 前端入口文件
24 | - .eslintrc //eslint配置文件
25 | - .gitignore
26 | - config-overrides.js
27 | - package.json
28 | - README.md
29 | - yarn.lock
30 | ```
31 | ### 后端
32 | 只提供API接口服务，采用express+MongoDB
33 | ### 前端
34 | 使用react全家桶，react+react-router+react-redux
35 |
36 | ### Version
37 | - 新增CSS Module，依赖的是[react-app-rewire-css-modules](https://github.com/codebandits/react-app-rewire-css-modules)
38 | > 使用CSS Module需要注意，.css文件的命名规则需要是*.module.css，这样才会被解析成css module,否则只会当成普通的css文件。详情见上方链接
39 |
40 | ### 使用
41 | ```
42 | 1. git clone https://github.com/luffyZh/express-react-scaffold.git
43 | 2. cd express-react-scaffold
44 | 3. yarn install // 安装前端依赖
45 | 4. cd server && yarn install // 安装后端依赖
46 | 5. yarn start // 在express-react-scaffold目录下
47 | ```
48 | > 使用之前请安装MongoDB并且在/server/config里面配置好你的数据库连接
49 |
50 | **更多细节，请访问如下链接查看：https://juejin.im/post/5ae3317e6fb9a07ac021fba4**
51 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "express-react-cli",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "antd": "^3.4.4",
7 | "axios": "^0.18.0",
8 | "babel-plugin-import": "^1.7.0",
9 | "express-validator": "^5.3.1",
10 | "history": "^4.7.2",
11 | "react": "^16.3.2",
12 | "react-app-rewire-less": "^2.1.1",
13 | "react-app-rewired": "^1.5.2",
14 | "react-dom": "^16.3.2",
15 | "react-redux": "^5.0.7",
16 | "react-router-dom": "^4.2.2",
17 | "react-scripts": "1.1.4",
18 | "redux": "^4.0.0",
19 | "redux-logger": "^3.0.6",
20 | "redux-thunk": "^2.2.0",
21 | "sweetalert": "^2.1.0",
22 | "uxcore-empty-data": "^0.1.5"
23 | },
24 | "scripts": {
25 | "react-start": "react-app-rewired start",
26 | "react-build": "react-app-rewired build",
27 | "start": "concurrently \"react-app-rewired start\" \"cd server && yarn start\"",
28 | "build": "concurrently \"react-app-rewired build\" \"cd server && yarn build\"",
29 | "test": "react-scripts test --env=jsdom",
30 | "eject": "react-scripts eject",
31 | "format": "prettier --write \"**/*.js\""
32 | },
33 | "proxy": "http://127.0.0.1:3003",
34 | "devDependencies": {
35 | "concurrently": "^3.5.1",
36 | "husky": "^1.3.1",
37 | "lint-staged": "^8.1.0",
38 | "node-sass": "^4.9.0",
39 | "nodemon": "^1.18.9",
40 | "prettier": "1.15.3",
41 | "react-app-rewire-css-modules": "codebandits/react-app-rewire-css-modules",
42 | "sass-loader": "^7.0.1"
43 | },
44 | "husky": {
45 | "hooks": {
46 | "pre-commit": "lint-staged"
47 | }
48 | },
49 | "lint-staged": {
50 | "*.{js,json,css,md}": [
51 | "prettier --write",
52 | "git add"
53 | ]
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
22 | Express-React-Scaffold-JWT
23 |
24 |
25 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/src/redux/actions/Home.js:
--------------------------------------------------------------------------------
1 | import {
2 | USER_REGISTER,
3 | USER_REGISTER_SUCCESS,
4 | USER_REGISTER_FAIL,
5 | USER_LOGIN,
6 | USER_LOGIN_SUCCESS,
7 | USER_LOGIN_FAIL,
8 | RESET_REGISTER_STATUS,
9 | RESET_LOGIN_STATUS
10 | } from '../../constants/ActionTypes';
11 | // import axios from 'axios';
12 | import http from '../../api/http';
13 |
14 | // 用户注册
15 | const userRegister = () => ({
16 | type: USER_REGISTER
17 | });
18 | const userRegisterSuccess = payload => ({
19 | type: USER_REGISTER_SUCCESS,
20 | payload
21 | });
22 | const userRegisterFail = payload => ({
23 | type: USER_REGISTER_FAIL,
24 | payload
25 | });
26 | export const resetRegisterStatus = () => ({
27 | type: RESET_REGISTER_STATUS
28 | });
29 | export const postUserRegister = postData => (dispatch, getState) => {
30 | dispatch(userRegister());
31 | return http
32 | .post('/user/register', postData)
33 | .then(res => {
34 | return dispatch(userRegisterSuccess(res.data));
35 | })
36 | .catch(error => {
37 | dispatch(userRegisterFail(error));
38 | });
39 | };
40 | // 用户登陆
41 | const userLogin = () => ({
42 | type: USER_LOGIN
43 | });
44 | const userLoginSuccess = payload => ({
45 | type: USER_LOGIN_SUCCESS,
46 | payload
47 | });
48 | const userLoginFail = payload => ({
49 | type: USER_LOGIN_FAIL,
50 | payload
51 | });
52 | export const resetLoginStatus = () => ({
53 | type: RESET_LOGIN_STATUS
54 | });
55 | export const postUserLogin = postData => (dispatch, getState) => {
56 | dispatch(userLogin());
57 | return http
58 | .post('/user/login', postData)
59 | .then(res => {
60 | if (res.code !== 0) {
61 | return dispatch(userLoginFail(res));
62 | }
63 | return dispatch(userLoginSuccess(res.data));
64 | })
65 | .catch(error => {
66 | console.log(error);
67 | dispatch(userLoginFail(error));
68 | });
69 | };
70 |
--------------------------------------------------------------------------------
/src/api/http.js:
--------------------------------------------------------------------------------
1 | import { createBrowserHistory } from 'history';
2 | import axios from 'axios';
3 | import swal from 'sweetalert';
4 |
5 | axios.defaults.baseURL = '/api';
6 |
7 | const history = createBrowserHistory();
8 |
9 | // 拦截请求，给所有的请求都带上token
10 | axios.interceptors.request.use(request => {
11 | const luffy_jwt_token = window.localStorage.getItem('luffy_jwt_token');
12 | if (luffy_jwt_token) {
13 | /*
14 | 此处有坑，在此记录
15 | request.headers['Authorization']
16 | 必须通过此种形式设置Authorization,否则后端即使收到字段也会出现问题，返回401
17 | - request.headers.Authorization或request.headers.authorization可以设置成功，
18 | 浏览器查看也没有任何问题，但是在后端会报401并且后端一律只能拿到小写的，
19 | 也就是res.headers.authorization，后端用大写获取会报undefined
20 | */
21 | request.headers['Authorization'] = `Bearer ${luffy_jwt_token}`;
22 | }
23 | return request;
24 | });
25 |
26 | // 拦截响应，遇到token不合法则报错
27 | axios.interceptors.response.use(
28 | response => {
29 | const res = response.data;
30 | if (res.data.token) {
31 | console.log('token:', res.data.token);
32 | window.localStorage.setItem('luffy_jwt_token', res.data.token);
33 | }
34 | return res;
35 | },
36 | error => {
37 | const errRes = error.response.data;
38 | if (error.response.status === 401) {
39 | window.localStorage.removeItem('luffy_jwt_token');
40 | swal('Auth Error!', `${errRes.message}, please login!`, 'error').then(
41 | () => {
42 | history.push('/login');
43 | setTimeout(() => {
44 | window.location.reload();
45 | }, 0);
46 | }
47 | );
48 | }
49 | return Promise.reject(errRes); // 返回接口返回的错误信息
50 | }
51 | );
52 |
53 | export default class http {
54 | static get(url, params) {
55 | return new Promise((resolve, reject) => {
56 | axios
57 | .get(url, {
58 | params: params
59 | })
60 | .then(res => {
61 | resolve(res);
62 | })
63 | .catch(err => {
64 | reject(err);
65 | });
66 | });
67 | }
68 |
69 | static post(url, body) {
70 | return new Promise((resolve, reject) => {
71 | axios
72 | .post(url, body)
73 | .then(res => {
74 | resolve(res);
75 | })
76 | .catch(err => {
77 | reject(err);
78 | });
79 | });
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/Login/Login.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Form, Icon, Input, Button, Checkbox, Card, Spin } from 'antd';
3 | import { Link } from 'react-router-dom';
4 | import swal from 'sweetalert';
5 | import { OperationStatus } from '../../constants/ConstTypes';
6 | import styles from './form.module.css';
7 |
8 | const FormItem = Form.Item;
9 |
10 | class NormalLoginForm extends Component {
11 | constructor(props) {
12 | super(props);
13 | this.state = { spinShow: 'none', buttonDisbled: false };
14 | }
15 | handleSubmit = e => {
16 | e.preventDefault();
17 | this.props.form.validateFields((err, values) => {
18 | if (!err) {
19 | this.props.postUserLogin(values);
20 | this.setState({ spinShow: 'flex', buttonDisbled: true });
21 | }
22 | });
23 | };
24 |
25 | componentWillReceiveProps(nextProps) {
26 | if (nextProps.status === OperationStatus.load_fail) {
27 | swal('用户名或密码错误', '', 'error').then(() => {
28 | this.props.resetLoginStatus();
29 | this.setState({ spinShow: 'none', buttonDisbled: false });
30 | });
31 | }
32 | if (nextProps.status === OperationStatus.load_success) {
33 | setTimeout(() => {
34 | this.props.history.push('/');
35 | }, 1000);
36 | }
37 | }
38 |
39 | forgetPassword = () => {
40 | swal('忘记密码？', '忘了就忘了吧，暂时我也没办法帮你找回来！', 'info');
41 | };
42 |
43 | render() {
44 | const { getFieldDecorator } = this.props.form;
45 | return (
46 |
47 |
51 |
52 |
53 |
54 | JWT登录
55 |
103 |
104 |
56 |
57 | JWT注册
58 |
122 |
123 |