在线访问

前端:

扫码查看:

在线查看：

http://infinite.czero.cn/Infinite-webDesign/dist

后台管理系统:

还没有添加权限管理的功能，后续会加上。进入登录页面，如果不懂或者需要账号私聊我。。。第一次使用iview-admin，感觉功能还是挺多的，还在摸索阶段，只用来实现简陋的功能，后续会持续优化。

在线查看:

http://infinite.czero.cn/Infinite-webAdmin/dist

项目概览

前端(Vue-CLI)：

功能: 架构是基于Vue全家桶购物商城

添加better-scroll组件实现下拉刷新和上拉加载。
请求服务端API，真实的数据交互。
添加搜索，登录，注册等功能并Vuex进行存储。
图片都是使用Iconfont。
动画切换，使用Vue-router做路由判断来实现不同的切换动画。
模块化，全局注册组件弹窗(alert和toast)效果，封装共用js函数类。
配置Webpack请求代理，解决请求服务器端跨域问题。
使用keep-alive对组件进行缓存

目录结构:

├── config  (配置目录，需要在index.js配置代理,不然会出现跨域的问题)
│   ├── dev.env.js
│   ├── index.js    (配置跨域)
│   └── prod.env.js
├── image
│   └── github.png
├── index.html
    ├── components  (组件目录)
    │   ├──     About(关于我们)
    │   ├──     Agreement(用户协议)
    │   ├──     Base(共用基础组件)
    │   ├──     Collect(我的收藏)
    │   ├──     Detail(内容详情)
    │   ├──     ForgetPasswd(忘记密码)
    │   ├──     Hot(发现热门页)
    │   ├──     Index.vue(首页,推荐页面)
    │   ├──     Login(登录页)
    │   ├──     Member(个人中心页)
    │   ├──     ModelBox(全局注册弹窗组件)
    │   ├──     Register(注册页)
    │   ├──     Search(搜索页)
    │   └──     ToastBox(全局注册Toast组件)
    ├── main.js
    ├── router
    │   └── index.js
    └── store   (Vuex)
        ├── actions.js
        ├── getters.js  (获取Vuex状态)
        ├── index.js    (Vuex入口文件)
        ├── mutation-types.js   (变量存储)
        ├── mutations.js    (to修改动作)
        └── state.js    (状态仓库)

服务端(Node-Koa2-Mongodb-Mongoose):

功能：

分页加载
模糊查询
定制Restful API
七牛云第三方对象存储对接
pm2部署到阿里云

项目目录:

├── app
│   ├── controllers (逻辑处理目录)
│   │   ├── admin
│   │   ├── app.js
│   │   ├── hot
│   │   ├── recommend
│   │   ├── upload
│   │   └── user
│   ├── dbhelper (操控数据表目录)
│   │   ├── AdminHelper.js
│   │   ├── hotHelper.js
│   │   ├── recommendHelper.js
│   │   └── userHelper.js
│   └── models  (数据库模型目录)
│       ├── admin.js    (管理员表)
│       ├── hot.js      (热门发现数据表)
│       ├── recommend.js    (首页推荐表)
│       └── user.js (用户管理表--登录注册)
├── app.js (服务端启动入口文件  node app.js)
├── config  (配置目录)
│   ├── config.js   (基础配置信息--七牛云配置,数据库配置)
│   └── router.js   (路由配置)

后台管理系统(iView-Admin):

功能:

文章管理，图片上传到七牛云。
编辑文章
添加文章
用户管理
富文本内容添加

项目目录:

├── build (配置全局请求地址和跨域处理)
│   ├── webpack.dev.config.js   (在这里配置请求跨域问题,及全局请求地址)
├── index.html
├── src
│   ├── main.js
│   ├── mixins  (公共js工具目录)
│   │   └── common.js
│   ├── router (路由配置)
│   │   ├── index.js
│   │   └── router.js
│   └── views
│       ├── Main.vue
│       ├── error-page
│       ├── home
│       ├── login.less
│       ├── login.vue
│       ├── main-components (组件入口目录)
│       ├── main-menu
│               ├─── edit   (编辑)
│               ├── hot     (热门)
│               ├── recommend   (发现)
│               ├── user    (用户管理)
│       ├── main.less
│       ├── message
│       └── my-components

调试方法:

Chrome调试(谷歌浏览器工具)
vConsole调试(真机调试查看log日志神器)
API调试神奇Postman。
Vue-devtools(调试Vuex状态)

跨域处理

使用Webpack的proxyTable进行请求代理
Chrome安装cors拓展
服务端配置所以路径都可跨域或者将开发的IP加入白名单

源码

前端源码: https://github.com/czero1995/Infinite-webDesign.git

服务端源码：https://github.com/czero1995/Infinite-webServer.git

后台管理源码: https://github.com/czero1995/Infinite-webAdmin.git

最后

如有建议或者问题，请私聊联系我，一起学习和进步。反手给我一个star^_^