- 博客(47)
- 收藏
- 关注
RSS订阅原创 使用sessionStorage存取值的问题——(日常bug)
今天在做项目的时候，后端的接口返回数据是两个状态：1、如果用户已经绑定过，则返回：{ login_token: “XXXXX”, user_id: “XXXX” }2、如果用户没有绑定过，则返回： { micro_app_user_id: “XXX” }我需要将后端返回的值存起来，然后在后面的页面中做判断，不同的返回进行不同的操作，而我为了省事，在后端返回数据的时候，不管返回的东西是什么，直接将三个值存了起来：if (res.status === 'success' && res
2020-11-23 22:29:24
1673
2
原创 uni-app 在mac电脑连接安卓手机进行真机调试
1、首先我们需要将电脑与手机连接起来，这里我使用的连接助手是：HandShaker；手机和电脑都下载HandShaker，并且使用数据线将二者连接起来2、我的手机是小米8，找到开发者选项，初次需要激活开发者选项，点击设置->我的设备->手机型号，多次点击手机型号就会激活开发者选项。3、退回到设置，进入“更多设置”里面，找到“开发者选项”进入，“开启开发者选项”并且将下面的调试，“USB调试”以及“USB安装”打开：4、稍微等待1-2分钟，看到HBuilderX中“运行到手机或模拟器
2020-06-02 18:08:29
5540
原创 vue报错：Maximum call stack size exceeded
如图，我的项目路由跳转的时候报这个错误原因是我引用的组件名称和组件的name属性一样，导致这种情况
2020-05-19 14:23:39
388
原创 vue中computed的缓存以及getter和setter
computed会基于它们的依赖进行缓存，如果数据没法改变则computed刷新时不会重新执行什么意思呢？我们看下面的代码：methods: { methodsNow: function () { console.log('methods') }},computed: { computedNow: function () { console.log('computed') return this.cData },}template中我们使用methods中的me
2020-05-09 10:00:04
2450
原创 创建vue项目并上传github
一、创建vue 项目1、使用Vue CLI v4.3.0创建空白vue项目首先执行：vue create 项目名字vue create my-project选择手动配置：依次选择以下操作：二、关联本地项目和github仓库1、在github中新建一个仓库：2、在本地创建一个文件夹，在终端中打开本文件夹，执行下面的操作：git initgit remote a...
2020-04-26 16:31:24
651
原创 nginx 报错 403
首先看一下是不是端口被占用：如果在执行sudo nginx 的命令时，出现nginx: [emerg] bind() to 0.0.0.0:8080 failed (48: Address already in use)这说明8080端口已经被占用了，要不就换端口号，要不就kill掉8080端口的进程，我选择换端口号：执行下面的命令进入到nginx的配置文件中：sudo vim /usr/...
2020-04-15 14:04:26
1506
原创 Mac 下载nginx (使用brew)
Mac 系统下载nginx,需要使用brew，所以需要我们现下载homebrew，但是因为下载太慢，所以建议使用国内镜像来下载，具体的下载过程我贴链接出来：国内镜像下载homebrew链接这篇文章讲的非常详细，，大家可以参考一下，其中有个步骤是：我的系统是macOS Mojave 10.14.6，在我的脚本文件中没有BREW_REPO 和 CORE_TAP_REPO这两行的信息，所以略过了...
2020-04-15 13:47:20
2962
原创 vue项目设置rem
首先在App.vue中设置：<script>export default {}document.addEventListener('DOMContentLoaded', () => { const html = document.querySelector('html') let fontSize = window.innerWidth / 10 fontSiz...
2020-04-12 16:25:48
386
原创 vue3.x版本打包之后的index.html打开空白
index.html打开之后是空白是因为文件的资源路径不对，这个时候我们需要在根目录下创建一个vue.config.js:在里面添加配置：module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/'}如果是3.3版本之下的，就把publicPath换成baseUrl...
2020-04-08 10:44:28
807
原创 ERROR Invalid options in vue.config.js: "baseUrl" is not allowed
新项目用的是vue-cli 4.x版本，在vue.config.js中运行报这个错误：module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? './' : '/'}这里要把baseUrl换成publicPath，在vue-cli.3.3版本后 baseUrl被废除了，改成下面的：module.export...
2020-04-08 10:04:12
288
原创 node.js学习5-mysql
1、数据库直连首先我们需要先npm install mysql，接着在js文件中实现数据库的连接://index.jsvar mysql = require("mysql");var connection = mysql.createConnection({ host: 'localhost', port: 3306, user: 'root', password: '5...
2020-04-05 17:08:50
112
原创 node.js学习4-get、post
1、get提交表单下面是一个简单的表单提交的demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
2020-04-02 16:11:15
91
原创 node.js学习3--http
1、http创建服务器：(1)、方法一var http = require("http");//这里的http服务响应是在http创建服务的时候调用了一个回调函数http.createServer(function(req, res){ res.write("http server"); res.end();}).listen(8081);(2)、方法二var http =...
2020-03-31 17:11:57
126
原创 node.js学习（2）
1、异步io处理函数–fs模块在nodejs中几乎都是使用异步处理，其中的文件读取使用fs模块进行，fs模块的使用方法如下：首先在chapter2文件加中创建demo.js以及file.txt文件，在file.txt中写上一些文字：“我是谁”，接着在demo.js中读取该txt文件var fs = require("fs");fs.readFile("file.txt", "utf-8",...
2020-03-31 15:36:27
86
原创 node.js学习（1）
1、exports新建一个文件夹chapter1，在此文件夹中创建一个module.js的文件，在这个文件中使用exports将一些属性或者方法暴露出来，代码如下：var myName;exports.setName = function(username){ myName = username}exports.getName = function(){ console.log("我...
2020-03-20 14:54:53
114
原创 overflow: hidden的作用
1、溢出隐藏这个作用就不过多解释了，超出的内容隐藏2、清楚浮动父元素没有设置高度，高度由子元素内容撑开。当父元素的所有子元素全部设置浮动(float)之后，子元素会脱离标准流，不占位，这个时候的父元素的高度就会显示为0，例如：.box{background-color: skyblue;overflow: hidden;}.content{width: 100px;height: 100...
2020-02-17 19:50:26
244
原创 vue项目中使用stylus
首先下载stylus：npm install stylus --save接着我们再安装一个依赖stylus-loader：npm install stylus-loader --save然后我们就可以在项目中使用stylus了
2020-02-11 14:17:49
155
原创 better-scroll的使用--去哪儿网(五)
better-scroll的简单使用安装better-scrollnpm install better-scroll --save使用better-scroll，要保证符合下面的dom结构本人在写的项目的结构为下面展示：第一层的元素list给加了： “overflow: hidden”，在本元素上加上ref属性，该属性可以帮助我们获取到dom元素<div class="li...
2019-12-15 20:54:48
140
原创 解决:swiper动态获取数据默认显示最后一个轮播页--去哪儿网(二)
在vue中使用swiper，如果是动态获取的数据，则会默认显示最后一个轮播页。这是因为vue在一开始加载的时候是根据空数组创建的，所以我们只需要做个限制让swiper在数组不为空的时候创建显示。使用计算属性获取swiper数据的长度computed: { showSwiper () { return this.swiperList.length }}在html中使用v-if=“...
2019-12-12 15:34:38
1419
原创 axios的使用以及/api/路径的配置--去哪儿网(三)
vue中使用axios首先需要npm下载axios的安装包npm install axios --save在main.js中引入axios，这样就可以在全局使用axios了//main.jsimport axios from 'axios'然后在项目根目录下的static中创建mock文件夹，里面放测试用的json文件在需要调接口的文件中使用axios调取接口//Home.vu...
2019-12-10 16:59:41
583
原创 在vue项目中使用iconfonts——去哪儿网(一)
首先在字体图标库官网找到需要的字体图标，然后加入到购物车中，在购物车中添加至项目，下载字体图标至本地，将下载的文件中的字体样式css文件以及字体文件提取出来，放到vue项目中assets下的styles文件夹下,将字体文件放到新建文件夹iconfont下，打开iconfont.css文件，修改引入的字体文件的路径因为可能每个页面都需要引入iconfont，所以直接在main.js中引入...
2019-12-06 15:26:25
374
原创 dateTable的简单使用
使用这个是因为昨天一个小伙伴问我怎么修改里面的配置，但是我没有用过这个东西，所以就稍微研究了一下。dataTable使用的时候只需要在table标签中写thead就行，tbody是不需要写的，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
2019-11-14 17:22:04
1154
原创 javascript中的replace学习
之前一直都觉得这个方法就是替换呗，结果今天看到了一段代码，第一眼看的时候有点迷茫，再看的时候更迷茫，就稍微研究了一下：迷茫代码就是当replace方法的第二个参数是一个函数的时候，这个函数的各个参数分别都是什么东西，废话不多说了，上代码：function toHump(name) { return name.replace(/(a)(\w)/g, function(all, letter)...
2019-11-12 16:48:55
110
原创 nodejs学习（一）
1、文件系统读取文件（fs）使用fs需要在js文件中引入fsvar fs = require('fs');//nodejs读取文件的操作是异步的，所以会先执行console.log("hello world")fs.readFile('./demo.txt', (error, data) => { if(error){ console.log(error); }else{ ...
2019-11-11 11:24:49
117
原创 Object.keys()方法使用
Object.keys()方法会返回一个由给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for…in循环遍历该对象时返回的顺序一致，如果对象的键-值都不可枚举，那么将返回由键组成的数组var obj = [1,2,3]var obj1 = { name: '张三', age: 17, action: { 123: '123', 456: '456'...
2019-10-17 16:44:53
19749
原创 document.documentElement.scrollTop获取不到top值
获取页面纵向滚动位置的时候使用了document.documentElement.scrollTop，在电脑上是可以获取到的，但是到手机上就获取不到这个值了，所以我们需要处理一下兼容性：const top = document.documentElement.scrollTop || window.pageYOfset || document.body.scrollTop...
2019-10-17 16:15:02
1264
原创 vue项目使用IP地址访问
在vue项目npm run dev运行之后，会提示我们使用localhost:8081访问但是有时候我们需要在手机上查看显示效果，就需要在同一个局域网下使用ip替代localhost，但是直接写ip是不行的，我们需要配置一下dev的执行，在package.json中添加代码：然后就可以通过IP地址访问项目了...
2019-10-17 16:05:25
2686
2
原创 轮播组件出现滑动不会整屏走的现象--（慕课网-去哪儿网）
在写去哪儿网的详情页的时候出现一个问题就是，一开始进入这个页面的时候轮播组件是隐藏的，点击头部则伦比组件显示，但是滑动轮播的时候发现不会整屏的滑动，而是一点点的动，如下图：这里是因为swiper一开始是隐藏的，点击banner图显示，此时的dom结构发生了变化，则swiper的宽度计算就会出问题，导致这种情况解决办法：使用observeParents和observer这两个属性这两个属性...
2019-10-12 11:30:43
272
原创 递归组件使用--（慕课网-去哪儿网）
所谓的递归组件就是在组件中调用自身组件在我们写项目的时候，一般后台返回给我的数据都是嵌套的，类似于下面这种：而有的时候我们需要将二级列表或者三级列表全部显示在页面中，这个时候我们就可以使用递归组件了在Detail组件中，我们引用了detail-list组件，并且传了个参数list，//Detail.vue<template> <div class="detail"...
2019-10-12 11:25:32
197
原创 detail页的头部滚动渐隐渐现效果以及全局事件的绑定和解绑--（慕课网-去哪儿网）
在detail页面中，需要有一个头部header渐隐渐现的效果头部组件分成两步去写，一个实现图1上面的圆框，一个实现图2上面的横条导航，然后用一个变量true/false判断显示和隐藏给header-fixed绑定一个动态属性style=“opacityStyle”，接着在data中定义这个opacityStyle然后就要绑定滚动事件，判断当页面滚动到某个条件时，headerbas隐藏...
2019-10-11 14:14:52
529
原创 Vue-Router2--(vue-去哪儿网)
1、编程式导航除了使用 router-link>创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现在vue实例中，我们可以通过route来访问路由实例，所以可以调用this.route来访问路由实例，所以可以调用 this.route来访问路由实例，所以可以调用this....
2019-10-11 13:36:52
122
原创 Vue-Router1--(vue-去哪儿网)
1、开始：src下的router里面的index.js中是路由的配置，在main.js中引入了改文件就可以使用使用router-link来做导航，类似于html中的a标签//HelloWorld.vue<router-link to="/bar">Go to bar</router-link>index.js中的路由配置//index.jsimport Vu...
2019-10-10 19:04:13
139
原创 使用keep-alive提高网页性能（vue--去哪儿网）
在未使用keep-alive时，点击路由跳转每次都会重新请求数据，这个时候可以使用keep-alive来解决这个问题//App.vue<div id="app"> <keep-alive> <router-view/> </keep-alive></div>使用keep-alive之后会产生一个问题就是数据不会重...
2019-09-26 22:33:51
135
原创 vue使用localStorage以及mapState、mapActions、mapMutations等辅助函数（vue--去哪儿网）
使用localStorage当选中某一个城市之后，如果没有使用缓存那么在刷新页面或者重新打开页面的时候，城市会变成初始化的城市，这个可以通过localStorage来解决在用户通过mutation来改变数据的时候，可以使用localStorage来存储数据，而state的值优先从localStorage中获取//index.jsstate: { city: localStorage.c...
2019-09-26 21:47:02
234
原创 vuex实现城市定位的功能（vue--去哪儿网）
home.vue组件的子组件header.vue以及city组件的子组件list.vue需要使用公共数据，在list.vue组件中点击城市，则该城市的名字页会显示在header.vue中，这里使用的是vuex管理这个数据npm install vuex --savestate在src目录下创建一个store的文件夹，再新建文件index.js，在index.js中使用vuex//inde...
2019-09-26 12:03:41
572
原创 搜索实现（vue--去哪儿网）
搜索的下拉菜单样式做好之后就是搜索的逻辑实现了首先给input一个v-model=‘keyword’，实现数据的双向绑定，然后在data中定义一个keyword和一个空数组listdata () { return { keyword: '', //搜索的关键词 list: [], //搜索下拉菜单要循环的数组 timer: null /...
2019-09-25 09:53:24
226
原创 城市选择26字母页 && 性能优化（vue--去哪儿网）
去哪网做到根据字母选择城市的页面，记录一下这个的实现首先在给循环出来的li元素上添加点击事件，通过点击事件获取到所点击的字母，通过$emit向父组件发送事件，并将获取到的元素传到父元素中handleLetterClick (e) { this.$emit('change', e.target.innerHTML)},父元素接收并定义事件，现在data中初始化即将收到的字母，然后将子组...
2019-09-24 11:21:22
356
原创 百度浏览器关于底部fixed定位元素问题
最近在写一个移动端官网，客户要求加上客服咨询的小悬浮框（如下图），特别简单的使用fixed定位之后，发现在百度浏览器上，这个悬浮框会闪现之后就不见了，其他浏览器上则正常显示，找了挺长时间的原因，才发现是百度浏览器的广告屏蔽机制。最后使用::after伪元素解决的，代码如下：.kfBtn{ position: fixed; right: 0; display: block; bo...
2019-09-20 17:40:21
764
1
原创 vue中简单使用swiper以及stylus修改其他组件中元素的样式
1、在vue中使用swiper，可以在github上找到vue-awesome-swiper查看使用方法首先下载：npm install vue-awesome-swiper --save接着在入口文件main.js中引入swiperimport Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'import...
2019-09-19 10:36:39
610
原创 vue知识点（五）【动画】
vue知识点（五）1、vue中css动画原理2、自定义添加class动画3、Vue中的使用animate.css库(5-2、5-3)4、vue中的js动画与velocity.js（5-4）5、vue中多个元素或组件的过渡（5-5）6、vue中的列表过渡（5-6）7、vue中的动画封装（5-7）1、vue中css动画原理给需要添加动画的元素包一层，在这个transition元素上加上name属性...
2019-08-27 10:49:11
169
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人