2020年11月_山竹回家了

原创 uni-app & HBuilderX & 小程序

0.什么是uni-appuni-APP官网:https://uniapp.dcloud.io/READMEuni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。1.uni-app工作原理举例:平时我们写的vue都并非直接传输给浏览器,因为浏览器看不懂,通常会经过编译后翻译成HTML格式,再由浏览器渲染.uni-app的工作原理就是充

2020-11-29 17:03:41 2369 1

原创理解异步编程

0、异步编程JavaScript是单线程事件循环模型,一步行为是为了优化因计算量大而时间长的操作,如果在等待其他操作完成的同时,即使运行其他指令,系统也能保持稳定.重要的是,并不是一定要量大或等待时间长才可以使用.只要你不想为等待异步操作而阻塞线程执行,什么时候都可以使用.换成大白话来理解就是假设下班后需要乘车、买菜、做饭、吃饭，那么在下班的时候可以委派外卖员帮忙买菜，委派饭店老板煮熟，回家吃就行，而并非需要按序执行。1、同步与异步同步行为对应内存中顺序执行的处理器指令,每条指令都会严格

2020-11-29 00:22:36 232

原创微信小程序从0到1基础学习整理(下)

0.常见组件swiper微信内置轮播图组件微信内置轮播图组件:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.htmlswiper里面只可放置swiper-item组件，否则会导致未定义的行为.每个swiper-item就是盛放图片的容器,实际应用可以用循环需要注意:swiper默认高度为150pxnavigator导航组件导航组件,类似a标签:https://developers.weixin.qq.c

2020-11-27 00:31:05 519

原创微信小程序从0到1基础学习整理(上)

微信小程序优势微信有海量用户，而且用户粘性高，在微信里开发产品更容易触达用户微信小程序具有无需安装，扫码即用的特性，相比App推广成本更低低廉的开发成本，较好的体验0.环境准备注册小程序微信小程序有别于web应用，web应用通常由自己管理发布，但是微信小程序由微信统一管理，因此需要注册账号。注册地:https://mp.weixin.qq.com/wxopen/waregister?action=step1获取AppIDAppID是微信小程序的身份标记，后期开发中需要调用开放

2020-11-25 23:40:13 906

原创深入学习客户端储存---cookie

HTTP cookie也被称作cook,最初用于在客户端会话信息,这个规范要求服务器在响应HTTP请求时,通过发送set-CookieHTTP头部包含会话信息.如下是包含这个头部的HTTP响应示例:注意:CSDN博客就是使用这种模式,可以打开控制台...

2020-11-25 01:05:43 271 2

原创函数调用的四种模式

调用一个函数会暂停当前函数的执行,传递控制权和参数给新函数。除了声明时定义的形式参数（parameters),每个函数还接收两个附加参数:this和arguments(实际参数)。参数this的值在面向对象中取决于调用的模式。当实际参数大于形式参数时并不会产生错误,多余的实际参数会被忽略,当实际参数小于形式参数时缺失的部分会抛出undefined在JS中函数的调用有四种模式：方法调用模式函数调用模式构造函数调用模式apply调用模式一、方法调用模式当一个函数被保存做对象的一个属性.

2020-11-23 22:05:01 1442

原创 JavaScript中八种错误类型

ECMS中定义了以下八种错误类型,并在错误发生时抛出不同的错误对象。ErrorInternalErrorEvalErrorRangeErrorReferenceErrorSyntaxErrorTypeErrorURIError一、ErrorError是基类型,其他错误类型都是继承该类型,因此,所有错误类型都是共享相同的属性(所有错误对象上的方法都是这个默认类型定义的方法).浏览器很少会抛出Error类型的错误,该类型主要用于开发者抛出自定义错误.例如拦截器/导航守卫中经常会使.

2020-11-20 00:09:03 633

原创 vue中高德地图API的使用

一、注册账号-高德开放网址:https://lbs.amap.com/dev/id/choose二、创建应用账号主体可能有不同的应用项目,比如你想开发DD出行、C操、大Z点评等,每个项目里面又分小程序、APP、PC端等等不同的使用场景，每个场景都有一个key,这个key有点像ID、密码之类的，用来访问地图时可以知道哪个应用、接口访问了这个地图。创建应用添加key创建成功后账号主体跟项目都有了,key还没有,点击添加创建key,用于访问的时候提供身份认证.key的名称最好跟应用

2020-11-18 12:35:46 6653 5

原创递归组件---网易盖楼评论示例

一、递归函数的说明递归有两个特点:自己调用自己停止条件(否则会陷入死循环)二、递归组件数据架构评论应该是一个数组,里面的每一个对象都是一条评论,主要的数据就是评论内容网易评论的数据架构更注重新评论(盖楼),所以父评论反而是子组件例子:<script>export default { data() { return { // 评论应该是一个数组,里面的每一个对象都是一条评论,主要的数据就是评论内容 commentList:

2020-11-16 23:19:00 253

原创富文本框在nuxt 中的使用方式及注意事项

vue2-editor富文本框:https://www.vue2editor.com/下载安装第三方库npm install vue2-editor引入方式全局引入(推荐):通过插件形式在plugins配置,并在nuxt.config引入,注意:配置指定地址后要将ssr改为false,因为富文本框有很多代码是在浏览器中渲染的.局部引入:需要在文件中输入process.browser判断当前是否在浏览器环境,process是全局的属性,browser是布尔值....

2020-11-16 19:58:23 940

原创两个并行的 promise 处理方式

像 JSON.parse 一样 Promise 也自带一些方法,有一个 all 的方法, 可以通过传入一个由 promise 组成的数组一起执行, 等到数组里所有都完成以后, 才会返回一个对应传入数组组成的结果数组方法一 Promise.all([ this.$refs.userForm.validate(), this.$refs.contactForm.validate(), ]).then(async (res) => { /.

2020-11-15 17:26:01 912

原创对于动态增减表单的校验处理

校验的三个基本设置依旧是 model / rules / prop,往常普通用的校验需要单独绑定元素,但对于遍历出来的新增数据一般不清楚有多少个,所以需要拿到当前遍历出来的索引值.model:依旧是对象,只不过在遍历情况下数据可能绑定到数组,所以可以用一个花括号包裹,形成对象即可.<el-form class="member-info" :model="{ users }" ref="userForm"></el-form>rules:对于element.

2020-11-15 16:28:04 619

原创前端生成二维码 qrcode

一、下载安装第三方库下载源:https://www.npmjs.com/package/qrcode在项目文件夹内执行:npm install --save qrcode全局安装:npm install -g qrcode二、在需要的页面引入import QRcode from "qrcode";三、使用传入两参数,与一个回调函数canvas是HTML的绘图标签,省略返回新绘图sample text:输入你需要转换为二维码的字符串,可以是网址链接function在执行

2020-11-15 15:40:46 5038

原创使用moment.js计算两个时间的差值,返回年/月/日/时/分/秒

官网地址:http://momentjs.cn/docs/#/durations/diffing/语法:let duration = moment.duration(x.diff(y))返回时长对象，其时长在 x 和 y 之间。 let m1 = moment("2020-11-11 11:15:00"), m2 = moment("2020-11-11 11:48:00"); let duration = moment.duration(m2.diff(m1)); ..

2020-11-11 18:21:38 4586

原创错误请求拦截---通用版

//创建一个axiosimport axios from 'axios'import { Message } from 'element-ui'const http = axios.create({ baseURL: 'http://157.122.54.189:9095'})http.interceptors.response.use( res => { console.log('这里拦截到正常响应状态码为200的请求'); //如果状态

2020-11-10 17:11:08 245

原创 nuxt---错误请求拦截插件

目的:使用axios的拦截器拦截页面的所有请求错误，并弹出对应的提示。普通vue的拦截器都放在 main.js 入口文件当中,引入 axios 之后, 创建 vue 实例之前nuxt 当中没有 main.js, 所以在 nuxt.config.js 的 plugins 数组里面配置了路径的文件都会在 vuejs 之前执行, 相当于以前 main.js 入口文件nuxtjs-axios|axios中文网一、创建jsplugins/axios.js//如果在插件里面需要获取到nuxt..

2020-11-10 15:29:18 1003

原创函数式校验表单信息---validator

正常流程:绑定数据,定义rules,prop等.在需要自定义校验数组里添加validator校验函数函数有三个参数:rule:当前标准value:当前输入框的值callback:Element传入的固定回调函数,校验完成就需要执行如果校验合法直接执行,没有参数如果不合法,创建一个错误对象参数new Error出现效果<template>  <!-- ref:标识符 ..

2020-11-09 23:25:35 627

原创 vuex(store)利用插件持久化到本地储存的方法

使用store管理数据 (vuex)—什么是vuex?基本使用/实现过程图/什么时候使用/优势在如上使用中会有一个弊端就是每次刷新数据对象会重新加载为空,这时候可以考虑使用本地储存持久化。监听vuex变化,如果数据改变就存放到本地储存如果页面刷新就从本地储存中重新取出数据store与本地储存的区别是本地储存由于不属于vue的一部分，没有实时更新的功能（需要刷新才重新渲染）nuxtjs中store不能直接使用浏览器的lcoalStorage方法，而且自己写数据同步功能比较麻烦,所以可以需..

2020-11-08 17:55:29 2272 2

原创使用store管理数据 (vuex)---什么是vuex?基本使用/实现过程图/什么时候使用/优势

什么是 vuex ?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。(必须按照规定的方式改变数据)store的基本使用数据放在哪里 store state 里面创建仓库, nuxt 框架已经封装好各种引入, 所以可以直接使用, 只需要创建文件即可如何存入/更新数据可以在 store state 里面初始化 / 调用 mutation 函数进行数据改造存

2020-11-08 01:15:56 479

原创 Nuxt项目初始化全过程

初始化项目下载安装Nuxt脚手架npx create-nuxt-app 项目名百问百答环节这是你的项目名?选择什么语言?用什么包管理器?组件库选择额外功能代码检查器测试框架服务端渲染目标服务器开发工具用什么来管理你的项目启动当运行完时，项目将安装所有依赖项，因此下一步是启动项目:问你要不要进行匿名调查,可以选N下载成功会出现网址打开后显示,如果出现 404,可以用 127 替换尝

2020-11-05 22:09:45 2098

原创 git常见错误:error: failed to push some refs to

空文件夹、仓库创建好后,发现推送不上去,引起错误的原因是目录中没有文件，空目录是不能推解决方法:调出终端/命令管理符:git add .再输:git commit -m'初始化'再做推送:git push -u origin master...

2020-11-05 21:41:02 130

原创 vue服务端渲染(ssr)与普通vue的区别,ssr的基本使用

一、渲染一个vue实例初始化npm init下载安装npm install vue vue-server-renderer --save创建一个js// 第 1 步：创建一个 Vue 实例const Vue = require('vue')const app = new Vue({ template: `<div>Hello World</div>`})// 第 2 步：创建一个 rendererconst renderer = require('

2020-11-05 21:13:04 1863

原创两种文件上传的处理方式以及优势劣势

上传方式一:图片选择完毕立即上传这种方式有个问题就是,假设用户频繁选定后又取消,这时取消掉的图片已经上传到服务器了.这时候有两种处理方式:劣势解决方法一:传递文件时携带两个参数,一个是当前选择的文件,一个是之前传好的文件的路径.假如服务器返回的路径为serverUrl,客户端这边定义一个userUrl空字符串,一开始没有值.如果用户选择过又取消,后台可以判断有没有值,有的话说明是是不要的,就根据路径删除指定文件.这个方法的好处是可以提升用户体验,对比第二种解决方法,点击提交后再传递文件,如

2020-11-04 20:46:15 716

原创 Element框架实现后台管理系统的业务逻辑（首页嵌套发布文章），面包屑、卡片、富文本、文件上传

实现后台管理系统的业务逻辑（登录页）实现后台管理系统的业务逻辑（首页）一、配置子路由{ name: 'index', path: '/index', // 异步引入组件 component: () => import('@/views/index.vue'), redirect: { name: 'postList' }, children: [ {.

2020-11-04 00:57:00 478

原创 Element框架实现后台管理系统的业务逻辑（首页）

登录页链接:实现后台管理系统的业务逻辑（登录页）一、配置路由 { name: 'index', path: '/index', // 异步引入组件 component: () => import('@/views/index.vue'), },二、制作首页组件2.1整体结构整体结构为左边侧边栏放置导航菜单,右边分上头部下主题结构.element组件:Container 布局容器<el-container>：外层容器。<e.

2020-11-03 16:54:05 1045

原创 Element框架实现后台管理系统的业务逻辑（登录页）

一、事前准备1.从0到1自定义创建vue框架2.Element框架从安装到使用二、实现步骤2.1创建路由对象并添加配置//当前项目的路由模块//如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能import Vue from 'vue'//安装好后就会有vue-routerimport VueRouter from 'vue-router'//在当前项目中安装路由Vue.use(VueRouter)// 1.创建路由对象const router =

2020-11-03 01:27:08 753

原创 vue-router的嵌套使用（children），实现页中页效果

我们所看到的页面实际都是直接或间接由APP.vue根组件映射出来的嵌套的组件需要嵌套的路由来映射，配置好父路由后，需要在哪个路由页面里面映射，就在哪个父路由添加children属性。步骤一：配置完父路由后添加子路由vue-----路由（router）的全局配置。需要注意的细节：children里面的path不需要加“/”，以斜杠开头会被当做根路径children 配置就是像 routes 配置一样的路由配置数组，可以嵌套多层路由。{ // 父路由 .

2020-11-01 19:10:58 1837

原创从0到1自定义创建vue框架

控制台配置1.输入vue create 文件名回车2.选择配置：默认vue2，默认vue3，手动选择功能（我选手动）3.选择需要的预置,按空格键选择,按a切换全部，i全不选（我选babel，css）4.选择需要的css预处理器（我选less）5.你喜欢在哪里配置babel.ESLint？在专用配置文件中在package.json（我选专用）6.是否保存为未来项目的预置？（我选否）启动项目改造...

2020-11-01 09:35:22 2122 7

原创 vue----axios的封装

一、安装使用npm:npm install axios二、配置基准路径utils文件夹创建myaxios//安装好后会有axios文件import axios from 'axios'//配置基准路径axios.defaults.baseURL = 'http://localhost:3000'// 暴露export default axios三、在接口文件配置接口axios({})返回是一个promise对象post请求// 引入基准路径import axios

2020-11-01 00:09:01 170

weixin_47886687的博客