升H-优快云博客

原创笔试题目

笔试题目路由的两种模式hash模式就是url中的#符号,是基于location.hash实现的,主要是changeHash方法监听#后面的hash值,加载对应的组件,不会重新加载页面,也不会触发404.缺点:1.不美观,后面带复杂参数可能出现问题2.覆盖锚点定位功能优点:1.兼容低版本浏览器2.hash值改变会触发浏览器历史记录,可以使用浏览器的前进厚涂功能3.不需要后台配合,不会返回404history模式(历史模式)需要后台配合,主要是基于pushState和replaceSta

2020-12-20 17:26:41 170

原创 js中的观察者模式和发布订阅模式

js中的观察者模式和发布订阅模式前言:作为一个职场小白,这个面试题是有机会问到的,我也没有去了解过这个方面,我知道有这个东西的时候是,问新同事的面试题什么才知道有这个东西!其实我们使用vue,里面也有发布订阅模式,下面我使用了nodejs的例子阐述下,这两种模式观察者模式://在观察者模式中,只有两个角色目标<-->观察者者两个//举例代码// 被观察者小宝宝心情好和不好//function Subject(name){this.name = name thi

2021-05-23 10:30:57 440

原创外部链接跳转微信小程序

外部链接跳转微信小程序[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zpcKl0T3-1621677958755)(image-20210416142912242.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LzC7TExH-1621677958761)(image-20210416143524736.png)]测试用例https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbas

2021-05-22 18:08:30 6678 1

原创关于vue.config.js文件的配置介绍

关于vue.config.js的配置介绍前言关于使用cli3创建vue项目大家很熟悉,但是配置vue项目的设置,可能对于初学者大多一头雾水,刚入门的程序员对于配置代理,配置webpack打包也是一知半解(包括本人),所以我总结下如何配置,文章可能有的讲解有错,可以在评论区留下需要更改的地方,我会马上的更改本项目我使用qiankun框架有使用的地方我会标记,大家略过即可文件在项目根目录下,记得不是src文件下,是项目根目录下创建vue.config.js文件vue.config.js 文件后我

2021-03-13 17:30:53 6091 1

原创在vue页面使用JQuery ajax的token过期的主动处理

还是旧项目的的优化需求1.需要vue逐步替代jsp页面,jsp使用的是iframe,vue使用的是路由映射,同在tab框里面2.旧版jsp代码有处理token过期的删除loginToken和跳转到登录页3.而新版没有做token过期的处理需求:完成vue页面的token过期处理vue页面还是使用JQuery的ajax请求,这个是之前项目移植的,不要问为什么不用axios,我也不知道所以并没有办法使用axios封装好的请求拦截器有利条件:1.在getUserInfo接口可以获取到token具体

2021-02-21 23:23:48 511

原创优化后台项目 vue-router与iframe并行

优化后台项目 vue与iframe并行前言:就是公司业无是需要旧项目的优化,旧项目是5年前的项目,使用的是jq,jsp各种jq库,后端编写的.项目老旧,后台数据过大,醒目运行的的很慢,但是又不能一下子替换,需要我们逐步替换类似于图上的效果,但是内容部分需要根据如果有写好的vue网页就要使用路由映射,没有的话就要使用iframe打开老的项目页面并行方案1.左侧导航栏的数据是请求会来,对象数组,我是使用递归函数的形成如下数据[{name:'张珊', id:1, parent:001, chil

2021-02-19 09:57:02 2646 2

原创 vue组件中的.sync修饰符使用

vue组件中的.sync修饰符使用作用是子组件可以修改父组件传过来的数据但是也会改变父组件 ,类似于$parent 的作用,看情况吧使用上代码<template> <div class="home"> //正常的组件传值,只是加了一个.sync修饰符 <hello-world :type.sync="password"></hello-world> </div></templat

2021-01-07 17:17:44 206

原创 vuejs 使用钩子完成动画效果,使用Velocityjs,完成动画效果

除了使用c3的动画效果,我们还可以使用js方式<transition>这个组件还有6个钩子函数可以使用分别是@before-enter(进入前触发)@enter(进入触发) @after-enter(进入后触发)@before-leave (离开前触发)@leave(离开触发) @after-leave(离开后触发)1.其中@enter和@leave中有两个参数el,和done ,其中done类似于管道符,最后调用done()才能触发, @after-enter或@after-le

2020-12-27 17:31:49 638 1

原创 vue使用css3动画和过渡使用animate.css

在Vue里面使用css3动画和过渡效果<transition>组件属性:name 用来生成css过渡类名例子如果你使用了 <transition name="fade">，那么 v-enter 会替换为 fade-enter6个时机v-enter :开始进入v-enter-after:进入中的过程v-enter-to:进入完毕v-leave :准备离开v-leave-active: 离开的过程v-leave-to :离开完毕v-enter-active 和 v

2020-12-27 15:08:35 1029

原创使用nextTick,获取修改后的页面元素的值

使用nextTick,获取修改后的页面元素的值<template> <div> <div ref="box" id="box">{{msg}}</div> <button @click="changeDomText">点击修改Dom元素的innerHtml</button> </div></template><script>export default {

2020-12-10 23:33:13 357

原创使用v-bind:is切换组件

使用v-bind:is切换组件<template> <div>  <keep-alive> //切换组件的时候把切换的组件做一个缓存处理,而不是销毁处理,提高性能 <component :is="cmp"/> </keep-alive> <button @click="toggleCmp">点击切换组件</b

2020-12-10 23:29:50 448 1

原创 Vue 路由懒加载与块加载

Vue 路由懒加载与块加载懒加载:把一些加载得资源延后,比如用户没有访问的网页,我们就先不请求数据回来这里要提到一个spa应用的概念spa应用 :single page application (单页应用):是结合web端与app端的优点,可以把web轻便,与app端的无缝衔接优势结合起来=>就是:第一次进入页面时会请求一个html文件，刷新清除一下，切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容却变化了。页面跳转： js渲染优点：页面切换快缺点：首屏时

2020-12-08 21:32:11 288

原创 Vue封装自定义插件

封装自己的组件在日常开发中,我们在Vue经常使用框架ui的插件,十分便利.但是我们要怎么封装自己定义的组件呢?步骤在main.js里面使用下面代码创建一个自定义组件,关键字install// 自定义插件 const myplugin = { //是一个对象install: function (Vue) { // 做任何东西 console.log(Vue);}}// 使用插件Vue.use(myplugin)下面是属于扩展,利用自定义插件,和混入mixin,创建一个表

2020-12-08 21:15:10 510

原创 Vue 混入(mixin)的使用

如何使用vue的mixin 语法本篇是使用Vue cli创建的单文件组件方式作为例子有需要可以去查官方文档步骤一使用脚手架创建之后我们就要开始操作了 //myMisin.js 里面写入我们需要混入的东西,可以混入data,methods,或者声明周期 //留一个想法如过我是在全局里面引入的mixin呢?export const myMixin = { data() { return { name: "我是mixin,我要复用",

2020-12-08 13:52:34 501

原创 uni-app 小程序分包流程

使用uniapp,进行小程序的分包第一步先创建一个分包的目录非必要的（用户第一次加载的时候没用到的代码、图片资源）资源不要放在代码里必要的资源就放在主包第二部然后在把我们不常是很关键的用户意见反馈页面放到新建的分包文件第三步需要在page.josn文件配置分包路径root 表示分包根目录pages:页面数组path：相对路径之后我们需要把跳转到该文件的路径修改一下就好了分包就完成了!!!下面说下总结包限制为什么微信需要限制包的大小？当第一次访问的时候，如果包太大，

2020-12-07 21:21:24 1873

原创 uni-app条件编译,代码在微信显示,不在web显示

使用uni-app的条件编译在使用uni-app的时候想要兼顾web页面和微信小程序一同开发,但是微信的版本号不想在web端显示,这个时候我们需要使用uni-app的条件编译开发时使用下面代码  //重点是这句 <view class="model_tab" > <view class="callkefu"> <view style="display: flex; align-

2020-12-06 21:58:36 950

原创 vue的响应性原理探讨

在探讨vue的响应式的原理前我们思考一个下面代码js逻辑代码 methods: { addAttr() { this.user.age = 18; }, changeName() { this.user.name = 'rose' } },这个时候我们点击修改名字会改变吗？点击给user赋值一个age会页面会显示吗？这是运行的代码的结果（两

2020-12-04 23:39:32 200 1

原创小程序下拉刷新,如何等待数据返回再收起loading

小程序下拉刷新重新请求关于我上面封装的请求网络小程序封装网络请求// 封装一个轮播图获取数据函数 async getBannerData(){ // 封装返回的是一个promise对象,我们可以使用async,await ex7的新语法 const bannerPormise =get('/home/swiperdata') const res= await bannerPormise this.setData({bannerData:res.da

2020-11-28 23:31:03 1167 1

原创关于小程序,使用promise,模块化封装网络层

在小程序中请求,经常有重复的请求代码如下图 onLoad: function (options) { // 进页面先请求数据 wx.showLoading({ title: '拼命加载中', }) wx.request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata', // 注意success会改变this指向,这里我们要使用箭头函

2020-11-28 23:03:40 406

原创拼接对象数组进行axios请求

当发送axios请求发送一个有相同key的值遇到了一个个麻烦,是需要拼接参数,来发送请求为什么要拼接呢?下面的都是路由里面的参数http://158.121.54.189:9093/hotel?price_lt=3130&hotellevel=4&hotellevel=5&hoteltype=4&hoteltype=2&hotelasset=3&hotelasset=5&hotelbrand=7&hotelbrand=9&

2020-11-28 22:33:17 464

原创入门小程序(三) 小程序的生命周期与网络请求的api方法

小程序的生命周期全局的生命周期 onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // console.log('小程序初始化时触发'); }, onHide:function(){ console.log('小程序切后

2020-11-27 16:31:53 828

原创入门小程序(二) 组件记录

常用组件view这个可以算是入门组件,简单来说相当于封装好的div元素(只会div ,告辞!!! 哈哈哈)<view>只会div,告辞!!!</view>text(第二个最长常用,行内元素)<text class="box" selectable="{{true}}" user-select="{{true}}">我是文本组件相等于html的span标签</text>imag

2020-11-27 16:21:30 182

原创入门小程序记录(一) 语法记录

数据绑定胡子语法(相当于vue的差值表达式)<view>{{message}}</view>循环语法显示在js文件data定义的变量wx:for-item=“v” wx:for-index=“i” 可以改变为item的默认值,和改变默认索引index的变量名<!-- 循环语法注意key值,我们需要设置,不然报错,key值可以为字符串,数子,不需要用胡子语法但是还是一个变量,*this是为item,当然可以写:key=

2020-11-27 15:19:41 250

原创咸鱼旅游的酒店详情

下面不详细说的,全是数据渲染标题价格数据渲染基本信息数据渲染高德地图第一步结构<template> <div class="detailsMap"> <el-row type="flex" justify="space-between" style="height: 100% width:100%"> <el-col class="mapContainer"> <div id="co...

2020-11-23 00:37:22 207 2

原创 nuxt 项目税收记录

计算航班时间使用出发时间，到达时间 hh:mm computed: { //复习计算航班之间的时间 flightTime() { console.log("出发时间", this.data.dep_time); console.log("到达时间", this.data.arr_time); // 剪切成数组 let arr_time = this.data.arr_time.split(":"); let dep_time

2020-11-14 23:35:10 262

原创使用element-ui创建文章后台管理系统(三)

使用element-ui创建文章后台管理系统(三)文章发布的实现，依赖功能：input框，单选按钮，多选按钮，富文本框(使用插件)，多选框，上传图片几个功能实现实现面包屑功能<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcru

2020-11-03 23:39:21 1177

原创使用element-ui创建文章后台管理系统(二)

昨日补充在el-input组件里面添加回车事件，没有效果解决方法  <el-input v-model="user.password" type="password" @focus="clearprams('password')" @keydown.13.native="login" .

2020-11-01 19:39:34 822 1

原创使用element-ui创建文章后台管理系统(一)

使用

2020-10-31 21:37:43 1006

原创 Vue CLI脚手架工作原理

使用Vue CLI创建脚手架webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript，vue等），并将其转换和打包为合适的格式供浏览器使用。实际上Vue CLI帮我们做了什么？将浏览器不能识别的代码转换为浏览器可识别的代码，解释less，sass,vue等其他浏览器不能识别的文件一些老版的浏览器可能不支持ES6，这个babel的作

2020-10-31 18:09:06 1880

原创关于用户没有权限路由守卫跳转登录后页面跳转，返回之前浏览页面处理方法

路由守卫需要登录跳转后重回页面问题：当我们访问页面需要token，路由守卫就会使跳转到登录页面，这时如我们没有进行重定向就会跳转到个首页或者人中心页面。解决方法：在响应拦截器里面，没有token的状态码进行判断，捕获401状态码设置响应拦截跳转带hash参数window.location.href = /#/login?redirectURL=${window.location.hash.substr(1)}axios.interceptors.response.use(function (

2020-10-30 22:54:38 1685

原创修改vant框架组件，实现tab组件增加自定义事件

修改vant框架中的Tab标签页组件在使用vant组件中，项目需要我们把框架的组件修改，加多一个按钮，用做用户的偏好设置需求：要求按钮不能影响组件的欢动效果，并且也要拥有组件的粘性定位布局组件：我们修改框架组件是很麻烦的事情，vue的vant 不能直接修改组件结构，所以我们不会使用修改结构的方法，修改标签的数据也会很麻烦，所以我们直接选择修改组件样式页面检测元素，我们发现可以给van-sticky一个padding-right样式（先给空间），再给它一个伪类元素，把加号显示出来.index

2020-10-30 21:54:11 2581 1

原创评论盖楼 Vue使用组件递归，组件递归传值，实现评论盖楼功能

Vue使用组件递归实现评论盖楼功能实现效果：实现评论的显示服务器给出的数据为{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}config: {url: "/post_comment/7", headers: {…}, baseURL: "http://127.0.0.1:3000", transformRequest: Array(1), transformResponse: Array(1),

2020-10-29 20:35:20 1310 1

原创归纳typeScrpit 中数据类型

TypeScrpit 中数据类型学习归纳ts里面的数据类型// ts中的数据类型// 布尔类型(boolean)// 数字类型(number)// 字符串类型(string)// 数组类型(array)// 元组类型(tuple)// 枚举类型(emun)// 任意类型(any)// null & undefined// void类型// never类型// 数字类型let num: number = 123console.log(num); //123num

2020-10-18 16:35:32 220 1

原创 vue中 v-model指令实现原理，关于父子传值

vue中 v-model指令实现原理，关于父子传值这里我是使用vue组件演示的分析父组件代码我们分析子组件的代码v-model指令限制只能用在这些元素上：input、select、textarea、components(自己封装的组件)，在表单控件或者组件上创建双向绑定获取用户输入数据，原因是v-model监听了input事件。这里我是使用vue组件演示的分析父组件代码<template> <div>

2020-10-18 00:17:34 639

weixin_50462008的博客