自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(45)
  • 收藏
  • 关注

原创 利用函数求数组[5,2,99,101,67,77]中的最大值

<!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"> <title>利用函

2022-01-05 15:19:30 1715 1

原创 js-- 1-100循环

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>JS---循环</title> </head> <body> </body> <script> //JS逻辑运算符 || && ! // 逻辑或 ||,条件只要有一个成立就会返回真 // 逻辑与 &a

2021-12-22 08:31:01 1049

原创 js--for循环99乘法表的四种样式

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>for循环99乘法表</title> </head> <body> </body> <script> document.write("<table width='600' border='1' cellspacing='0

2021-12-22 08:22:32 424

原创 js--判断个位上的数 和 百位上的数相等,这个数就是对称数

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> </body> <script type="te

2021-12-20 14:38:07 596

原创 js--判断一个年份是平年还是闰年

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> </body> <script type="text

2021-12-20 14:33:24 526

原创 js---水仙花数

输入一个三位数,如果是水仙花数,输出YES,否则的话,输出NO;所谓的水仙花数是指每一位的数字立方和等于这位数本身。例如153=13+53+33<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></titl

2021-12-20 14:28:05 479

原创 js--从大到小排序a、b、c三个整数

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> </body> <script type="text

2021-12-20 14:23:05 587

原创 js--输入a、b两个数如果b>a则将b给a为了a一直大于等于b

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> </body> <script type="te

2021-12-20 14:19:14 364

原创 git远程仓库

1.首先打开github网站链接: link.步骤①打开网站之后点击右上角头像会出现下拉列表,这个时候我们点击图文第列表中的第二个创建仓库步骤②这个时候需要点击图标所指的地方,点击创建存储库步骤③然后自己起一个存储库的名称,在图片所指的列表中写入名称,当我们填入名称之后,紧接往下翻当我们上方填入名称之后,图中最下面的按钮会亮起来,其它的选项不用管,这个时候点击按钮之后就直接进行下一步了步骤④这个时候找到自己新建的文件夹右击显示Git Bash Here在文件中创建文本文档(t

2021-11-04 09:54:24 110

原创 git详细介绍

什么是版本控制版本控制是指对软件开发过程中各种程序代码、说明文档等文件的变更进行管理,它将追踪文件变化,记录文件的变更时间、变更内容、甚至变更执行人进行记录,同时对每一个阶段性变更(不仅仅只是一个文件的变化)添加版本编号,方便将来进行查阅特定阶段的变更信息,甚至是回滚什么是 Git?人工版本控制器通过人工的复制行为来保存项目的不同阶段的内容,添加适当的一些描述文字加以区分繁琐、容易出错产生大量重复(冗余)数据版本控制工具通过程序完成上述人工版本控制行为方便且功能强大只记录不同版本之

2021-11-04 09:53:34 115

原创 MySQL启动失败 排查过程及解决方法

MySQL 启动失败的常见原因MySQL 启动失败的最常见的原因有两类,分别是无法访问系统资源和参数设置错误造成的,下面分别分析如下。一、无法访问系统资源MySQL 不能访问启动需要的资源是造成而 MySQL 无法启动的一个常见原因,如:文件,端口等。由于 linux 中用于启动 mysqld 进程的 mysql 用户通常是不能登陆的,可以使用类似下面的命令检查文件的访问权限。1.sudo -u mysql touch /var/lib/mysql/b找出问题后,修改对应文件或目录的权限或

2021-10-27 20:29:41 4130

原创 移动端Web页面适配方案(整理版)

主要分为:【百分比|rem|vw/vh|响应式设计】介绍:移动端web页面的开发,由于手机屏幕尺寸、分辨率不同,或者需要考虑横竖屏问题,为了使得web页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问题。早期网页设计采用静态布局,通过<meta>标签中的applicable-device应用设备标识识别移动设备,即<meta name = 'applicable-device' content = 'mobile'>,在<meta&g

2021-10-22 16:33:05 4463

原创 从输⼊URL到⻚⾯加载完中间发⽣了什么?

大致过程是这样的:1. DNS解析2. TCP连接3. 发送HTTP请求4. 服务器处理请求并返回需要的数据5. 浏览器解析渲染页面6. 连接结束输入了一个域名,域名要通过DNS解析找到这个域名对应的服务器地址(ip),通过TCP请求链接服务,通过WEB服务器(apache)返回数据,浏览器根据返回数据构建DOM树,通过css渲染引擎及js解析引擎将页面渲染出来,关闭tcp连接...

2021-10-14 15:53:15 175

原创 美食杰---食物详情页

内容详情大块分为三部分第一部分主要,显示菜名,图片,包括用户的信息第二部分分为用料,步骤,做法第三部分:讨论,用户发的评论设一个空数组因为拿到数据的时候,在组件中以加载,请求速度较快,第一次找的时候为空但是空值也是值列表图写在路由里监听一下,当这个路由参数发生改变的时侯,看if(menuId)还在不,如果不在告诉数据重新进入收藏注意:第一点先看他是否登录第二点当前的作者是否是自己先查看是否登录首先已经在vuex里面登录了收藏按钮判断是否本人登录再显示:收藏功能

2021-10-12 20:39:30 191

原创 美食杰--右侧部分主题

data中的数据请求数据请求到的数据点击页面时可以更改内容效果图加载页面遮罩层类似实现效果

2021-10-12 19:05:42 135

原创 美食杰--菜谱大全

首先讲述一个需要实现的功能点击那个给那个增加样式,说明被点中,相当于父类,每大类细分为三个或四个query传参,直接传子类传的时候不止传classify,包括其它页码,一些属性等,不止新增或减少,随着用户的操作,所以我们可以加入...

2021-10-11 19:47:42 206

原创 移动端媒体查询

1)媒体查询概念:。可以让我们根据设备显示器的特性(如 视口宽度、屏幕比例、设备方向:横向或纵向 )为其设定CSS样式;。使用媒体查询,可以在 不改变页面内容 的情况下,为特定的一些输出设备定制显示效果;。媒体查询由 媒体类型 和 一个或多个检测媒体特性的条件表达式 组成;。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。。媒体查询 写在CSS样式代码的最后 ,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式例:@media 设备类型

2021-10-07 19:36:09 870

原创 vue-router如何定义嵌套路由?

是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是路由中嵌套路由。在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。① 为了演示,我们现在view文件夹下新建一个title1.vue和title2.vue用来存放不同的内容② 现在我们在router 》 index.js 中将这上面两个新建的组件引入进来并填写路径,这里的Title1和Title2是作

2021-09-29 08:57:14 801

原创 vue-router有哪几种导航钩子( 导航守卫 )?

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。例如判断登录信息:没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象响应路由参数的变化)来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。分为三大类:全局守卫、路由守卫、组件守卫全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫:const router = new VueR

2021-09-29 08:49:46 613

原创 Object.defineProperty()方法

一,语法Object.defineProperty(obj, prop, descriptor)obj:需要定义属性的对象prop:需要定义的属性descriptor:属性的描述描述符返回值:返回此对象[举个例子]let obj = Object.create(null); let descriptor = { configurable:false, writable:false, enumerable:false, value:'hello world'

2021-09-29 08:32:03 127

原创 vue中如何实现tab切换功能?

一、v-show控制内容切换1)简单版原理:用点击事件改变num值作为开关,控制tab样式和内容显示隐藏。2)数据渲染原理:主要利用v-for绑定的index来控制,跟上面差不多。二、组件切换。知识点主要是vue中is的特性,和keep-alive缓存。三、路由切换。(对地址栏和数据请求友好)通过router-link实现。2、vue中keep-alive 实现标签页组件缓存在做管理系统的时候,有时候需要实现类似浏览器标签页效果:。打开新页面时插入新的标签页。切换标签页时缓存组

2021-09-29 08:18:09 4757

原创 什么是JS的同源策略和跨域问题?

1)什么是同源策略当两个页面的协议,域名和端口都相同的时候,我们称这两个页面是同源同源策略(英文全称Same origin policy):是浏览器提供的一个安全功能,它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。简而言之就是浏览器规定,A 网站的 JavaScript,不允许和非同源的网站 C 之间,进行资源的交互。2)什么是跨域跨域指的是两个URL的协议,域名,端口只要其中一个不一致,就会形成跨域出现跨域的根本原因浏览器的同源

2021-09-28 11:10:11 421

原创 axios、fetch与ajax有什么区别?

1) Ajax传统的Ajax指的是 XMLHttpRequest(XHR),一种发送后端请求技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,这意味着可以在不重新加载整个网页得情况下,对网页某部分进行更新。缺点:①本身是针对MVC的编程,不符合现在MVVM模式②JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常不合理不符合关注分离原则。。系统的一个部分发生变化,不会影响其他部分。即使需要改变,也能清晰的识别出哪些部分需要改变。如果需要扩展架

2021-09-28 10:40:27 310

原创 vue-router路由的两种模式

类型: string默认值:“hash” (浏览器环境) | “abstract” (Node.js 环境)可选值: “hash” | “history” | “abstract”配置路由模式: hash : 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。history : 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。abstract : 支持所有 JavaScript 运行环境,如

2021-09-26 17:29:02 884

原创 vue-router如何定义嵌套路由?

大家都知道选项卡,在选项卡中,顶部有数个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,这个时候就是路由中嵌套路由。在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?因此我们需要在VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。① 为了演示,我们现在view文件夹下新建一个title1.vue和title2.vue用来存放不同的内容② 现在我们在router 》 inde

2021-09-26 17:15:58 381

原创 vue-router的动态路由匹配

我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:const User = { template: '<div>User</div>' }const router = new VueRouter({ routes:[ // 动态路径参数 以

2021-09-26 17:08:19 491

原创 vue-cli中自定义指令的使用

vue中除了内置的指令(v-show,v-model)还允许我们自定义指令想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 注意:autofocus 在移动版 Safari 上不工作一、注册全局指令:// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el,binding) { // 当前指令绑定的dom元素 //console.log(el

2021-09-26 16:27:57 906

原创 20210924_美食杰-编辑个人资料

①配置路由在router.(index.js)中配置①import edit from '@/views/user-space/edit'import space from '@/views/user-space/space'②{ path:'/edit', name:'edit', title:'个人页', component:edit, }, { path:'/space', nam

2021-09-25 20:26:34 114

原创 美食杰---登录页

简要思路

2021-09-24 14:44:59 119

原创 vue更新数组时触发视图更新的方法

1)Vue.set 响应式新增与修改数据可以设置对象或数组的值,通过key或数组索引,可以触发视图更新target:要更改的数据源(可以是对象或者数组)key:要更改的具体数据value :重新赋的值①数组修改Vue.set(array, indexOfItem, newValue)this.array.$set(indexOfItem, newValue)②对象修改Vue.set(obj, keyOfItem, newValue)this.obj.$set(keyOfItem, n

2021-09-22 20:35:26 8627

原创 vue生命周期钩子函数有哪些?

vue生命周期1)VUE生命周期是VUE实例化或者组件创建到消亡的过程。2)beforeCreate 创建前的状态,初始化事件和生命周期。3)创建完毕状态Init (初始化) injections (依赖注入) & reactivity (开始响应)。4)beforeMount 挂载前状态, 是否有元素el,是否有模板,是否渲染到了函数内,是否作为模板进行了outerHTML渲染到了页 面,向虚拟DOM上挂载的过程,并且还是把我们的‘#app’生成虚拟DOM,生成完毕后并渲染到view层

2021-09-22 20:20:48 320

原创 什么是vue生命周期?

vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。vue生命周期的这八个阶段:1)创建前(beforeCreate)对应的钩子函数为beforeCreate。此阶段为实例初始化之后,此时的数据观察和事件机制都未形成,不能获得DOM节点。2)创建后(created) <card :item="{ title: item.name, description: i

2021-09-22 20:18:15 480 1

原创 vue中如何编写可复用的组件?

组件,是一个具有一定功能,且不同组件间功能相对独立的模块。高内聚、低耦合。开发可复用性的组件应遵循以下原则:1)规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名。2)数据扁平化:定义组件接口时,尽量不要将整个对象作为一个 prop 传进来。每个 prop 应该是一个简单类型的数据。这样做有下列几点好处:(1) 组件接口清晰。(2) props 校验方便。(3) 当服务端返回的对象中的 key 名称与组件接口不一样时,不需要重新构造一个对象。扁平化的 props 能让我们更直观地理

2021-09-22 20:10:29 1822

原创 http状态码

常见的HTTP状态码1.200 -请求成功2.301 -资源(网页等)被永久转移到其它URL3.404 -请求的资源(网页等)不存在4.500 -内部服务器错误HTTP状态码分类HTTP状态码由三个十进制数字组成,第一个十进制数字定义了状态码的类型,后两个数字没有分类的作用。HTTP状态码共分为5种类型分类分类描述1**信息,服务器收到请求,需要请求者继续执行操作2**成功,操作被成功接收并处理3**重定向,需要进一步的操作以完成请求4**客户端

2021-09-22 19:59:47 158 1

原创 PC/移动端框架

pc端框架view 个人:https://www.iviewui.com/支付宝(蚂蚁金服):https://ant.design/index-cn饿了么:https://element.eleme.cn/#/zh-CN移动端框架vant: http://vant-contrib.gitee.io/vant/#/zh-CN/calendarcube ui : https://didi.github.io/cube-ui/#/zh-CN/docs/introduction京

2021-09-22 19:32:52 150

原创 转换时间信息

引入下载的时间import day.js from ‘dayjs’加载中文语言包import ‘dayjs/locale/zh-cn’引入相对时间处理模块import rTime from ‘dayjs/plugin/relativeTime’dayjs.locale(‘zh-cn’)dayjs.extend(rTime)处理固定时间格式export const formatime = (val) =>{return dayjs(val).format(‘YYYY/M

2021-09-21 20:19:06 136

原创 解构赋值

解构赋值es6解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量允许按照一定的模式,从数组或对象中提取值,给变量进行赋值,成为解构赋值特点:1.给变量赋值2.值的来源是对象或数组3.规则:按一定的模式,一般用在数据交互,ajax请求数据解构赋值的不同形式数组解构//1.这种比较散let a = 10;let b = 12;let c = 13;console.log(a,b,c); //10,12,13//2.定

2021-09-21 20:00:55 63

原创 导航首位的两种不同方式

导航守卫的执行顺序失活组件的组件内离开守卫 beforeRouterLeave —>全局前置守卫 beforeEach —>路由独享守卫 beforeEnter —> 组件内进入守卫 beforeRouteEnter —>全局解析守卫 beforeResolve —>全局后置守卫 afterEach — >afterEach —>beforeCreate —>created —>失活组件的销毁destory—>当前组件的beforeMou

2021-09-17 09:59:02 233 1

原创 query和params传参的区别

一.query和params传参的区别1.query传递显示参数,params传递不显示参数,params相对于query来说较安全一点取值方法也有不同1.query取值:this.route.query.XXX∣∣this.route.query.XXX||this.route.query.XXX∣∣this.router.params.xxxquery传值页面刷新数据还在,而params传值页面数据消失二.命名路由(query)动态路由动态命名路由(params)路由传

2021-09-17 09:42:41 17263 5

原创 模块与组件和模块化与组件化的理解

模块向外提供特定功能的js程序,一般就是一个js文件,将一个大的js文件,分解成多个有相互联系的多个有特定功能的小文件,然后通过简单的方式进行联系模块化当应用的js都以模块来编写的,这个应用就是一个模块化应用组件实现局部功能的代码和资源集合(html,css,js,图片)组件化当应用是以多组件的方式实现,这个应用就是一个组件化应用...

2021-07-29 09:52:51 80

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除