# manage

**Repository Path**: zxc0254/manage

## Basic Information

- **Project Name**: manage
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-06-30
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Jourtour前端项目

![node](https://img.shields.io/badge/node%40latest-8.00-green.svg)
![version](https://img.shields.io/badge/version-1.0.0-blue.svg)





## 简介

Jourtour前端项目是基于React底层技术的单页面web应用并支持服务器端渲染（支持SEO）

## 技术堆栈

- [React](https://github.com/facebook/react)
- [React Router](https://github.com/ReactTraining/react-router)
- [PostCSS](https://github.com/postcss/postcss)
- [Express](https://github.com/expressjs/express)
- [Pm2](https://github.com/Unitech/pm2)
- [Webpack](https://github.com/webpack/webpack)
- [Webpack+](https://webpack.js.org/loaders/)
- [Babel](https://github.com/babel/babel)
- [Babel+](http://babeljs.io/docs/plugins/)
- [ESLint](https://github.com/eslint/eslint)
- [Code Splitting](https://webpack.js.org/guides/code-splitting/#src/components/Sidebar/Sidebar.jsx)


## 快速开始

-  支持Node.js v8版本.
- `yarn install` 安装依赖
- `yarn build` 打包项目及依赖
- `yarn start` 运行项目

## 项目目录内容

```
jourtour                                                        // 主目录
    ├──── client                                                // 浏览器端目录
    │       ├──── component                                     // 组件目录
    │       │           ├──── carousel                            // 轮播图组件目录
    │       │           │                        
    │       │           ├──── css                                 // 公共组件css目录
    │       │           │
    │       │           ├──── global                              // 复用类目录
    │       │           │
    │       │           ├──── i18n                                // 国际化    
    │       │           │
    │       │           ├──── image                               // 公共图片
    │       │           │
    │       │           ├──── image-gallery                       // 画廊组件目录
    │       │           │
    │       │           ├──── list                                // 列表组件目录
    │       │           │
    │       │           ├──── merry-go-round                      // 图框切换组件目录
    │       │           │
    │       │           ├──── router                              // 路由组件目录（各目录详细说明在下面）
    │       │           │
    │       │           ├──── services                            // 服务组件目录
    │       │           │
    │       │           ├──── slider                              // 滑动组件目录
    │       │           │
    │       │           ├──── video                               // 视频组件目录
    │       │           │
    │       │           ├──── footer.jsx                          // 底部组件
    │       │           │
    │       │           ├──── header.jsx                          // 头部组件
    │       │           │
    │       │           ├──── ImageLoading.jsx                    // 图片loading组件
    │       │           │
    │       │           ├──── layout.jsx                          // 公共布局组件
    │       │           │
    │       │           └──── loading.jsx                         // 初始化loading组件
    │       ├──── utils                                           // 工具类目录
    │       │       ├──── events.js                               // 触发注册事件的类 
    │       │       └──── dateFormat.js                           // 日期格式化工具类  
    │       │                    
    │       └──── entry.js                                        // 浏览器渲染入口文件
    │
    ├──── config                                                  // 配置类目录
    │        ├──── ajax.js                                        // ajax统一请求目录
    │        │
    │        └──── config.js                                      // 服务器地址信息配置文件
    │ 
    ├──── public                                                  // webpack打包后生成的文件目录，用于服务器访问页面内容
    │  
    │  
    ├──── server                                                  // 服务器渲染入口文件目录                                                        
    │       └──── entry.js                                        // 服务器渲染入口文件      
    │       
    │        
    ├──── .babelrc                                                // babel配置文件
    ├──── .eslintrc.js                                            // eslint编码规范配置文件      
    ├──── .gitignore                                              // git排除规定目录及文件的配置文件
    ├──── .stylelintrc                                            // pcss编码规范配置文件
    ├──── gulpfile.js                                             // gulp自动化构建的配置文件
    ├──── index.js                                                // express服务器启动文件(目前以pm2启动express) 
    ├──── package.json                                            // package.json包配置文件(里面是各种脚本和各种依赖包)
    ├──── README.MD                                               // 项目说明文档(就是你现在看到的内容)
    ├──── webpack.config.js                                       // webpack配置文件
    └──── yarn.lock                                               // yarn包管理器
```

 ###【router目录下的子目录及文件说明】
```
    1.about目录用于存放"关于我们页"
    2.condition目录用于存放"特许经营条件页"
    3.contact目录用于存放"联系我们页"
    4.error目录用于存放"错误页"
    5.forgot目录用于存放"找回密码页"
    6.home目录用于存放"主页"
    7.introduction目录用于存放"酒店列表页"
    8.join目录用于存放"加盟申请页"
    9.login目录用于存放"登录页"
    10.manage目录用于存放"特许经营页"
    11.motel目录用于存放"酒店详情页"
    12.orders目录用于存放"订单详情页"
    13.personal目录用于存放"个人中心页"
    14.present目录用于存放"jourtour介绍页"
    15.product目录用于存放"产品介绍页"
    16.recruit目录用于存放"jourtour招聘页"
    17.resgister目录用于存放"注册页"
    18.Bundle.jsx文件用于路由的分割并懒加载
```

## SEO
只能在客户端运行的应用程序无法向抓取工具提供HTML，因此默认情况下它的搜索引擎优化程度会很差。Web爬虫功能通过向Web服务器发出请求并解释结果。
## 性能
使用服务端渲染提升页面初始化速度
## 可维护性
目录文件分配明确，代码注释齐全，方便管理