iview admin 使用爬坑
前段时间公司需要开发一个后台管理系统,时间比较急迫,一两天时间。想一想自己一点一点的搭建起来可能性不太大,就想着有没有现成的可以改一改,就找到了基于Vue.js和iview组件库的现成后台,拿来改改就可以了 iview admin。
一、介绍:
1. iview UI组件库是基于Vue.js的UI组件库(相比之下大家都知道的)。
2. iview admin 引用iview admin文档的介绍:iView-admin是iView生态中的成员之一,是一套采用前后端分离开发模式,基于Vue的后台管理系统前端解决方案。iview_admin预览 iview_admin文档 iview_admin github地址
二、使用:
1. 目录结构:
从github克隆下来的原始项目就是这样一个结构。
config/ (项目开发配置文件,主要用于区分开发环境和生产环境)
node_modules/ (项目依赖)
public/ (存放主入口文件 index.html)
src/ (资源文件,这里面内容比较多)
还有一个比较重要的文件就是根目录下的:vue.config.js
这个是vue配置文件,和vue cli2.x不通,这里使用的是vue cli3,所有的webpack配置都在这里配置。
其他的一些文件和文件夹一般使用还用不到。
2. config/
config/ 文件夹下面有两个文件:
env.js
export default 'development'
复制代码
url.js
import env from './env'
const DEV_URL = 'https://www.easy-mock.com/mock/5add9213ce4d0e69998a6f51/iview-admin/'const PRO_URL = 'https://produce.com'
export default env === 'development' ? DEV_URL : PRO_URL复制代码
这里主要是用于区分开发环境和线上环境的请求接口基础url。
3. public/
public/ 文件夹下面只有一个文件,那就是index.html内容输出的入口文件。
4. src/
4-1. src/api/
其中data.js 中是所有数据请求的函数,routers.js路由请求函数,user.js是用户登录、获取用户信息、退出登录的请求方法。在iview admin中是将所有的请求方法分类放在一起,哪里需要再在哪里调用,而不是散布在各个页面里面,这样利于维护修改。
比如user.js中:
4-2. src/assets/
src/assets/ 下存放的都是图片等一些静态资源等等。
4-3. src/components/
src/components/ 下面是iview admin已经封装好的一些可以直接调用的组建。
4-4. src/config/ 项目内配置文件,里面已经有的配置是cookie存储时长,是否使用国际化配置。
4-5. src/directive/ 一直项目自定义指令
4-6. src/libs/
在这里主要在强调一下,在axios.js中iview_admin作者对请求方法进行了封装处理:
这里对响应进行了拦截处理,如果你在使用时成功请求后并没有约定好返回码字段为code或者成功后要返回code:200 那你使用他的请求就算在控制台Network看到请求成功数据返回,但是你打印出来的结果会是false,要不就和后台按照他的约定好,要不就改一下源码。
tools.js和util.js都是一下工具函数。
4-7. src/locale/ 存放国际化配置文件,如果不使用国际化,则不需要关心。
4-8. src/mock/ mock数据,在没有接入真实开发环境时,克隆下来的项目使用的都是mock的加数据。
4-9. src/router/ routers.js 路由配置文件,在这里需要注意用户的权限配置:
例如:
用户的权限配置必须是一个数组。
4-10. src/store/ 这里是整个项目状态管理的地方,使用了vuex状态管理工具,不了解的同学可以看看 vux官方文档。
4-11. src/view/ 这里面就是我们要编写的展示页面了。
总结:一点粗浅经验,有什么不对的请大家指正。iview admin是一套基于vue的后台管理系统前端框架,真正实现了前后端分离,熟练使用过vue的同学会很容易上手,开发效率很高。
转载于:https://juejin.im/post/5b71307c6fb9a009d22fc038
iview admin 使用爬坑相关推荐
- legend3---6、legend3爬坑杂记
legend3---6.legend3爬坑杂记 一.总结 一句话总结: 学东西不做项目也学不到深处,其实也就是学了没理解透, 1.lavarel中模型关联可以用的实质是? lavarel在数据库中插入 ...
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Android爬坑之旅:软键盘挡住输入框问题的终极解决方式
本文由BarryZhang原创,同一时候首发于diycode.cc.barryzhang.com .github.com/barryhappy.非商业转载请注明作者和原文链接. 前言 开发做得久了.总 ...
- 【爬坑】在 IDEA 中运行 Hadoop 程序 报 winutils.exe 不存在错误解决方案
[爬坑]在 IDEA 中运行 Hadoop 程序 报 winutils.exe 不存在错误解决方案 参考文章: (1)[爬坑]在 IDEA 中运行 Hadoop 程序 报 winutils.exe 不 ...
- JWT 入坑爬坑指南
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | 公众号「程序新世界」 越来越多的开发者开始学习 ...
- 【转载】python3安装scrapy之windows32位爬坑
python3安装scrapy之windows32位爬坑 原创 2016年11月06日 01:38:08 标签: scrapy / windows / python / 开源框架 / 网络爬虫 早就听 ...
- legend3---5、lavarel爬坑杂记
legend3---5.lavarel爬坑杂记 一.总结 一句话总结: 边做边学,变学边做,可能会节约很多时间,熟悉的就跳着看,不熟悉的就慢慢看 1.如何tags表中的主键是t_id而非id,如何使用 ...
- mpvue 小程序开发爬坑汇总
<!-- 小程序的爬坑记录 --> 1 微信小程序之动态获取元素宽高 var obj=wx.createSelectorQuery(); 2 微信小程序图片自适应 <image cl ...
- Android爬坑之旅:软键盘挡住输入框问题的终极解决方案
前言 开发做得久了,总免不了会遇到各种坑. 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 Base 最基本的情况,如图所示:在页 ...
- Nuxt爬坑系列之vuex
坑的背景介绍 要用 bootstrap-vue 这个vue的ui框架来重构公司的官网,因为公司官网之前使用bootstrap搭建的,现在想用nuxt框架来重构,恰好bootstrap出了结合vue的版 ...
最新文章
- c语言注释seg fault,segmentation fault求解
- RabbitMQ之消息确认机制(事务+Confirm)
- SQL 模糊查询技术
- python中range 函数_Python中的range函数
- python目前版本强势英雄_王者荣耀目前版本什么英雄强势?
- Objective-c 程序结构
- python实训名片管理程序_python3学生名片管理v2.0版
- 同时对view延时执行两个动画时候的现象
- android listview自动加载更多,如何实现 Android ListView『上拉加载更多』?
- 5和6 objbc oracle_Oracle测试题
- 红外探头_问题3: 关于在线近红外光谱仪的探头
- tushare学习文档_介绍一个python股票分析包tushare——韭菜的自我修养
- 禁止ViewPager滑动
- 【唐宇迪】神经网络原理解读与整体架构
- Lauterbach trace32与 jlink
- 2020民泰银行软件测试,2020应届生银行工作一个半月感受
- Matlab2018a崩溃解决的办法No sandbox or build area path
- Linux上杀毒软件有哪些?
- RewriteCond 和RewriteRule
- 突发!incaseformat蠕虫病毒来袭,警惕文件遭删除
热门文章
- 第十一章 Hibernate的查询 HQL面向对象的查询语言
- javascript中模仿接口(interface)
- Android开发网上的一些重要知识点
- 面向接口编程详解---编程实例
- 【Prison Break】第八天(4.4)
- 【OpenCV学习笔记】【编程实例】一(VS2010/MFC+OPenCV2.4.7读取图片和摄像头)
- leetcode刷题日记-472. 连接词
- Python 双y轴绘制
- python 3.5版本安装landsat-uti包
- android利用AudioRecord实现录音功能(kotlin语言)