proginn-frontend

程序员客栈--前端项目

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

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

# install dependencies
$ yarn install

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

目录结构

.
├── 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生产环境 *