简要netcore nginx vue
vue iview table实现动态自定义表头
一、前言 众所周知,iview中有一个表格组件Table,用于展示多条结构类似的数据。之前遇到过一个需求,要手动控制table的表头显示。就是假如table表格一共有10列数据,可以通过设置勾选,决定显示多少列 二、代码 为了代码的复用性,将配置页面单独抽成了组件,所以代码中会有组件之间传值父组件( ......
Vue笔记
1. 邂逅Vuejs 1.1 简单认识一下Vuejs Vue是一个渐进式的框架,什么是渐进式呢? 渐进式意味着你可以将Vue作为应用的一部分嵌入其中,带来更丰富的交互体验 或者你希望将更多的业务逻辑使用Vue实现,那么Vue核心库以及其生态系统。 比如Core+Vue-router-Vuex,也可以 ......
Vue启用报错 RangeError: Invalid typed array length: -4095
近期开发的前端项目项目启用失败,记录下修复过程 RangeError: Invalid typed array length: -4095 错误原因:node版本问题,安装10.x.x 即可 重新安装: 1.将原来的nvm,node卸载 2.安装nvm 如果显示上面内容即安装成功 3. 在nvm上安 ......
vue全局公共方法调用
1.在assets文件夹下,新建文件夹,创建common.js 2.在main.js中引用 import common from "@/assets/common/common.js"; Vue.prototype.common = common; 3.在页面中使用 this.common.iCel ......
vue3 封装组件中使用 pinia 报错
报错信息: Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia ......
Nginx具体应用
部署静态资源 Nginx可以作为静态web服务器来部署静态资源。静态资源指再服务端真实存在并且能够直接展示的一些文件,比如常见的html页面、css文件、js文件、图片、视频等资源。 相较于Tomcat,Nginx处理各种静态资源的能力更加高效,所以在生产环境下,一般都会将静态资源部署到Nginx中 ......
vue+leaflet绘制街道地图,并在上面显示站点标记。
从0开始。 记录一下完成过程中遇到的问题及解决方法 1、离线显示地图 已完成。 方案就是下载瓦片地图到本地或者服务器上,使用路径访问图片/map/{z}/{x}/{y}/tile.png 2、在地图上显示标记。(单一标记,且默认打开提示框) const icon = L.icon({ iconUrl ......
vue实现路由懒加载(异步加载)及组件懒加载(异步加载)的方式
##转自:槐序之夏: https://blog.csdn.net/qq_42403643/article/details/129264032 一、为什么要使用路由懒加载 为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。 二、定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的 ......
关于vue2老项目的打包优化,实现首屏加载速度提升
##分析项目代码体积 yarn add webpack-bundle-analyzer 在webpack.dev.conf.js中配置 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlug ......
nginx全局变量
1、https://blog.csdn.net/weixin_42324463/article/details/127164692 2、https://blog.csdn.net/wzj_110/article/details/112594880?spm=1001.2101.3001.4242.1& ......
Vue中$attrs、$listeners的用法总结
用法如下: 1、v-on="$listeners" 父组件A,子组件B,孙组件C。C组件中emit事件后,在B中可以直接使用v-on="$listeners"接收,此时可以在A组件中的B上直接使用C中emit出来的事件。 2、v-bind="$attrs"父组件A,子组件B,孙组件C。A上设置值,若 ......
Vue3中无法为el-tree-select设置反选问题分析
环境:Vue3.2、Element Plus
问题:子组件 setting.vue => 弹窗组件 Dialog => 树选择组件el-tree-select ,无法设置默认选中项 default-checked-keys
场景:在一个后台系统的列表页,选中一行数据,点击设置按钮,分配一些功能。这里... ......
安装后报错:'vue' 不是内部或外部命令
安装vue脚手架碰到一个坑; 1.首先在cmd命令下安装脚手架; npm install -g @vue/cli 2.安装后报错:'vue' 不是内部或外部命令,也不是可运行的程序 或批处理文件。 3.进行环境变量的安装: 【1】找到 vue.cmd 文件所在的文件夹位置,并配置环境变量; 【2】配 ......
Nginx安装
一、Nginx安装 1、依赖包 yum install -y gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel wget vim telnet net-tools 2、下载1.22.0版本安装包 cd /opt/soft && ......
vue3中的自定义指令
1.适用到自定义指令的场景 防抖、图片懒加载、一键 Copy的功能、拖拽、页面水印、权限校验、输入框自动聚焦、相对时间转换、下拉菜单 2.个人需求:在后台系统中,有很多表单提交组件,其中很多限制数字且限制条件不同。最初使用 oninput="value=value.replace(/[^\d]/g, ......
nginx更新静态页面客户端缓存不刷新问题
问题描述: 频繁部署静态资源,nginx自带缓存未刷新 通过ftp/sftp上传到nginx的静态页(尤其是打包好的单页应用),有可能遇到客户端缓存不刷新的问题,即使重启nginx都无效 客户端浏览器也有缓存,一般关闭进程(手机清理,注意某些app光按返回键退回桌面是不会结束进程的),强制刷新网页等 ......
vue3 高德地图弹窗选址功能
import { defineComponent, h } from 'vue'; import AMapLoader from '@amap/amap-jsapi-loader'; import { Input, AutoComplete, Modal, message } from 'ant-d ......
vscode保存时自动ESLint格式化(vue)
一、安装eslint 二、vscode全局配置 2.1 打开设置 2.2 打开 settings.json 2.3 在settings.json中添加eslint配置 { "code-runner.runInTerminal": true, "eslint.format.enable": true, ......
Linux---安装nginx
1.安装所需环境(依赖包) yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel //一键安装 详解: 分开安装命令: yum install gcc-c++ //安装gcc yum install -y pcre p ......
vue 阻止向上和向下冒泡
1、阻止向下冒泡<div @click.self="cancelFunc"></div> 2、阻止向上冒泡<div @click.stop="cancelFunc"></div> ......
VUE怎么实现web端上传超大文件
IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag 客户端每次提交下载请求时,服务端都要添加这两个响应头,以保证客户端和服务端将此下载识别为可以断点续传的下载: Accept-R ......
Linux&Nginx16_Nginx反向代理6
一、概念 反向代理代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。 首先我们先理解正向代理,如下图: 正向代理 ......
实现态展示数字(从0动态涨到指定数字)vue2与vue3
vue2 1 安装插件npm install vue-animate-number 2 在MAIN.JS中引入import Vue from 'vue'import VueAnimateNumber from 'vue-animate-number'Vue.use(VueAnimateNumber) ......
Vue router 跳转
useRouter(跳转), useRoute(获取路由参数) // login.vue // 路由跳转-引入-01 import { useRouter } from "vue-router"; // 路由跳转-实例化后-02 // useRouter 使用push方法进行跳转 const rou ......
vue 加减乘除精度问题处理
安装 bignumber.js yarn add bignumber.js 新建bignumber.js文件 import { BigNumber } from 'bignumber.js' 加 export const plus = (a, b) => { const newPlus = new ......
vue的几个记录
1.父组件传递子组卷数组参数 props: { boxData: { type: Array, default: () => [], //重点 }, 2.要实现父组件传递子组卷的参数动态更新 (父-》子-》子,也只需要在最后一个子组件监听即可。) 需要用到监听器 watch:{ //监听父组件传递的 ......
通过 lua 进行 nginx redis 访问控制
Nginx来处理访问控制的方法有多种,实现的效果也有多种,访问IP段,访问内容限制,访问频率限制等。 1. 需求分析 1. Nginx来处理访问控制的方法有多种,实现的效果也有多种,访问IP段,访问内容限制,访问频率限制等。 2. 用Nginx+Lua+Redis来做访问限制主要是考虑到高并发环境下 ......
Vue登录页
1. 创建login.vue文件 // @/pages/login.vue <el-form ref="formRef" :rules="rules" :model="form"> <el-form-item prop="username"> <el-input v-model="form.user ......
Vue2异步更新及nextTick原理
vue2.7 源码中,nextTick并没有直接使用某个 API ,而是采用了优雅降级的方案去实现异步更新。我们额外维护了一个 callbacks,用于存储 nextTick 回调 ......