- 博客(179)
- 收藏
- 关注
RSS订阅原创 请求第三方 api
首先找到“天聚数行”注册找到免费 api ,，选中了一个头条热门新闻调试接口，里边有请求地址和请求参数，还有请求信息和相应的结果。然后在 api 文件夹的 user 文件中编写请求信息。（注意，请求参数是虽然写在 params中，但是实际上是以？key= 的形式拼接到 请求的 URL 中。如果是要搜索之类的，那就是要到 vue 页面中给调用的 api文件夹中的 请求函数传递过去参数，这就是携带参数，然后该参数作为形参传递到 params中，并拼接到 要请求的URL 中，进行关键搜索。
2025-03-07 00:19:26
883
原创 文章管理+
该文章管理也是引用由 components文件夹下的 PageContainer 文件来的，在PageContainer中设置来 父传子，通过文章管理页面传递过去标题，具名插槽设置是否需要button按钮，以及默认插槽传递内容。通过在 el-form表单中 添加 inliine属性，使得3个item 项 并排一行，默认是 true不写对表格区域进行渲染， 直接定义响应结果中的 data数据，然后进行渲染渲染文章标题下的列的内容，均为链接，并且无下划线操作，用到作用域插槽。
2025-02-27 00:47:41
356
原创 文章分类页
给 ”编辑分类“ 添加回显。确认并关闭弹框之后，该子组件通过 emit 传递给父组件重新渲染的信息，通过将 修改/添加成功的信息传递给父组件，在父组件的子组件标签中通过 @success监听并绑定函数 onSuccess，该函数重新调用 getChannelList函数，该函数通过更新 channelList里边的内容，在 el-table标签中通过 ：data类似 for 循环进行 渲染。然后校验，校验成功直接发请求，如果 id存在，那么证明该弹框的确认按钮是关于编辑分类的，点击之后弹出修改成功的信息。
2025-02-26 16:19:34
552
原创 正式页面开发-登录注册页面
共用 formModel ，因为登录中也需要 username和password，然后将其在 登录部分的 el-form中 ：model="formModel" 绑定。el-row搭配 el-col来实现板块划分，一行分为 24份数，el-col中通过 ：span="份数"来实现板块占据的份数，offset =""来实现与左侧的margin。右侧的登录页面通过 el-form 表单来总实现，el-form-item表示表单中每个小部分，注册字样，输入用户名，输入密码 ，再次输入密码，注册字样，返回字样。
2025-02-18 21:25:32
1642
5
原创 数据交互，请求拦截器，响应拦截器
关于错误提示也可以使用 element-plus中的消息提示 message。官网直接复制 创建实例 ，配置请求拦截器和响应拦截器的代码。request.js中配置请求拦截器和响应拦截器。
2025-02-16 22:09:00
222
原创 pnpm, eslint, vue-router4, element-plus, pinia
而统一导出就在于 在 app.vue中进行导出各个模块时，必须要写一长串的路径，例如导出user模块，导出路径是 import {useUserStore} from '@/stores/modules/user'，每要使用任何一个模块，就必须要导入这么一长串，所以解决办法是将所有模块在 stores文件夹下的 index.js文件中进行导入然后再进行导出，也就是将index.js作为核心出口，那么在app.vue中进行导入的话就直接从 stores文件夹下的 index.js中进行导出了。
2025-02-16 00:00:01
1121
原创 处理 this
与call的区别就是call中参数任意，但是apply中参数必须是数组。与其他两个区别是，bind不会立马调用函数。构造函数和原型对象都指向 实例。bind（）（最重要）
2025-02-08 17:24:35
179
原创 数组，对象解构，forEach方法，filter方法
forEach遍历数组，能得到每个数组中的数据，item是对象中的每个元素。将 str 字符串中的 8 个 div 添加到 list盒子中。将遍历的数组中每个对象 加到 str 中。
2025-01-25 21:35:13
275
原创 闭包，变量和函数提升，函数参数，展开运算符，箭头函数
函数表达式也不能进行函数提升，函数表达式是这样的 var fun = function() { }，变量只提升声明，不提升赋值，所以提升的是 var fun ,这没体现 fun 是啥呀，js 是弱编程语言，只有赋值才能看出是什么数据类型，那么紧接着调用的话 就是 fun() , 显然报错呀，fun 都没能体现是啥。直接打印 ...arr 看似是没有逗号隔开，但是其实是有逗号的，这就是为什么Math对象的 max方法需要的是这样 1，2，3 的形式但是使用 ...arr 依然可以 的原因。
2025-01-22 23:40:15
352
原创 学生就业统计表
本来新增了两条数据，但是将 id 为 1 的数据删除了，现在只剩下 id 为 2 的数据，要新增的话 id 应该是 3 才对，但是实际上点击新增却是 2 ，因为原本的代码是 arr.length + 1，现在数组中只有一条数据，当然长度是1 ，再加上 1 不就是 2 了嘛，所以出现错误。现在将 新增的 id 赋值 为数组中最后一条数据的 id 的值加上 1，在此之之前还要判断数组是否为空，为空的话就直接将 新增的 id 值赋值为 1，否则的话就是数组中最后一个数据的 id 加上 1。把数据存储到本地存储。
2025-01-19 23:02:54
231
原创 事件委托，其他事件，电梯导航，固定导航
tab栏切换：前边的案例是 for 循环遍历每个 li 注册鼠标进入事件，给添加了 active类的 a 删除掉 active类，然后给点击的 a 添加上 active类（也就是将已经有的 active 类删除掉，为当前点击到的 a 加上 active类）现在通过事件委托形式也就是不再给每个 li 注册点击事件给 li 中的 a 删除添加类了，而是给 a 的祖元素注册点击事件，但是其实点击的还是 a ，但是通过冒泡的话 点击 a 是能冒泡到祖先元素的，所以直接通过 祖 元素去监听点击事件。
2025-01-18 22:11:30
1064
原创 Tab栏切换
分别获取大的复选框和各个小的复选框，给大的复选框注册点击事件，将大的复选框的选中状态遍历赋值给各个小的复选框的选中状态。如果选中的小复选框个数等于所有小复选框个数，那么就将 大复选框个数改为 true,否则的话就是false。给每个 a 和 div 中的 img 都注册鼠标经过事件，虽说遍历时都加上了，但是只有经过才会触发。遍历给 5 个 a标签和 5 个对应内容加上 active 类别（类似小圆点做法）伪类选择器选中 输入框 状态 ，选中的复选框盒子变大。获取选中的小复选框元素，
2025-01-16 21:40:31
149
原创 事件监听,事件类型
最后将 total.innerHTML = `${tx.value.length}/200`css直接实现 input 框的缩放 （没用到 js) focus伪类选择器。先给开始按钮添加点击事件。给结束按钮添加点击事件。
2025-01-15 23:55:16
338
原创 定时器-间歇函数
在 setInterval之外写定义函数，然后在里边运用写好的函数并非是函数调用，所以行数名之后不用写上括号。一般是鼠标经过才关闭定时器，鼠标离开才又继续开启(也就是给定时器重新赋值）定时器返回的是一个 id 数字，可用一个变量来接收定时器 id。
2025-01-15 12:00:15
137
原创 获取DOM，操作元素内容，属性，自定义属性
获取 DOM 元素选择匹配到的第一个元素:document.querySelector('css选择器') 括号中 css 选择器可以是标签，可以是类，可以是id 返回值：css选择器匹配的第一个元素，一个HTMLElement对象 如果没有匹配到，则返回空选择匹配到的所有元素document.querySelectorAll(' css选择器 ') CSS选择器匹配的 NodeList 对象集合 （获取过来的存放到数组） 得到的是伪数组，有长度和索引号，但是没有 pop()
2025-01-15 10:36:17
530
原创 Bootstrap 前端 UI 框架
例如改变背景色，右键检查 找出背景色所在选择器，将 样式写在 link 引入的 bootstrap.main.css之后，因为后边的会覆盖前边样式，并且注意 右键检查时有没有！引入 css 文件， bootstrap.css 和 bootstrap.main.css ，前者跟平常书写 css 的样式一样，都是选择器然后样式属性，后者则是给浏览器看的，但是轻量，所以一半就是选择 后者。生产文件是开发响应式网页应用，源码是底层逻辑代码，因为是要制作响应式网页，所以下载开发文件。
2025-01-12 21:53:18
1179
原创 媒体查询
如果是对应要生效的 css 多，那么就在 link 引入 css文件时，加上 media=(视口宽度)，如果是要生效的 css 很少，那么就直接 在css 文件中 @meida (视口宽度) { css样式 }@media (媒体特性) {
2025-01-11 21:15:59
286
原创 vw适配方案，酷我音乐
视口宽度是 375， vw 是视口宽度的百分之一也就是 3.75 ，那么宽度高度分别是 50vw 和 30vw，那么也就是 50*3.75 和 30*3.75。（因为标题和内容部分很多地方用到，所以直接到时候直接写为公共样式。在写标题的时候不加上父级，直接标题样式）object-fit：cover；图片缩放，跟背景图缩放一样 background-size。同样 vh 就是视口高度的 百分之一。
2025-01-11 20:30:11
776
原创 极速问诊移动端
准备工作在 less文件夹下新建 index.less文件，将该文件导出至另一文件夹 css文件夹下将清除样式base.less直接导入到 index.less中，那么就不必生成base.css，直接在 index.less中生成相应的 index.css在 index.html中引入 首页样式，字体样式以及 js文件为HTML加上字号打开 选择问诊类型的 html 设计稿文件注意设计稿是 375 还是 750,如果是 750的，要记得
2025-01-11 10:32:09
321
原创 移动端屏幕分辨率rem,less
打开 本地 web 服务器，则可以看到 网页宽度 和 移动端网页逻辑分辨率宽度一样。只有检测到屏幕分辨率（小括号里的条件满足）是 375，才会执行大括号中的 代码。在引入了 flexible.js的移动端网页，直接右键检查从元素中获取。rem布局中，HTML标签字号为视口宽度的 1/10。PC端是逻辑分辨率，移动端代码也是参考逻辑分辨率。右键电脑桌面 ，点击显示设置。双击修改块注释快捷键。
2025-01-10 23:36:57
890
原创 逐帧动画，多组动画，全民出游案例
注意：在设置居中时使用了transform进行平移居中，设置文字缩放动画时使用了 transform中的 scale ，使用动画时 animation在平移 平移居中后面，后面样式会覆盖前面样式，所以在设置动画缩放时也一并将平移效果加进去。to 里的位置是要写整个精灵图宽度，因为图片是往前看，所以整个背景精灵图是往后的，那么也就是 负。使用动画时，设置速度曲线 steps(12) ,构建逐帧动画。animation : 动画1，动画2，动画；
2025-01-10 14:32:23
333
原创 空间转换，动画
父级盒子上定位着两个子级盒子，分别将两个盒子一前一后也就是沿着 Z 轴平移，那么就产生了立体空间，为了清除看见效果，可以设置悬停时该 父级旋转，那么就能清除看到该空间了。速度曲线：该动画是匀速，加速，还是减速（linear匀速，steps(3)分步动画，括号中是分的步数）过渡仅仅能实现两个状态，动画能实现多个状态的变化过程，动画过程可控（重复播放，最终画面，是否暂停）平面旋转是绕着中心点旋转，空间旋转是绕着 z 轴旋转，所以视觉效果上是一致的。类似于钢管舞（角度为正，右边向后）百分比表示动画时长的百分比。
2025-01-10 00:24:01
281
原创 移动 web ：平面转换，渐变
轮播图区域总共三张图片，分别设置了 z-index堆叠顺序，左右两张图片设置 z-index为0,中间图片设置 z-index为 1 ,相比较之下， 1大，数值越大，元素就会显示在层级更高的位置，覆盖在其他元素之上。将类为左右的两张图分别左右移动并缩小，因为是以 整个 div 盒子为中心进行缩小的，所以移动之后在缩小，实际上是没有移动实际的距离，所以改变 原心，将原心分别设置为左边中心 和 右边中心，那么就能移动相应的距离了。搜索和登录是线性渐变，下载是径向渐变。默认情况，转换原点是盒子中心。
2025-01-09 16:36:34
731
原创 小兔鲜儿：生鲜区域，最新专题
生鲜区域:生鲜区域标题部分：生鲜区域内容部分： 分左右两个部分 右边区域是8个 li 标签区域，li中嵌套 a ,上部分是图片，下部分是内容；与 a 并列的是cover，定位在 li 之外，设置是溢出隐藏，鼠标悬停之后出现 设置 cover 子绝父（li）相定位是 li 的下边，且下边距是 -86 ，因为是在 li 之外，设置溢出隐藏；鼠标悬停 cover 下外边距设置为 0 ,也就是距离 li 为0 为 cover 设置过渡效果
2025-01-08 21:38:13
319
原创 小兔鲜儿：底部区域（头尾在每个页面都有，样式写在common.css中）
先确定 h5 中的宽高，然后引入背景图片，分别设置每个 h5 中的图片位置（css精灵）因为已经是底部了，不需要考虑引擎优化，所以直接用 p 标签包裹 a 即可。ul嵌套 li 标签，li 中嵌套 h5(图片）和 p 内容。三个 div 盒子，服务，帮助中心，版权。
2025-01-07 10:30:41
477
原创 小兔鲜儿：头部区域的logo,导航，搜索，购物车
logo考虑搜索引擎优化，所以要使用 h1中包裹 a 标签，a 里边写内容（到时候直接将字号设置为0，就不影响logo图片的展示了）padding加给 a ，当鼠标悬停时，边框线出现以及文字内容变成绿色。设置鼠标悬停时，a 中出现底部绿色边框线，以及文字颜色是变成绿色。
2025-01-06 22:10:02
216
原创 小兔鲜儿：项目目录，SEO三大标签，Favicon图标，快捷导航
设置字体图标和右边文字之间间距，行内和行内块默认是基线对齐，所以字体图标和文字是一上一下的，给字体图标设置垂直对齐，使其和文字能居中。在 index.html 中引入 css样式，common 和 index 的样式引入顺序无所谓，但是 base 要放在最前面。因为右边框跟文字一样高，而 a 是行内，高度靠内容撑开 ，所以是给 a 设置有边框而不是给 li 设置。在css 文件夹中新建 common文件和 index 文件，以及新建index.htnl文件。将素材中的图标复制到本文件夹中。
2025-01-06 12:10:41
172
原创 定位，CSS高级技巧，修饰属性（定位，css精灵，字体图标）
之所以图片下边出现空白键距，是因为浏览器将行内块，行内标签当作文字处理，一律按照基线对齐，转换显示模式之后就不能当作文字处理，也就不按照基线对齐了，所以也就不出现空白间距了。ul 中包含 li，所有的 li 是在一行显示，所以要设置 flex ，因为 li 中包含了图片和文字，两者也是要在一行显示，所以使用了 flex。当使用类选择器改变字体图标样式时，类选择器中的font-size样式会覆盖 iconfont.css中的样式，所以显示出来的是 类选择器中的样式。将字体文件放到 具体要使用的代码的文件中。
2025-01-06 10:02:24
1303
原创 学成在线总结归纳（头部区域）
头部区域：logo，导航（nav)，搜索框(search)，用户登录头像(user)该网页都是版心居中，所以设置了公共样式 .wrapper，margin:0 auto和width:1200px，则版心宽度为1200，上下外边距为0,左右自动，那么也就是居中。 同样公用样式还有body背景色 给头部区域设置高度和背景色 给头部版心区域设置上内边距（基于logo）和 flex布局，以便logo,nav,search,user在一行显示logo:logo作为标题用 h1 且点
2025-01-04 09:53:40
400
原创 学成在线：前端开发工程师区域（其他区域类似） ，版权区域
最后点击下载是点击之后能跳转，所以设置为 a 标签，为了区别跟logo 的 a 标签，设置了一个类 download，将其转换为块级元素设置宽高以及边框。然后给版心 wrapper 作为left 和 right 的父级设置 flex布局，并且设置主轴对齐方式。其次 p 中内容 的换行是通过固定了整个left 盒子然后固定字号来控制的，设置行高让内容垂直居中。先将大的盒子 footer内外上边距和高度背景色设置。首先logo是能点击跳转，所以使用 a 标签。设置 left 宽度和背景色。
2025-01-02 08:38:28
243
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人