# 程序员客栈--前端项目

> 基于Nuxtjs，Element UI，该项目包括客栈主站和技术圈。自动化部署，dev分支自动更新到dev环境，master分支自动更新到线上环境

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

``` bash
# install dependencies
$ yarn install

# serve with hot reload at localhost:3000， local.proginn.com:3000
$ yarn run dev

```

## 目录结构

``` bash
.
├── LICENSE
├── README.md
├── app.html                # app html template
├── assets                  # static img css
│   ├── README.md
│   ├── css
│   └── img
├── components              # components
│   ├── README.md
│   ├── agreement.vue
│   ├── footer.vue
│   ├── group
│   ├── header.vue
│   ├── inner_header.vue
│   ├── input
│   ├── type
│   ├── 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
│   ├── cert
│   ├── community
│   ├── group
│   ├── index.vue
│   ├── setting
│   ├── type
│   ├── user
│   └── wo
├── 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键值相同，所以尽量在隐身模式下测试开发环境避免不必要的麻烦
* 开发之前需要本地设置host（127.0.0.1   local.proginn.com）以使用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;
      }
    },
}
```
* 项目全局使用Vuex作为状态管理保存登录状态，可以调用全局store获取userInfo
* 使用mixins实现设备判断，设备状态包括pc,ios,android，通过this.deviceType可以获取
* 路由鉴权未实现，有接口不同页面需要不同处理，即使API返回都是未登录可能也不要跳转到登录页
* plugins下有个common.js处理了页面公共逻辑，比如是否需要登录直接调用this.needLogin()，是否需要实名认证this.needVerify()，获取用户信息this.getUserInfo()即可
* layout有两个一个透明的一个非透明的，移动端下没有header也没有footer
* 有些公共组件抽象了出来，比如日期range选择，单、多文件上传，编辑器
* vuex 的store中可以存放一些全局变量，例如手机号正则、email正则，当然也可以独立成constants
* 静态文件放在assets中，通过@/assets/访问，css中用~@/assets
* 发布部署直接上传dev开发环境，master生产环境
*