- 博客(31)
- 收藏
- 关注
原创 微信小程序学习之路-1从零开始搭建一个小程序项目
使用浏览器打开https://mp.weixin.qq.com/网址或者百度搜索微信公共平台,进入后如果没有注册过点击右上角立即注册。进入小程序官方文档 https://developers.weixin.qq.com/进入后找到工具 -下载-稳定版-根据电脑选择下载就可以了,下载完之后按提示安装就可以了。从后台找到开发-开发管理-开发设置就可以看到小程序id了。登陆后点击右上角-设置-代理-设置为不使用任何代理。进入后选择小程序,然后根据提示注册就ok了。安装好登陆是这样子的。
2022-11-12 14:59:09 477 1
原创 iframe自适应高度(随内容高度变化)
由于需求需要把一个项目的页面嵌套到另外一个页面,但是iframe高度不能写死,所以要让iframe高度自适应1.解决思路: 获取嵌套页面的高度,把高度赋值给父页面的iframe代码实现1.首先在嵌套页面获取父级ifram元素let iframeDom = parent.parent.document.getElementById("iframe")2.获取嵌套页面高度let box = document.getElementById("box")3.把页面高度复制给父级iframiframe
2022-05-25 14:09:35 6139
原创 git项目中常见使用命令
git branch -a 查看远程分支与本地分支(所有分支)git push origin --delete 分支 删除远程分支(危)git branch -d 分支 删除本地分支git remote update origin --prune 更新远程分支列表git status
2022-05-11 09:15:54 224
原创 使用canvas绘制基础线条和图片,文字等
<div class="box" > <canvas id="cont" width="1200px" height="900px" >您的浏览器版本过低,请升级浏览器</canvas >如果画线条的画总共有7步 /*canvas只能使用原生js来操作*/ /* 1、获取画布 2、获取画布上下文 3、开始一条路径 4、确定起始点 5、确定结束点
2022-04-28 09:49:04 941
原创 新一代状态管理工具 Pinia学习,快速入门
基本介绍Pinia 是 Vue.js 的轻量级状态管理库官方网站:https://pinia.vuejs.orgpinia和vuex4一样,也是vue官方的状态管理工具(作者是 VueX 核心团队成员)pinia相比vuex4,Pinia 对于 vue3 的兼容性更好pinia相比vuex4,Pinia 具备完善的 TypeScript 类型推荐pinia 同样支持 vue 开发者工具, 最新的开发者工具对vuex4支持不好Pinia 的 API 设计非常接近 Vuex 5 的提案。
2022-04-27 14:05:07 1932 1
原创 图片瀑布流jq实现
最终效果代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
2022-04-25 16:03:29 282
原创 使用vue3 + vite + ts创建项目及vue3compositionAPI介绍
1.创建vue项目npm create vite# oryarn create vitevite快捷使用如果想要快速创建一个vue3项目,可以使用如下命令创建普通vue项目yarn create vite vite-demo --template vue创建基于ts模板的项目yarn create vite vite-demo-ts --template vue-ts2.vsocd插件说明vue2中需要安装插件Vetur,可以实现组件高亮。但是vue3的一些语法在vet
2022-04-25 15:41:51 2271
原创 nginx基础学习
我这篇文章只是简单的让大家认识学习下nginx,并不是很详细,如果想详细的学习建议去技术胖哪里学,地址https://jspang.com/article/39,免费的视频1.初识Nginx和环境准备1.1 nginx是什么Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡1.2 nginx优点1.支持海量高并发:采用IO多路复用epoll。官方测试Nginx能够支持5万并发链接,实际生产环境中可以支撑2-4
2022-04-13 14:45:10 933
原创 浅谈js中的防抖和节流
浅谈js中的防抖和节流防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高1.防抖1.1应用场景:列如实际项目中遇到新增,添加之类得功能,每点击一次新增按钮都是发请求,如果我们连续点击多次就会发很多请求,新增很多条数据,这时候我们就需要用到防抖效果:短时间内大量触发同一事件,只会执行一次函数。1.2什么是防抖:简单来说就是短时间内大量触发同一事件,只会执行一次函数1.3防抖代码的实现:这是一个按钮,我们让它3秒内只触发一次,主要实现思路:定义一个变量,通过变量控制setTi
2022-02-09 14:25:03 791
原创 开发中在master主分支上开发的代码如何提交到另一分支
开发中在master主分支上开发的代码如何提交到另一分支1.命令操作例如要将master分支的一个commit合并到dev分支:1.首先切换到master分支 git checkout master2.在master分支找到想要合并到dev分支的commit的id git log例如这个,找到commit 的id3.切换到dev分支上git checkout dev4.合并命令git cherry-pick 4876cc552fa5e40c10c9482902896
2022-01-07 17:32:42 1965
原创 项目中pdf文件预览和下载功能
项目中pdf文件预览和下载功能1.预览一般上传完文件后后端会把文件存到服务器里,然后预览时会给我们返回文件所在浏览器的路径,我们根据路径实现预览功能预览路径 写了一个方法```javascript‘ process.env.VUE_APP_FILE_PREVIEW_API 代表服务器的路径 encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。export function previewAPI(url) { return ( process.
2021-11-19 10:25:46 1087
原创 原生表格前端纯导出表格
原生表格前端纯导出表格1.表格 <!-- 中间表格 暂时空着 --> <div id="WordSection" class="table"> <table style="width: 100% ;text-align: center"> <tr> <th :colspan="colspan">专业</th> <th v-for="(major, in
2021-11-11 16:28:15 434
原创 elementUI table表格合并相同的内容
elementUI table表格合并相同的内容1.表格和数据表格是这样数据(由于数据太多,只展示了几个) tableData: [ { one: '1 . 产出指标', two: '1 .1 数量指标', three: '1.1.1打造技术技能人才培养高地', four: '1.1.1.1.SCI系统化人才培养体系', target: '1个', realize
2021-11-11 16:14:55 675
原创 vuex存储变量并用watch监听数值变化
vuex存储变量并用watch监听数值变化1.在vuex定义变量,并写方法2.在需要的地方调用方法3.使用watch监听变量的变化
2021-10-11 16:06:46 317
原创 修改页面滚动条的样式
修改页面滚动条的样式 &::-webkit-scrollbar { width: 8px; /*height: 4px;*/ } &::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #00a3a6; } &::-webkit-scrollbar-track { bo
2021-09-07 16:31:50 188
原创 前端表格数据导出为excel表
前端表格数据导出为excel表1. 先写一个请求导出的请求地址export function exportExcelAPI(id) { return `${BASEURL}/assessment/exportExcel?id=${id}`;}2.引入请求地址import { exportExcelAPI} from '@/api/modules/constructManagement/majorGroupAssess';3.点击导出按钮做处理 exportExcel() {
2021-09-07 09:59:07 291
原创 vue中计算属性computed 和watch的区别
vue中计算属性computed 和watch的区别1.computed做一些逻辑处理的会会用computed计算属性 computed 是基于data中数据进行处理的,data数据变化,他也跟着变化当data中数据没有发生改变时,我们调用computed中函数n次,只会进行缓存(执行一次)2.watch监听数据变化时会用watchwatch适合处理的场景是,侦听一个数的变化,当该数据变化,来处理其他与之相关数据的变化(该数据影响别的多个数据)==当数据发生变化时,执行异步操作或较大开销操作
2021-07-22 18:37:37 187
原创 echart 热搜词云(字符云)的制作以及遇到颜色不会随即变得bug
1.首先要引入字符云的js文件或者下载插件进入echart 官网 ,点下载,扩展插件,找到字符云点进去 第一种 在vscode npm i echarts-wordcloud 引入 import "echarts-wordcloud";第二种 在echart 扩展插件 字符云里下载文件 里面有 js然后在需要得地方引入js就可以了// 热搜云词export function hotTerms(params) { // 基于准备好的dom,初始化echarts实例
2021-07-14 14:47:56 2296 3
原创 可视化项目rem适配
可视化项目rem适配1.在项目中安装插件在这里插入代码片npm i lib-flexible -S2.在main.js中引入在这里插入代码片import ‘lib-flexible/flexible.js’3.在vue.config.js写配置文件 如果没有就新建一个在这里插入代码片// vue.config.jsmodule.exports = { chainWebpack: config => { config.module .rule('css')
2021-07-06 14:20:00 213
原创 TypeScript开发环境搭建
TypeScript开发环境搭建1.安装node的运行环境到node.js官网下载安装 [https://nodejs.org/en/] 建议你下载左边LTS版本,就是长期支持的版本,下载,安装的过程很简单安装完成后打开cmd 打开命令行工具,输入node -v查看版本,如果有版本号说明安装没问题2.全局安装typeScript你要使用typeScript 先要在系统中全局安装一下typeScript在这里插入代码片npm install -g typescript安装完成后打开命令行
2021-07-05 15:19:16 202
原创 vue map中国地图的使用及配置
vue map中国地图的使用及配置1.准备好中国地图的数据,但是我做的是广东省的地图,但是跟中国地图也是一样的,就是数据不同地图数据我就不准备了,网上有很多2,引入地图数据在这里插入代码片import JSON from '@/assets/json/guangdong.json';3.地图的配置就跟echart 图表一样在这里插入代码片 // 地图 map() { // 基于准备好的dom,初始化echarts实例 var myChart = echar
2021-06-18 16:36:16 1119
原创 vue在线引入阿里矢量图标
vue在线引入阿里矢量图标1.第一步:打开官网 https://www.iconfont.cn/ ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210618154600492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MDY0MTI5N
2021-06-18 16:00:22 396
原创 git下载安装及使用
git安装及使用1.下载(百度搜git进入下载)2.安装(正常安装即可,不过我用的是vscode,得修改一下配置)3.在vscode里面安装插件,方便进行版本管理4.项目管理4.1初始化项目(在项目所在的文件目录打开cmd窗口) $ git init 4.2管理所有文件 $ git add 4.3 提交 $ git commot -m '提交的信息'注意:...
2021-03-10 18:06:09 202
原创 路由的创建和使用(单文件组件)
路由的创建和使用(单文件组件)1.创建一个js文件,最好放在utils目录// 引入vueimport Vue from 'vue';// 暴露并创建vue实例export default new Vue();2.创建一个js文件,放在router目录下// 1.工程化import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);//3. 引入组件import Ind.
2021-03-04 17:04:30 320 1
原创 vue单文件自定义指令的封装
vue单文件自定义指令的封装第一步(封装一个js文件)// 暴露并配置指令 功能添加背景颜色export const mycolor = { // 解析结构完成后自动运行钩子函数 inserted(el, binging) { //el表示指令所绑定的元素,可以用来...
2021-03-04 16:28:09 729 1
原创 vue中的常用基础指令
vue中的常用基础指令总结1.v-text指令(内容渲染指令)<template> <div> <h1>这个文件主要说明v-text的使用</h1> <p>作用:设置标签的文本内容</p> <p>{{msg}}</p&g...
2021-02-26 16:10:15 328
原创 关于Echarts的使用以及修改图形样式
关于Echarts的使用以及修改图形样式1.引入js文件 echarts官方网址 https://echarts.apache.org/
2021-01-24 20:32:22 6594
原创 前端webApi知识点总结
前端webApi知识点总结1.获取元素 获取1个:document.querySelector('选择器') 获取多个:document.querySelectorAll('选择器'),是一个伪数组2.操作属性 1.获取类名 classNmae//JS给类名做了加工:因为class是一个关键字(JS中就有),加工成classN...
2020-12-31 16:12:28 438
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人