K.P-CSDN博客

方法一最为简单的，将router设置为hash模式！！！history模式的路由需要后端配置，hash模式便不需要，不同的框架所需不一样，看对应的文档。方法二找到nginx配置代码，进行修改，网上很多都是如下类型的代码location ^~ /api { proxy_connect_timeout 600; proxy_read_timeout 600; proxy_set_header x-real-ip $remote_addr; proxy_se

2022-03-17 14:16:12 7733

原创【原创】vue中使用CKEditor5引入插件&ckeditor-duplicated-modules报错处理

在vue中使用了ckeditor5后，收到如下图的反馈：起初以为是小问题，像其他富文本一样加几个属性参数就有了，但是我发现我错了，错的离谱。那些参数加上去没有任何效果，后来查找下才知道是要下载插件。以下分为两部分，第一部分为引入并使用插件，第二部分为CKEditor -duplicate -modules报错的解决方案，根据自身情况查看。下载插件并引用因为我引入的方式是在vue页面中加入该代码引用import ClassicEditor from '@givebest/ckeditor5-cus

2022-03-15 14:16:35 6141

原创（原创）vue中v-model的高级用法（多用于组件封装）

v-model

2022-02-20 22:13:22 1683 1

原创 echarts中国地图实现阴影效果&自定义设置

这要实现的重点就是地图添加底部阴影的效果，原理就是在原有的地图下面再添加一个地图，下面是代码：html <div id="myEchart" ref="myEchart" style="height:600px;width:100%;"/>引入文件import echarts from 'echarts'import '@/../node_modules/echarts/map/js/china.js' // 引入中国地图数据jschinaConfigure.

2022-02-17 14:44:06 10413 3

原创 vue项目引入three.js实现基本的动画(含vue-cli2引入报错解决方案)

vue项目引入three.js实现基本的动画(含vue-cli2引入报错解决方案)

2021-12-03 14:03:12 1768 1

原创（Vue）H5项目实现微信分享好友和朋友圈功能

先上需要的效果图哈如图所示，再vue项目中，分享携带头部标题、简介和缩略图等信息，下面进入正题：安装&引入// 再index.html中放入 <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>或者使用官方插件npm i weixin-js-sdk使用（再需要引用的页面）// npm安装的需要引入let wx = require('weixin-js-sd

2021-11-12 10:17:35 2677

原创（原创）JS创建页面进度条（VUE）

需求：制作一个简单的H5邀请函页面，因为需要加载的图片较多，因此添加进度条来提高用户体验。HTML<div class="loading-area cell flex-col" v-if="rate<100"> <div class="progress"> <div class="rate"> <img src="../assets/img/progress.png" alt=""&

2021-11-10 15:29:59 764

原创移动端适配插件——px2rem-loader

安装npm i lib-flexible --save引入// main.jsimport 'lib-flexible'安装插件npm i px2rem-loader --save-dev配置方法一、在vue-cli3的项目中，找到node_modules/@vue/cli-service/lib/config/css.js，加入代码rule .use('px2rem-loader') .loader('

2021-11-09 22:27:54 943

原创 Vue轮播图组件使用——swiper

首先祭出 github地址和官网地址安装npm install swiper vue-awesome-swiper --save引入// main.jsimport Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// 如果Swiper 版本>=6.x 使用import 'swiper/swiper-bundle.css'// 如果Swiper 版本<=5.x 使用import 'swipe

2021-11-09 22:17:41 1553

原创前端最常用的轮子&组件库

动画库如果想页面制作的好看，动画效果一定是少不了的。所以必须推荐动画插件。Animate.css 纯css的动画库，所以无论你前端使用什么框架，都可以非常方便的使用它，内置了超多的动画效果，并且预览起来也非常方便。网址：https://animate.style/常用效果组件所有介绍了一些UI组件库，组件库的组件大而全，但精细程度有时候是不够的，所以有时候我们还需要一些小而精的专属组件。轮播图组件：swiper，这个提供的轮播图效果太多了，中文文档齐全，还有交流QQ群。支持原生、JQuery、V

2021-10-13 21:44:28 543

原创 js设计模式总结 —— 常用六种

工厂模式在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。class Product { constructor(name) { this.name = name } init() { alert('init') } fun1() { alert('fun1') } fun2()

2021-10-12 23:45:02 3128

原创 vue项目重构ssr，一看就懂

创建vue项目vue create ssr-demo安装router、vuexvue add routervue add vuex基础vue项目目录如下：重构成ssr项目1、修改路由配置// router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)// 工厂函数每次请求返回一个Rou

2021-10-12 09:45:52 845 2

原创 uni-app实现新手引导功能(拿来即用)

先上需求图这里提供两种方法：第一种，直接用图片，虽然low了点，但是快。第二种，就是使用定位，找到对应的dom，然后再进行解释；思路来自插件市场，但这边已经进行了加功，升级。下面进入代码：<template> <view v-show="show" class="main"> <view class="rect-shadow" :style="{'width':width+'px','height':height

2021-06-08 00:03:12 4630 18

原创 webpack —— chunk，bundle，module的区别 & hash ，chunkhash， contenthash的区别

来看看两道概念题：问一：chunk，bundle，module的区别?chunk指的是经过webpack转化处理后的代码片段；bundle指的是经给webpack处理后输出的文件，统称 bundle文件；module： webpack中万物皆模块。问二：hash ，chunkhash， contenthash的区别？hash 是代码发生变化，整个项目的hash就会发生变化；但是仅有个别文件发生变化，显然缓存就没有了意义。chunkhash 是根据不同的入口文件(Entry)进行依赖文件解

2021-05-18 23:16:57 421

原创 webpack基础（二）核心配置

entry —— 可字符串，可对象，可数组打包入口（spa【单页面应用 / 单入口】， mpa【多页面应用 / 利于seo】）output占位符： [name], —— 名字[hash] —— 类似时间戳，利于缓存 [hash:6]的形式限制位数（内容发生变化，hash就变化）[chunkhash]例：const path = require('path')module.exports = { // 入口 entry: { // 多入口 index: './src

2021-05-01 09:43:59 71

原创 webpack基础（一）

安装// 局部npm install webpack webpack-cli -D// 全局npm install webpack webpack-cli -g启动npx webpacknpx webpack // 默认以生产模式发布打包 productionscript脚本命令// package.json中添加配置"scripts": { "test": "echo \"Error: no test specified\" && exit 1"

2021-04-28 08:44:33 54

原创小程序云开发—— 订阅与发送消息

常见的功能，微信的允许订阅信息和发送信息到微信中，代码如下// html<button type="primary" bindtap="btnTestSubscribeMsg" style="margin-top:5px;">订阅消息</button><button type="primary" bindtap="btnSendSubscribeMsg" style="margin-top:5px;">发送订阅消息</button>上序两个方法如下

2021-03-13 21:59:10 313

原创小程序云开发—— 生成二维码，保存本地

刚开始创建小程序云开发的项目，这里就不必多说了，我们直接进入正题。// index.wxml<canvas type="2d" id="myCanvas" style="height:300px;width:300px;"></canvas>创建一个云函数 getmpcode 小程序官网可能有人问，为什么要用云函数呢？因为这个必须要后台才能调用的。// 云函数入口文件const cloud = require('wx-server-sdk')cloud.init()

2021-03-13 16:23:36 589 5

原创 umi3、koa2搭建个人博客项目性能优化（实战）

首先说明下，我搭建的前提：前端使用的是umi3+ts，后端使用的是node.js的框架koa2，阿里云服务nginx部署。当网站正式上线，开始的速度惊到我了，如下图：优化方向初步分析下，有这几个方向可以执行：1.css和js包载入时间过长，按需加载是个方向，或异步加载js文件2.优化代码，删除没必要的东西，减少代码体积3.部分图片加载过时间过长，压缩图片4.压缩代码说干就干，第一步，将用的本地图片，用ps全部压缩一遍，此步省略第二步，umi中实现前端按需加载，官网接口，主要就是在

2021-01-28 15:03:19 1027

原创解决antd的Warning: Instance created by `useForm` is not connected to any Form element.问题

先描述下这个问题的由来：把form表单放在Modal中，当进入时报的错误，没有挂载到（连接到）这个表单，所以报错。网上很多的文章都说使用如下方法：可是这还解决不了问题，报警告还是一样。可以使用这个api解决 —— forceRender设置强制渲染给为true <Modal title="发布" visible={visible} onOk={handleOk}

2021-01-03 11:58:51 1707 5

原创 vue-router： RangeError: Maximum call stack size exceeded

以下两种报错分别表示：超过最大调用堆栈大小；（路由死循环问题）错误:重定向时，从“/主页/主页”到“/列表/列表”通过导航守卫。（重定向问题）以上两种都是路由导致的报错，我们先从第一个报错分析，在报错的文件中找到 permission.js文件，该文件是我设置全局的路由守卫咋一看，有token继续，没有返回到login页面没有什么问题呀！但是问题就出在这个返回login页面，为了看的更清楚，我们在next(’/login’)上面打印发现没错，它出来了，死循环了，情况就为每次进入login页

2020-12-04 11:01:36 6592 10

原创 vue项目使用router.replace后需要返回两次的解决方案

问题所在：a页面 push到 b页面， b页面 push到 c页面，c页面 replace到 b页面，这时候点击按钮(router.go(-1))，没有效果，需点击两次才能返回到a页面中！分析：页面跳转流程： a => b => c => b路由栈：a => b => b就路由栈说明：a到b，b到c就无需多说，下一步的c replace到b，本意为在栈中b页面替代了c页面，所以路由栈中不存在c路由，因此在我们在点击第一次返回后，其实是从一个b页面返回到另一个b页面，所

2020-12-04 09:42:32 1878

原创（原创）react中context的使用方法与总结

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 ——react官网虽然redux可以实现一个状态state，整个项目使用，但是有时候，该state无需全局使用，用redux工具，显得有点杀鸡用牛刀的feel，并且还可能是父组件的state，其孙组件（子组件的子组件的级别）需要使用，但若为了给孙组件一个状态值，每一层组件都向下传递一个props且不使用，未免就太没必要了，因此context的表现时刻就到了。需求创建白天黑夜主题切换项目创建com.

2020-12-03 10:03:07 1124

原创从redux衍生到react-redux的实战应用（一篇就懂）

在上篇，写了一个redux的简单demo，redux使用，这篇就结合react-redux与实际项目进行结合使用。加减按钮demo实现简单的点击加号，点击减号改变数字的项目，demo虽小，五脏俱全；安装 redux 和 react-reduxnpm i redux react-redux创建react项目基本操作npx create-react-app my-appcd my-appnpm start再根目录下父组件 index.js中import { createStore }

2020-12-01 23:46:58 134

原创 redux制作demo——从基础了解redux

刚开始学习react，自以为redux是react中的东西，就像vue与vuex的关系一样，后来才知道我错了，错的很离谱，他们就拼写比较接近罢了。就如redux官网所说Redux 是 JavaScript 状态容器，提供可预测化的状态管理。下面引入redux，来理一理redux的实现思路创建文件夹，初始化并安装npm init-ynpm i redux引入reduxconst { createStore } = require('redux')创建store，并进行监听// 1 创

2020-11-28 17:54:12 165

原创使用koa连接mongoDB，搭建服务器

搭建服务器安装npm i koanpm i nodemon -save // 便于修改文件无需重新启动服务器写入代码const Koa = require('koa');const app = new Koa();app.use(async ctx => { ctx.body = 'Hello World';});app.listen(3000);访问本地端口3000，可以看到信息，下面进入正题创建mongoDB数据库没有账号的同学，mongodb官网创建一个账

2020-11-28 17:23:16 523

原创 Vue自定义组件component与自定义指令directive的应用

自定义组件业务场景：自定义一个全局的loading页面，在需要请求数据的地方呈现。在项目中创建一个common文件夹（放置全局的组件），创建loading.vue(以element-ui为例)<template> <div class="loading-page"> <i class="el-icon-loading"/> </div></template><script> export de

2020-11-14 16:35:50 1137

原创 Vue——provide-inject的使用理解

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 ——vue 官方这里的案例拿vue-element-admin的源码来说明：该项目架构中，App.vue代码如下：// App.vue 父级组件提供<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div&g.

2020-11-14 15:55:39 175

原创 Vue高级接口extend，extends，mixin使用与对比

虽然在我们普遍的项目中，这些接口使用的几率极低，都有可以代替他们的方法，但这并不能成为我们不去了解接触甚至使用它们的接口。官方文档我普遍在在根目录中创建 utils文件夹，创建一个对象供后续方法使用// profile.js// 创建对象const profile = { template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', // 在此次案例中这段可有可无 data: function

2020-11-14 12:21:33 695

原创 better-scroll对比vant-ui中的上拉加载、下拉刷新

今天的项目中，正有一个需求就是上拉加载，下拉刷新，正好之前有了解了better-scroll，可以满足要求，立马动手，当我完成后，同事才跟我说，vant里面就有此ui（该项目已引入vant）。。。行吧，当做熟悉下better-scroll，但同时为了使项目小些，把辛苦写的代码删除了，用vant的list组件重新写了遍；发现一个大道理：还是别人封装好的香！！！better-scroll之前写了个入门体验文档，今天将两者都使用了，并对比下。安装npm i better-scroll<templ

2020-11-13 16:46:00 791

空空如也

空空如也