# yanglao-backend-webapp

**Repository Path**: cherry-peach/yanglao-backend-webapp

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-04
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 后台Web前端项目


## 源码目录
```
├── src                     # 源码目录
│   ├── api                 # HTTP API  
│   │   ├── api.js          # API工具
│   │   └── mock            # Mock
│   ├── components          # 公共/抽象组件  
│   │   ├── page            # 业务页面的基础容器组件
│   │   └── ...
│   ├── config              # 配置相关
│   ├── auth                # 认证和权限相关
│   ├── pages               # 业务页面
│   │   └── pages.js        # 页面配置
│   ├── screens             # 路由屏
│   │   ├── home            # Home屏
│   │   └── Login.vue       # 登陆屏
│   ├── assets              # 公共assets
│   ├── utils               # 通用工具
│   ├── index.js            # SPA主入口
│   ├── index.html          # html模板
│   └── index.css           # 基本的全局的样式
├── package.json            # Node项目包依赖、命令配置
├── webpack.config.js       # Webpack配置
├── dev                     # 开发工具源码，包括一些Webpack插件
├── └── local-config.js     # 本地开发配置，不上传到版本管理
├──public              # 这个目录包含项目的以前旧开发方式的源码和资源，包含历史包袱
│  ├── module          # 业务页面/模块（基于jquery,easyui,jsp），并且以前在iframe内部渲染
│  ├── res             # 存放一些如Excel导入模板等静态资源，现在可能/可以存放新开发模式中的静态资源
│  ├── statics         # 有第二个静态资源文件夹，过时，不再使用
│  ├── css             # 这个CSS是iframe内部页面的css，过时，不再使用
│  ├── images          # 专门放图片，现在可能也会存放新的图片，现在可能/可以存放新开发模式中的静态资源
│  └── lib             # 以前存放第三方JS库，包括自己写的
```


## 开发流程
### 安装依赖
```shell
npm i 或 cnpm i
```


### 开发调试
以下都是启动Webpack开发服务器的命令，这些命令的区别是后端服务器是使用开发还是生产环境，和是否使用mock：  
使用后端开发服务器
```shell
npm start 或 npm run dev
```
使用后端测试服务器
```shell
npm run dev-test
```
使用后端生产服务器
```shell
npm run dev-prod
```
使用后端开发服务器并且带mock
```shell
npm run dev-mock
```
使用后端测试服务器并且带mock
```shell
npm run dev-test-mock
```
使用后端生产服务器并且带mock
```shell
npm run dev-prod-mock
```
上面提到的后端服务器地址请在`dev/local-config.js`中定义，在`dev`目录创建`local-config.js`:
```js
module.exports = {
  // 后端服务器
  backendServer: {
    // 生产服务器
    development: '',
    // 测试服务器
    testing: '',
    // 开发服务器
    production:  ''
  },
  // 本地开发tomcat服务器webapp的路径（存放jsp的根路径）npm run copy-dev会用到此属性
  devTomcatWebappPath: '',
};
```

#### 其它
在访问正式或开发环境网站之前执行下面的JS代码:  
```js
// 考虑到开发者频繁访问网站，记录页面访问模块将根据此值不做记录。
localStorage.setItem('isDeveloperMachine', 1);
```

### 构建
```shell
npm run build
```

### 部署
* 如果`public/module/`内容有改动，将一些依然位置依赖的内容复制到Tomcat `webapp`目录
  ```shell
  npm run copy-dev
  ```
* 将dist上传到nginx服务器目录

## 开发新业务页面
* 使用 页面组件，参考 `页面组件`。
* 在`src/pages`目录新建子目录，目录结构按业务分类。    
* 使用`src/components`存在的可复用/基础风格统一的组件。也可以创建新的可复用组件（建议必须是常用的）。    
* 参考已有代码。  
* 尽可能用vue单文件组件。  
* 尽可能使用动态导入`import(...)`  

### 页面组件
新的页面代码文件命名为`[name]Page.vue`或`[name]Page.js`，它是这样一种组件：
```js
export default {
  pageProps: {
    title   //新的页面的标题，会作为tab的标题，字符串或函数
  },
  methods: {
    /* 可选的页面事件钩子 */
    onPageResume() {},  // 页面从非当前页面成为当前页面
    onPagePause() {},   // 页面从当前页面成为非当前页面
    onShow() {},        // 浏览器从后台切换到前台运行，或者当浏览器标签页从其它标签页切换到本应用标签页
    onHide() {}         // 浏览器从前台切换到后台运行，或者当浏览器标签页从本应用标签页切换到其它标签页
  }
}
```
在页面组件实例中，通过`this.$params`得到参数。

### 打开页面
请使用在Vue实例方法中的`pushPage`方法，参数说明：
|参数|说明|类型
|:-|:-|:-|
|path|注意不是url，更像一个组件类的id|string|
|params|参数|object|
|title|标题，覆盖组件`pageProps`属性中的title|string|
|subTitle|子标题|string|
|key|默认等于path，根据key判断是否已经打开标签页，如果打开了则选中，否则打开新的|string/number|

示例：
```js
this.pushPage('/shop/order');

this.pushPage({
  path: '/user/edit',
  params: {id: user.id},
  key: user.id
});
```


## 实现原理
### pushPage的实现原理
0. 值得注意的是，请查看webpack.config.js中的配置，编译开始时会调用 PageDog 插件，这是一个自定义插件，  
它根据上述开发业务页面中所描述的命名约定，自动生成页面组件路径（pushPage的path参数）与`import(页面组件路径)`的映射定义的文件（src/pages/pages.js），被`this.pushPage`使用。  
然后webpack继续编译，src/pages/pages.js也参与了编译，webpack将根据依赖关系，生成业务页面chunk的懒加载代码。
1. 将path + 可选的key 作为tab的key，判断是否已经打开标签页，如果打开了则选中，结束，否则下一步。
2. 按照路径与页面vue/js的映射表（src/pages/pages.js，下文将提到），查询出页面对象，
该页面对象实际上是一个请求页面组件js并返回Promise的函数，执行请求页面的函数，得到真正的页面组件，组件实际上是一个对象。  
因此可以得到它的`pageProps属性`，以及增加`$params` props。

### 与pushPage类似的另一个方法: app.openTab
`app.openTab`是为了兼容旧有代码而存在的，在以前，window.openModuleByCode、window.openTab将打开一个新的content为iframe的easyui tab。  
现在，这些方法的实现将变为对`app.openTab`的调用，而`app.openTab`根据url判断:
- 后缀如果是`.do`，则识别为老页面，用一个渲染iframe的vue组件包装起来，并且解决了easyui模板闪现的问题。
- 前缀如果是`\`，这是新开发模式页面的url表示方式，转换为对`this.pushPage`的调用。
- 前缀如果是`redirect=`，则后面则是一个URL，使用`pushPage`跳转到这个URL


## 浏览器支持
现代浏览器和 Internet Explorer 10+。


## 日志
> 2019-05-12:  
> 创建一个新的项目，独立出前端代码作为此项目内容，新的代码将采用前后端分离模式，使用es6, webpack, babel, vue,element-ui框架等。  
因此将会增加至少一个构建过程。