小白前端开发笔记
火腿肠烧烤大赛冠军
F=-F
展开
-
uniapp+打开icofont彩色图标
iconfont uniapp原创 2023-03-16 10:33:59 · 285 阅读 · 1 评论 -
javaScript获取URL
获取当前窗口的Urlvar url = window.location.href;//结果:http://localhost:61768/Home/Index?id=2&age=18获取当前窗口的主机名var host = window.location.host;//结果:localhost:61768获取当前窗口的端口var port = window.location.port;//结果:61768获取当前窗口的路径var pathname = window.loca转载 2021-08-19 09:23:35 · 869 阅读 · 0 评论 -
VUE 路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘)
next()放行next(’/XXX’)无限拦截beforeEach((to, from, next) => { beforeEach(('/XXX', from, next) => { beforeEach(('/XXX', from, next) => { beforeEach(('/XXX', from, next) => { beforeEac... // 一直循环下去...... , 因为我们没有使用 next() 放行原创 2021-06-18 10:45:47 · 1774 阅读 · 0 评论 -
Vue项目正全局引入scss样式
在vue.config.js内加入如下代码: css: { loaderOptions: { scss: { prependData: `@import "@/styles/mixins.scss";` } } },原创 2021-06-17 14:40:23 · 269 阅读 · 0 评论 -
foreach中使用return失效
foreach 无法在循环过程中停止foreach 无法在循环过程中停止,哪怕return也不行,所以会返回一个undefined解决方案使用for使用一个变量讲需要返回的值存起来 getItemss(e) { let addressname = ""; this.addressRadio.forEach((ele) => { if (ele.adcode == e) { addressname = ele.city +原创 2021-06-17 11:23:25 · 594 阅读 · 0 评论 -
Vuex数据清空方法(用于用户登出等操作)
Vuex持久化传送门:Vuex数据持久化由于项目中需要一个用户登出的功能,而数据放在Vuex中在登出没有刷新时数据并不会更新所以找到了这样一个很不错的方法将state以各种方式保存注册时调用函数赋值清空时再将保存的state赋值替换当前的stateover首先默认state时要用新的方法注册把数据写在函数的返回值中(其他方法也可以只要能调用)const getDefaultState = () => { return { token: getToken(),原创 2021-06-02 16:26:11 · 10939 阅读 · 2 评论 -
git代码流程(提交/合并/冲突处理)
进入git首页点击fork复制一份代码到自己的线上库点击进入该项目fork地址(就是这个位置)克隆代码到本地在本地你可以自己随便搞 分支、开发、合并开发结束后优先拉取远端代码本地合并(若没有冲突下一步)开发结束后点击这里和并请求点击创建新的合并左侧为待合并、右侧为合并选择复核人员待合并/合并...原创 2021-05-26 15:39:52 · 201 阅读 · 0 评论 -
javaScript你不知道的闲杂知识
页面端的js避免延迟有些需要很久的js引入时,尽量放在下面(有可能因为加载这个文件导致渲染延迟)前端访问的基本流程注释与执行符///**/;尽量加上 或者下载一个插件变量解析过程以及变量提升js代码执行之前会预先将代码预解析一遍 var web = "hdcms";包含两个过程 var web; web = "hdcms";在浏览器执行之前会预先加载第一步(无论程序将是否执行)例如:if(false){var sam =原创 2021-05-25 21:13:16 · 203 阅读 · 3 评论 -
axios响应拦截器错误处理及思想
axios的拦截器分为两部分(以后源码还是要读的)服务器状态为300以下服务器状态为300+// 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });// 添加响应拦截器axios.interc原创 2021-05-17 10:28:48 · 6669 阅读 · 6 评论 -
Vue-element-admin用户鉴权管理(路由+按钮级别)
定义router.js引入官方layout组件创建权限要求基页创建权限要求界面注册路由写一些公用路由方法import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)/* Layout */import Layout from '@/layout'export const constantRoutes = [ { path: '/login', component: () => i原创 2021-05-13 09:28:36 · 1438 阅读 · 0 评论 -
Vue接口封装
首先根据接口写好对应页面的请求内容如图尽量保证js文件名称与页面文件名称相同(易于查找)根据文件目录动态引入/导出接口提高便捷性/** * 自动引入当前文件夹下所有module * require.context(directory, useSubdirectories = false, regExp = /^.//); * @param {String} directory 读取文件的路径 * @param {Boolean} directory 匹配文件的正则表达式 * @param原创 2021-05-12 18:01:24 · 626 阅读 · 4 评论 -
Vue高德地图api使用指南(动态渲染信息窗体)
项目中用到了高德地图API,写完后感觉功能/结构都很散乱,自己整理一下留以备用地图动态渲染样式(卡片内容可自定义)地图API的引入直接采用古老的方式index.heml中引入jsindex.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge原创 2021-05-06 13:55:28 · 1312 阅读 · 1 评论 -
js常用事件合集
项目中发现别人写的这个:不知道是什么 查了之后才发现是事件的坑 结合别人的代码填上鼠标事件onclick 当用户点击某个对象时调用的事件句柄。oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发ondblclick 当用户双击某个对象时调用的事件句柄。onmousedown 鼠标按钮被按下。onmouseenter 当鼠标指针移动到元素上时触发。onmouseleave 当鼠标指针移出元素时触发onmousemove 鼠标被移动。onmouseover 鼠标移到某元素之上原创 2021-04-21 17:13:40 · 375 阅读 · 0 评论 -
近期对Vue中ip的部分理解(以及$emit、$on、$once、$off、commit、dispatch)
利于组件之间通信相当于一个收发室创建:import Vue from 'vue'const bus = new Vue()// 清除监听事件bus.$clear = function (types = []) { let that = this if (types) { if (typeof types === 'string') { types = [types] } if (types instanceof Array) { for (原创 2021-04-20 15:54:38 · 393 阅读 · 0 评论 -
npm包发布流程
1.写好自己的代码2.代码根目录npm init3.按照提示完成类似以下内容的输入package name: (test-projects)version: (1.0.0)description: this is my test-project for npm publishentry point: (index.js)test command: hello world.git repository: (https://github.com/loushengyue/test-projec原创 2021-04-13 16:38:13 · 165 阅读 · 0 评论 -
vue的深度监听(对象数组同理)
昨天在做项目时遇到了一个问题在Vue中监听obj.name时新增了一个属性 但是发现属性并没有变化后来查询了官方文档发现Vue不允许动态添加prototype来执行深度监听如下:<template> <div class="about"> <h1>{{dataList.name}}</h1> <h1>{{dataList.id}}</h1> <h1>{{dataList.type}}&l原创 2021-04-13 14:11:58 · 402 阅读 · 0 评论 -
用swiper实现tab列表切换
结果如下:代码如下:<swiper class="swiper-class swiper-no-swiping" :options="swiperOption"> <!-- 再次注意 指令内要用带引号括起来 --> <swiper-slide> <van-list v-show="!page" offset="0" v-model="my原创 2021-04-13 11:32:36 · 1038 阅读 · 0 评论 -
关于最近项目中使用vant的一些总结
vantUi是有赞团队开发的一款针对于小程序及手机端的一款UI框架使用时非常方便 但是其中一些bug也很多 把项目中遇到的坑及小tipes分享一下供自己记忆同时也分享给大家好好读文档 好好读文档 好好读文档 !importantList 列表list列表组件完全是全自动的自动请求、自动删除loading、页面刷新自动更新。。。总之在list中你只要做两件事:在请求数据== 数据库数据 时给list一个finished状态填写你所需要的请求函数重用list导致的bug在写如上代码原创 2021-04-13 11:03:24 · 882 阅读 · 1 评论 -
近期代码习惯的一些总结
变量命名尽量起一些名字较短 通俗易懂的id不要搞得太长看着不舒服例如:listForExmation 可以写成:list4exma变量整理将有联系的代码整理成一个对象,调用简单,看代码也很清晰例如:listfor1,listfor2,listfor3,listfor4可以写成listfor:{listfor1,listfor2,listfor3,listfor4}调用直接点根据返回的数据适当设置类型列表比如传过来的格式:[{},{},{},{}]接收也可以用同样的格式然后写一个forEa原创 2021-04-13 10:18:28 · 97 阅读 · 0 评论 -
js中的DOM
什么是DOM?将我们写好的结构变成obj={}的形式就是dom浏览器会对我们的代码进行自动编排如:没写到body中的内容回到body中id =hdhdh没加引号也会自动补全table中没写到tr/td中的会移动到table外将这些不规则的操作整理一下才能变成dom才可以操作解析顺序以及技巧节点:不单单包含标签、还包含文本等解析顺序 script加上defer属性可以延迟加载window.onload在窗口加载完毕后加载settimeout将其变成异步任务放在下面节点对象与原创 2021-04-11 21:38:44 · 90 阅读 · 0 评论 -
JS实现localstorage搜索历史记录
由于localstorage不支持数组所以需要parse、stringfy来处理 let id = '123'; let history = []; localStorage.getItem("searchHistory")?history= JSON.parse(localStorage.getItem("searchHistory")) :history=[]; console.log(history); if(history.length !原创 2021-03-29 10:28:16 · 579 阅读 · 0 评论 -
微信小程序实现水平+垂直滚动
要点swiper内部套scroll-view注意:1.scroll竖直滚动高度不能给百分比要给px/rpx2.swiper内部item posiiton定位高度100%3.swiper高度要给定值4.如果横向滚动也要给水平的宽度代码xml <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab"> <swiper-item class="ta原创 2021-03-15 15:08:00 · 801 阅读 · 0 评论 -
微信小程序常用api
1.wx:for <view class="jira-card" wx:for="{{jiraArray}}" wx:for-index="idx" wx:for-item="itemJira" wx:key="idx"> <card itemJira="{{itemJira}}" data-item="{{itemJira}}" bindtap="goDetail"></card> </view>itemJira:循环数据原创 2021-03-12 15:22:05 · 403 阅读 · 0 评论 -
react项目构建
安装:npm install -g create-react-app创建项目:create-react-app 【项目名称】执行 cd todolist npm start原创 2021-03-06 09:37:34 · 99 阅读 · 1 评论 -
微信小程序输入框上移问题
微信小程序输入框上移问题缺陷:输入框顶起整个页面 包括自定义顶栏解决方式:给input设置adjust-position="{{false}}"后自定义input高度wxml <view class="submit" style="bottom:{{bottom}}px"> <view class="serch-view"> <input bindconfirm="toSubmit" value="{{code}}"原创 2021-03-05 10:09:51 · 1732 阅读 · 1 评论 -
有关微信小程序scroll-view失效的问题
有关scroll-view失效的问题正常可以滚,父元素设置position:fiexd后无法滚动;一开始以为是fiexd的原因;然而并不是 本身scroll就没有生效,而是容器在移动;仔细阅读文档; <scroll-view class="history" style="height: 1000rpx;" scroll-y="true" scroll-with-animation scroll-top="{{scrollTop}}" >ok...原创 2021-03-05 09:25:21 · 870 阅读 · 1 评论 -
微信小程序wxs 时间戳转化为时间(ios、android适配可自定义各种格式)
<wxs module="a"> var change = function(value) { value = value.replace(".000+0000","Z"); var time = getDate(value); var year = time.getFullYear(); var month = time.getMonth() + 1; var date = time.getDate(); var hour = time.g原创 2021-03-01 16:09:10 · 634 阅读 · 0 评论 -
z-index失效解决方法
z-index失效的原因1、一般z-index的使用是在有两个重叠的标签,在一定的情况下控制其中一个在另一个的上方出现。2、z-index值越大就越是在上层。z-index:9999;z-index元素的position属性要是relative,absolute或是fixed。3、z-index在一定的情况下会失效。①、父元素position为relative时,子元素的z-index失效。解决:父元素position改为absolute或static②、该元素没有设置position属性为非s原创 2021-02-19 10:17:36 · 9345 阅读 · 0 评论 -
微信小程序登录及请求封装
目录结构app.js//app.js// const util = require('/utils/util.js')// import {requst_session_key} from './pages/api/index'App({ onLaunch: function () { //获取胶囊按钮信息 let menuButtonObject = wx.getMenuButtonBoundingClientRect(); //获取机器信息 wx原创 2021-02-05 14:22:27 · 1124 阅读 · 0 评论 -
watch监听 vuex及路由
watch:{ '$store.state.userNumber'(val){ if( !this.isLogin){ this.Login=val } }, $route(to,from){ if(to.path=='/login'||to.path=='/logins'){ this.isHeader=false }else { this.isHeader=true }原创 2021-02-04 16:52:10 · 224 阅读 · 0 评论 -
技术栈
前端全屏兼容组件https://github.com/sindresorhus/screenfull.js在线PPT(markdown)https://github.com/ksky521/nodepptvue 拖拽效果https://github.com/SortableJS/Vue.Draggable移动端表格https://xuliangzhan_admin.gitee.io/vxe-table/v2/#/table/start/install(vue 2.6)https://原创 2021-02-01 15:39:23 · 76 阅读 · 0 评论 -
vue实现倒计时功能
见如下代码<template> <div> <div class="content"> 数据总采集次数:{{ clearTimes }} | 距离下次更新<span >{{ minute }}:{{ second }}</span > </div> </div></template><script>export default原创 2021-02-01 10:47:53 · 571 阅读 · 0 评论 -
小程序获取蓝牙连接列表
官方文档上的样例直接用:xml<wxs module="utils">module.exports.max = function(n1, n2) { return Math.max(n1, n2)}module.exports.len = function(arr) { arr = arr || [] return arr.length}</wxs><view>我是蓝牙测试页面</view><button bindtap="原创 2021-01-27 19:17:20 · 1269 阅读 · 2 评论 -
小程序操作蓝牙读写
xml<wxs module="utils">module.exports.max = function(n1, n2) { return Math.max(n1, n2)}module.exports.len = function(arr) { arr = arr || [] return arr.length}</wxs><view>我是蓝牙测试页面</view><button bindtap="openBluetooth原创 2021-01-27 19:15:51 · 649 阅读 · 0 评论 -
微信小程序分享卡片(一秒钟学会)
XML:<view class="container log-list"> <view>我是分享页面</view> <!-- button与menu一个配置公用 --> <button open-type="share">点我分享该页面</button></view>js:Page({ // button与menu一个配置公用 onShareAppMessage: function (res)原创 2021-01-27 13:46:57 · 2615 阅读 · 2 评论 -
存入vuex中数据不渲染/vue-tools无显示
解决方式:1.state内的数据要设置一个初始值2.有时要用computed监听3.不要完全信任vue-tools(垃圾东西 参考就好)原创 2021-01-25 16:48:34 · 505 阅读 · 0 评论 -
Vue中阿拉伯数字与汉字的相互转换
用法: numberfilter (num) { const changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'] // changeNum[0] = "零" const unit = ['', '十', '百'] num = parseInt(num) console.log(num); const getWan = (temp) => { co原创 2021-01-25 13:19:35 · 2991 阅读 · 2 评论 -
突破谷歌浏览器字体最小为12px限制
用transform的scale()属性来控制原创 2021-01-21 19:00:04 · 558 阅读 · 0 评论 -
解决/10。toFixed四舍五入的方法
this.countf = ((res.data.count / 10)+0.5).toFixed(0)原创 2021-01-21 13:30:59 · 183 阅读 · 0 评论 -
javascript执行顺序轻解
很久之前就看到javascript的宏任务和微任务但是一直都没有详细了解过,今天无聊索性就整理一下吧~首先明确一点:javascript是单线程语言也就是一条高速公路,所有的多线程都是模拟出来的。javascript的事件循环机制同步任务优先执行,执行结束后执行异步任务,然后在执行下一个同步周而复始。setTimeout1.仅仅是在所规定的时间后将其任务放入队列,依旧会等待同步任务执行2.HTML标准定时器内最低是4毫秒,写0也是4,类似字体大小最小为12pxsetInterval1.基本原创 2021-01-18 22:34:15 · 164 阅读 · 0 评论