- 博客(32)
- 收藏
- 关注
RSS订阅原创 elementui-table封装
总的来说就是把table的表头改成动态数据渲染，调用的时候将表头数据和表格数据传给ExTable子组件渲染， 不用一行一行的写el-table-column，每列都可以自定义需要的参数还是很方便的，另外还可以加上分页，加上自定义组件 根据render修改列数据展示内容。
2023-03-15 11:15:20
1013
1
原创 antd design pro of vue a-drawer自定义封装
antd design pro of vue a-drawer自定义封装因为最近项目中频繁使用到抽屉组件，所有封装一个自定义的抽屉，在项目中可以少些很多重复代码的同时，改动时也能更加方便。这里记录一下。这里使用antd design vue版的ui组件库，包含a-drawer、slot、$emit等新建抽屉组件文件DrawerAssembly.vue代码<template> <div class="drawerAssembly"> <a-drawer
2022-04-27 21:16:16
2630
原创 antd pro v5
antd pro v5 关于网络请求和路由设置相关网络请求antd在前段时间发布了v5版本，已经支持预览了，大家可以通过链接v5预览。看完文档再对比v4，我个人感觉v5精简了不少，首先是弱化了dva，加强了hooks的使用，在v5版本中也已经默认使用typescript了。这里和大家分享一下在v5使用中遇到的问题。网络请求方面，官网文档中有提到umi.js-request 。在使用时发生跨域。。。解决方案有很多，这里只分享前端解决跨域的方法，在v5之前的版本中，可以在package.json
2020-10-16 16:03:01
3351
3
原创 uniapp调用高德api
主要包含：####### 1、uniapp调用高德地图的微信sdk####### 2、实现坐标和经纬度互相转换功能####### 3、实现关键字检索功能说明：页面以uniapp编写，使用uniapp官方map组件，cover-view处理原生组件层级问题。以下是单个页面布局和业务逻辑:<!--地图选择界面--><template> <view class="pageMap"> <view class="head"> <White
2020-09-03 16:17:31
3566
原创 css - scoped
scoped属性定义定义：当style标签具有该scoped属性时，其CSS将仅应用于当前组件的元素作用：避免class名和样式全局污染，这里借用度娘的解释是scoped会在元素上添加唯一的属性（data-v-x形式），css编译后也会加上属性选择器，从而达到限制作用域的目的。这里记录一个日常开发中遇到的问题，我平时写页面习惯使用百分百结合flex盒模型布局，这里就会有一个高度问题，高度一般页面设置为100%，但是如果页面内容不足以撑起当前设备100%高度就会露出页面底色。这种情况有几种解决方案：
2020-09-02 18:53:36
1271
原创 uniapp h5端跨域问题
问题场景：使用uniapp框架开发h5页面调用后端接口（线上开发服务器环境下），出现跨域问题。前端请求配置说明：前端使用uniapp编写h5代码，前端使用promise异步函数对uniapp自带请求进行二次封装，服务器请求路径使用baseUrl公用配置路径。调用接口时，接口预检正常返回，数据返回时提示跨域本次使用的解决方案：由后端在header头添加origin语句，放开指定域名或所有域名，前端不做改动，放开后前端再发送请求时，接口数据正常返回。前端使用 HBuilder X 开发工具内
2020-08-04 16:54:39
4900
原创 前端组件化思想
前端工程化-组件化问题：随着前端的发展，前端项目需要处理的业务逻辑越来越多，项目越来越复杂，代码量越来越大，随之带来的是代码难以阅读、维护成本大、耦合度高、代码冗余等问题，这些问题也成了前端开发人员不得重视和需要去解决的问题。解决：为了解决上面提到的问题，前端提出了项目工程化的思想。结合各大官网及百家思想对前端工程化的定义，我个人的理解是，前端工程化就像是以一种大家都认可的规范方式对前端项目开发的各个阶段进行建议性标准化约束。####前端工程化主要可以分为：#####模块化#####组件化#
2020-08-04 09:32:34
529
原创 根据访问设备不同跳转相应域名 js
本文主要记录 根据不同的访问设备跳转到不同的域名 （pc端和移动端）场景介绍：A a.xxx.com pc端样式 B b.xxx.com 移动端样式 统一域名www.x.com这里以vue框架为列1、当用户在pc端访问www.xxx.com时，在App.vue 里做判断watch: { $route: function(to, from) { document.body.scrollTop = 0; document.documentElement.scro
2020-07-11 11:31:53
745
原创 HTML页面渲染的过程
详细记录一下关于：一个页面从输入URL到页面加载显示完成，这个过程发生的事。 ---加深理解记忆一、浏览器查找域名对应的IP地址。=>DNS查询（1、查找浏览器缓存的DNS，如果没有继续往下。2、查找系统DNS缓存，读取host文件查找3、查找路由器DNS缓存4、查找ISP 域名服务商的DNS缓存5、查找根域名服务器的DNS缓存）二、浏览器向web服务器发送一个http请求。=>TCP三次握手（1
2020-07-10 15:26:20
1305
原创 前端自适应布局 -- rem
前端在开发应用的是偶难免需要考虑不同分辨率的容器，本文主要介绍 - - rem来实现响应式布局1、rem的介绍：首先来看，什么是rem单位。rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为16px，所以：1 rem = 16px为了计算方便，通常可以将html的font-size设置成：html{ font-size: 62.5% }
2020-06-10 16:43:39
1059
原创 pm2常见命令
pm2常用命令记录pm2 start app.js //启动app.js应用程序(单个文件)pm2 start ./bin/www //启动项目pm2 start app.js -i 4 // cluster mode 模式启动4个app.js的应用实例pm2 start app.js --name=“api” // 启动应用程序并命名为 “api”pm2 start app.js --watch //当文件变化时自动重启应用pm2 list
2020-06-09 10:55:32
279
原创 uni-app web-view内嵌网页
内嵌网页 应用与网页间的通信在使用uni-app开发的app应用里内嵌非应用内的静态文件的网页，相互通信分两种情况首先附上uni-app web-view官网链接web-view介绍1、网页向应用传值应用中监听 web-view 的 message 事件<template> <view> <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage
2020-06-06 10:56:46
9070
1
原创 小程序推广码获取参数处理Buffer
处理Buffer文件问题场景：小程序生成推广二维码，用户A推荐用户B注册，将用户A的openid作为参数写进二维码中，用户B微信扫码跳转到小程序应用中并获取二维码中的参数，生成推荐记录。微信官方文档 微信生成推广码接口根据步骤调用接口，返回值是一个二进制文件，需要处理成图片。（后端调用该接口不考虑）前端处理方案，将二进制文件转换成base64文件，再存储本地即可。具体实现如下：let val = { path:'pages/index/index', scene:op
2020-06-03 16:57:57
1312
2
原创 vue性能优化
背景 vue cli3.0 + element-ui 管理系统部署上线后首次访问速度非常慢将写好的vue项目部署到服务器上后首次加载，速度感人，这里记录下优化的方案1、查找原因在network中看到页面加载中有一个打包文件请求的时间非常长资源请求耗时：从图里可以明显看到个别js文件请求耗时高达7秒2、选择解决方案优化加载速度的方法很多，比如优化代码、优化请求接口，或者采用压缩打包文件（需要配置nginx，优化效果也比较明显）。本文选择详细描述的是 cdn引入文件，减少webpack打包文件的
2020-05-26 14:48:21
254
原创 vue3.0+element-ui 按需加载
记录vue3.0在使用element ui时遇到的问题及解决方案1、根据element 官网步骤操作安装babel-plugin-componentnpm install babel-plugin-component -D修改 .babelrc 文件 （在vue3.0里是没有 .babelrc 文件的 只有 babel-config.js文件） 将修改写入babel-config.js文件module.exports = { "presets": [["es2015", { "modu
2020-05-25 17:39:59
1214
原创 Linux操作文件命令
记录常见的linux上查看、编辑文件命令ls -l 展示文件 mkdir xxx 创建文件夹mkdir -p xxx/xxx/ 多层创建文件夹touch xxx.txt 创建文件rm -f xxx 删除文件不询问rm -r xxx 递归删除文件mv xxx.txt xxx.txt 重命名mv xxx.txt xxx/xxx 剪切到cat -n xxx.txt | more 查看文件cp xxxx.txt xxxx/ 复制文件到某文件夹下cp -r xxx xx
2020-05-24 11:25:35
155
原创 Linux服务器搭建nginx
1、安装nginx运行所需的环境//可以在根目录或者创建的nginx文件夹下执行yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel2、下载和解压nginx包// 在 /usr/local 下创建一个nginx文件夹mkdir nginxcd nginx//下载nginx压缩包，nginx文件夹下执行命令wget http://nginx.org/download/nginx-1.13.7.tar.gzta
2020-05-24 11:17:23
174
原创 在vue中使用Echarts
官网例子<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script></head><body> <!-- 为ECh
2020-05-19 09:53:04
263
原创 时间戳和本地时间间转换
时间戳转化本本地时间系统标准时间转化为本地时间let initial = 'Fri Jan 10 2020 18:52:45 GMT+0800 (中国标准时间)' //中国标准时间//定义一个时间转换函数conversionTime :function(time){ //转化为系统时间 let date1 = new Date(time); //系统时间转化成时间戳 let date2 = date1.getTime();
2020-05-19 09:34:20
958
原创 Sequelize 增删改查接口
Sequelize 基本的增删改查//查单个 findOne({where:{查询条件}})async function findOne() { let result = await UserList.findOne({where: {id: 1}}); console.log(result);}//查所有 findAll 不传条件则查询所有async function findAll() { let result = await UserList.findAll({
2020-05-13 14:47:12
379
原创 node.js + koa2脚手架搭建项目
最近读了阮一峰老师写的关于koa相关的技术，很多以前不太理解的地方也有了更清晰的认识。这里记录一下用koa脚手架搭建项目。1、全局安装 koa脚手架npm install -g koa-generator2、创建项目koa2 project //创建一个名为project的koa项目 koa2 project -e //创建一个名为project 且 以ejs为模板的项目 不加 -e则使用默认3、安装依赖//根据提示操作cd projectnpm install4、运行项目n
2020-05-11 16:37:13
949
原创 websocket在不同情形下的使用
1、在react中使用websocket在项目根目录中创建一个websocket文件夹用于封装公用组件代码如下：/** * 参数：[socketOpen|socketClose|socketMessage|socketError] = func，[socket连接成功时触发|连接关闭|发送消息|连接错误] * timeout：连接超时时间 * @type {module.webSocket} */class webSocket { constructor(param = {}) {
2020-05-11 14:51:42
436
原创 js中常用的数组方法
在项目开发中常常需要处理数组，所以本文记录了几种处理数组的方法1、创建指定长度的数组 Array 构造函数例：const len = 5;const arr = new Array(len);//console.log(arr) = [empty × 5];这种方式创造出来的数组具有指定的长度，但是数组项为空2、创建指定长度且指定默认值的数组 .fill()方法.fill()方法会更改当前的 Array 并使用指定的值去填充它。这有助于在用 new Array() 创建数组后对其进行初
2020-05-11 14:13:26
206
原创 vue 父子组件间的传值方式
父组件向子组件传值父组件中//使用子组件<template> <view> <child :showModal="showModal"></child> </view></template><script> import child from "../../components/child" export default { components:
2020-05-11 11:57:56
121
原创 组件传值之实时刷新
组件传值在我们日常的开发中许多时候需要用到组件传值，个人在 vue、react、uniapp等常用框架中使用组建传值时都出现过，父子组件间传值，没能实时刷新值的变化，导致组件里的一些方法函数不能实时的调用等问题。例：这里用vue来举例父组件<template> <view> <aaa :id='id'></aaa> </view></template> <script>
2020-05-11 10:36:21
766
原创 Axios请求
关于axios的几种常见的类型axios.get()例:axios.get('demo/url', { params: { id: 123, name: 'Henry', }, timeout: 1000, ...//其他相关配置})axios.delete()例子:axios.delete('demo/url', { data: { id: 123, name: 'Henry', },
2020-05-11 10:20:49
193
原创 Mongoose数据库和nodejs
安装 Mongoose新增npm install --save mongodbnpm install --save mongoose//引入mongoose var mongoose = require('mongoose');//创建数据库连接，数据库名字:studentmanagement。如果数据库不存在会自动创建。 mongoose.connect('mongodb://localhost/studentmanagement');//创建一个schema var student
2020-05-11 10:10:39
162
原创 uCharts
###uCharts网站####因为经常有用到uni-app开发一些app和小程序相关的项目，也经常用到图表相关的插件，推荐ucharts给大家，个人感觉还是不错的，种类多也比较完善，使用方法在插件市场有详细的例子，这里附一个网站：http://doc.ucharts.cn/1172181...
2020-05-11 09:40:42
689
4
原创 React 路由
针对React路由的简单处理对于已经习惯了用vue来写项目的我来说，重新玩起react那坑真是无处不在~！！话不多说，今天主要和大家分享下关于react 使用ant design 在Layout布局下的路由处理一、在App.js中引入主页和登录页import React from 'react';import './App.css';import { BrowserRouter as ...
2020-03-19 16:29:02
393
原创 React-axios
React 使用Axios全局绑定很久没有用react的框架写东西了，正好手上有个管理系统项目，拿来练练手。我在项目里使用的是axios，主要和大家分享一下，把axios作为全局方法绑定到react上，这样就不用在没有页面或者组件里引入了，废话不多说直接上。一、安装axiosnpm install axios --save (需要安装node环境)二、对axios再次封装在src目录...
2020-03-13 13:16:07
532
原创 ucharts动态渲染数据
ucharts引入方式分两种第一种按插件的例子引入<view class="qiun-columns"> <view class="qiun-bg-white qiun-title-bar qiun-common-mt" > <view class="qiun-title-dot-light">基本折线图</view> </vie...
2020-02-28 19:48:25
7829
pdf.js资源(修改后的资源包)
2023-03-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人