# 程序员客栈--Boss后台项目

> 基于Nuxtjs，Element UI，该项目包括客栈主站和技术圈。自动化部署，但是需要手动build并generate才能正常部署，dev分支自动更新到dev环境，master分支自动更新到线上环境

## Build Setup 建议用yarn保证版本稳定运行

``` bash
# install dependencies
$ yarn

# serve with hot reload at localhost:20201， local.proginn.com:20201
yarn dev

# build
$ yarn run build

```

## 目录结构

``` bash
.
├── LICENSE
├── README.md
├── app.html                # app html template
├── assets                  # static img css
│   ├── README.md
│   ├── css
│   └── img
├── components              # components
│   ├── README.md
│   ├── ver_code.vue
│   ├── ws
│   └── wx_header.vue
├── dist                    # useless
│   ├── 200.html
│   ├── README.md
│   ├── _nuxt
│   ├── cert
│   ├── favicon.ico
│   ├── index.html
│   └── type
├── layouts                 # layout
│   ├── README.md
│   ├── default.vue
│   └── opacity_header.vue
├── middleware              # middelware useless now
│   ├── README.md
│   └── authenticated.js
├── mixins                  # mixins
│   ├── getDeviceType.js    # deviceType
│   ├── group.js
│   └── wx.js
├── nuxt.config.js          # nuxt config
├── package.json            # package.json
├── pages                   # pages(static router)
│   ├── README.md
├── plugins
│   ├── README.md
│   ├── axios.js            # useless
│   ├── common.js           # common methods
│   ├── element.js          # element ui inject
│   ├── http.js             # useless
│   └── nuxtAxios.js        # nuxt axios config
├── static
│   ├── README.md
│   └── favicon.ico         # favicon
├── store
│   ├── README.md
│   └── index.js            # create store
└── yarn.lock               # 勿删
```

## 开发注意

* 由于测试环境和线上环境cookie键值相同，所以尽量在隐身模式下测试开发环境避免不必要的麻烦
* API交互格式统一application/x-www-form-urlencoded，否者无法访问成功
* 调用API尽量只能使用Nuxtjs本身集成的Axios，使用方式
``` js
async asyncData({ $axios, params, req }) {
    let id = params.id;
    let headers = req && req.headers;
    let res = await $axios.$get(
        `/api/user/getUserInfo?id=${id}&page=1&size=10`,
        { headers }
    );
    return {
        title: `${res.data.info.nickname}的技术圈主页-程序员客栈`
    };
},
methods: {
    async getDetail() {
      let res = await this.$axios.$get(
        `/api/user/getUserInfo?id=${this.$route.params.id}&page=1&size=10`
      );
      // console.log(res.data)
      document.title = `${res.data.info.nickname}的技术圈主页-程序员客栈`;
      if (res) {
        this.idInfo = res.data;
      }
    },
}
```
* layout有两个一个主题的一个空白的的
* vuex 的store中可以存放一些全局变量，例如手机号正则、email正则，当然也可以独立成constants
* 静态文件放在assets中，通过@/assets/访问，css中用~@/assets
* 后台界面基本就是element ui模板，请求数据使用plugins下的http.js
* 使用了一个后台模板vue-admin的theme，不过store中大部分都没用
* 编辑器使用了vue quill
*