- 博客(66)
- 收藏
- 关注
RSS订阅原创 前端项目部署Nginx
安装nginxps aux|grep nginx 查看nginx的启动在根目录下 的 etc 进入nginx配置 conf.d 下配置的监听如果错误 查看路径 或者是端口号被占用
2022-03-15 17:04:56
4121
原创 css :hover实现内容的切换
<td class="remodername"> <div class="number">1</div> <div class="remodercenter el-icon-minus"></div> </td> .remodername .number { display: block; } .remodername:hover .number {
2022-03-11 13:39:49
719
原创 git 操作命令
git clone -b 分支名 仓库地址 //指定分支克隆git branch //查看本地分支git branch dev //创建分支git branch -r //查看远程分支git branch -a //查看所有分支git checkout -b dev origi
2021-10-14 09:31:51
232
原创 vue v-html中的样式去除
vue v-html中的样式去除.replace(/<[^>]+>/g, '') //使用正则进行匹配 <span v-html="item.resume.replace(/<[^>]+>/g, '')"></span>
2021-09-26 12:19:46
983
原创 微信小程序实现滚动条
<swiper-item class="swiper-box-first" > <scroll-view scroll-y="true" style="height:{{winHeight-10}}rpx"> </scroll-view> </swiper-item>**注意点: swiper-item 必须 内嵌一个 scroll-view 标签style 样式中的 height 中的高度 必须是 具体的高度具体...
2021-08-23 18:25:41
2783
原创 Ts构建前端工程
1.初始化项目npm init2.初始TStsc init3.卸全局ts-nodenpm uninstall -g ts-node4将ts-node安装到局部npm install -D ts-node5卸载全局的 typescript npm uninstall -g typescript6将 typescript 安装到局部 npm install -D typescript7配置文件的启动项8安装SuperAgent软件作用:是处理 get,post,put,d
2021-07-22 17:16:07
524
原创 vue首页实现多个倒计时功能
将时间转化成时分秒 for (var s = 0; s < this.count_down_list.length; s++) { if (this.count_down_list[s].time !== 0) { this.live_day = Math.floor( this.count_down_list[s].time / 86400 ); .
2021-06-28 17:36:00
605
原创 git解决冲突
git status .git pull // 出现该提示 Please, commit your changes or stash them before you can merge.git stashgit pullgit stash pop // 输完此行命令,出现比较文件, 去vscode解决冲突git status .git add .git commit -m “”git push...
2021-05-27 12:15:50
89
原创 vue 路由跳转页面
第一个页面通过：this.$router.push({ path: “/homecourseall”, query: { id: id } });跳转到另外一个页面 将跳转页面的id 传输的另外一个页面第二个页面:this.route.query.id获取到第一个页面传过来的id用获取到的 id 从新访问一个新的接口获取到 栏目的 id将栏目的 id 返回给 接口接口在重新渲染出数据...
2021-05-12 16:37:17
75
原创 vue 实现动态类的绑定
动态类的绑定 :class在html 样式中data 数据中事件中问题：如果遇到请求后端接口的时候数据不够的话解决方案:创建一个新的数组将数据从新添加到数组中
2021-05-12 15:27:49
96
原创 vuex
vuex 概述：组件之间共享数据的方式父向子传值：v - bind 属性绑定子向父传值： v-on 事件绑定兄弟组件之间共享数据： EventBus $on 接受数据的那个组件 $emit 发送数据的那个组件vuex 是实现组件全局状态(数据) 管理的一种机制，可以方便的实现组件之间数据的共享使用vuex统一管理状态的好处能够在 vuex 中集中管理共享的数据，易于开发和后期维护能够高效地实现组件之间的数据共享，提高开发效率存储在vuex 中的数据都是响应式的,能够..
2020-12-20 19:48:58
80
原创 HTTP缓存机制
HTTP缓存机制将资源的副本保存到用户客户端不是永久的 有生命周期的无缓存缓存[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMYUi8sK-1598104690911)(https://s1.ax1x.com/2020/08/22/dU9MVA.png)]缓存优点:缓解服务去端的资源消耗和运行压力减少服务器端资源加载的延迟减少对带宽造成的压力web 站点变得更具有响应性缓存的案例：常见的HTTP缓存只能存储GET响应，对于其他类型的响应无能为
2020-12-03 20:09:25
62
原创 webpack打包工具
Webpack前端开发的弊端：文件依赖关系错综复杂静态资源请求效率低模块化支持不友好浏览器对高级javascript 特性兼容程度较低webpack 是一个流行的 前端项目构造工具（打包工具），可以解决当前web开发中面临的困境。提供了友好的模块化支持，以及代码压缩混淆，处理js 兼容问题，性能优化等强大的功能创建列表隔行变色项目创建项目空白目录，并运行 npm init -y 命令 初始化包管理配置文件 package.json新建 src 源代码目录新建 src ->
2020-11-29 08:39:04
119
原创 前端工程化基础
前端工程化模块化概述：命名冲突 2. 文件依赖通过模块化解决上述问题模块化 就是把单独的一个功能封装到一个模块（文件中），模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块模块化相关规范1. 浏览器端模块规范 AMDrequire.js(http://www.requirejs.cn/) CMDSea.js(http://seajs.qithub.io/seajs/docs/)2. 服务器端模块化规范 CommonJS1. 模块分为单文件模块
2020-11-28 10:41:47
107
原创 Vue汇总
Vue声明式渲染 — 组件系统 – 客户端路由 – 集中式状态管理 – 项目构建易用灵活高效vue 的基本使用步骤：需要提供标签用于填充数据引入vue.js库文件可以使用vue语法做功能把vue提供的数据填充到标签里面<body> <!-- {{}} 差值表达式 支持基本的计算操作 --> <div id="app">{{msg}}</div> <script type="text/javascript"
2020-11-26 15:37:41
283
1
原创 vue 图书管理系统
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .grid { margin: auto; width: 530px; text-align: center; } .grid ta.
2020-11-22 19:36:10
3336
原创 FormData 对象
FormData 对象可以模拟html表单 相当于将html 表单映射成表单对象 自动将表单对象中的数据拼接成请求参数的格式异步上传二进制文件准备html 表单 <form action="" id='form'> <inpupt type='text' name='username'></inpupt> <inpupt type='password' name='password'></inpupt>
2020-11-17 14:03:12
158
原创 Es 6 汇总
ES 6js 编写 - 运行其它语言 编写 - 编译 - 运行babal 编译工具作用域 ES5 中 作用域全局作用域var a = 5 函数作用域function fn(){var b = 5} ES6 中 作用域 新增（块级作用域）声明块级作用域只能用let但是let 不仅声明块级作用域 还可以声明全局作用域和函数作用域定义 let{块级作用域：let v = ture}let 与 var 区别let - 提供了块级,全局,函数 不存在声
2020-11-08 10:44:02
150
原创 js 选项卡案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .boders_s{
2020-10-28 19:04:35
154
原创 js 拼图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar
2020-10-28 19:03:31
167
原创 js 模拟单选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .choice{
2020-10-28 19:02:35
195
原创 js 轮播图案例思路
在这里插入代码片<!-- 图片命名为1-2-3 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1_2轮播图</title> <styl
2020-10-28 19:01:02
168
原创 微信聊天框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>微信聊天</title> <style> .box{ mar.
2020-10-26 10:57:53
444
原创 动物相册
主要注意 锚点 <div class="photo_img"> <div class="photo_main"> <div class="photo_left"> <img src="../imger/1.png" alt="" id='first'> <img src="../imger/2.png" alt="" id='second'>
2020-10-06 19:19:53
211
原创 css+html 图片移动
<!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="点击图片.css">
2020-09-29 20:04:58
870
原创 html+css 汇总
HTML 超文本标记语言标记 : < >标签对 :<html></html>单标签<meta charset="utf-8" />css 入门样式：行间样式<div style= " "> </div>内部样式表<style> div{ width:100px height:100px }<style>外联样式表创建了一个css文件<link rel="st
2020-09-17 10:21:15
133
原创 css常见的布局
上中下 - 栏式 .wap{ width: 900px; margin: 0 auto; } #header{ height: 100px; background: blanchedalmond; } #section{ height: 700px;
2020-09-17 10:19:11
77
原创 案例 jquery ajax 搜索框
/* 捕获用户输入行为 1. 绑定键盘事件-> keydown ，keyup, keypress 2. 绑定输入事件->input */ $('#search').bind('input',function(){ // 清除前面的 $('.alart>ul').empty() // 根据用户...
2020-09-10 14:30:33
279
原创 jquery中的 ajax实现
jquery中的 ajaxjquery 中 的 ajax 六个方法load( ) 方法url : 异步请求的地址data ：异步请求的数据 如果没数据的为get 有数据的话是postcallback: 异步请求成功后的回调函数返回值 - 服务器端的响应结果注意： 自动将返回结果写入到目标元素中 $('button').click(function(){ $('button').load('json.json',{zhang:ni},function(){
2020-09-10 14:28:54
123
原创 json 的数据样式
Json 数据数据格式轻量级的数据交换格式独立于任何语言的文本格式,易于程序员阅读和编写,同时也易于计算机解析和生成主要为两种结构：“名称/值” 对的集合。不同语言中,它被理解为 对象(object)/记录(record)/结构(struct)/字典(dictionary)/哈希表(hash table)/有键列表(keyed list) /或者关联数组(associative array)2. “值的有序列表”。大部分语言中它被理解为 数组(array)JSON 格式中作为值的类
2020-09-10 14:25:04
721
原创 同步交互与异步交互对比
同步交互与异步交互同步交互：同步（相当与排队）交互（客户端到服务器）客户端向服务器端发送请求,必须等待结果返回,才能向服务器端发送下一次请求异步交互:客户端向服务器端发送请求，不必等待结果返回，就可以向服务器端发送下一次请求异步交互比同步交互的优势：用户操作无需向同步交互必须等待结果异步交互只需与服务器端骄傲和必要的数据内容，而不是将所有数据全部更新异步交互对带宽造成的压力相比同步交互更小通过ajax实现异步交互不需要任何第三方插件,只要浏览器支持js 即可异步交互比同步交互的缺点
2020-09-03 08:35:20
372
原创 Ajax的介绍和Ajax实现的步骤
Ajax不是一个新技术, 而是一套技术的总和ajax模型 html页面能够快速地将数据逐步更新显示在用户界面上，不需要重载(刷新整个页面)包括以下几种技术：html 2.css 3.js 4.dom 5. xml 6. xml httprequest对象xmlhttprequest对象是实现ajax异步交互的核心实现ajax的执行步骤...
2020-09-03 08:33:20
78
原创 五层模型加三次握手
五层模型物理层：硬件设备数据链路层：通信的实体间建立数据链路连接网络层： 结点之间传输创建逻辑链路传输层： 提供可靠的端到端(End - to - End ) 服务应用层：为应用软件提供了很多服务 构建于TCP 协议之上 屏蔽网络传输相关细节HTTP 三次握手URI/URL/URNurl : 统一资源标识 包含 url urnurL :统一资源定位器(http://user:pass@host.com:80/path?query=string#hash)urn 永久统一资源定位符(资
2020-08-26 17:48:22
96
原创 跨域资源共享操作
跨域资源共享新增了一组HTTP首部字段允许服务器声明那些原站有权限访问那些资源简单请求预检请求认证请求简单请求请求方法： get/ head 或 post请求头部信息字段不能人为设置 accept /accept-language / content-language /content-typecontent-Type的值仅限于下列三者之一：text/plain , multipart/from-dataapplication/x-www-from-urlencoded这三个以上
2020-08-26 17:45:20
196
原创 Cookie
Cookie服务器发送到用户浏览器并保存在本地的一小块数据，会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上解决：HTTP 协议的无状态问题 ！作用域Domain 标识指定了那些主机可以接受Cookie如果不指定，默认为当前文档的主机（不包含子域名）如果指定了Domain 则一般包含子域名 Domain = wolongxueyuan.compath 指定是主机下的路径网络攻击：用cookie 发送给对方主机应用：会话状态管理（用户登录，购物车，）个
2020-08-26 17:44:08
60
原创 HTTP缓存机制
HTTP缓存机制将资源的副本保存到用户客户端不是永久的 有生命周期的无缓存缓存缓存优点:缓解服务去端的资源消耗和运行压力减少服务器端资源加载的延迟减少对带宽造成的压力web 站点变得更具有响应性缓存的案例：常见的HTTP缓存只能存储GET响应，对于其他类型的响应无能为力检索请求的成功响应： 响应状态码为200 成功，包含 HTML 文档，图片 或者文件的响应不变的重定向： 响应状态码为301错误响应： 响应状态码为 404 的一个页面不完全的响应: 响应状态码
2020-08-22 22:00:23
123
原创 http协议
HTTP 协议超文本传输协议客户端 - 服务器端 协议浏览器这样的客户端发出的消息叫请求（requests）被服务端回应的消息叫响应（responses）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZyficctZ-1598026261034)(https://s1.ax1x.com/2020/08/19/dQeqOA.png)]基于HTTP 的组件浏览器给服务器发送一个请求，都会被服务器处理并返回一个消息，响应[外链图片转存失败,
2020-08-22 21:54:36
146
原创 解决跨域
后端写设置响应头,允许资源被访问res.setHeader("Access-Control_Allow_Origin ")di使用中间件解决第三方模块 cors
2020-08-12 15:48:06
50
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人