我的账号在Github开启2FA设置后,因某种原因丢失恢复码导致账号无法登录,日后该账号下的所有项目在github不再更新,若想查看持续更新的项目请移步到 我的码云仓库
xlong-admin-iview 是一套基于 Vue + iView + Mock 开发的单页面客户端渲染管理后台系统示例。
温馨提示:
- 原来使用Bmob开发的版本用的是开发版套餐(2022 年 5 月 5 日起,Bomb已对开发版应用创建时间超过 12 个月的停止免费服务),因为穷不想充值,所以不打算继续维护了。
- Bmob版传送门:develop-bmob
*该项目仅作学习参考,请勿商用
DEMO地址:https://xlong1029.github.io/xlong-admin-iview/#/Login
-
V1.0版本
文件存储使用七牛云(由于测试域名被收回的原因,上传功能保留,但无法获取上传成功后的URL);
富文本编辑器使用 Vue-quill-editor -
V2.0版本
富文本编辑器改用Tinymce;
图片裁剪组件,裁剪后改用实时预览方式;
Bmob改用依赖包引入方式;
文件存储使用Bmob存储,已解决跨域问题 -
V3.0版本
更新iView至3.x版本,并通过vue-cli3.0重构项目;
移除:jQuery插件,“侧边栏”组件改用原生JS方法重写;
Bmob已添加自定义域名,解决上传文件提示"invisible domain"的问题;
添加:404页面、路由访问权限和“可编辑表格”和“树形筛选”组件 -
V4.0版本
更新iView至4.x版本(即ViewUI),并通过vue-cli4.0重构项目;
优化"侧边栏"组件,轻减代码,修复部分BUG;
优化“图片上传”组件;
更新“可编辑表格”组件样式 -
V4.1版本
因为穷,改用Mock模拟请求;
新增环境配置;
修改界面布局,固定头部,仅内容区域滚动;
修复了一堆BUG
Vue.js
webpack
iView
Tinymce
vue-awesome-swiper
Mock
- 登录界面
- 个人资料
- 树形筛选
- 可编辑表格
- 图片上传
- 账户管理功能
- 版块管理功能
│ .browserslistrc // 浏览器可访问配置
│ .env.development
│ .env.production
│ .env.staging
│ .gitignore
│ package.json
│ babel.config.js // babel配置
│ vue.config.js // 配置文件
│ README.md
│
├─pubilc
│ favicon.ico // 图标
│ index.html // 首页入口文件
│
├─src
│ │ main.js // 项目入口js
│ │ App.vue // 根组件
│ │
│ ├─assets // 资源目录,这里的资源会被wabpack构建
│ ├─api // api接口文件
│ ├─theme // iView主题样式
│ ├─store // 应用级数据(state)
│ │
│ ├─mock // 模拟请求数据
│ │ index.js // mock数据
│ │ mock-handle.js // mock数据处理
│ │ mock-server.js // mock服务
│ │
│ ├─components // 功能组件
│ │ │
│ │ ├─Common // 通用组件
│ │ ├─Image // 图片相关组件
│ │ ├─Input // 信息输入相关组件
│ │ ├─Sidebar // 侧边栏相关组件
│ │ ├─Tree // 树形相关组件
│ │ └─Table // 表格相关组件
│ │
│ ├─views // 视图
│ │ │
│ │ ├─Layout // 布局视图
│ │ ├─Home // 主页
│ │ ├─Components // 组件展示相关
│ │ ├─Error // 错误页面
│ │ ├─Examples // 操作示例相关
│ │ ├─Passport // 通行验证,登录注册等
│ │ └─Profile // 个人信息相关
│ │
│ ├─mixins // 混合模块
│ │ city_select.js // 城市联级选择
│ │ email_complete.js // 邮件地址自动填充
│ │ page.js // 页码配置
│ │ table_operate.js // 表格操作
│ │ table_query.js // 表格查询
│ │ upload_img.js // 上传图片
│ │
│ ├─common // 通用js模块
│ │ common.js // 封装一些公共常量
│ │ table-setting.js // 封装一些iView表格按钮渲染
│ │ validate.js // 封装一些iView表单验证方法
│ │
│ ├─utils // 通用工具函数
│ │ index.js
│ │
│ └─router // 路由配置
│ index.js
│ routes.js
│
├─static // 静态资源
│
└─tests // 单元测试文件
- 安装前台依赖
npm install
- 运行前台项目
npm run serve
按需求选择打包命令(请将vue.config.js中publicPath改成你的项目):
npm run build:prod
npm run build:stage
QQ:381612175 TEL: 18376686974
github:https://github.com/xLong1029/
站酷主页:http://xlong.zcool.com.cn/
UI中国:http://i.ui.cn/ucenter/358591.html
- 此项目做学习Vuejs测试使用,有什么问题可联系我讨论