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)
  1. 命令行进入项目文件夹
  2. 运行npm install（初次启动）
  3. 运行npm run serve启动前端工程
• 打包命令： 运行npm run build

打包发布

1. 运行npm run build后，得到 dist文件。
2. 使用nginx发布。（nginx配置参考文件）

Http状态码

在axios.js中拦截异常，并进行处理。
目前以写的异常处理有：
	1. 401 清除token信息并跳转到登录页面
	2. 403 无权限，跳转到首页

如果你项目启动有错误：

1. 项目启动报错，请试一下用管理员权限输入命令。
2. 启动报错：Invalid options in vue.config.js: "publicPath" is not allowed，请把vue.config.js中的publicPath改成baseUrl。
3. install报错，请换成cnpm

下面是主要功能截图

pc首页 mobile首页 pc详情 mobile详情 pc帖子详情 mobile帖子详情 pc登录 mobile登录 用户管理 菜单管理 角色管理 轮播管理 兴趣管理-新建 兴趣管理-修改 兴趣管理-删除 发帖管理 邮件管理