- 博客(57)
- 资源 (5)
- 收藏
- 关注
RSS订阅
原创 css中position的4个取值的含义
css中position的4个取值的含义一、在我们书写css代码的时候，position取值有4个，分别是：1、 Absolute：绝对定位，是相对于最近的且不是static定位的父元素来定位2、 Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。3、 Relative：相对定位，是相对于其原本的位置来定位的。4、 Static：默认值，没有定位。二、效果展示1、position：absolution①设置3个不同尺寸的的div，分别添加不同背景色，
2020-08-09 08:56:30
2048
原创 递归后台数据生成指定格式
<template> <div>树形菜单</div> <div> {{ newTreeData }} </div></template><script>export default { data() { return { newTreeData: [], treeData: [ { id: "1", nam
2021-07-16 16:58:53
211
原创 vue3.0父子组件传递参数
一、父传子第一部分：父组件代码<template> <div> 父组件【父传子】：：===>{{ state.chuanValue }} <Son :chuanValue="state.chuanValue"></Son> </div></template><script>import Son from "./Son";import { reactive } from "vue";
2021-07-13 16:09:29
1575
原创 vue中实现：单选多选功能
代码<template> <div class="hello"> <div v-for="(item, index) in arr" :key="index" class="every-child" @click="clickHandle(index)" :class="clickIndex.indexOf(index) !== -1 ? 'addClasss' : ''" > .
2021-07-07 09:27:36
851
原创 TS父传子
父组件引入子组件 注册——并传值引入import Sopmian from "./test.vue";注册 components: { Sopmian, BindSop, },传递参数 <BindSop :choosedModelId="state.choosedModelId" :productTreeTemplateId="state.productTreeTemplateId" ></BindSop>
2021-06-01 08:33:52
459
原创 input实现父子绑定
笔记：input实现父子绑定父级input <input type="checkbox" @click="loveOneSopChild" :data-index="index" :data-id="item.list.id" :checked="item.
2021-05-30 18:30:56
158
转载 vue获取radio checkbox的值
单选框<div class="radio"> <form> <label v-for="(item,index) in question_item.cand_item"><input v-model="checkedValue" class="border_w" type="radio" name="Q3" :value="index"/>{{item.text}}</label> </form></
2021-05-27 17:33:23
2243
原创 vue父传子props
父组件<template> <div> <button @click="clickhandle">点我改变参数</button> <!-- 传递的名字+绑定的参数 --> <Son :parent_value="value" :parentName="name"></Son> </div></template><script>import Son
2021-05-19 22:31:25
104
原创 el-tree自定义id
<el-tree:data=“state.listData”@node-click=“handleNodeClick”:current-node-key=“state.listData.treeId”> :current-node-key="state.listData.treeId"
2021-05-10 11:09:38
888
原创 JS中 filter 的使用
JS中 filter 的使用。var data = [1, 4, 7, 12, 21];var result = data.filter((value) => { //筛选出数组中满足某个条件的数 创建一个新的数据，并且不会改变原数组 return value % 2 === 0;});console.log(result); //[4, 12]console.log(data); //[1, 4, 7, 12, 21]...
2021-04-19 08:54:11
206
原创 JWT使用方法
一、加密算法//salt文件// 该文件包含一些加密的信息// 会导出一个对象const crypto = require('crypto'); // 加密方法包，里面包含了各种加密的方法const MD5_SUFFIX = 'F71_salt'; // 加密后缀，也就是除了加密我们要加密的数据以外，我们在要加密的数据后面加一个后缀，增加安全性module.exports = { secretKey : 'F71_key', // 密钥 // 可以对传入数据进行一个加密
2021-03-31 17:16:46
238
原创 微信小程序打开地图选择位置
页面设置一个button按钮，点击触发（showMap）函数，调用api showMap() { wx.chooseLocation({ success: (res) => { let { address } = res; this.setData({ bigAddress: address }) } }) },...
2021-03-28 20:33:06
480
原创 微信小程序分享功能（图片版本）
通过给 button 组件设置属性 open-type=“share”，可以在用户点击按钮后触发 Page.onShareAppMessage 事件
2021-03-28 20:23:41
680
原创 微信小程序登录功能（openid：唯一标识符）
第一步：前台做的事通过wx.getUserInfo这个API获取用户头像 基本昵称。通过wx.login 获取code传给后台的数据有：Code、appid、appSecret（wei’xin）第二步：后台做的事：后台请求微信服务器，携带上述三个参数Code、appid、appSecret，发请求给微信服务器，获取openidGET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js
2021-03-28 19:34:26
1363
1
原创 防抖和节流
html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖和节流</title></head><body> <butto
2021-03-28 08:54:38
241
1
原创 微信小程序单选框实现
一、页面效果二、实现html代码 <!-- 遍历展示地址信息 --> <radio-group bindchange="radioChange" class="fontChange"> <label wx:for="{{needShowAddress}}" wx:key="address"> <view> <radio value="{{item._id}}" /> {{item.na
2021-03-19 10:58:05
319
原创 小程序商品展示带横向滚动功能
一、页面效果（全部商品模块）二、wxml部分<view> <!-- 横向滚动区域 --> <scroll-view class="major" scroll-x="true"> <!-- 循环遍历 --> <view class="box" wx:for="{{srcxList}}" wx:key='pic' data-index="{{item.xList}}" bindtap="gofenleipa
2021-03-16 08:55:57
412
原创 react学生管理系统案例
一、效果图（实现基本的增删改查功能以及页面跳转）二、依赖技术json：server服务器bootstrap布局样式useState, useEffect, useRefreact-routeraxios三、代码篇3.1：服务器的搭建（这篇博文写的很清楚，照着撸就行json：server服务器的搭建）3.2项目结构（使用react脚手架搭建的项目）3.2.1脚手架说明react 为我们提供了官方的脚手架工具，可以帮助我们快速搭建项目。安装命令如下：npx create-react
2021-02-28 11:01:58
1561
1
原创 react受控组件（单选框）
一、实现效果二、实现代码<!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-02-27 21:07:50
593
原创 react受控组件（多选框）
利用react技术—获取用户的选择页面效果代码实现<!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-02-24 18:23:57
904
原创 react-子传父案例（汇率转换）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>钱币换算</title> <!-- 引入 React 核心库 --> <script
2021-02-24 14:59:40
273
原创 element ui 配合vue脚手架实现分页功能
一、页面效果二、stulist组件代码<template> <div class="container"> <!-- 搜索框 --> <div style="margin-bottom: 20px"> <el-input placeholder="请输入内容" prefix-icon="el-icon-search" style="width: 300px"
2021-02-02 17:43:50
266
原创 VUE绑定事件案例—文字跑马灯效果
VUE绑定事件案例—文字跑马灯效果要实现的效果：点击【浪起来】的时候，文字逐渐向左移动一个单位（循环）；点击【猥琐发育】，文字停止移动。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2021-01-28 17:50:51
223
原创 vue留言板
一、实现效果二、实现原理：vue数据的双向绑定（v-model）；vue组件之间传递参数（利用注册中间件（ const bus = new Vue(); //用于组件之间的数据传递））。三，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
2021-01-27 17:34:22
732
原创 JWT状态保持
状态保持状态保持的概念sessionJWT状态保持的概念所谓状态保持，就是指保存用户的登陆状态。用户在一定时间内，如果再次打开网站，那么就不需要再次登陆。因为登陆的状态已经在上一次登陆中被保存下来了，但是，这个状态的保存不是永久的，一般会有一个时间。最早的时候，要实现状态的保持，最常见的就是：cookie：所谓 cookie，是将用户的信息保存在客户端，下一次用户再访问网站的时候，会自动携带 cookie 到服务器端。session：将用户的数据存储在服务器端，客户端返回一个 sess
2021-01-17 09:13:46
582
1
原创 前端模块化export || export default =＞ import暴露与接收数据
1、export与export default均可用于导出常量、函数、文件、模块等2、在一个文件或模块中，export、import可以有多个，export default仅有一个3、通过export方式导出，在导入时要加{ }，export default则不需要4、(1) 输出单个值，使用export default(2) 输出多个值，使用export(3) export default与普通的export不要同时使用案例：//html代码块——通用<!DOCTYPE html&
2020-12-30 17:44:08
1599
原创 express的安装步骤
第一步：打开vscode 先全局安装 输入命令npm i express-generator -g第二步：打开cmd【win+R】 输入进入桌面指令：cd desktop第三步：继续输入指令：express test2222桌面就会出现一个test2222的项目第四步：用vscode打开；看看有没有node_modules；如果没有 运行 npm install；第五步： npm start;如果成功 打开localhost3000 就可以看到欢迎的页面查看全局安装的依赖包：npm lis
2020-12-28 14:24:23
456
原创 node.js环境变量配置
node.js环境变量配置1、node.js在使用的时候会出现如下问题：2、出现原因：node安装位置的问题或者是node环境变量未配置。①安装位置：一定要安装在C盘（title：我自己在安装的时候出于"良好的安装习惯"，将node安装在了D盘。导致使用不起，所以一定要安装在C盘！所以一定要安装在C盘！所以一定要安装在C盘）；②环境变量配置one：在我的电脑上右击-属性-高级系统设置two：在弹出的窗口中点击右下角的“环境变量”按钮three：新增环境变量（例如：我取得名字就是npm：路
2020-12-23 17:26:49
1098
原创 异步案例：找到韩梅梅的班主任
通过异步async|await 发送ajax请求，获取到韩梅梅对应的班级再对应的班主任1、stu.json文件{ "student": [ { "id": 1, "name": "张三", "age": 20, "gender": "男", "classId": 1 }, { "id": 2,
2020-12-16 09:29:48
90
原创 1、前端知识-html篇
1、HTML（Hyper Text Markup Language）：超文本 标记语言超文本（Hyper Text）：（文字、图片、链接、音频、视频等文本/非文本元素）标记语言（Markup Language）：是一套标记标签，HTML使用标记标签来描述网页2、CSS（Cascading Style Sheets）层叠样式表3、HTML注释书写格式：<!—注释内容–> 快捷键：CTRL+?主要用于描述代码的功能，浏览器解析的时候会忽略注释内容4、HTML元素的组成部分5、嵌套
2020-12-15 13:15:04
77
原创 ajax请求数据并渲染页面
<!DOCTYPE html><html lang="en"><style> span { display: inline-block; width: 100px; height: 30px; border: 1px solid red; line-height: 30px; text-align: center; font-size: 10px;
2020-12-14 14:37:42
1371
原创 弹窗水平垂直居中的设置方式
弹窗水平垂直居中的设置方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>水平锤子居中弹窗</title></head><body>
2020-12-13 14:34:28
371
原创 静态页面练习
静态页面笔记效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>项目五</title> <link rel="stylesheet" href=
2020-12-10 17:00:09
334
原创 静态页面学习笔记
一、效果图二、HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Start-up</title></head><style>
2020-11-29 21:29:57
166
原创 笔记：利用ajax请求数据
利用ajax向后台请求数据一、下载express 工具包win+r 运行 cmd1、修改淘宝源：npm config set registry https://registry.npm.taobao.org2、创建一个工程目录 myapp，并进入目录3、项目初始化：npx express-generator4、安装依赖：npm install5、启动 npm start6、使用 http://localhost:3000 访问，查看访问页面 页面出现Express界面则运行成功。二、
2020-11-22 20:21:03
151
原创 利用SVG技术制作验证码
效果图：一、html代码块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>验证码</title></head><style> &l
2020-11-14 18:17:31
447
原创 利用JS控制插入视频的播放/暂停/快进等功能
利用JS控制插入视频的播放/暂停/快进等功能1、页面样式2、HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title><
2020-11-08 18:19:03
4249
原创 模仿秒杀倒计时功能
一、效果二、HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>秒杀倒计时</title></head><body>
2020-11-01 13:39:55
167
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人