- 博客(25)
- 收藏
- 关注
RSS订阅原创 element-ui二次封装实现短信验证码登录组件
文章目录前言一、实现方法1.创建 PhoneLogin 组件2.全局注册组件3.使用组件二、组件效果总结前言在开发 vue 项目时，我们都可能用到 element-ui，但是有时 element-ui 提供的组件太简单或不满足应用的需求，因此我们需要在其基础上再对组件进行封装。一、实现方法需先在项目中安装 element-ui：Vue项目使用element-ui1.创建 PhoneLogin 组件在 components 文件夹创建 phoneLogin 文件夹，然后在 accountLog
2021-04-01 13:52:35
3214
3
原创 element-ui二次封装实现普通登录组件
文章目录前言一、实现方法1.创建 AccountLogin 组件2.全局注册组件3.使用组件二、组件效果总结前言在开发 vue 项目时，我们都可能用到 element-ui，但是有时 element-ui 提供的组件太简单或不满足应用的需求，因此我们需要在其基础上再对组件进行封装。一、实现方法需先在项目中安装 element-ui：Vue项目使用element-ui1.创建 AccountLogin 组件在 components 文件夹创建 accountLogin 文件夹，然后在 acco
2021-04-01 11:37:32
441
原创 element-ui二次封装实现全局回到顶部组件
文章目录前言一、实现方法1.创建 BackTop 组件2.全局注册组件3.使用组件二、组件效果总结前言在开发 vue 项目时，我们都可能用到 element-ui，但是有时 element-ui 提供的组件太简单或不满足应用的需求，因此我们需要在其基础上再对组件进行封装。 一、实现方法需先在项目中安装 element-ui：Vue项目使用element-ui1.创建 BackTop 组件在 components 文件夹创建 backTop 文件夹，然后在 backTop 文件夹中再创建 Ba
2021-03-30 23:07:18
461
原创 Vue项目使用element-ui
文章目录前言一、安装二、使用步骤1.引入库2.使用组件总结前言Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。开发 Vue 项目时，我们可以借助Element 提供的组件，更快更好的开发项目一、安装需有创建好 Vue 项目，这里可以参考 vue-cli3快速搭建Vue项目在项目根目录下安装：Vue 2.X 版本npm i element-ui -SVue 3.X 版本npm i element-plus -S在项目 package.jso
2021-03-30 16:42:36
545
原创 小程序实现自定义顶部选项栏
文章目录前言一、页面效果二、代码总结前言在小程序常常会用到选项栏来展示内容，而官方提供的自定义 tabBar 是配置的是不同的页面且必须在底部，因此无法满足想在同一个页面显示不同的内容或想让选项栏在顶部的需求。面对这种情况，只能引入第三方组件库或自己编写一个选项栏。 一、页面效果1.两栏：1.四栏：二、代码wxml代码：<!--顶部选项栏--><view class='swiper-nav'> <view wx:for="{{swiperNa
2021-03-28 21:44:00
671
原创 Vue项目打包后不能正常显示页面
项目场景：通过 Vue CLI 创建的 vue 项目，编写完项目后，通过 npm run bulid 对项目进行打包，再把打包得到的内容（dist文件夹）交给后端部署到服务器上。问题描述：对 vue 项目打包后，发现 dist文件中的 index.html 在浏览器中打开后页面内容无法显示，部署到服务器也一样不行，而 vue 项目在本地服务器运行时，页面是正常的。本地服务器运行的首页：打包后dist文件夹中的首页：没看错，是真的什么内容都没有 原因分析：vue 项目中缺少了 vue
2021-03-28 01:24:36
9097
1
原创 CSS3红包雨效果
文章目录前言一、红包雨1.示例代码2.页面效果二、扩展总结前言当我们进入一些购物网站时，特别是搞活动的都可以看到红包雨效果，而我们可以通过 CSS3 动画 + JS 实现一个我们自己的红包雨效果。一、红包雨1.示例代码HTML代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
2021-03-27 00:56:55
1481
1
原创 小程序实现分页读取云数据库中的集合记录
文章目录前言一、云函数分页读取集合中的记录二、云函数分页获取一个集合所有记录总结前言在云开发中，小程序端获取一个集合所有记录的操作只能一次获取20条，而云函数端也只能一次获取100条，两种方法都不能真正实现获取一个集合中的所有记录，因此可以通过分批读取实现获取所有记录。一、云函数分页读取集合中的记录假设每页大小不超过100，示例代码如下：// 云函数入口文件const cloud = require('wx-server-sdk')cloud.init()const db = clou
2021-03-26 17:09:00
544
原创 小程序云函数调用云函数
文章目录前言一、案例说明二、功能实现1.云函数1：getdata2.云函数2：deldata总结前言小程序云开发提供了云函数，云函数是运行在服务端的代码，执行速度快。通常一些复杂的功能逻辑或读取云数据库都可使用云函数实现，高效安全。而云函数之间也是可以相互调用的，这样可以使得功能逻辑模块化，提高可读性。一、案例说明场景：在一个集合中，不定时增加新的记录，每个集合都有一个createTime字段，以毫秒存储记录创建时的时间。当集合中的记录离当前时间过了很久后，希望这条记录被删除，以确保记录都是最新
2021-03-26 16:05:08
4470
1
原创 小程序快速获取openid
文章目录前言一、openid 是什么？二、获取 openid1.云函数 getOpenid2.调用 getOpenid 获取 openid总结前言在开发微信小程序时，常常需要获取微信用户的 openid 来区分用户身份，用户 openid 就相当于用户在小程序里的身份证，因此我们就需要知道如何来获取小程序 openid一、openid 是什么？用户openid是作为用户在小程序中的唯一标识，相当于用户在小程序里的身份证。每个小程序都会给每个用户分配一个唯一的openid，不过用户在不同的小程序o
2021-03-26 14:16:04
1682
原创 Vue项目安装axios实现http请求
文章目录前言一、安装axios二、使用axios1.引入axios2.GET 方法3.POST 方法总结前言我们都知道前端是需要向后端异步请求一些数据和服务的，即所谓的ajax技术。而Vue.js本身是没有ajax的能力，因此它需要使用 axios 来完成 ajax 请求。一、安装axiosAxios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中使用 npm：$ npm install axios使用 yarn：$ yarn add axios
2021-03-26 01:38:57
397
原创 vue-cli3快速搭建Vue项目
文章目录前言一、Vue.js是什么？二、使用步骤1.引入库2.读入数据总结前言在我们学了HTML、CSS、JavaScript（JQuery）之后，我们都会使用它们去写一些网站网页，而使用JavaScript原生去开发是一件比较痛苦的事情。因此开发框架就是我们在掌握了基础语言的基础上可以进一步去学习的知识，Vue框架就一个比较好的前端开发框架。一、Vue.js是什么？是一套用于构建交互式用户界面的渐进式框架提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API有简洁、数
2021-03-25 16:19:35
257
原创 响应式页面设计
文章目录前言一、响应式的基本概念二、@media媒体查询1.是什么2.使用方式3.一个例子三、flex布局1.是什么1.怎么用四、Bootstrap总结前言随着移动互联网的使用越来越广泛，移动端浏览器的使用越来越多，因此开发网站必须考虑到在移动设备上访问的问题。那如何让PC端和移动端都可以很好的让网页内容显示呢？这就需要采取响应式页面设计了，响应式页面设计也是前端开发需要掌握的众多能力之一一、响应式的基本概念1.响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念
2021-03-23 16:17:34
1713
原创 小程序与bmob后端云
文章目录前言一、Bmob 后端云是什么？二、注册与使用Bmob 后端云三、微信小程序 SDK1.安装使用2.应用密钥3.一个例子四、数据表操作五、云函数总结前言在开发一个微信小程序的过程中，我们除了要实现小程序的界面外，还需要后端的服务支持。而对于个人或小项目来说，专门搭建一个自己的后端服务是比较麻烦且专业的过程，因此这也成为很多人没能去把小程序开发使用的一个重要原因。为了解决小程序没有后端服务的问题，使用bmob后端云就是可选的方法。一、Bmob 后端云是什么？看看官方的定位：全方位一体化
2021-03-23 15:08:39
2102
原创 小程序Mpx框架入门
文章目录简介一、Mpx的特点1.存在必要性2.设计思路3.与其他框架的区别二、安装使用1.相关命令2.项目创建演示三、Mpx在vscode中的相关插件四、学习Mpx框架开发1.Mpx具有的功能特性2.学习的资源总结简介Mpx是一款致力于提高小程序开发体验和开发效率的增强型小程序框架，附带完善的周边生态，提供了类似Vue的开发体验。通过Mpx，我们能够高效优雅地开发出具有极致性能的优质小程序应用，并将其输出到各大小程序平台和web平台中运行。一、Mpx的特点1.存在必要性原生小程序开发存在诸多
2021-03-21 17:32:42
2209
2
原创 小程序端无法读写云数据库的记录
项目场景：在小程序中读取或修改在云开发控制台直接写入或导入数据库集合中的记录问题描述：问题1：明明在云数据库的集合中已经添加了记录，可在小程序中读取记录的时候，读取不到。问题2：明明已经获取到记录的_id了，可对相应的记录修改时，却修改不了。 原因分析：云数据库中的每个集合都有自己的数据权限默认情况下的数据权限是仅创建者可读写，而云控制台和服务端始终有所有数据读写权限，数据权限配置仅对小程序端发起的请求有效。除自定义权限外，其他权限均不支持无登录态用户访问。因此小程序端并不能读取和
2021-03-20 01:25:03
422
1
原创 nodejs入门初见
文章目录一、nodejs的简介二、一个nodejs程序三、nodejs程序热部署四、nodejs的express框架五、express+mysql总结一、nodejs的简介1、百度百科定义：node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。2、其他人的理解：Node.js是让Javasc.
2021-03-19 20:03:28
144
原创 小程序云开发入门
文章目录前言一、开通云开发二、使用云开发1.直接创建云开发项目2.修改配置文件引入云开发三、云数据库1.介绍2.使用四、云函数1.介绍2.使用五、云存储1.介绍2.使用总结前言一个小程序在开发时，除了考虑界面功能逻辑外，还需要后端的数据支持。而为了获得后端的数据支持，开发者需要提前考虑服务器、存储和数据库等需求，并且会花费时间精力在部署应用、依赖上。因此官方为了实现小程序的快速上线和迭代，为开发者提供了一个云开发的功能，将以服务的方式为开发者提供如云函数、数据库、存储管理等所需功能，大大降低了小程序的
2021-03-19 16:30:05
6992
2
原创 微信小程序入门
文章目录前言一、注册一个小程序账号二、下载微信开发者工具三、小程序的后台四、创建一个小程序五、小程序开发学习总结前言 小程序（Mini Program）是一种不需要下载安装即可使用的应用，由腾讯于2017年1月9日首次推出。这一应用形式能使用户不用再关心应用安装太多的问题，实现了应用“触手可及”的梦想，也体现了“用完即走”的理念。一、注册一个小程序账号开发小程序首先得有一个账号，不能总是用测试号来开发，这种的小程序也无法发布。1、账号在微信公众平台注册。2、注册账号类型选择小程
2021-03-16 17:34:00
926
原创 vscode前端开发常用辅助插件
1、Chinese (Simplified) Language Pack VS Code 的中文（简体）语言包，用来汉化vscode2、open in browser 用于运行HTML文件，在浏览器中显示3、Auto Close Tag 自动闭合标签4、Auto Rename Tag html自动更新配对标签名称5、Color Info 提供你在 CSS 中使用颜色的相关信息。只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息。6、CSS
2021-03-15 17:09:32
360
原创 JS实现计时器计算阅读速度
文章目录前言一、需求与分析1.需求2.分析二、计时器的实现1.包含的功能2.代码实现3.功能效果三、实现阅读速度计算1.完整的功能逻辑代码2.页面效果总结前言大一的时应一个老师的要求，帮他的网站的英语文章阅读板块写一个计算阅读速度的功能。那时一开始觉得很复杂，其实老师的需求很简单，做完这个小项目后，我就开始慢慢掉入前端这个坑了。一、需求与分析1.需求用户阅读时点击计时器开始计时，可暂停计时、继续计时。用户阅读完时可点击计时器停止，另外有重置功能。在用户点击计时停止后计算出阅读速度，并显示。
2021-03-15 01:13:59
551
1
原创 Wampserver配置与使用
文章目录一、WAMP的基本介绍W——windowsA——ApacheM——MysqlP——PHP二、WAMP的下载三、WampServer的配置1.配置端口号2.自定义网站根目录总结一、WAMP的基本介绍WampServer是一款由法国人开发的Apache Web服务器、PHP解释器以及MySQL数据库的整合软件包。免去了开发人员将时间花费在繁琐的配置环境过程，从而腾出更多精力去做开发。W——windowswindows操作系统环境下的A——ApacheApache是一款Web服务器软件，有多
2021-03-14 16:47:33
1531
原创 前端基本语言学习
前端基本语言学习文章目录前端基本语言学习何为前端开发？1、HTML——超文本标记语言（Hyper Text Markup Language）学习方法：相关学习链接：2、CSS——层叠样式表(Cascading Style Sheets)学习方法：相关学习链接：3、JavaScript——客户端脚本语言（JS）学习方法：相关学习链接：4、JQuery——快速、简洁的JavaScript框架学习方法：相关学习链接：总结何为前端开发？百度百科的定义：前端开发是创建Web页面或app等前端界面呈现给用户的过
2021-03-14 15:44:34
473
原创 Git在vscode中简单使用
Git在vscode中简单使用一、Git安装与配置1.Git安装（官网地址：https://git-scm.com）2.Git配置（1）安装好后，桌面右键—Git Bash Here，打开Git的命令输入面板。（2）配置命令：git config --global user.name '用户名'git config --global user.email '邮箱'注意：这里的用户名和邮箱是注册GitHub的，后续在面板中提交修改到GitHub上的仓库时也需要用GitHub的账号密码登录一下
2020-08-07 18:22:34
2232
原创 第一次搭建WordPress
第一次搭建WordPress一开始的看到这个作业觉得有点难，可能自己完成不了，回来上网了解一下，觉得自己还是可以去试一试的。在了解之后清晰的知道WordPress的搭建分为两大步，一是准备LAMP环境（安装Apache2，安装PHP组件，安装MySQL（数据库）服务，安装phpmyadmin），二是安装并配置WordPress（安装wordpress，为wordpress配置一个数据库，配置w...
2019-02-24 21:06:32
814
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人