通用后台管理系统前端界面
文章平均质量分 66
念衢
这个作者很懒,什么都没留下…
展开
-
使用Echarts实现项目数据可视化
1、安装插件,全局引入,页面布局结构如下图。 # echarts 底层依赖 ZRender(ZRender基于canvas),一个轻量级的二维绘制库 封装后端请求重点是地图注册以及数据,至于地图geo组件配置 ,参考官方debugg:南海诸岛不显示,国家主权问题,有点危险 ,如果隐藏还可以参考博文原创 2022-12-06 23:35:06 · 846 阅读 · 0 评论 -
表格数据方法、分页方法及组件的封装和分页组件的复用
1、数据获取与显示的通用方法封装 table.js2、数据转换指令方式: 服务方式: 查看请求后端接口:发现需要两个参数——当页数和每页条数 前端的方法是用公式计算,参考博文 这里用后端的方法:分页由后端完成,所以每次切换页面的数据条数和当前页码时,都要根据接口请求参数,发送请求。debug:总条数和数据页码不显示。 修改添加scss样式后: 在common文件夹下,新建Pagin.vue组件,把上一个页面与分页相关的代码复制过来,修改后如下:原创 2022-12-05 23:35:09 · 514 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅻ——信息管理页(增删改查封装)
在utils下新建table.js拷贝信息列表到信息管理页面,修改根节点的class命名为InfoLists,同时并改scss后,在信息管理页进行使用封装好的getData方法。原创 2022-12-03 01:12:24 · 809 阅读 · 0 评论 -
表单校验规则
使用element-ui的datePicker组件选择时间,传递的表单里用户的时间格式为:,所以这里value=“2022-11-02“校验规则:用户输入时间必须在的当前系统时间之后。1、系统时间如果不转换对象为string,就直接比较的话,结果不对2、因为系统月份是从0开始计算的, 所以获取到的系统的月份会比生活中的少1,所以获取的系统月份需要加一str;把str字符串根据“-”符号,将str字符串进行拆分成数组str.join("-");将str数组中的元素用“-”进行连接。原创 2022-11-28 16:46:29 · 470 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅺ——信息列表页(弹窗复用增改、CRUD前端基础实现)
因为需求发生了点变化,所以把之前的代码稍改一下,把之前的信息列表全复制到用户列表中,最后效果一样。调整一下页面元素布局和样式:按钮、图标等。调整后。原创 2022-11-27 01:20:53 · 902 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅹ——前端数据表格的删除、查找
1、拿到id或者行数据对象2、查看后端接口方法,写api方法,将操作连接上后端后端请求操作成功,但是前端数据表格未更新,最简单的一种方法数据删除后要重新获取数据===》依旧显示成功,但是前端数据表格未变化,排查后,看封装请求方法的api.js文件,发现:1、方法没有获取参数;原创 2022-11-24 23:00:33 · 1145 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅸ——数据表格渲染及处理+前端分页
在页面添加table表格,从element-ui官网查找,包括数据一起复制过来,查看显示没有问题后,把tableData清空为空数组。原创 2022-11-21 22:54:45 · 1719 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅷ——公用组件之面包屑
新建共用组件Breadcrumb.vue,从element-ui官网找组件。导入面包屑到Home.vue显示使用。原创 2022-11-21 21:54:13 · 333 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅶ——公用组件(Header+Footer+Menu)
components下新建文件夹common,新建三个组件:Header.vue Footer.vue Menu.vue从element-ui官网找到想要的组件,粗略写好后,挂载在主页Home.vue上,原创 2022-11-19 00:10:43 · 1059 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅵ——首页、登录页、404页面
1、为了方便起见,先将element-ui的使用改为全局引入的方式。2、写登陆页面:2.1、components文件夹下新建Login.vue2.2、从找需要的组件:+3、修改路由:启动项目(使用重定向)和输入http://localhost/login,进入的页面都是为登录页面运行结果:4、登录验证4.1 简易版,适用于小项目和简单的验证规则,实现:将验证规则直接写在html中当输入框失去焦点时,会自动进行表单校验4.2登录验证进阶版。原创 2022-11-17 23:02:03 · 3251 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅴ——axios使用与封装、配置路由和路由懒加载
如果不应用懒加载的话,很多页面都会打包到同一个js文件中,文件将会异常的大。造成进入首页时,需要加载的内容过多,时间过长,在浏览器中可能会出现短暂的空白页,从而降低用户体验,而运用路由懒加载是将各个模块分开打包,用户查看的时候再加载对应的模块,减少加载用时。2、在 main.js导入使用axios,因为是用的比较多,所以采用的是全局引入,挂载到原型的方式。实现2、: 使用Vue异步组件,修改router文件夹下的index.js文件为下。实现1、:修改router文件夹下的index.js文件为下。原创 2022-11-17 13:11:26 · 525 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅳ——图标库的使用
在main.js中引入。原创 2022-11-17 12:35:52 · 204 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅲ——使用CSS预处理器
使用(scss可以嵌套使用。在App.vue的style中进行引入使用。的scss改为less,两者语法通用的。重置之后:会更紧凑,看起来更舒服。原创 2022-11-17 12:26:53 · 188 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅱ——按需配置element-ui
①作为一个独立的模块进行引入,在项目下新建plugins文件夹,再新建element.js文件(更推荐)②直接在main.js文件进行引入。使用element-ui。原创 2022-11-17 11:54:29 · 271 阅读 · 0 评论 -
通用后台管理系统前端界面
##安装指定版本的vue脚手架工具 或者是已安装了,该命令则为使用4.5.15版本的vue/cli。2.1 效果:自动打开项目,终端输入“npm run serve”后自动弹出项目主页。③使用Vue Project Manager ,使用命令行输入。1.1 局部安装vue-cli 工具,方便不同版本进行切换。后续项目还可以看到使用的依赖、module,对启动速度等进行优化。局部安装vue-cli 4.5.15 和创建项目。###查看当前vue脚手架工具版本。会弹出vue项目托管器。原创 2022-11-16 22:44:39 · 1012 阅读 · 0 评论