vue后台管理项目
文章平均质量分 71
YK_Ark
一直在学习中,有错误还请斧正!
展开
-
Vue后台管理系统练习-9 登陆界面及权限检测
目标:在进入页面前先进行用户的权限检测,如果没有权限则跳转登陆界面登陆校验的模拟后台接口如下,比较简单,大部分地方都写好了注释登陆界面的编写这里使用了之前封装好的commonForm组件,直接传入了数据进行组件调用:提交后,commonForm组件返回用户输入的数据,进行post请求:设置全局守卫在main.js中配置全局守卫,跳转页面前先校验权限:至此就完成了登陆界面...原创 2022-06-28 09:27:37 · 343 阅读 · 0 评论 -
Vue后台管理系统练习-8 user界面的表单修改
本篇在原有界面的基础上增加了逻辑与api接口新增用户首先需要理清,现在需要的是在user页面中点击新增用户,然后显示form组件,把表单设置传入form组件中,form组件中接收用户输入的内容并且将其发送网络请求这里因为是模拟数据,所以网络请求会被mock拦截,并且由user.js中的方法进行处理修改了数据后再重新发送网络请求,对页面进行更新流程图大概是这样:这里我们首先解决一下user.js模拟接口的内置方法,在之前已经通过Mock模拟出了user数据,因此只要对原有的数据进行操作就好了其中cr原创 2022-06-18 10:32:28 · 439 阅读 · 0 评论 -
Vue后台管理系统练习-7 element表单的简单封装
效果如下,后面table等内容可以看上一篇:由于本项目中多处需要使用表单,在这里做一些简单的封装Element-ui中的el-form需要在el-form组件内绑定存入数据的对象,同时每个el-form-item组件有不同的种类,输入框,单选框,复选框等,因此要实现封装就需要判断每个属性的类型,内容大致如下:这里只写了几个常用的,其余类型可以参见官方文档,其实都差不多几个需要说的点:这里我通过prop接收的父组件数据是form,但是el-form绑定的这个对象是用来储存输入的数据,一定会需要动态修改的原创 2022-06-18 09:23:28 · 510 阅读 · 0 评论 -
Vue后台管理系统练习-6 Mock与Element-ui展示模拟数据
之前做了一个写死数据的,觉得还是Mock模拟数据接口更模拟真实一点,重新写了一版效果如下图:首先使用Mock模拟需要的数据,因为user页面内容比较多,后期也有增减用户的操作一类,都涉及到Mock方法拦截模拟,因此新建一个user.js用以集中编写,具体生成方式可以查看mockjs官网,大致如下:此处性别、用户类型两个数据使用了数字,因此在获取用户信息列表的时候将它们转化为相应字符串然后在mock.js中引用拦截一下:这样一个简易的数据接口就写好了接下来使用element-ui中的table组件展示原创 2022-06-15 10:22:37 · 535 阅读 · 0 评论 -
Vue后台管理系统练习-5 echarts数据可视化
这部分内容教程视频里用了封装,但没有那么多心思去完善,因此就不做完整的封装了首先还是引入echarts包通过npm下载,因为使用的是vue2,可能存在一些兼容性问题(之前一直加载不出来),因此指定了4.3.0的版本npm i [email protected] --save之后,我在组件中增加一个echarts的文件夹,因为这次需要三个表,就用了3个vue文件其实都写在一起也行,不过偷懒直接复制官方的代码目标,不想修改变量名了vue组件中的内容大概如下*主要就是注意引入,注意指定宽高,然后把内容写在原创 2022-05-27 09:58:28 · 497 阅读 · 0 评论 -
Vue后台管理系统练习-4 axios+mock实现数据模拟
首先安装axios与mocknpm i axios & npm i mockjs在main.js中引用并配置axiosimport http from 'axios'Vue.prototype.$http = http新建config文件夹,创建index.js配置axiosexport default { baseUrl: { dev: '/api/', // 开发环境 pro: '' // 生产环境 }}在项目中新建api文件夹,创建axios原创 2022-05-21 15:20:55 · 125 阅读 · 0 评论 -
Vue后台管理系统练习-3首页主要布局
上周一直在赶期末考试和ddl, 因此一直没有空出时间写这部分的内容主要是一些element-ui组件和css样式的架构, 比较基础因此讲解部分比较少效果如下:整体页面布局采用element-ui的layout布局 + el-card组件layout布局中通过el-row与el-col控制页面el-row::gutter属性可以规定每个分隔的间距:span规定此块占用的列数(一共有24列), 其他的部分具体参见element-ui的文档教程中的table也使用了elementUI的table原创 2022-05-14 16:49:45 · 2211 阅读 · 1 评论 -
Vue后台管理系统练习-2首页顶栏搭建
今日效果如下:(因为没有找图所以用了文件内自带的logo图片)首先设置左侧按钮,同样利用element-ui的icon库,配合button组件,将size设置为mini获取更好的视觉感受左侧内容代码如下:<div class="l-content"> <el-button @click="unflod" plain icon="el-icon-menu" size="mini" ></el-button> <h4 style="color原创 2022-05-07 09:51:21 · 595 阅读 · 0 评论 -
Vue后台管理系统练习-1首页侧栏搭建
这里利用element-ui的container布局,在官网->组件->base里可以找到相关组件的使用方法,以及布局模板,也可以根据自己的需求进行布局使用前先在main.js中引入需要使用的组件:import { Container, Main, Header, Aside } from 'element-ui';Vue.use(Container, Main, Header, Aside)引用后可以直接在Home.vue搭建基本布局,此处使用官网的布局:<el-contai原创 2022-05-03 17:37:03 · 1619 阅读 · 0 评论 -
Vue后台管理系统练习-0前置准备+项目大致框架确立
本项目整体参照 BV1QU4y1E7qo 以及一些官方文档细节部分会有些许修改使用了vue2,全家桶内容以下内容为vue项目建立(使用的脚手架为VueCLI v5.0.4)以及一些初步准备只涉及路由,暂时不涉及axios的使用(到后面会写)创建项目vue create 项目名称会在当前文件夹下创建以项目名称为名字的项目文件夹,后续操作大都在此文件夹中的src中进行与git仓库建立远程连接在github新建仓库后可以建立连接,有时候失败可能是网络连接原因git remote add or原创 2022-04-30 10:07:50 · 206 阅读 · 0 评论