- 博客(95)
- 资源 (2)
- 收藏
- 关注
原创 Vue修改密码功能的实现
样式基本需求输入框不能为空旧密码表单提交时必须正确两次输入新密码一致限定新密码的复杂度,这里是长度在 6 到 20 个字符代码<template> <el-form ref="form" :model="user" :rules="rules" label-width="80px"> <el-form-item label="旧密码" prop="oldPassword"> <el-input v-model="user.
2022-01-13 18:45:20 4996 2
原创 Vue,三级联动全局组件(1408)
由于三级联动,在Home、Search、Detail等页面都有使用,因此把三级联动注册为全局组件。好处:只需要注册一次,就可以在项目任意地方使用
2022-01-07 10:25:10 1447
原创 Vuex--状态管理库、模块式开发
Vuex是什么vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共用的数据切记:并不是全部的项目都需要Vuex。如果项目小,完全不需要Vuex;如果项目很大,组件很多、数据很多,数据维护很费劲,建议使用vuex.安装cnpm install --save vuex核心概念state:仓库存储数据的地方mutations:修改state的唯一手段actions:处理action,可以书写自己的业务逻辑,也可以处理异步getters:理解为计算属性,用于简化仓库数据,让组件获
2022-01-06 16:58:31 396
原创 Vue nprogress插件进度条的使用
安装cnpm install --save nprogress去package.json文件查看是否安装成功使用项目中只要有请求,即可使用。在请求拦截器中使用///对于axios进行二次封装import axios from "axios";//引入进度条import nProgress from "nprogress";//start:进度条开始;done:进度条结束//引入进度条的样式import "nprogress/nprogress.css"//1:利用axios对
2022-01-06 15:26:31 442
原创 Vue,跨域问题
什么是跨域协议、域名、端口号不同请求,称之为跨域。其他解释: 首先狭义的同源就是指,域名、协议、端口均为相同。 跨域,是指浏览器不能执行其他网站的脚本如何解决JSONP、CROS、代理(webpack)等配置代理-webpackvue项目中,实际放在vue.config.js中module.exports = { //关闭eslint lintOnSave: false, //代理跨域 devServer: { proxy: {
2022-01-06 15:04:10 164
原创 vue路由跳转、传参
1.路由跳转有几种方式比如:A->B声明式导航:router-link(务必有to属性),可以实现路由的跳转 <p> <span>请</span> <!-- 声明式导航:务必要有to属性 --> <router-link to="/login">登录</router-link> </p>编程式导航:利用的是组件实例的$router.push|replace方法,可以试想路由的条状2.路由
2022-01-05 16:09:38 148
原创 v-if、v-show、v-for、:key、:class与:style、:value
v-ifv-if:是vue 的一个内部指令,指令用在我们的html中。v-if用来判断是否加载html的DOM,比如我们模拟一个用户登录状态,在用户登录后现实用户名称 <div id="app"> <div v-if="isLogin">你好:</div> <div v-else>请登录后操作</div> </div> <script type="text/javascrip
2021-12-31 16:00:05 469
原创 Vue代码实例解析,inline、model、v-on
<template> <div class="app-container role"> <el-card class="el-card"> <div class="roleTitle">{{ $t("message.Role_management") }}</div>//$t,引用中文语言包,把中文字符的数量拉至最低 <el-form :model="queryParams" ref="queryForm" :inline="t
2021-12-30 10:50:50 4517 1
原创 Vue组件分类、路由的跳转
路由组件和非路由组件的区别路由组件文件一般放在view|page文件夹呢;非路由组件一般放在components。路由组件需要在router文件夹中注册(使用的即为组件的名称),非路由组件在使用的时候,一般都是以标签的形式使用。路由的跳转路由跳转有两种形式声明式导航router-link,可以进行路由的跳转编程式导航push|replace,可以进行路由的跳转说明:声明式导航能做的,编程式导航都能做;但是编程式导航除了可以进行路由跳转还可以做一下其他的业务逻辑.//声明式导航:仅进行
2021-12-29 16:06:59 529
原创 Element-UI安装使用教程
是什么Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI官方介绍:Element-Ul是一个网站快速成型工具,一套为开发者,设计师和产品经理准备的基于Vue 2.0的桌面端组件库安装方法一 npm安装进入你已经创建好的Vue项目,然后输入下面命令npm i element-ui -S注意:如果安装进程一直没变在,像停在某个界面,可以试试更换成淘宝的源,输入下面npm config set registry http
2021-12-27 12:11:11 1368
原创 定时器轮询功能,多次调用后端查询,直到获得想要的结果setInterval
使用场景我们需要从服务器端获取一些未来一小段时间内可以确定的事情。比如最经典的场景就是:想象一个用户在网页端通过扫码进行支付,我们怎么判断用户支付的状态。需求这是一个上传文件功能,因为处理文件数据需要一定的时间,处理结果不是能够马上得到的,因此在前端写了一个功能,不断向后端发送请求,直到获得想要的处理结果.页面展示前端代码//导入处理结果var UploadProgressTimmerupload.render({ elem: '#importresult' //绑定元素
2021-12-23 17:06:49 1752
原创 JSON.stringify方法详解
作用json通常用于与服务端交换数据在向服务器发送数据时,一般是字符串我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。语法方法定义:JSON.stringify(value, replacer, space)参数说明:value:js对象replacer:替换对象,可以是一个方法、对象或数组,将value按照替换规则展示。space:填充参数,可以是数字或字符串,将value按照参数进行格式化展示。方法说明:将value对象转换为指
2021-12-23 09:53:33 12730
原创 Vue,router路由使用详情
没有需要安装如图,假如package.json中没有vue-router(图红框部分),需要再终端安装命令:npm install vue-router使用需要在main.js引用自己创建的router文件夹,然后new一下
2021-12-22 19:36:28 451
原创 TP6,Error控制器,__call()方法
1、空控制器单应用模式下,我们可以给项目定义一个Error控制器类<?php namespace app\controller; class Error{ public function __call($name, $arguments){ $result = [ 'status' => config("status.controller_not_found"), 'message' =>'找不到该控制器',
2021-12-20 19:43:16 890 1
原创 TP5返回参数,封装方法jsonReturn
调用jsonReturn, /** * 生成调账单,状态获取 */ public function getStatusCreateDebugBill(){ $endStatus = Paas::request('/sim/finance/statement/getStatusByStatement', []); $statusMessage = array( '26022' => '正常处理中。',
2021-12-17 17:54:08 1037
原创 分享几个代码经验,实时更新(常用)
1.不在foreach循环里,写sql查询语句在for循环里调用执行sql方法会让程序运行速度变的很慢,特别是在数据量极大的情况下2.foreach循环时,记得销毁$key、或 $value如果不销毁,对$value的后续访问将很有可能引发错误...
2021-12-07 16:32:14 111
原创 layui数据表格checkbox部分不可选,全选功能正常
效果图说明layui内置没有该功能,所以只能自己实现。在layui数据表格中设置了字段为type:checkbox 但是想要实现部分不显示,不可选的功能。table.render,cols部分 let data_cols = [[ { templet: "#checkbd", title: "<input type='checkbox' name='siam_all' title='' lay-skin='primary'
2021-12-02 16:37:14 4614 2
原创 layui打开新窗口,form表单提交之后的跳转(top.layui.index.openTabsPage)
需求FORM表单新增页面,提交成功后,自动跳转到list页面新增页面就是一个简单的表单提交<div class="layui-fluid"> <div class="layui-card"> <div class="layui-card-header">这是一个FORM表单新增页面</div> <div class="layui-card-body" style="padding: 15px;">
2021-12-01 11:39:55 6443
原创 TP5事务处理,普通事务和模型事务实例解析
为什么要用事务事务:执行完A事件,然后执行B事件,AB事件都执行完成才算完成。由于某些因素影响,A事件执行完成,B事件还没有来的及执行。怎么办呢?就需要数据库状态回到A事件执行前。这种事情多见于电商支付功能,因为订单的完成,肯定是要操作多个表的。前提条件数据库引擎必须支持事务操作。MyISAM:不支持事务,主要用于读数据提高性能InnoDB:支持事务、行级锁和并发//建议使用Berkeley DB:支持事务ThinkPHP5 使用事务有 3 个常用方法:普通事务操作 //启用事务
2021-11-30 09:47:36 3452
原创 input表单重复提交事件,前后端解决思路
方法一,ajax提交,就要在提交之后禁用掉按钮$('#submit').click(function(){ $.ajax(...) $(this).attr('disabled,true) // 禁用按钮or $(this).css('pointer-event','none') // 来禁用点击事件})方法二,增加参数,判断提交次数function onLine(objIds){ var num = 0; layer.confirm('处理视频?', { btn: ['
2021-11-29 14:36:41 1132
原创 正则表达式总结(常用)
1.取字符串中的数字 let selectId = 'abc12345def'; let id = selectId.replace(/[^0-9]/ig,""); //12345
2021-11-29 09:48:52 133
原创 TP5查询构造器查询语句select、find、colum、value详解
以下表为例:Select查询数据集: $res = Db::table('package_price_nb')->where('id',1)->select(); //"SELECT * FROM `package_price_nb` WHERE `id` = 1" halt($res);打印出来的数据格式:find$res = Db::name('package_price_nb')->where('id',1)->find(); //SELEC
2021-11-24 17:00:16 3102
原创 mvvm设计模式
理解为主Vue的编程设计模式应该叫mvvm的设计模式。Vue是面向数据编程,程序中定义了数据,然后定义了模板,Vue就可以把数据和模板自动进行关联,然后挂载到真实的DOM上,展示给用户。mvvm解释:第一个m代表model数据,第一个v代表view视图,最后两个字幕代表viewModel视图数据连接层。<script> const app = Vue.createApp({ data() { return {
2021-11-22 11:33:54 578
原创 Vue小知识,实时更新(常用)
写在最前面:layui的作者贤心,去拥抱vue。之前用过vue,即使是基础,也要继续学习,更系统的了解ta,才能更宏观的使用它,更是为了让自己学有所思。1.createApp()和mount()方法讲解<body> <div id="app"></div></body><script> const app = Vue.createApp({}) app.mount("#app")</script>
2021-11-22 11:23:22 773
原创 layui上传文件,删除“未选择文件”、筛选文件类型等详解
此次博文是针对上一篇文章内容的功能优化上次代码:点我根据测试人员给的建议做出修改测试人员给了两个建议页面上传文件后提示了上传成功,实际没有上传成功,如图,提示上传成功后,文件名一闪而过筛选文件类型,打开文件显示框,仅显示excel文件建议一,解决过程为什么会一闪而过这是因为,js利用了layui的上传文件功能,但是html部分写的代码没有用layui提供的方法,我是用input的方法实现的。至于为什么没有用layui提供的button方法,是因为原型图的样式,必须样式统一。每上传
2021-11-18 15:21:52 2358
原创 Layui限制input输入框内容长度、以及输入框失去焦点事件、lay-search搜索事件
需求限定input输入框内容长度为,不大于30input输入框失去焦点,check输入内容长度代码页面端:注意lay-verify=“required|account”、lay-size=“30”、id=“nameAccount”<div class="layui-col-sm12 layui-col-md4"> <div class="layui-form-item"> <label class="layui-form-label required-
2021-11-11 11:40:27 13388 1
原创 Layui数据表格显示不同颜色,不用回调函数
其实回调函数比较复杂,来个最简单的,利用templet自定义模板效果图templet方法自定义列模板,模板遵循 laytpl语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等模板代码代码位置随便放,非常方便<script type="text/html" id="textColor"> {{# if(d.dealStatus == '未处理'){ }} <span style="color.
2021-11-10 17:25:43 1266
原创 alert回调函数,关闭弹出层页面,同步刷新parent页面,闭包函数
前言请看核心代码处的注释解析:其实是使用了 parent.location.reload();–>关闭页面只不过是,因为闭包函数,将parent方法放到了一个变量里layui回调函数,可以查查这个名词,会有收获 //提交 form.on('submit(component-form-demo1)', function (data) { var data = layui.table.cache["test-table-page"];
2021-11-08 11:46:42 1051
原创 前端,新增DIV,自增html片段代码实现,append、attr等方法
需求:form表单提交,创建一个div,由button控制,可以自由增加div中input输入框等内容的输出。样式解析:点击增加,新增一个号段框和一个删除按钮,点击删除,可以删除这一行代码<div class="layui-fluid"> <div class="layui-card"> <div class="layui-card-header">库存录入</div> <div class="la
2021-11-08 11:01:30 1111
原创 PHP利用guzzlehttp,发送HTTP请求,写API接口共通函数
public static function request($url,$param,$isFile=false){ //从cache获取token $my_token = (cache('data')); try { $client = new Client([ 'base_uri' => config('saasSimCloud.url'), 'head...
2021-11-04 20:13:00 330
原创 TP打印sql语句总结
获取并输出sql语句fetchSql();用于直接返回SQL而不是执行查询,适用于任何的CURD操作方法 $tmp_list = Db::name('have_card') ->field('id , iccid, msisdn') ->where([ 'user_id' => $uid, 'msisdn' => ['IN', $list]
2021-11-02 14:24:23 1540
原创 PHP合并两个关联数组,两种方法总结
需求:将两个数组根据iccid的值,合并为一个新数组注意:因为测试的值使用postman输出的,请忽略数组格式,仅关注思路就好.//数组1>$res_have_card = array(2) { [0] => array(3) { ["id"] => int(1024701) ["iccid"] => string(20) "123456B0000000049973" ["package_price_id"] =>
2021-11-01 18:04:24 818
原创 PHP上传excel,处理表格数据,并利用ajax提交保存数据
用到的技术:Layui框架、TP5、Ajax注意:该方法,需要composer安装拓展包,当然思路最重要前端样式前端关键代码 <input type="hidden" name="iccid_list" id="iccid_list" value=""> <div class="layui-form-item"> <div class="layui-inpu
2021-10-25 20:03:16 690
原创 前端常用dom操作方式,实时更新(常用)
强烈建议多看jquer方法,有个印象:点我以下是工作中用到的1. attr(),设置或返回被选元素的属性值2. html(),返回或设置被选元素的内容 (inner HTML)。如果该方法未设置参数,则返回被选元素的当前内容。3. apend(),被选元素的结尾(仍然在内部)插入指定内容4. $(’#seriesByOperator’).val;获取改id的value5. remove() ,empty()remove() - 删除被选元素(及其子元素)empty() - 从被选元素中
2021-10-23 19:16:42 363
原创 layui批量删除(物理删除)
//批量物理删除 table.on('toolbar(test-table-page)', function (obj) { if (obj.event === 'batchDeleteEditView') { //获得表格CheckBox已经选中的行的信息 let checkStatus = table.checkStatus('test-table-page'), ...
2021-10-23 18:32:23 1157
原创 PHP拼接字符串,将一组动态数据拼成一个数组
前端样式解析:每点一下新增,页面就新增一个【删除行】,传递给后端的数据是一个数组需求:需要把上图红框中的动态数据拼成一个数组"iccidList":[{ "start": 123, "end": 567 },{ "start": 890, "end": 1111 }]后端代码 if ($this->request->isPost()) {
2021-10-16 17:51:43 261
原创 PHP格式化小数,保留小数点后几位(总结)--经验分享
首先一定要确定你要处理这个字段的数据类型,整型、浮点型、字符串…,然后再确定用何种方法,用gettype()方法判断数据类型<?php //声明一个变量88.8,你可以自己多做几次实验换成其他类型看看$type输出是多少 $float = 88.8; $type = gettype($float); echo $type;...
2021-10-13 16:22:14 270
原创 PHP强制类型转换,总结
PHP强制类型转换PHP 中的强制类型转换和其他语言很类似可以在要转换的变量之前加上用括号括起来的目标类型(例如$var = (int)3.1415;)也可以使用具体的类型转换函数(例如 intval()、floatval()、strval() 等)或者 settype() 来转换类型。转换变量的方法使用在变量之前加上用括号括起来的目标类型的方式强制转换变量类型时,括号中允许使用的变量类型如下所示:(int)、(integer):转换成整型;(bool)、(boolean):转换成布尔类型
2021-10-13 11:18:31 1167
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人