boss

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

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

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

# install dependencies
$ yarn

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

# build
$ yarn run build

目录结构

.
├── 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 *