- 博客(20)
- 收藏
- 关注
RSS订阅原创 原生node连接mysql增删查改
为了写自己的博客开始学node了，记录一下查资料加网课自己学习写的接口，没用框架，把原生的node包装成promise返回目录结构个人环境cross-env适配环境，nodemon热部署{ "name": "project", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specifie
2022-05-22 17:57:08
279
1
原创 githubpages发布vue项目
前端Demo写完后，静态网页可以部署到gitbubpages，这里写一下自己部署的流程。因为打包后的资源地址和开发环境不一样，所以先在vue.config.js文件里修改路径，没有文件的话就自己新建。我的版本是脚手架4.x，其他版本的路径修改会不一样，需要自己看一下。项目npm run build后打包后会生成成dist文件夹打包后把index.js放到本地测试，比如vscde的live-server插件yua打开github远程仓库，如果没有就建一个，将完整的项目先push到远程仓库。可以
2022-05-05 10:54:12
723
原创 了解和使用promise
了解promise首先要知道它是什么，它的结构，然后是怎么实现的。这里整理一下自己看视频，看书加上自我理解的一个总结。Promise是异步编程的一种解决方案我个人理解异步就是模拟多线程，不过因为js是单线程，所以是js同步执行线程后面的另一段线程，执行完同步后再执行异步。它的基本语法：//注意new后面是同步，then是异步操作new Promise((resolve,reject)={setTimeout(()=>{resolve()//执行完这个后再调用then回调函数},3000);
2022-04-29 18:50:08
388
原创 js无缝轮播图
用原生实现轮播，实现原理看动图就能明白了。我用的是transform移动图片实现的，在要轮播的图片列表前面拷贝最后一张，后面拷贝第一张来模拟循环播放的效果，最后切换的时候用定时器去掉过渡效果。最终实现，在wrap类加上overflow:hidden，隐藏溢出就可以了。html部分<diV class="wrap"> <div class="img-list"> <img src="img/1.jpg" alt="" class="
2022-04-19 10:10:16
624
原创 vue报错Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation
vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:xxxx解决方法在跳转之前判断一下跳转路径中是否包括本次路径 itemClick() { if(!this.$route.path.includes(this.path)){ //当前路径中不包括本path就执行 thi
2022-04-13 16:50:47
4503
原创 vue页底导航组件封装
为了提高代码复用性，将公共的导航组件利用插槽抽取封装了。组件被激活时的颜色由使用者定义，这是效果：我因为vue版本原因用的是slot标签，此标签现在已经被废弃了，现在的规范是v-slot，详情去官网查吧！分了三个组件，分别是navBar、tabBar、tabItemnavBar.vue使用组件，激活时候的颜色通过itemColor传到组件内部<template> <bar> <item path='shopHome' itemColor='yello
2022-04-13 13:11:34
722
原创 vueRouter路由分文件模块化
因为项目路由多起来了，要把导航对应的路由分出去，记录一下。在router文件夹下再创建一个shop.js放单独的路由，默认跳转首页shopHomeconst shopHome= () => import ('../view/demo/mall/s-home.vue');//懒加载const category = () => import ('../view/demo/mall/s-category.vue');用到了es6的模块化export，不熟悉的可以先查一下，有很
2022-04-13 12:52:54
889
原创 vue使用iconfont
iconfont是一种字体，和svg作为icon是完全不一样的，只作为图标用起来很方便。去阿里巴巴选字体选好之后下载到本地，解压，把对应的字体和css文件放到assets目录下。iconfont.css里面自定义每个icon的class名，在iconfont类设置初始化格式。App组件全局引入@import "../src/assets/iconfont/iconfont.css";然后就可以直接在组件里用class调用了，不要忘记加初始化类名。 <div class="foot-
2022-04-12 12:33:39
1892
原创 ajax基本理解
ajaxAsynchronous JavaScript and XML（异步的 JavaScript 和 XML）官方文档说明，AJAX 不是新的编程语言，而是一种使用现有标准的新方法。优点1)可以无需刷新页面与服务器端通信，部分更新缺点1）没有浏览器历史，有跨域问题2）seo不友好HTTPhTPP协议：超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则。请求报文重点是格式与参数，以下是格式与相应内容举例 行 Get/Post /s?ie=utf-8 h
2022-04-06 01:33:10
846
原创 node下使用express连接mysql查询
先创建node项目npm init，一路回车到生成package.json，在文件下创建index.js。然后npm安装expree和mysql。npm install express -snpm install mysql -s顺便记录一下npm install语法的注意项npm install -d 是：npm install --save-dev 简写，对模块进行局部安装，模块写入到devDependencies 对象。npm insatll -s 是：npm install --.
2022-04-04 17:02:47
1819
原创 简单了解JS的深浅拷贝
自己不太了解这一块，查了一些博客加实践后感觉懂，记录一下，防止忘记先了解一下js中数据存储的方式js有8中数据类型：Number String Boolean undefined null（返回的是Object） Object bigInt （表示比Number更大的值）symbol（表示不会改变的唯一值）其中后两种是ES6新增加的，具体使用查MDN。数据类型又分为简单数据类型和引用数据类型。简单数据类型存放在栈里，直接开辟空间存储值。引用数据类型将属性名存在栈内存中，值存在堆内存中，但
2022-03-28 21:42:58
303
原创 vue吸顶导航
自己边查资料边做，不过最后用的还是原生dom的方法，其实用$refs就可以了，但是反正滚动监听还是用的原生，所以也没关系了。html导航 <div class="contain"> <div class="nav-bar-wrap"> <ul class="banner"> <li v-for="value in banner_list" :key="value" @
2022-03-27 01:37:37
1844
1
原创 vue实现简单轮播图
做了一个轮播图，可以自动切换，鼠标放上去后停止，左右切换是用element ui加上去的，箭头间距不一样有点难受，之后再吧。记录一下。下面是html的图和按钮部分 v-for中必须要写index作为:key的值。button应该卸载img后面，写在前面的会被img遮住，加个z-index:1，调高图层就可以了。 <div v-for="(img_url, index) in img_src" :key="index" v-s
2022-03-15 15:47:01
20591
7
原创 vue组件与组件间传值
vue的组件往往是多层级的，要实现组件与组件间的数据传递也有很多方法，下面代码中student与school组件为姐妹组件，有着共同父组件app。父组件向子组件传递消息用props父app中的模板，普通传值 <school name='AppName' number='女' ></school>子school中接收data(){ return{ address: "北京", msg:'hello' }},
2022-03-11 12:19:11
922
原创 Vue中的mixins和ref用法
实现student和school组件中都能点击弹出名字，可以用混合将其抽离出来，混合的本质是与原本组件做交集，不会影响原组件的数据，若有冲突，原组件优先级更高下面是school组件代码<template> <div> <h1 @click="showName">学校名字:{{ name }}</h1> <h1>{{ address }}</h1> <button @click="changeAddr
2022-03-11 08:39:55
1110
转载 JavaScript二分查找
刷力扣的时候发现自己写出来的有问题，搜了一下人家写法，这个更容易理解。(right - left) >> 1 表示把值转换为二进制后向右移了一位再转换为十进制，这样就不用考虑小数溢出的情况，如果为小数，作为下标检索时值会变成undefinedvar search = function (nums, target) {if (nums == null || !nums.length) {return -1;}let left = 0,right = nums.length - 1;
2022-02-22 09:28:05
109
原创 js简易骰子
之前跑团的时候想着要不弄个自己的私人骰子，正好最近在复习js！就写了个简单网页，之后学完了再来扩充功能。这是页面<h1>我是一个<span id="h">骰子</span></h1> <p>你应该按回车骰点，支持rd和rc，例如： <strong>rd6或者r2d6或者rc6</strong>分别代表： 选取1-6的随机数、 取1-6的2位随机数、 取1-100随机数，判断6与随机数大小关系。&
2022-02-02 13:38:26
793
原创 JavaScrip复习
今天写了一个小作业，复习了些js的内容，放在这边存档。函数的调用，弹窗，还有事件监听。- 弹窗function myfun(){ name= prompt("hello","");//获取弹窗输入框 if (name==="a"){ let box=document.getElementById('h'); box.innerHTML='<h1>是我的了</h1>';//取代了原本#h元素的内容 } } window.onl
2022-01-24 23:00:23
332
原创 html表格练习
代码，数据是随便写的<table> <caption> 各项数据 </caption> <!-- 标题 --> <thead> <tr> <th scope="col" rowspan="2" colspan="2"></th> <th scope="col" rowspan="2">种类</th> <th sc
2022-01-20 04:43:57
530
原创 html语义化标签
1、语义化做了百度前端技术学院的任务来复习html标签，感觉以前对语义化了解得不深，而这个练习一直在强调语义化。首先是问题：语义化是什么？html5的规范里已经有了答案：更鼓励使用能描述内容本质的类名，而不是那些只是描述其外在表像的值。语义化就是让代码变得更容易让人理解，一方面代码更轻松看，另一方面更容易让计算机抓捕内容，这样读取网页的人更容易理解。中心思想就是：方便理解而html为了推动语义化，有许多望文生义的标签，同样它也赋予了这些标签一些附和含义的格式。例如：<dl>
2022-01-20 04:26:28
432
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人