草庐IT

Min_element

全部标签

Vue+JS+Element UI实战(电商项目1)

目录1.电商业务概述2.电商后台管理系统的功能​3.项目初始化步骤4.后台项目的环境安装配置4.1.APIV1接口说明4.2.支持的请求方法4.3.通用返回状态说明5.测试后台接口是否正常6.登录/退出功能1.登录概述1.登录业务流程2.登录业务的相关技术点3.token原理 2.登录功能实现1.终端执行gitstatus:查看当前工作区是否干净2.用分支开发登录功能 3.查看项目运行效果4.删除不需要的组件5.创建登录组件6.设置背景颜色7.组件头像布局8.登录组件表单布局9.表单小图标布局10.表单的数据绑定11.表单的数据验证12.表单的重置13.登录前的预验证14.根据预验证是否发起请

组件分享之后端组件——基于Gin + Vue + Element UI前后端分离的工单系统ferry

组件分享之后端组件——基于Gin+Vue+ElementUI前后端分离的工单系统ferry背景近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。组件基本信息组件:ferry开源协议:LGPL-3.0license官网:http://ferry.fdevops.com内容在我们很多需求中都会使用到或简单或复杂的流程,本篇我们进行分享一款基于Gin+Vue+ElementUI前后端分离的工单系统ferry,通过灵活的配置流程、模版等数据,非常快速方便的生成工单流程,通过对流程进行

vue-router + element-plus实现面包屑导航栏和路由标签栏

效果预览首先,先解释一下什么是面包屑导航栏和路由标签栏。如下图所示,面包屑导航栏就是展示当前所处路由信息和父辈路由信息的导航栏,它的作用是提示用户当前页面所在位置;路由标签栏就类似于浏览器的标签栏,每个标签对应一个路由页面,点击该标签可以进入该路由页面。在这里解释一下,我所说的父辈路由是父路由的超集,对于一个子路由,它的父路由、它的父路由的父路由、它的父路由的父路由的父路由…都属于它的父辈路由。我也不知道这种叫法是否规范,反正大家理解这个意思就行。然后展示一下效果:这是我自己做的一个基于vue3+typescript的网站,后端是用golang写的,网站有查询微博、百度、凤凰历史热搜的功能,以

Ubuntu开机卡在 A start job is runing for wait for Network to be configured (1min 23s / no limit)解决方法

Ubuntu开机卡在AstartjobisruningforwaitforNetworktobeconfigured(1min23s/nolimit)解决方法问题现象:Ubuntu开机卡在这里迟迟无法开机,要等倒计时完以后才会顺利开机。原因可能是系统开机初始化网络配置出错,加上系统默认配置有等待时间,导致系统会一直进行一些无用的尝试,直到超过等待时间,这样无形之中加长了开机的时间。解决思路及方法:(两种)首先想到的解决方法是修复配置上的错误使初始化顺利完成,第二是调整的等待时间,使其快速跳过。(我这里提供两种解决方法,大家酌情取用)一、修改网络配置网络配置文件:查看网络配置文件如下:#This

element-ui文件上传el-upload

        element-ui官网中有文件上传        首先先展示一下我页面的实现效果,如下图所示:         从图中可以看出,我这边实现的是一个可显示进度条的文件上传操作,而且如果上传的文件很大等,还可以中断文件上传。       值得注意的是,如果有添加进度条,那就会存在一个bug,在文件没上传完时在点击重新上传文件进度条及百分比就会不停闪,原因是上个上传请求在同时进行。       当然这些代码也会在接下来的讲解中进行解决       【解决方法】只需要在下图位置操作时中断请求即可       1.在弹框点击取消和右上角X的时候中断文件上传请求       2.页面上添

Element-ui的理解

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录前言一、element-ui是什么?二、使用步骤1.引入库npm安装CDN方式2.快速上手elementUI总结 前言通过视频资源等学习终于了解除了手写代码渲染页面之外,既然还有这么好用的组件库,全程看官方文档,也能看个大概,elementUI是一个非常好入门学习组件库的库。在自己敲代码的时候,总在想能不能偷会懒,少敲一些代码,这样敲下去头都大了,于是我在学习Vue的时候,终于有人介绍了组件库这玩意,啥是组件库啊!正比如说用HTML+css写一个非常完美的按钮出来,肯定得写大半篇代码,代码不够优雅,此时搭配组件库的使用,可以大

Element-ui的理解

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录前言一、element-ui是什么?二、使用步骤1.引入库npm安装CDN方式2.快速上手elementUI总结 前言通过视频资源等学习终于了解除了手写代码渲染页面之外,既然还有这么好用的组件库,全程看官方文档,也能看个大概,elementUI是一个非常好入门学习组件库的库。在自己敲代码的时候,总在想能不能偷会懒,少敲一些代码,这样敲下去头都大了,于是我在学习Vue的时候,终于有人介绍了组件库这玩意,啥是组件库啊!正比如说用HTML+css写一个非常完美的按钮出来,肯定得写大半篇代码,代码不够优雅,此时搭配组件库的使用,可以大

CSS基础-06-元素大小(设置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、设置行间距 line-height)

1.设置元素尺寸(height/width)语法示例自动大小height:auto;width:auto;像素设置height:100px;width:100px;百分百设置height:50%;width:10%;完整示例代码CROW-SONGp{border:1pxsolidblack;height:100px;width:100px;}元素大小测试结果显示image.png2.最大值、最小值(max-height|width、min-height|width)语法示例设置元素最大值max-height:50px;max-width:500px;设置元素最小值min-height:50px

Vue+element-ui 使用row-class-name修改el-table某一行解决背景色无效

项目场景:要实现这样的一个功能:为列表特定某一行的背景高亮,如下图,实现某一行的权限字段是超级,那么这行就高亮显示的效果问题描述:根据element-ui中el-table中的row-class-name属性设置可以通过指定Table组件的row-class-name属性来为Table中的某一行添加class,表明该行处于某种状态。template代码template>el-table:data="admin_list"stripestyle="width:100%":row-class-name="tableRowClassName">el-table-columnprop="name"la

Vue项目流程7,交易页面,提交订单,支付页面,利用element UI 以及 QRCode 完成微信支付,弹出框按钮的相关工作,个人中心以及子路由我的订单

目录交易页面提交订单支付页面微信支付个人中心我的订单交易页面1、静态组件及路由跳转2、获取交易页数据(1)接口//获取用户地址信息地址:/api/user/userAddress/auth/findUserAddressList请求方式:GET参数:无exportconstreqAddressInfo=()=>requests({url:'/user/userAddress/auth/findUserAddressList',method:'GET'})//获取商品清单地址:/api/order/auth/trade请求方式:GET参数:无exportconstreqOrderInfo=()=