- 博客(206)
- 收藏
- 关注
RSS订阅原创 实现vue项目可通过 IP 和 localhost 同时访问
今天遇到了一个问题，好在解决啦。 问题是这样的，我本地的IP地址，在我的vue项目里却无法访问。如下图所示。傻傻怀疑是防火墙的问题。。。 解决方法：1、在项目 config文件夹下的index.js文件中，修改host为0.0.0.02、修改package.json文件中的dev，在后面加上--host 0.0.0.0，记得中间空个格 这样可以实现本地IP地址访问，但是启动服务器时，自动打开的网页是0.0.0.0开头的，如果想以IP地址开头，需要进行下一步操作。3、在build文
2022-04-26 17:22:44
3721
3
原创 vue-cli2脚手架项目，如何使用less全局变量，解决@textColor is undefined问题
最近想实现个一键换肤，需要配置全局less，控制全局变量。 刚开始卡住了，我是先后安装了style-resources-loader和vue-cli-plugin-style-resources-loader，以及less-loader和less，然后配置vue.config.js，这样搞的，但是不起作用，一直报错，但是朋友那里就没问题。我的报错内容如下： 今天恍然大悟，突然反应过来大概是vue-cli的版本有所不同，因为我这里的是2版本的，朋友那里好像是3版本的，我创建的是基于 webpac
2022-04-24 21:08:53
1583
2
原创 vue中如何使用和风天气插件
想给我的个人博客添个展示天气的，网上一找看到了中国天气、和风天气这两种，附一下这两个的官网链接。中国天气：https://cj.weather.com.cn/plugin/index和风天气：https://widget.qweather.com/ 我刚开始是想对比一下这两个，结果发现中国天气预览没显示出来，所以直接选择了 和风天气。1、创建 打开链接后，我选择了天气简约插件。 自己取一个插件名称，根据自己的需要勾选内容，和修改样式。 点击生成代码时，会提示你登录，如果没有
2022-04-24 14:49:02
3326
6
原创 vue使用 APlayer+Meting实现音乐播放，支持多平台音乐：网易云、腾讯、虾米、酷狗、百度
我之前写过一篇博客：使用 APlayer 实现音乐播放器，虽然 APlayer 让我实现了想要的音乐播放器效果，但是音频列表 audio 的音频链接、音频封面、歌词等，是需要自己去补充的。 那么这些数据从哪里来呢？ 我昨天有发愁一会儿会儿，也去搜了获取音乐列表的接口，可以发请求去获取数据嘛。 也有瞅见MetingJS，A powerful plugin connect APlayer and Meting，一个连接APlayer和Meting的功能强大的插件，附上GitHub地址：https
2022-04-24 11:35:00
4239
7
原创 实现随机标签，字体大小、颜色随机显示
最近写毕业，想实现一下如下图所示的效果（这里以学弟个人博客里的为示例）： 如上图所示，随机标签，字体颜色随机，字体大小随机。 下面贴一下我的实现代码。 <template></template>中的代码：<router-link v-for="item in tagList" :key="item.id" :to="`/tag/${item.id}`" :style="{ color: getColor(), fontSize: getSiz
2022-04-19 10:51:42
1936
1
原创 使用 APlayer 实现音乐播放器
最近写毕设，想要实现一个音乐播放功能。大概样子如下面的图所示： 还有吸顶效果，吸顶在左下角： 下面来说一下实现过程。一、安装npm install aplayer --saveyarn add aplayer二、引入import 'APlayer/dist/APlayer.min.css';import APlayer from 'APlayer';三、使用 首先是<template></template>标签里的代码：<div id
2022-04-11 11:23:01
2827
5
原创 在 vue 中使用 vue-typed-js 实现打字机效果
这篇博客和我的博客：原生 JS 实现打印机效果，一个字一个字出现，再一个字一个字消失，如此循环是实现的相同功能——打字机效果。即，一个字一个字出现，再一个字一个字消失，如此循环。如下图为大概样子： 我是在用原生js实现后看到typed.js这个js插件，进而找到了 vue-typed-js这个插件的，上面还有react的，位置如下图所示。 下面说一下 vue-typed-js这个插件的使用。一、安装npm install --save vue-typed-js二、引入import V
2022-04-11 11:07:08
7644
7
原创 原生 JS 实现打印机效果，一个字一个字出现，再一个字一个字消失，如此循环
最近写毕设时候，打算实现一个打印机效果放在首页，即，一个字一个字出现，再一个字一个字消失，如此循环。如下图为大概样子： 最初我是用原生js实现的。只不过感觉代码有点…冗余吧，但是功能是没问题的，亲测可用。下面粘贴一下代码： 首先是 html代码：<div class="desc"> <span id="text"></span> <span id="bar">|</span></div> 然后是 js代码
2022-04-11 11:05:42
2642
原创 解决用 node 开发项目后端接口时，跨域问题
之前在用 vue 或者 react 开发项目时，也曾遇到跨域问题，当时都是用 proxy解决的，现在用 node 开发项目后端接口，打算在后端这里进行处理。 我这里是用的 cors 先npm install cors安装一下 cors， 然后在 node+express+mongodb 项目里的入口文件 app.js 文件里引入const cors = require("cors"); 最后在 app.js 文件里 加入以下代码：app.use(cors({ origin: ['
2022-04-04 11:53:07
1553
原创 使用 Node + Express + MongoDB 开发项目的后端接口
最近在写毕业设计，后端代码必不可少，这是要逼我成为全栈啊。。。 开发选择了 node，经过我一天的研究，终于捣鼓通了。。。 过程中遇到了不少bug，就很莫名其妙的bug，就很￣へ￣，最后重装了node、npm、mongodb，再搞一搞，总算通了，可能之前多少有些版本问题吧。 来粘一下使用 Node + Express + MongoDB 开发项目时，应该怎么搞吧。接我的上篇博客：关于node（5）—— 创建 Node + Express + MongoDB 项目一、各文件内容1、新建db
2022-04-04 11:45:59
3232
原创 关于node（5）—— 创建 Node + Express + MongoDB 项目
最近开始搞毕业设计，我一个小小的前端开发被迫迈向全栈，(⊙︿⊙) 之前自学的 node 基础已经忘干了，害，从头再来。一、安装安装 node.js 下载地址：https://nodejs.org/en/download/如果项目使用的是node.js的express框架，需要安装expressnpm install -g express npm install -g express-generator安装 mongodb 下载地址： https://www.mon
2022-04-02 16:03:07
1933
原创 如何做字母导航（手机通讯录）
最近项目开发中有个需求是做形如手机通讯录的字母导航，如下图示例那种。 最近是用智能小程序开发的项目，所以就贴一下智能小程序实现的代码，大家可以根据自己的需要更改样式或者逻辑。目前自测了是没有问题的。 首先是一个函数，这个函数是实现，把中文开头的拼音的首字母提出，比如上面图片里的S；把英文开头的首字母提出；把数字等归为"#"。 这里我当时卡壳了半天，思维有所受限，还是带我的导师分分钟搞定的，哈哈，夸张了一下。pySegSort(arr, dataIndex) { if (!S
2022-03-02 16:42:17
1394
1
原创 你不知道的JavaScript 上卷 Part1
这篇博客躺在我的草稿箱里有一阵子了，差点给遗忘了哈哈。前言 最近开始喜欢读一些书，从书中找答案，在阅读中查漏补缺。 记得小学初中时候最爱看书了，如今却不知怎的，习惯性从网络中摄取知识，搜寻到的东西真真假假，甚至很多大同小异，读一些书，还是很有必要的。 《你不知道的JavaScript》上卷 直面当前 JavaScript 开发人员不求甚解的大趋势，嗯，说的就是我这种人，不求甚解，很多东西好像知道，问深了，又好像什么都不知道。 好了，长话短说，以便再次阅读，我阅读中做了以下笔记，希望帮到
2022-02-18 16:36:08
905
原创 json-server 的基本使用
最近在跟着尚硅谷学习axios时，发现了json-server，以前没了解过甚至没听说过这个东西，所以就来做个记录啦。一、什么是json-server 在平时的项目开发中，当后端还没有提供接口时，我们可能会选择mock数据，这个时候就可以选择json-server，来模拟请求和响应的过程。 可以这么理解，json-server是一个在前端本地运行，可以存储json数据的server。 github地址：https://github.com/typicode/json-server二、
2022-02-11 16:52:25
2709
2
原创 axios源码模拟实现
一、分析文件结构/dist/ 输出目录，最后输出的axios整体文件axios.js 未压缩的axios.min.js 压缩后的/lib/ 源码目录，所有的源代码都放在这里/adapters/ 请求的适配器http.js 实现http适配器（包装 http包），在 node.js向远程服务器发送请求时使用xhr.js 实现 xhr适配器（包装 xhr对象），在浏览器端发送请求时使用/cancel/ 定义取消功能Cancel.js 构造函数，用来创建取消时的错误对象Ca
2022-02-11 15:07:47
1659
原创 一文掌握 axios 基础
最近在公司实习，又到我技术分享了，看了看大家之前分享的，一时想不到分享啥了，发愁ing… 突然想起来最初面实习时，被问过 axios，就来系统的学习一下啦，看有没有什么可以作为分享的，害。一、axios 是什么 axios是一个基于promise的HTTP 网络请求库，可以作用于浏览器和 node.js中。它是 isomorphic的，即同一套代码可以运行在浏览器和node.js中。 在服务端它使用原生 node.js 的 http模块发送HTTP请求。 在客户端 （浏览器端）使用
2022-02-09 18:45:04
3241
原创 html+css实现左侧固定右侧横向滚动的表格（百度小程序中怎么写表格样式）
最近在用百度小程序写项目，遇到一个问题，设计图中有个左侧固定右侧横向滚动的表格，查看小程序文档组件，并没有完全一致的。 倒是有个差不多的，乍看差不多，实则完全不一样，方向什么的都不同，且未提供更改方向等的属性方法，所以无奈之下只能手写。又发现并不支持table、th、td等，所以只能用 view 拼凑咯。 以下是我整理的一个小Demo，由百度小程序 view 写法改成了HTML中的 div 写法，可能有点简陋，但是自己还是蛮满意的，😄。 先来看样子，红色边框是我定的外部宽度。 再来上代
2021-12-15 11:45:37
1237
1
原创 vue3那些事
一、vue 版本历史2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量级框架，最初命名为 Seed2013年12月，更名为 Vue，版本号是 0.6.02014年1月24日，Vue 正式对外发布，版本号是 0.8.02014年2月25日，0.9.0 发布，有了自己的代号 Animatrix，这个名字来自动画版的《骇客帝国》，此后，重要的版本都会有自己的代号2015年6月13日，0.12.0发布，代号 Dragon Ball，Laravel 社区（一款流行的
2021-12-12 17:31:46
3469
原创 Vue源码探秘之AST抽象语法树
文章目录前言一、抽象语法树是什么二、相关算法储备 - 指针思想三、相关算法储备 - 递归深入1、递归题目12、递归题目2（1） 转换函数写法1（2） 转换函数写法2四、相关算法储备 - 栈1、栈相关知识2、利用“栈”的题目：3、解题思路：4、涉及到的正则表达式相关方法：5、JS代码实现：6、运行结果：五、手写实现AST抽象语法树1. 新建文件夹，创建package.json2. 安装依赖3. 新建webpack.config.js文件，参考webpack官网进行配置4. 新建 www 文件夹，在该文件夹中创
2021-12-08 11:37:24
2165
原创 Vue源码之虚拟DOM和diff算法
文章目录前言一、snabbdom简介二、snabbdom测试环境搭建三、虚拟DOM和h函数1. 什么是虚拟 DOM2. diff是发生在虚拟DOM上的3. DOM如何变为虚拟DOM，属于模板编译原理范畴。4. h函数用来产生虚拟节点（vnode）5. 一个虚拟节点有哪些属性6. 创建虚拟节点7. h函数可以嵌套使用，从而得到虚拟DOM树8. 虚拟节点上树四、手写h函数五、感受diff算法六、如何定义是否是“同一个节点”七、创建节点时，所有子节点需要递归创建八、diff 处理新旧节点不是同一个节点时1、手写第
2021-12-08 11:30:41
770
原创 初识vue（17）—— 使用 element-ui 的 el-upload 实现文件下载与上传进度条
最近写项目遇到了上传文件显示进度条问题，后来网上学习了一波，最后整理了一下自己成功的方案。 每一部分代码如下： HTML代码：<template> <el-upload class="upload-demo" action="在这里写上传的接口" :show-file-list="false" :before-upload="beforeUpload" :http-request="handleRequest">
2021-09-09 15:09:02
1697
2
原创 初识vue（16）—— 使用 element-ui 的 el-table 时如何处理数据
在用 element-ui 的 el-table 写表格时，曾遇到这样一个问题，后端传来的值并不能作为我表格展示的内容，我需要进行处理。比如后端传来 1 代表 “是”，0 代表 “否”，我需要把对应的文字展示出来。 解决这个问题有两种方法。 以下是我临时写的一个小demo，用的是 element-ui 的 el-table，我想实现的效果是：在是否加密那一列，为 1 的显示为 “是”，为 0 的显示为 “否”。方法一：利用 Table-column Attributes 中的 formatt
2021-09-09 11:33:16
1822
原创 卑微实习生来补 Git 了
一、什么是Git Git是一个免费的、开源的 分布式版本控制系统 ，可以快速高效地处理从小型到大型的各种项目 。 Git易于学习，占地面积小，性能极快 。 它具有廉价的本地库 ，方便的暂存区域和多个工作流 分支 等 特性。 其性能优于 Subversion、 CVS、 Perforce和 ClearCase等 版本控制工具。二、什么是版本控制 版本控制是一种记录文件内容变化，以便将来查阅特定版本修订情况的系统。 版本控制其实最重要的是可以记录文件修改历史记录，从而让用户能够查看历史版本，方
2021-08-04 21:38:37
177
3
原创 初识 vue（15）—— element-ui 的引入与使用
一、安装npm i element-ui -S二、完整引入1、在 main.js 中写入以下内容：import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({ el: '#app', render: h => h(
2021-03-13 17:37:02
437
原创 如何在码云上创建项目
1、点击新建仓库2、输入仓库名称，注意下面的多选框不要勾选，然后点击创建3、点击后进入下图所示界面，同时点击键盘上的 window+r，输入cmd，然后进行 git 全局设置，依次输入下图框选内容4、如果已有 git 仓库，输入下图所示第二个框的内容，如果没有，输入第一个框的内容，这里我走第二个框。具体步骤如下：首先打开自己已经创建好的项目，然后cmd，依次输入下面代码git initgit status//查看状态git add .//把所有文件都添加到暂存区git com
2021-03-13 17:03:15
1344
原创 初识vue（14）—— 源码分析前的准备
文章目录一、准备知识1. [].slice.call(lis): 将伪数组转换为真数组2. node.nodeType: 得到节点类型3. Object.defineProperty(obj, propertyName, {}): 给对象添加/修改属性(指定描述符)4. Object.keys(obj): 得到对象自身可枚举的属性名的数组5. DocumentFragment: 文档碎片(高效批量更新多个节点)6. obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性二、三
2021-03-10 09:35:01
143
原创 前端学科面试题（来自硅谷视频）
一、作用域和值类型引用类型的传递题1：作用域var num1 = 55;var num2 = 66;//100function f1(num, num1) { // var num =55; // var num1 = 66; num = 100;//100 num1 = 100;//100 num2 = 100;//100 console.log(num);//100 console.log(num1);//100 console.log(num2);//100}// 55
2021-03-10 09:31:53
562
2
原创 初识vue（13）—— 解决 vue 跨域问题
当我们请求一个接口的时候，出现下图所示情况，说明请求跨域。那么如何解决跨域问题呢？用 vue 脚手架创建好项目后，可以在 vue 项目根目录下找到 config 文件夹，然后找到该文件夹下的 index.js 文件，最后找到下图所示位置的 proxyTable: {} 代码：在该处加入以下代码：proxyTable: { '/api': { // 匹配所有以 '/api'开头的请求路径 target: 'http://localhost:4000', // 应该在这里.
2021-02-20 16:36:52
238
原创 初识vue（12）—— 使用 swiper 实现轮播
swiper 中文网地址：http://www.swiper.com.cn/下载 swipernpm install --save swiper在需要用到swiper插件的组件中引入swiper
2021-02-19 17:24:10
162
原创 初识vue（11）—— 使用 swiper 时 引入css文件 报错
刚开始我用npm下载了 swiper ，照着视频所述在组件中引入，但报错，代码如下：初步怀疑是版本问题，打开 package.json 文件，发现版本过高，然后改成了版本4的重新运行发现仍然报错，怀疑css文件引错了。打开 node_modules 文件夹，找到 swiper 文件，发现并没有 swiper.main.css 文件，改为 swiper.css文件，再次运行，运行成功运行结果...
2021-02-19 10:51:01
686
原创 初识vue（10）—— vue-router 实现底部导航栏固定，组件切换
在实际项目中，我们常会需要设置导航，特别是在移动端，基本都需要设置个固定的底部导航。比如下图所示这种，这时我们就可以通过 vue-router 实现底部导航栏固定，组件切换。具体操作如下：1. 配置路由代码：/* 路由器对象模块*/import Vue from 'vue'import VueRouter from 'vue-router'import MSite from '../pages/MSite/MSite.vue'import Search from '../page
2021-02-19 09:49:03
3614
原创 初识vue（9）——如何解决 vue-router 的 router-view 渲染不出来 问题
不知为何，我的 vue-router 的 router-view 渲染不出来内容，找了半天最后发现是单词写错了。⊙▃⊙ 注意下图所示的两个单词别写错了，我就是一不小心把 component 写成了 Component ，害得我找了半天。...
2021-02-18 18:19:59
557
3
原创 初识vue（8）—— webstorm 中已设置ES6仍爆红色波浪警告
在写 Vue 项目时，发现明明代码没问题，却爆红色波浪警告，如下图所示：检查发现已经设置了 ES6 ，但仍然爆红：最后发现是 ESLint 自动监测造成的，照下图所示关掉即可。这样就没问题了...
2021-02-17 18:02:45
1202
原创 微信小程序（13）：Component 实现公共组件
一、不需要进行组件间属性传递 我们的小程序一般都有固定头部和固定底部，在每个.wxml文件中都写入头部和底部的代码就会很麻烦，这时候我们就可以用到 Component 自定义组件。1. 新建 component 文件夹，在该文件夹创建 headerView 文件夹，然后右键点击“ 新建 Component ”2. 将头部代码剪切到 headerView.wxml 文件中，将对应的 wxss代码剪贴到headerView.wxss 文件中，例如：headerView.wxml 文件代码：<
2021-02-09 17:04:35
1514
原创 那段故事，慢慢道来（33）
又来应付性写作了… 其实没什么好说的，12号坐高铁回家，到今天也不过是五天而已，却感觉好久了似的，每天懒懒散散的，坐被窝学习眼睛一闭就睡着了，迷迷糊糊的，完全达不到在学校时的学习状态。在家呆了不过五天，就想学校了… 家里最近温度也没有特别低，但总觉得很冷，大概是没有在学校那么有活力的缘故。 中午吃过饭去街上转了转，买了些吃的用的，回来很快就到晚饭时间了，时间总是就这么过去了，有点焦虑。 最近爸妈开始给我灌输考研思想，妈妈甚至说，第一次考不过，再考一次，也要去考。昨天来奶奶这里，奶奶和姐姐
2021-01-17 17:53:06
256
14
原创 一篇博客教你掌握 typescript
TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。相较于JS而言，TS拥有了静态类型、更加严格的语法、更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；...
2021-01-15 17:42:58
398
2
原创 关于promise，你需要掌握这些
文章目录一、什么是promise1. 抽象表达：2. 具体表达：二、为什么要用promise1. 指定回调函数的方式更加灵活2. 支持链式调用，可以解决回调地狱问题三、promise初体验四、实践练习1：fs读取文件五、实践练习2：AJAX请求六、封装fs读取文件操作七、util.promisify方法进行promise风格化八、promise封装ajax请求九、十、十一、十二、十三、一、什么是promise1. 抽象表达：promise是一门新的技术（ES6规范）promise是JS中进行异步编
2021-01-13 08:38:50
914
2
原创 微信小程序（12）：小程序的全局配置
文章目录一、entryPagePath：小程序默认启动首页二、pages：页面路径列表三、window：全局的默认窗口表现1. navigationBarBackgroundColor：导航栏背景颜色2. navigationBarTextStyle：导航栏标题颜色，仅支持 black / white3. navigationBarTitleText：导航栏标题文字内容4. navigationStyle：导航栏样式5. enablePullDownRefresh：是否开启全局的下拉刷新6. backgro
2021-01-10 16:54:49
2444
原创 微信小程序（11）：冒泡事件与非冒泡事件
事件分为冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。1. 冒泡事件：index.wxml 文件代码：<view class="out" bindtap="outTap"> <view class="inner" bindtap="innerTap"> <view class="item" bindtap="itemTap"></view&g
2021-01-10 11:57:26
376
原创 微信小程序（10）：事件处理及数据交互
1. bindtapindex.wxml文件代码：<view class="box" bindtap="yunsuan">{{num}}</view>index.wxss文件代码：.box{ width: 200rpx; height: 200rpx; background-color: pink;}index.js文件代码：Page({ /** * 页面的初始数据 */ data: { num:1 }, yunsu
2021-01-10 11:35:34
195
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人