- 博客(44)
- 收藏
- 关注
RSS订阅原创 图片展示实现高度、宽度自适应
图片展示如何实现高度、宽度自适应？加入浏览器自适应功能后，浏览器宽度改变后，图片由于高度或者宽度固定，图片要么过宽、要么过高，样式很难看，想起max-height 和 max-width 这两个样式后，都好解决啦。图片使用如下样式.regulation-img { max-width: 90%; max-height: 140px; width: auto; height: auto}效果如下哪怕图片大小不一样也能实现布局的统一了。...
2022-04-04 14:32:23
2378
1
转载 vue项目引入字体文件
vue项目引入字体文件在自己的idea中选好字体，打包上线发现字体效果没有显示出来。于是查了vue引入字体文件的方法，记录记录。1.下载字体文件，并放到项目文件中2.创建font.css文件，写入如下代码//font.css文件代码@font-face { /*给字体命名*/ font-family: 'buer'; /*引入字体文件*/ src: url('./buer.ttf'); font-weight: normal; font-styl
2022-03-29 01:32:50
2952
2
原创 在Vue项目中，用axios的get请求携带对象参数给后端发送请求会报400错误
在Vue项目中，用axios的get请求携带对象参数给后端发送请求会报400错误原因：axios的post请求默认数据格式是json,所以服务器可以正确解析。但是get请求的默认格式是字符串，所以会报错400.项目中的post和put请求都能够直接携带对象参数并被服务器正确解析。所以猜测put应该数据格式默认也是json.解决方法：1.安装Qs插件命令参考链接: https://www.cnblogs.com/dudu123/p/10284503.html.2.后端改成post携带对象参数
2022-03-05 18:23:07
2312
原创 Vuex中删除state的某个属性
Vuex中删除state的某个属性1.mutations中写好删除对应属性的方法//store/index.js文件中mutations:{ //删除user属性 deleteUser(state) { delete state.user }}2.组件中调用//app.vue文件中//退出登录 logout() { this.$store.commit('deleteUser') }...
2022-02-27 18:36:59
1218
原创 vue 项目提交form格式数据的表单
vue 项目提交form格式数据的表单一、先将数据处理let formData = new FormData();for(let key in this.telForm){ formData.append(key,this.telForm[key]);}二、数据上传//采用封装的post方法上传this.postRequest('web/login/mobile',formData).then(res=>{ console.log(res)})//或者采用普通的axios
2022-02-26 16:46:27
5728
原创 Vue项目中让元素垂直居中比较好用的方法
Vue项目中让元素垂直居中比较好用的方法直接将下面的样式写在需要用的元素上.upLoad-btn { position: relative; top: 50%; /*偏移*/ transform: translateY(50%); text-align: center;}
2022-02-24 16:30:23
6749
原创 Vue项目的手机号表单验证
Vue项目的手机号表单验证一、根据Vue官方文档写表单验证功能二、检验规则写法export default { data(){ //验证手机号的正则表达式 let reg=/^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/ //验证方法 let validatorPhone = function (phone, value, callb
2022-02-24 13:17:36
3983
原创 vue中的css样式：文字超过一行的部分用省略号表示
vue中的css样式：文字超过一行的部分用省略号表示display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;//超过行数overflow: hidden;word-break: break-all;
2022-02-19 21:47:44
1035
原创 Vue中video.js的使用和:src绑定失效问题解决
Vue中video.js的使用和问题解决一、安装npm install --save-dev video.js// 或者使用淘宝镜像cnpm install --save-dev video.js二、在main.js中引入import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video三、使用<video id="videoPlay" Controls="tru
2022-02-17 17:43:22
1058
原创 ElementUI Card组件触发点击事件
遇到的问题：在做卡片点击改变样式时发现el-card组件点击方法没有触发到。解决方式：@click = method(x,y)替换成@click.native = method(x,y)参考链接: https://blog.csdn.net/weixin_43937526/article/details/120410660.
2021-12-20 22:07:45
8844
原创 JS手撕代码练习－－－基础片
移除数组arr中所有与item相同的元素，不直接修改数组arr,结果返回新的数组。方法一：元素相同的用slice删除掉function remove(arr,item) {//不能修改原数组，可以通过.slice(0)复制一个新的与原数组一样的数组 new newArr = arr.slice(0); for(var i = 0;i < newArr.length; i++) { if(newArr[i] == item) { //如果找到与item相同的元素就删除掉，并且i也要减掉
2021-10-27 23:34:03
203
原创 不会的问题集合
1.VUE 的v-if 为什么要绑定key值主要目的是为了高效地更新虚拟DOM元素。vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。2. v-modal 双向数据绑定的原理3.浅拷贝和深拷贝4.原型链5.跨域6.回流7.浏览器的性能优化8.伪类伪元素9.BFC是什么BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个
2021-10-09 23:53:13
71
原创 JS面试指南代码测试记录 --- Javascript篇
JS作用域与作用域链作用域作用域就是代码的执行环境，全局执行环境就是全局作用域，函数的执行环境就是私有作用域，它们都是栈内存。执行环境定义了变量或函数有权访问的其他数据。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中 。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。在 Web浏览器中，全局执行环境被认为是window对象，因此所有全局变量和函数都是作为 window对象的属性和方法创建的。在NODE环境中，全局执行环境是 gl
2021-09-20 23:34:27
335
原创 JS面试指南代码测试记录 --- CSS篇
li与li之间有看不见的空白间隔如何消除原因：浏览器的默认行为是把inline元素间的空白字符（空格、换行、tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。解决方式所有<li>写在同一行设置<ul>的字符尺寸为0，.wrap ul{font-size:0px;}，然后再设置<li>的字串尺寸为相应大小，.wrap li{font-size:0px;}。局限：在Safa
2021-09-12 11:17:18
149
原创 实现多选按钮选择状态的动态实现
实现多选按钮选择状态的动态实现思路首先要明确两个数组：totalList[]是所有多选按钮选项集合，selectedList[]是已选择的多选按钮选项集合。要做的就是，在遍历渲染的同时，通过判断totalList[]数组中是否有selectedList[]的元素，有就显示为选中状态。关键代码// 多选按钮的状态框<view class=""> <checkbox :value="subItem.id" :checked="deliveryGroup.eld
2021-09-06 21:53:46
495
原创 JQuery实现标签的删除与添加
JQuery实现标签的删除与添加功能描述：点击tag标签的X能删除标签，点击添加能弹出输入框填写标签的文字，完成后可以展示新添加的标签html代码<div class="card-body row"> // 第三级分类 <div class="col-10 elementClass"> //原来有的两个子标签 <span class="mx-1 border border-primary rounded p-1" style="color:rgb
2021-09-06 21:37:55
2874
原创 Uniapp(JS)实现小程序按键-＞短按删除、长按清空功能
Uniapp(JS)实现小程序按键->短按删除、长按清空功能参考博客：https://blog.csdn.net/weixin_33743292/article/details/113017148.说明：代码部分使用了uniApp的一些插件，但是重点时Js实现的的思路需要了解五个方法1、按下手指时触发：ontouchstart2、释放手指时触发：ontouchend3、手指移动触发：ontouchmove4、延时函数：setTimeout(要执行的代码, 等待的毫秒数)延时函数也可做一
2021-08-26 12:06:32
1821
原创 uniapp实现微信小程序调用云函数及问题解决
uniapp实现微信小程序调用云函数及问题解决使用工具HBuilder X微信开发者工具实现步骤1.在项目根目录下创建functions文件夹（此为wxcloudfunctions文件夹，可以是任意名字）2.functions文件夹中添加跟函数名同名的文件，这里要实现的是add函数。3.add文件中创建三个文件：config.json、index.js和package.json。目录结构如下文件中的代码如下config.json:{ "permissions": {
2021-07-07 17:49:04
8688
10
原创 uniapp实现微信小程序云开发数据库访问，并解决云开发数据库获取不到数据问题
uniapp实现微信小程序云开发数据库访问，并解决云开发数据库获取不到数据问题使用工具是HBuilder X1.配置好AppID(小程序ID）在HBuilder X工具的manifest.js文件种找到微信小程序配置，并配置好AppID2.设计好自己的数据库(1) uniapp项目运行到微信开发者工具(2) 打开微信开发者工具的云开发(3) 在云开发控制台设计好自己的数据库添加集合名称，相当于一个表添加记录，相当于表中的一条记录3.初始化回到HBuilder X工具中
2021-07-06 23:53:13
6074
1
原创 Uniapp实现小程序获取用户微信信息功能
Uniapp实现小程序获取用户微信信息功能实现后发现其实这个功能实现起来非常简单，但是，在实现这个功能的过程中真的好多坑啊，可能是我菜吧。1.获取uniapp的appid和微信小程序的appid,然后在HBuilder X的manifest.json文件中填上虽然按我的理解，这两个AppID即使被直接看到，但是你在两个开发管理平台没有加入项目的话，也是不能直接用的，但是，为了安全起见我还是打了马赛克，毕竟作为菜鸟的我还有很多不懂的。PS：申请微信的AppID的时候，一定要注意区分微信公众平台和微
2021-06-30 22:10:59
4427
4
原创 浏览器中引入百度地图，并带有导航功能
在浏览器中引入百度地图，并带有导航功能1.去百度地图API官网申请一个密钥，然后引入百度地图API<!-- 百度地图API --> <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script>2.在需要放入地图的地方，引入下面代码<div id="container"></div>
2021-06-26 10:15:49
493
原创 VLC播放RTSP流
VLC播放RTSP流rtsp测试流：rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov编辑器：sublime浏览器：IE（注意：这里只能用IE）采用VLC播放RTSP流有个最大的好处是不需要转码，减少了转化时间，也就是减少了时延。然而我自己摸索怎么下载和播放的时候处处碰壁，搞了好久却还是临门一脚的状态，后面被前辈指点后发现，其实我大方向都是对的，网页上的视频出不来是因为一些小的地方没注意。而且，前辈教我的方法超级简单。
2021-05-21 17:52:17
5246
3
原创 Sublime的tab键失效
Sublime按tab键既不能自己跳转四个空格，也不能自动完善代码，全部都是补充完整前后标签。原因：安装了emmet后，将默认 “展开缩写” 的快捷键 “Ctrl+E”改为了 “Tab”解决： 在“首选项->快捷键设置”中，找到（英文版的为preferences->Key Bindings)[ { "keys": [ "tab" ], "args": {
2021-04-27 17:16:32
3326
2
原创 phpstudy打开apache显示80端口被禁用
phpstudy打开apache显示80端口被禁用打开任务管理器的详细信息，发现被没有没有80PID查了一下，是HTTP的问题打开cmd,输入netsh http show servicestate,找到占用了80的进程，然后结束任务，再次启动apache就可以了...
2021-04-25 20:48:46
205
原创 element表单重置要点一个不能少
element表单重置要点一个不能少每次表单重置都没效果，后来查了资料，发现一直少了规则绑定element 的 Form 组件提供了表单验证的功能，需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名。有两点需要注意:1.必须有对应的 ref，且名字一致，表明重置哪个表单。2.prop 设置的字段名要和 v-model 绑定的字段名一致，否则重置表单或进行自定义校验规则时不会生效。仅使用重置功能时具体校验规则不必写，但要重置的字段一定得有
2021-04-11 15:38:10
534
原创 标题前面加个logo
图片垂直对齐//父级盒子.img1 { position:relative;}.img1 img { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}图片与文字在同一行1.图片和文字外面包裹一个div,并给予类名 <div class="titleCss"> <img src="http://localhost:8080/logo.png">
2021-04-10 21:52:55
131
原创 表格置顶,表头隐藏,数组中添加对象
表格选定行置顶//给使用按钮添加方法，方法如下use(row) { let values = this.tableData;//这个是表格数据 let value = row; let res = [value].concat(values.filter(item => item != value));//concat() 方法用于连接两个或多个数组 console.log(res); this.tableData = res;}表头隐藏 :show-header="false
2021-04-08 20:45:55
125
原创 表格中直接输入数据
表格中直接输入数据突然想要在表格中就能输入数据，但是用的是vue和elementui,太过依赖组件，突然记得一开始学的时候，为了对齐，都是用表格做的，现在却不记得怎么写表格了。上菜鸟学了一下，赶紧记录下来代码如下<table id="myTable"> <tr class="header"> <th style="width:25%;">名称</th> <th style="width:25%;">价值</th>
2021-04-08 08:27:26
154
原创 路由跳转遇到：Redirected when going from “/?redirect=%2FRegister“ to “/Register“ via a navigation guard.
路由跳转遇到：Redirected when going from “/?redirect=%2FRegister” to “/Register” via a navigation guard.、在登录页面添加了个注册按钮，想实现跳转到注册页面的功能，但是老是报错Redirected when going from “/?redirect=%2FRegister” to “/Register” via a navigation guard.百度了一下，有说是版本太高的问题，有说别的，后来发现，其实是自己写
2021-04-07 01:35:39
15798
原创 vue设置图片背景
vue设置图片背景在style标签中写入下面的代码.login{ background:url("../assets/blueback.jpg"); /*background-color: pink;*/ width: 100%; height: 100%; position:fixed; margin-top: -0px;/*上边距*/ margin-left: -0px;/*左边距*/ background-size:100% 100%;}template的最外
2021-04-06 15:11:26
442
原创 打开数据库遇到2003-Can‘t connect to MySQL server on ‘localhost‘(10061“Unknown error“)
打开数据库遇到2003-Can’t connect to MySQL server on ‘localhost’(10061"Unknown error")解决方法刚打开Navicat就弹出这个，我以为是Navicat没激活，它不让我用了，然后尝试着激活，后来发现不对劲，Navicat和MySQL又不是一个东西，Navicat没激活关我MySQL什么事情，猛地想起刚开机的时候清理电脑的一个步骤是关闭了很多软件，可能是把就是在那里把MySQL关闭了。找到电脑里的MySQL打开不就结束了，然而，，，我忘记电
2021-03-29 08:44:40
457
1
原创 基于idea实现vuecli4的屏幕自适应
基于idea实现vuecli4的屏幕自适应1.安装amfe-flexible模块amfe-flexible：是rem的适配插件。由于直接用npm安装老是出错，于是我用了淘宝镜像安装1.1淘宝镜像打开idea终端Terminal输入下面的代码进行安装npm install -g cnpm --registry=https://registry.npm.taobao.org安装完后使用 cnpm i xxx 代替 npm install xxx就可以了1.2安装模块一、安装模块cnpm i
2021-03-27 12:34:03
243
原创 记一次小小的路由实现
实现一个路由没想到隔了一段时间一个小小的路由我都搞了这么久，赶紧记录下来，下回直接看这里复习1.创建一个跳转过去的页面2.在路由统一管理处添加一个路由3.在APP页添加一个路由占位符4.把路由挂载到实例对象中我就是忘记这一步卡了好久，感觉自己是个傻逼5.结束，直接运行就出来啦...
2021-03-10 21:11:18
55
原创 将本地代码上传到云端gitee码云
将本地代码上传到云端gitee码云1.在idea中再打开一个终端2.切换到该终端，输入git status，查看当前版本库的状态出现上图情况说明有数据更新，有新的数据包需要下载3.输入git add .将安装包保存在本地暂存区4.输入git commit -m "完成了登录功能",将安装包在本地提交，并编辑提示信息5.通过git branch可以看到此时是处在login这个分支下的，我们需要将login分支整合到master分支中（1）通过git checkout master切换
2020-11-28 11:56:18
849
2
原创 是否登录页面验证
前端实现是否登录页面验证1.将原来直接曝露路由改为将路由封装为一个对象//原来export default new Router({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/home', component: Home } ]})//修改过的const router = new Router({ routes: [
2020-11-27 01:01:29
226
原创 Vue项目初始化
Vue项目初始化一、安装Vue脚手架二、通过Vue脚手架创建项目1.ctrl+r打开cmd,输入vue ui，回车，浏览器会弹出UI的视图界面，借助视图界面创建Vue项目2.点击创建按钮进入创建页面3.选择好你的项目路径，然后点击 在此创建新项目4.填入项目名称，打开git初始化按钮，填入init project(不知道啥子意思，回头查查能不能改别的），然后点击下一步5.前两个是自己建的预设，第三个是默认预设，这里选择第五个，手动配置项目，然后点击下一步6.选择你需要的插件，点开
2020-11-26 21:55:27
3023
转载 babel认识、安装、使用
babel认识、安装、使用一. 认识babel作为一种语言，javascript在不断发展，各种新标准和提案层出不穷，但是浏览器的多样性导致有可能几年之内都无法广泛普及，而babel可以让你提前使用这些语言特性，它是一种多用途的javascript编译器，它把最新版本的javascript编译成当下可以执行的版本。二. 安装、使用参考https://blog.csdn.net/qq_41638795/article/details/95060140三.小经验在npm中安装babel遇到npm E
2020-11-12 17:05:00
167
原创 axios安装与使用
axios安装与使用1.进入:官网下载压缩包2.找到压缩包中的dist目录下的axios.js或者axios.min.js，解压到需要使用它们的的项目路径中3.使用通过script引包然后直接使用里面的api//网页代码部分（axios.js）<body> <!--引入axios的包--> <script src="js/axios.js"></script> <script> axi
2020-11-07 11:51:10
1243
原创 vuetools安装
vuetools安装一、安装步骤1.下载压缩包Vue.js+Devtools_5.3.3_chrome.cn.crx（一定是crx结尾），直接解压到你想要的目标文件链接：百度云连接（bj16）2.打开Chrome浏览器的 设置 =》点击拓展程序3.进入如下界面，可以看到我们已经安装的插件，这是我们需要打开右上角的开发者模式4.点击加载已解压的拓展程序 =》选择目标文件 =》点击选择文件夹第一步：第二步第三步5.这时在Chrome中可以看到以下图标。6.刷新后右上角出现vue的拓
2020-11-01 22:33:14
7032
5
原创 art-template的子模版与模板继承
art-template 的子模版与模板继承核心语句：{{ extend './layout.html }}{{ block 'header' }} ... {{ /block }}模板页（layout.html）可以设计为网页的模板页，包括固定的头部样式和底部样式，以及需要的一些连接，可以通过 {{ block ‘name’ }}默认内容{{ /block }} 给继承了模板网页的子网页设计 留空 部分，让其自由插入，最后在浏览器中会将两个网页整合成为一个网页<!DOCTYPE htm
2020-10-27 16:50:30
423
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人