# adminSPA

**Repository Path**: ruochengflag/admin-spa

## Basic Information

- **Project Name**: adminSPA
- **Description**: 单页面应用
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2020-11-04
- **Last Updated**: 2021-11-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## 目录结构

```
|-- 
    |-- .babelrc
    |-- .editorconfig
    |-- .eslintignore
    |-- .eslintrc.js
    |-- .gitignore
    |-- .postcssrc.js
    |-- .travis.yml
    |-- favicon.ico
    |-- index.html
    |-- LICENSE
    |-- package-lock.json
    |-- package.json
    |-- README.md
    |-- build                  
    |-- config
    |   |-- dev.env.js     // 本地环境
    |   |-- index.js       // 配置入口
    |   |-- prod.env.js    // 线上环境
    |   |-- sit.env.js     // 测试环境
    |-- dist         //打包目录
    |-- src          // 工程目录
    |   |-- App.vue   
    |   |-- errorLog.js
    |   |-- main.js
    |   |-- permission.js
    |   |-- api       //api 存放路径
    |   |   |-- login.js
    |   |-- assets    //静态资源
    |   |   |-- 14.gif
    |   |   |-- 401_images
    |   |   |   |-- 401.gif
    |   |   |-- 404_images
    |   |   |   |-- 404.png
    |   |   |   |-- 404_cloud.png
    |   |   |-- custom-theme
    |   |       |-- index.css
    |   |       |-- fonts
    |   |           |-- element-icons.ttf
    |   |           |-- element-icons.woff
    |   |-- components    //组件存放位置 
    |   |   |-- Breadcrumb
    |   |   |   |-- index.vue
    |   |   |-- DragSelect
    |   |   |   |-- index.vue
    |   |   |-- ErrorLog
    |   |   |   |-- index.vue
    |   |   |-- Hamburger
    |   |   |   |-- index.vue
    |   |   |-- HeaderSearch
    |   |   |   |-- index.vue
    |   |   |-- LangSelect
    |   |   |   |-- index.vue
    |   |   |-- Screenfull
    |   |   |   |-- index.vue
    |   |   |-- SizeSelect
    |   |   |   |-- index.vue
    |   |   |-- SvgIcon
    |   |   |   |-- index.vue
    |   |   |-- ThemePicker
    |   |   |   |-- index.vue
    |   |   |-- TreeTable
    |   |       |-- eval.js
    |   |       |-- index.vue
    |   |       |-- readme.md
    |   |-- directive
    |   |   |-- sticky.js
    |   |   |-- clipboard
    |   |   |   |-- clipboard.js
    |   |   |   |-- index.js
    |   |   |-- el-dragDialog
    |   |       |-- drag.js
    |   |       |-- index.js
    |   |-- filters
    |   |   |-- index.js
    |   |-- icons    //icon图标
    |   |-- lang     //多语言环境
    |   |   |-- en.js
    |   |   |-- index.js
    |   |   |-- zh.js
    |   |-- router   //路由
    |   |   |-- index.js
    |   |-- store   //vuex
    |   |   |-- getters.js
    |   |   |-- index.js
    |   |   |-- modules
    |   |       |-- app.js
    |   |       |-- errorLog.js
    |   |       |-- permission.js
    |   |       |-- tagsView.js
    |   |       |-- user.js
    |   |-- styles    //公共样式
    |   |   |-- btn.scss
    |   |   |-- element-ui.scss
    |   |   |-- index.scss
    |   |   |-- mixin.scss
    |   |   |-- sidebar.scss
    |   |   |-- transition.scss
    |   |   |-- variables.scss
    |   |-- utils  //工具类 
    |   |   |-- auth.js
    |   |   |-- clipboard.js
    |   |   |-- i18n.js
    |   |   |-- index.js
    |   |   |-- openWindow.js
    |   |   |-- permission.js
    |   |   |-- request.js
    |   |   |-- scrollTo.js
    |   |   |-- validate.js
    |   |-- vendor   // excel 表插件
    |   |   |-- Export2Excel.js
    |   |   |-- Export2Zip.js
    |   |-- views   // 页面路径
    |       |-- dashboard
    |       |   |-- index.vue
    |       |-- errorPage
    |       |   |-- 401.vue
    |       |   |-- 404.vue
    |       |-- layout   // layout布局
    |       |   |-- Layout.vue
    |       |   |-- components
    |       |   |   |-- AppMain.vue
    |       |   |   |-- index.js
    |       |   |   |-- Navbar.vue
    |       |   |   |-- Sidebar
    |       |   |   |   |-- FixiOSBug.js
    |       |   |   |   |-- index.vue
    |       |   |   |   |-- Item.vue
    |       |   |   |   |-- Link.vue
    |       |   |   |   |-- SidebarItem.vue
    |       |   |   |-- TagsView
    |       |   |       |-- index.vue
    |       |   |       |-- ScrollPane.vue
    |       |   |-- mixin
    |       |       |-- ResizeHandler.js
    |       |-- login
    |       |   |-- index.vue
    |       |-- redirect
    |       |   |-- index.vue
    |       |-- testNow
    |           |-- index.vue
    |-- static
```

## 开发

```bash

# 安装依赖
npm install

# 启动服务
npm run dev
```

浏览器访问 http://localhost:9527

## 发布

```bash
# 构建测试环境
npm run build:sit

# 构建生产环境
npm run build:prod
```

## 其它

``` 
# 构建生产环境
npm run build:prod

# 生成一个bundle size分析。默认值:bundle-report.html
npm run build:prod --generate_report

# --在本地启动服务器进行预览
npm run build:prod --preview

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix
```




## 代码规范
   *1.所有接口写在api文件下请求
    >示例如下
     **get请求**
    
```
 /* 所传参数如果需要二次修改可以在这里定义 params 
    如果不需要修改在request 直接扩展运算符也可以 */
    export function getList(params) {
    const data = {
      'type': params.type,
      'content_id': params.content_id,
      'user': params.user,
      'topic': params.topic,
      'content': params.content,
      'display': params.display,
      'start_created_at': params.start_created_at,
      'end_created_at': params.end_created_at,
      'page': params.page,
      'group_id': params.group_id,
      'custom_score': params.custom_score,
      'start_system_score': params.start_system_score,
      'end_system_score': params.end_system_score,
      'client_key': params.client_key || undefined
    }
  return request({
    url: '/xxx/xxxx',
    method: 'get',
    params: data
  })
}
```
 
     **post请求**
    
```
  /* 所传参数如果需要二次修改可以在这里定义 params 
    如果不需要修改在request 直接扩展运算符也可以 */
    export function createContent(params) {
        const data = {
          'user_id': params.user_id,
          'content': params.content,
          'topics': JSON.stringify(params.topics),
          'images': JSON.stringify(params.images) === '[]' ? undefined : JSON.stringify(params.images),
          'video': JSON.stringify(params.video) === '{}' ? undefined : JSON.stringify(params.video),
          'cover': params.cover ? params.cover : undefined,
          'title': params.title ? params.title : undefined,
          'type': params.type,
          'product_id': params.product_id,
          'source_id': params.source_id,
          'group_ids': JSON.stringify(params.group_ids) === '[]' ? undefined : JSON.stringify(params.group_ids),
          'custom_score': params.custom_score ? parseInt(params.custom_score) : undefined,
          'system_score': params.system_score ? params.system_score : undefined
        }
        return request({
          url: '/xxx/xxxx',
          method: 'post',
          data: data
        })
      }
```
 
 > 接口调用时根据可以跟人习惯进行调用 但是必须在api文件下 进行接口调用方便进行管理 ， 特殊的接口除外例如（导出表格，pdf ,word 等 ）

   * 2.公共组件放在components 中 
   * 3.views中存放可展示页面及二级页面， 可以根据个人习惯在views中建立的自己页面的文件夹下创建 components 文件夹 但是要确保可维护性 
   * 4.在utils文件中有validate.js 文件 里面添加自己的规则，根据需求而定
   * 5.关于图标全部存放在icons => svg里 
   * 6.关于lang文件及router 文件使用说明
   
#####  lang文件目录如下
>         |-- lang   
>         |   |-- en.js   //english 英文环境
>         |   |-- index.js  //配置文件 
>         |   |-- zh.js    //zh-ch chinese 中文环境 
         
当然如果有其他需求可以在加语言环境 什么日文 ， 俄文 ， 韩文等等 （反正我是不会那么多语言哇 ！！！ 脑壳疼）
既然是多语言环境那么 zh.js 和en.js 配置需要同步 也就是写的时候加上就好了 对应好 
>下面以zh.js （中文环境举例 以下皆是）
>     我们在zh.js有个键名叫 route 他的作用如其名 ， 当我们每添加一个路由时需要在这里加一个对应的value 
>     例如 ：


我在views下面添加一个测试页面 命名为testNow 那么我的route的写法就是这样滴 ：
   
```
     {
            path: '',
            component: Layout,
            redirect: '',
            children: [
              {
                path: 'testNow',
                component: () => import('@/views/testNow/index'),
                name: 'testNow',
                meta: { title: 'testNow', icon: 'dashboard', noCache: true }
              }
            ]
          }
```
        
 再看下我们的zh.js 是如何配置的  ： 
 
 
```
  route: {
    dashboard: '首页',
    testNow: '测试',
    errorPages: '错误页面',
    page401: '401',
    page404: '404'
  },


```
        
   在route中设置侧边栏的名字 
   
   还有一种情况： 如果后端给我们返回的字段是动态的
   例如：在多个json数据中每个一个对象中都有一个sex 但是sex字段可能是 female 也可能是 man 这种情况下 我们也不要 傻呵呵的一个个的去做判断啦 ， 直接在zh.js 中定义个对象 在页面中用 $t('key.key') 方法引用就可以了  
   
   
   因为是后台管理系统 在这里我引入了 elementUI 这个神器 ， 但是如果你的页面中有一部分样式与设计稿不一致提供以下两种hack:

1.     与产品 或者 UI 探讨下
2.     如果探讨失败建议用以下的解决方案 
            * 不要在全局修改 （重要 ）
            * 在本页面修改时 看看 你的 style 是不是私有的 如果是私有的没有问题 直接 /deep/ 修改就可以了 
            * 如果不是私有的 那就改成私有的吧 ...........


* 7. 关于页面布局及写法 
      >  布局篇
          
      
        如果你的页面没有搜索框等内容时 第一层的div 包裹 类名 设定为 app-container
        举例如下 ：
            
                ```
                  <template>
                          <div class="app-container">
                               <div>1212</div>
                            </div>
                   </template>            
                ```
          如果你的页面存在搜素导航时 第一层的div 包裹类名不变 搜索框所包裹的div 类名为 filter-container 
          举例如下 ：
                
                    ```
                        <template>
                              <div class="app-container">
                                      <div class="filter-container">
                                             <el-input  v-model="listQuery.search_key" />
                                      </div>
                                      <div>1212</div>
                                </div>
                         </template>         
                    ```
           
    关于loading 的使用 哪块有动态数据就加在哪就可以了 
    
>    注意 ：  如果使用全局切换大小的时候 那么在进行开发时所有的元素的 size 属性就都不要加啦 。。。。