- 博客(148)
- 收藏
- 关注
RSS订阅
原创 使用云服务器上线网站流程
刚好最近练手了一个开源项目，直接买了一年的服务器时长，上线一下项目，顺便记录流程。校园云+首单一年目前需要40元（记得之前稍微便宜些）。一、购买云服务器可以选择阿里云、腾讯云或其他等等。这里我购买的是腾讯云：https://cloud.tencent.com/act学生可以购买校园云服务器，比较便宜。地址：https://cloud.tencent.com/act/campus镜像推荐选择linux操作系统，适合学习，校园云开箱即用，没有太多配置。其他云服务器可以按自己需求来配置。二、打开控制台
2022-02-26 19:51:03
1829
2
原创 百度地图自定义标注弹框 InfoBox
具体API可以参考文档，但官网的InfoBox源码有误，导致调用弹框的close事件不会关闭弹框。用下面老版的js就可以了，主打一个开源精神。
2023-11-15 19:06:23
405
1
原创 TS知识点复盘
在聊TypeScript 之前先弄清楚两个概念：动态类型语言和静态类型语言。动态类型语言：运行期间才会做数据类型检查的语言，不用给变量指定数据类型。如JavaScript、Ruby、Python等语言。静态类型语言：数据类型检查发生在编译阶段，写程序时需要声明变量的数据类型。如C、C++、C#、Java等语言。TypeScript把不注重类型的动态语言变成关注类型的静态语言。所以到底什么是TypeScript？可以理解为可扩展的JavaScript 或JavaScript 的超集。
2022-10-05 21:47:50
296
1
原创 【Webpack】自定义file-loader时图片解析后出现[object%20Module]
手写file-loader视频讲解根据视频教程一顿操作后，编译后请求图片资源时出现404问题GET http://127.0.0.1:5500/dist/[object%20Module] 404 (Not Found)在搜索引擎里看了半天，很多只是讲了添加这个配置即可，没有说明原理。仅针对于开源的file-loader，而我们自定义loader，不需要这个配置。能解决问题肯定是配置生效了，所以我直接去看了源码，观察这个配置影响了什么内容以下为file-loader源码部分内容截取由此，可以看到es
2022-08-07 20:35:48
781
原创 使用SVG+JS实现环形进度条
示例运行效果整体思路：1.使用SVG绘制圆环，以及内部百分比的文字2.设置圆环的偏移属性，使其默认长度从0开始3.通过定时器，每隔一段时间修改偏移属性，改变圆环长度，并修改文字的数值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &
2022-05-28 20:52:13
564
原创 前端使用canvas将颠倒的图片进行旋转矫正
效果展示图图1为原图图2为180°旋转后的结果图3为镜像翻转的结果相关原理主要是用了canvas里变换相关的API，处理后再使用canvas绘制图片1.旋转图片默认情况下，绘制图片的效果如图1（图中预期为错别字，是区域…）移动原点到canvas的中心点：成像效果如图2绕原点顺时针旋转Pi个弧度,成像效果如图3最后调整从(-img_width / 2, -img_height / 2)这个下标开始画图即可2.图片镜像通过scale调整方向即可。scale(scaleX, s
2022-05-18 19:35:24
2918
原创 手写html/css-步骤进度条
语义化：使用列表性质的HTML标签自适应：调整浏览器视口大小，列表之间等距离自动缩放扩展性：添加或删除步骤，宽度重新等分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=.
2022-04-08 15:50:00
543
1
原创 for循环内定时输出问题（含异步解决方案）
问题如何实现第一秒打印 1， 第二秒打印 2思路分析以下代码能否实现上述功能？答案是不能。因为 setTimeout 的 console.log(i); 的 i 是var 定义的，所以是函数级的作用域，不属于 for 循环体，属于 global。等到 for 循环结束，i 已经等于3了，这个时候再执行 setTimeout 的回调函数，里面的 console.log(i);的 i 去向上找作用域，只能找到 global下 的 i，即 3。所以输出都是 3。for (var i = 1;i<=
2022-03-27 15:23:21
1706
1
原创 实现圣杯布局的三种方式
圣杯布局基本介绍圣杯布局达到视觉效果为，两边两栏宽度固定，中间栏宽度自适应。在HTML结构上中间栏在最前面保证了最先渲染中间提升性能（因为这种布局比较老，我认为在现代浏览器中这点儿性能优化效果并不是很大），并且兼容性良好。浮动法核心：中间三列设置float:left，清除父元素#content的浮动影响，并给#content设置padding。调整#middle的宽度width:100%，通过margin-left和相对定位的方式，调整#left和#right，使其位于#middle的两侧<.
2022-03-24 11:10:49
796
原创 时间处理相关js模块封装
一个简单的时间处理模块，用于需要展示时间信息的列表中（如聊天列表或其他等）功能当天的时间，显示时+分昨天的时间，显示昨天今年的时间，显示月+日以前的时间，显示年份使用方式如下输出结果dayTransform.js模块export default { dateTime(e) { let old = new Date(e); let now = new Date(); // 获取old具体时间 let d = old.
2022-03-21 22:02:19
447
原创 浅拷贝与深拷贝
浅拷贝创建一个新的对象，即堆中新开辟一块内存拷贝的是值（如果属性是一般数据类型，拷贝的就是基本类型的值，如果属性是引用数据类型，拷贝的是内存的地址）简单来说就是拷贝原对象第一层的元素function shallowClone(obj){ var newObj = {} for(var i in obj){ // 加if判断是因为for...in会遍历到原型链上的属性，我们只需要拷贝存在于source对象本身上的属性 if(source.hasOwnPr
2022-03-18 21:06:18
261
原创 100+行代码手撕vue2.0数据双向绑定原理
数据双向绑定是如何实现的？Vue.js是通过数据劫持结合发布者订阅者的模式来完成双向数据绑定的，会通过Object.defineProperty()来劫持各个属性的getter和setter，当数据发生变动时，发布消息给订阅者，并触发相应的监听回调。vue.js文件class Vue{ constructor(options){ this.$data = options.data // 调用数据劫持的方法 Observe(this.$dat.
2022-03-18 19:53:15
638
原创 前端-数组拍平
来自微信面经代码题 出处实现一个类（考察数组拍平）：给一个嵌套数组[[1,2],[1],[3],[5]]，实现next方法（取下一个值），hasNext方法（是否还有下一个值）按自己的理解写了代码，数组拍平的其他方法待补充…function Flatten(arr){ this.prevArr = arr this.look = 0 this.result = [] this.flattenFn = (arr)=>{ for(let i=0;i&l
2022-03-11 22:01:49
945
原创 jsonp解决跨域-实现原理
实际不采用，但面试常考。需要前后端配合，但只支持Get请求。jsonp概念浏览器端通过script（支持跨域）标签的src属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做JSONP。Nodejs后端，步骤如下1、初始化终端输入npm init 用于生成package.json管理项目中需要的包2、安装express使用express框架搭建服务器npm i express@4.17.13、新建server.js文件并写入代码// 1.导入expressc
2022-03-03 21:46:52
265
原创 urllib+xpath实现爬取豆瓣个人用户年度观影海报
基本思路：1.根据输入的用户id组成完整的请求url地址（注意每次请求的地址不一样）2.至少发起一次请求去获取用户的记录总页数（同时第一次请求也下载数据）3.根据获取的总页数每次请求一页，解析出用户名，电影海报图片，电影名并下载至本地4.每次下载时根据标记日期来判断是否已经将本年度的数据下载完，下载完但如果还继续执行下载则抛出异常缺陷：1.由于豆瓣不能直接筛选某一年度的电影，所有如果要下载较早的年度电影，会从最近的年份开始一一匹配，效率较低# 需求分析，爬取年度观影的电影海报及电影名# ba
2022-01-31 17:00:57
1503
原创 【软件工程】根据数据流图导出程序结构
基本概念数据流图：主要描绘信息在系统内部加工和流动的情况。信息流分为变换流和事务流两种。变换流：简单来说就是输入流与输出流之间顺序执行的一段数据流。数据在变换流内加工、处理。事务流：数据流图呈辐射型，根据输入数据的性质选择加工路径。事务中心从若干动作路径中选定一条继续执行，分支后又成了变换流。面向数据流的软件设计过程，如下图：变换分析在变换之前需要先复审基本系统模型及精化软件数据流图。获取足够详细的数据流图（DFD）确定DFD的特性，判定它为变换流还是事务流以家庭保安
2021-12-02 21:17:33
16179
原创 ECharts基础配置
可通过官方案例修改配置查看相关变化 点击前往option = { // color设置颜色，配置项是个数组 color:['skyblue','tomato','gold','green'], // 设置图表的标题 title: { text: 'Stacked Line' }, // 图表的提示框组件 tooltip: { trigger: 'axis' }, // 图例组件 legend: { // series里面有了name值 则le
2021-11-30 15:54:03
643
原创 【Flask】wtforms表单验证
forms.pyimport wtformsfrom wtforms.validators import length,email# 登录的验证器class LoginForm(wtforms.Form): email = wtforms.StringField(validators=[length(min=5,max=20),email()]) password = wtforms.StringField(validators=[length(min=6,max=20)])l
2021-11-30 13:50:47
727
原创 【Python】flask使用数据库的相关操作
连接数据库需要事先安装pymysql和flask_sqlalchemy安装方式pip install pymysqlpip install flask_sqlalchemyfrom flask import Flaskfrom flask_sqlalchemy import SQLAlchemyimport pymysqlapp = Flask(__name__)# 数据库的配置变量HOSTNAME = '127.0.0.1'PORT = '3306'DATABASE = 'hyac
2021-11-28 17:47:26
627
原创 【uniapp】月份筛选，仅获取年和月
效果图<template> <view class="content"> <picker mode="date" :value="date" fields="month" @change="bindDateChange" > <view style="display: flex;width: 120%;align-items: center;"> <view style="margin-left
2021-10-16 16:41:48
849
原创 mysql数据查询
3、查询“信息管理与信息系统”专业学生的姓名和年龄。select sname,2021-year(birth)from swhere major='信息管理与信息系统';4、查询 107 号课程的最高成绩。select max(grade)from scwhere cno='107';5、统计每个专业的学生人数。select major,count(*)from sgroup by major;6、查询总成绩超过 500 分的学生，要求列出学号和总成绩。select sno,
2021-10-11 14:53:11
290
转载 uniapp二级展开列表
<template> <view class="content"> <view class="position-group"> <!-- 一级循环 --> <view class="pronames_one" v-for="(item,index) in positionlist" :key="index" :class="item.oneliststare?'oneshow':'onehide'"> <view c
2021-10-06 16:52:09
2569
5
原创 js实现发送聊天信息并显示至页面
不是移动端！！不是移动端！！只是背景放的是一个手机。（素材放到最下面了）最近被这个卡了好久，昨天刚有了idea就写了个demo测试了一下，其实就是一个动态添加元素给同样遇到问题的朋友一点启发。（存在一点小bug，还没有实现气泡自适应和自动定位到新消息）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com.
2021-09-02 18:08:22
1314
原创 websocket实现基本聊天室功能
效果图如下分别为用户1、2、3的浏览器端页面简易设计了用户进入聊天室后的总人数为当前用户的名称。客户端代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
2021-09-01 21:10:43
446
原创 websocket的API使用及node.js搭建websocket服务
客户端代码<!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"> <title&
2021-09-01 20:17:31
464
原创 DOM元素查询与修改——购物车案例
<!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"> <title>购物.
2021-08-28 18:14:14
169
原创 【生产实习】web方向实训练习day01
练习一 表格练习要求画出下表<!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">
2021-08-23 20:48:01
90
原创 【uni-app】自定义导航栏样式
$system-blue 是我在uni.scss中配置的全局颜色，需要设置scss才能使用<template> <view> <!-- 自定义导航栏 --> <view class="navBarBox"> <!-- 状态栏占位 --> <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
2021-08-15 15:44:15
726
原创 【uni-app】使用iconfont字体
第一步搜索需要的图标，选择图标添加入库第二步网页导航栏的右上角点开购物车，查看已入库图标第三步新建项目，尽量把同一个项目中用到的图标放在一起第四步将图标下载至本地，解压第五步将以下两个文件导入到项目的static下第六步修改iconfont.css文件代码如下@font-face { font-family: "iconfont"; src: url('~@/static/fonts/iconfont.ttf');}第七步在App.vue中引
2021-08-11 16:10:04
224
原创 【uni-app】数据缓存
官方文档<template> <view> <view class="home"> <view v-for="item in list"> {{item}} </view> <button @click="setStorage">点击设置数据缓存</button> <button @click="setStorageSync">点击设置数据缓存(同步)</button
2021-08-10 14:06:13
411
原创 【uni-app】下拉刷新
官方文档pages.jspn 这里只展示需要设置下拉刷新的页面"pages": [ { "path" : "pages/home/home", "style" : { "navigationBarTitleText": "列表", "enablePullDow
2021-08-10 11:20:39
134
原创 【uni-app】底部导航栏页面切换
效果演示直接在pages.json里配置就行了。我丢，和原生Android比真的是太简单了。配置tabBar，内容是数组，2-5个。以下为数组中每一个对象的常用属性text 显示的文字内容pagePath 跳转的页面路径iconPath 未选中时的图标路径selectedIconPath 选中时的图标路径"tabBar":{ "list":[ { "text":"首页", "pagePath":"pages/home/home", "iconPath":"
2021-08-08 16:12:35
1069
原创 杭州亚运会倒计时
最近在学Vue，顺便用了框架实现了需求mounted() 是生命周期钩子，在Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）后进行回调<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie.
2021-08-07 10:04:38
484
原创 【Vue】列表过滤
用watch实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t.
2021-08-04 11:10:32
149
原创 简单图片切换
JS基础 简单实现图片切换摸鱼写的代码<!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">
2021-07-23 15:36:46
234
原创 【立方体旋转效果】让老婆转起来
(ಡωಡ)让老婆转起来知识点旋转和平移，关键字动画<!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=
2021-07-20 11:31:06
90
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人