interest-web
20190110修改
前端项目转为vue-cli 3.0
项目介绍
vue.js+node.js+webpack构建的前端项目，后端用的是项目interest-server（前后端分离）。
项目展示
地址：http://www.lovemtt.com/ 可使用github登录 （第一次打开可能会有点慢）
项目目录结构
.├── package.json 项目构建配置├── vue.config.js 项目构建配置├── vue.config.js 项目构建配置└── src ├── images 图片文件 ├── store 状态管理 ├── styles 样式文件 ├── App.vue 入口页面 ├── axios.js axios配置 ├── main.js main.js ├── router.js 路由配置 ├── base.js 公共js └── views ├── mobile mobile版 │ ├── card.vue 帖子页 │ ├── detail.vue 详情页 │ ├── home.vue 主页 │ └── index.vue head+footer ├── sys 后台管理 │ ├── interest │ │ ├── interest-create.vue 兴趣新建 │ │ ├── interest-delete.vue 兴趣删除 │ │ ├── interest-edit.vue 兴趣修改 │ │ └── interest-quill-editor.vue 富文本编辑器组件 │ ├── banner.vue 轮播管理 │ ├── base.vue head+left list │ ├── card.vue 帖子管理 │ ├── email.vue 邮件管理 │ ├── menu.vue 菜单管理 │ ├── role.vue 角色管理 │ ├── user.vue 用户管理 │ └── welcome.vue 默认页 ├── template PC版 │ ├── card.vue 帖子页 │ ├── detail.vue 详情页 │ ├── home.vue 主页 │ └── index.vue head+footer ├── error404.vue 404页面 ├── login.vue PC登录页面 └── mlogin.vue mobile登录页面技术栈
- vue2
- vuex
- vue-router
- axios
- iview
- vue-quill-editor
- webpack
前后端通信：
使用的是axios库。
UI 组件库：
使用了iview组件库。
安全协议：
oauth2
前端界面开发
注：需要安装nodejs
- 启动：(注意：最好换cnpm，npm我这边启动报404)
- 命令行进入项目文件夹
- 运行npm install（初次启动）
- 运行npm run serve启动前端工程
- 打包命令： 运行npm run build
打包发布
- 运行npm run build后，得到 dist文件。
- 使用nginx发布。（nginx配置参考文件）
Http状态码
在axios.js中拦截异常，并进行处理。
目前以写的异常处理有：
1. 401 清除token信息并跳转到登录页面
2. 403 无权限，跳转到首页
如果你项目启动有错误：
- 项目启动报错，请试一下用管理员权限输入命令。
- 启动报错：Invalid options in vue.config.js: "publicPath" is not allowed，请把vue.config.js中的publicPath改成baseUrl。
- install报错，请换成cnpm
下面是主要功能截图
pc首页
mobile首页
pc详情
mobile详情
pc帖子详情
mobile帖子详情
pc登录
mobile登录
用户管理
菜单管理
角色管理
轮播管理
兴趣管理-新建
兴趣管理-修改
兴趣管理-删除
发帖管理
邮件管理
