- 博客(34)
- 收藏
- 关注
RSS订阅原创 vue3 element-ui 树选择单选
1.取消父子结点关联<el-tree check-strictly :data="data" show-checkbox node-key="id" :props="defaultProps" ref="trees" @check="handleNodeClick" ></el-tree>2.修改选中结点在ts代码中写： const trees = ref(); //树形结构 //选择节点时触发的函数 const handleNodeClick =..
2021-09-09 15:02:51
866
原创 js 下载网络文件到本地，根据url下载文件，下载本地文件
js下载网络文件到本地不建议使用a标签打开网页，不同浏览器会不兼容。下面介绍一个可以根据url下载文件到本地，并且自动生成随机名称的方法~随机生成名称可以在统一页面多次导出文件且不会提示“文件已存”的情况，不需要的同学可以根据注释修改// 文件下载，url为文件地址，可以为本地地址也可以为网络地址function downloadFile(url) {// 不需要随机生成名字的// let filename = `你的文件名字.文件格式`; // 生成一个随机名称 let fi
2021-05-28 17:33:18
2012
原创 git将已有文件上传远程仓库，转远程仓库
当我们从别人的git仓库中下载代码并编辑后，想移植到自己的仓库怎么办？1.右键文件夹选择git工具中的git bash here打开命令窗口。2.查看本地文件关联的gitgit remote -v$ git remote -vorigin https://git.gx.xxx/xxy/xxx.git (fetch)origin https://git.gx.xxx/xx/xxx.git (push)3.删除本地仓库与远程仓库的关联git remote remove origin删除
2021-03-31 10:25:16
274
原创 微信小程序长按保存图片
所用apiwx.getSettingwx.authorizewx.getImageInfowx.saveImageToPhotosAlbumwx.wxml src写你的图片地址，本地或者网络都可以<!--pages/save/save.wxml--><image src="/asset/u=1709216491,2536617744&fm=26&gp=0.png" data-url="/asset/u=1709216491,2536617744
2021-03-30 15:51:21
220
原创 node.js （二）内置http模块，从req.url中获取请求参数
httpNode内置的http模块功能使得它非常适合用来开发Web程序。与apache不同，apache为静态服务器，用于将浏览器端请求的静态资源返回。而http模块可以开发动态接口，用于处理前端业务，比如登录，注册，查询资讯信息等。使用流程：引入http模块创建服务对象在创建的服务对象中编写需要执行的操作代码打开服务并对创建的服务对象进行监听或者其他操作创建：http.Serverhttp.createServer()表示创建一个服务，该函数的返回值为http.Server的实例。v
2020-10-29 19:55:26
2761
3
原创 node.js(一)内置模块，url，querystring，buffer的简单使用
url(需要手动引入）url模块用于处理与解析URL。常用方法：parse(""):将字符串类型的url转换为对象format({}):将对象转换为urlresolve(url1,url2):url字符串拼接应用：parse("")：将字符串类型的url转换为对象当我们获取到了一个网络地址，需要将其拆分并获取其中的参数。这时候我们可以使用parse("")来进行一个解析。var url = require("url");//引入url模块var path = "http://47.
2020-10-29 00:47:18
446
原创 微信小程序通过options页面传值，解决options获取数据undefined
在微信小程序中页面跳转可以通过options来获取传过来的值。跳转页面函数：// 点击当前列表获取详情跳转 detailHandler(event){ var detailId = event.currentTarget.dataset.detailid; wx.navigateTo({ url: '/pages/detail/detail?id='+detailId }) },这时我们传过去的数据可以在跳转页面接收，在onload函数
2020-10-27 16:54:43
13433
6
原创 微信小程序，提示”getLocation需要在app.json中声明permission字段“，解决办法
当我们在某个微信小程序上使用了getLocation方法之后发现点击触发事件按钮时，会出现提示getLocation需要在app.json中声明permission字段这是因为没有在全局配置app.json中声明permission字段。解决方法：在app.json中添加代码"permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }}添加之后，再次点击就会弹出询
2020-10-25 16:04:54
2059
原创 js,将两个数组连接的几种方法。
1.使用concat,concat不会改变原数组，所以需要新定义一个变量来接收var a = [1, 2, 3, 4, 5]var b = [6, 7, 8, 9]var c = a.concat(b);console.log(c);2.使用splice，splice中第一个数为插入的位置，第二个为要删除的项数，这里是插入所以是0，之后就写需要插入的数据。这里不能直接写入一个其他数组，否则就会出现数组里嵌套了一个数组。//在a数组中插入1，2，3var a = [1, 2, 3, 4, 5
2020-10-24 15:35:35
8371
原创 vue,使用v-for循环加载子组件
在项目开发中，通常我们需要在一个父页面中载入非常多的子页面，如果每个子页面都一一定义的话，会显得代码非常的冗余。这里我们可以通过v-for循环来实现一个加载子组件的方法。1.在父组件中引入所有的子组件，并注册2.在data中将子页面封装成一个数组pages: [ { name: "allOrder", label: "所有订单", }, { name: "unpaid",
2020-10-24 15:17:22
11135
2
原创 Vue，简单的子组件向父组件传值。
子组件通过发射事件$.emit给父组件，通知父组件数据改变，父组件通过@xxx监听例子：注册一个全局组件，和一个局部组件，将全局组件作为局部组件的子组件，并将全局组件中的值传给局部组件。全局子组件代码：父组件：测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
2020-10-22 19:39:07
727
原创 VUE,element-ui，优化tabs组件每次点击，所有子页面都重新渲染问题。
在element-ui的tabs组件中，我们发现每次切换页面，所有的子组件都会重新渲染一次。当子页面需要发送数据请求并且子页面过多时，这样会过多的占用网络资源。这里我们可以使用v-if来进行判断是否渲染该子页面。1.定义一个数组，用来判断该页面是否需要渲染data() { return { activeName: "allOrder", pages: { allOrder: true,//第一个需要渲染的页面 unpaid: false,
2020-10-20 20:12:49
13434
6
原创 VUE，父页面向子页面传值。
在父页面中，我们使用了自定义的子页面，这时候我们需要将父页面的id传输给子页面。可以自定义一个绑定事件在子组件上，例如：父页面： <basicMsg :id="id" ></basicMsg>basicMsg为我的自定义子组件名称，引号内为需要传输的值。这里我传输的id为data内定义的id。子页面：使用props来接收父组件传输的数据，props定义在与data同级。这里也可以给接收的数据进行一个简单的数据类型判断。例如：str为string类型，str1为obje
2020-10-20 20:00:33
4120
原创 Vue，element-ui中使用tabs，载入子页面并优化。
在element-ui组件中有一个tabs标签页，可以在单页面中注入多页面。但是例子中的页面只是一行文字，在实际应用开发中我们需要写入的代码很多，如果都写在该页面就会非常不美观，所以这里我使用了子页面，并自定义组件载入到单页面中。1.在页面中写入element-ui组件中的代码。直接把官网上的东西复制下来就行，根据自己需要增加和删除页面。2.定义子页面创建一个文件夹存放子页面，将子页面文件创建出来。3.主页面引入子页面4.注册子组件，在data同级下写components5.在tabs
2020-10-20 19:45:11
6670
2
原创 VUE，element-ui自带表单验证失败，解决v-model和prop无法绑定问题
在使用element-ui时，使用了里面自带的表单验证功能。当数据回显在输入框时，仍然无法通过验证。原代码：模态框内代码：data内验证代码:查询过后，发现是v-model绑定的数据需要于prop的内的名字相同。修改后：这样就能通过表单验证了。...
2020-10-19 09:53:08
3619
5
原创 VUE,webpack打包（自动配置）
生成一个基于vue+webpack的项目1.在终端中进入需要创建项目的文件夹，安装vue/cli-initcnpm install @vue/cli-init -g2.创建项目模板-webpackvue init webpack app01（你的项目名字）vue init webpack app01选择需要的配置然后“y”生成的过程比较漫长可以慢慢等，大概需要十分钟。完成后可以看到多了一个文件夹。3.安装依赖cnpm install4.运行项目npm run dev5.编
2020-10-15 19:48:04
315
原创 解决“Required Integer parameter ‘xxx‘ is not present”问题
在使用axios发送post请求的时候，我们将需要发送的数据封装为一个obj对象，但是在浏览器报错。意思是必填的传输数据不正确，可能是没有填或者是错误。可以引入jQuery来进行一个数据转换。在html界面引入jQuery<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>如果是使用vue-cli脚手架搭建的项目，在public文件夹下的index.html
2020-10-15 15:34:51
9126
1
原创 VUE,webpack简单使用脚本打包（手动配置）
Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过loader的转换，任何形式的资源都可以视作模块，比如CommonJs模块、AMD模块、ES6模块、CSS、图片、JSON、Coffeescript、LESS等。webpack官网地址webpack的简单使用：使用前提：已经安装了node.js最近版本1.初始化项目进入项目中npm init 一直
2020-10-14 20:13:15
880
原创 Vue，在vue-cli上进行组件页面切换
进行组件切换的两种方法：一.动态组件1.在components内自定义两个子组件并载入到根组件上student.vue:<template> <div id="student"> <h3>student list</h3> <ul> <li v-for="(item, index) in students" :key="index"> {{ item }} </l
2020-10-13 16:09:38
866
原创 VUE，vue-cli项目结构，以及在vue-cli脚手架原始项目框架引入模块
一、项目结构：初始化一个vue-cli之后，我们可以在目录中看到以下结构。app.vuesrc下的app.vue是项目的根组件，可以包含其他的子组件。在项目运行时进入的首页即为app.vue。子组件写在src文件夹下的components内。根组件和子组件组成组件树。main.jsmian.js是vue应用的入口文件，可以创建一个新的vue实例并挂载再根节点下。Vue插件也从这里引入。二、添加引入新模块1.在components文件夹下新建一个vue文件模块内基本组件：templ
2020-10-12 20:07:58
274
原创 新手简单搭建vue-cli(脚手架)以及启动
vue-cli脚手架可以帮助开发者快速搭建项目框架（文件结构），可以节省很多搭建时间，本文章将简单的介绍如何搭建一个vue-cli。前言：安装vue-cli整个过程是基于已经安装好node.js以及cnpm的基础上。可以在cmd命令窗口中先查看是否已经安装之后再进行接下来的操作。全局安装vue-cli1.安装window+r调出运行弹框，输入cmd调用命令窗口。输入：cnpm install @vue/cli -g如果之前有下载过旧版本报错之后需要卸载旧版本之后重新下载。安装完成时没有红
2020-10-12 17:18:45
621
原创 js计算100-1000内的水仙花数
水仙花数（Narcissistic number）也被称为超完全数字不变数（pluperfect digital invariant, PPDI）、自恋数、自幂数、阿姆斯壮数或阿姆斯特朗数（Armstrong number），水仙花数是指一个 3 位数，它的每个位上的数字的 3次幂之和等于它本身（例如：1^3 + 5^3+ 3^3 = 153）。计算100-1000内的水仙花数：function test() { var count = 0; for (var i = 100; i &l
2020-10-11 14:37:26
1318
原创 js使用1，2，3，4组成不重复的三位数，打印并计算出有多少个
function test() { var count = 0; for (i = 1; i <= 4; i++) { for (j = 1; j <= 4; j++) { for (k = 1; k <= 4; k++) { if (i != j && j != k && i != k) { console.log(i, j, k
2020-10-11 14:35:22
879
原创 js计算九九乘法表
四个代码任选1，四个乘法表表现出的形式都不一样//正常模式function test() { for (var i = 1; i < 10; i++) { var str = ''; for (j = 1; j <= i; j++) { str += j + '*' + i + '=' + (i * j) + '\t'; } console.log(str); }}test()//
2020-10-11 14:33:22
217
原创 vue中根据id删除数组中对象的方法
将对象都存放在一个数组中后，我们需要删除指定id的一组对象，有以下两种方法：方法一：使用findIndex找到数据位置后使用splice将其裁切。//let一个index来接收findIndex的结果，这里arrText为要查找的数组 let index = this.arrText.findIndex((ele) => { return ele.id === id; }); console.log("index", index); /
2020-10-11 14:26:31
10913
1
原创 vue router路由机制 别名，重定向，动态路由匹配
别名/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为/a，就像用户访问/a一样使用alias设置别名{ path: '/teacher', name: 'teacher-a', //给路由命名方便跳转 component: teacher, alias: '/student' }, 此时访问teacher和student都是在访问teacher重
2020-10-09 10:40:09
572
原创 Vue router的传值，params和query的区别
在Vue router中可以使用params和query来传递值。相当于get和post的区别。query相当于get请求，传递的值会放在地址栏中展示，而params相当于post请求，传递的值不会显示在地址栏中。其中，query传值的方法路由可以没有名字，但是params传值必须要有名字。 <div id="app"> <h1>点击链接跳转界面</h1> <router-link :to="student">跳转到学生&l
2020-10-09 09:53:25
253
原创 vue-router 的安装和基本应用(1)
vue-router是vue的一个插件，用来提供路由功能。通过路由的改变可以动态加载组件，达到开发单页面程序的目的。安装可以使用cdn在线导入在线资源，也可以使用npm模块的方式安装vue-router，现阶段我们入门学习的使用cdn。。<scriptsrc="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><scriptsrc="https://cdn.bootcdn.net/ajax
2020-10-08 20:04:52
87
原创 基于vue，element组件制作可输入表格备忘录
制作一个可以输入添加的备忘录，内容以表格形式呈现。按下回车可添加，点击删除可根据id删除。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>备忘录</title>
2020-10-07 11:11:15
651
原创 js，制作一个全屏运动粒子。
本代码可制作一个全屏漂浮的粒子，点击可停下，再次点击移动效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>粒子</title> <style&
2020-10-07 11:02:47
206
原创 linux端口被占用解决办法， The port may already be in use or the connector may be misconfigured.
启动某个项目的时候显示端口被占用例如启动jar包时显示以下报错信息：Error starting ApplicationContext. To display the conditions report re-run your application with ‘debug’ enabled.The Tomcat connector configured to listen on port 8899 failed to start. The port may already be in use or
2020-08-15 23:08:36
5968
原创 阿里云linux服务器安装mysql连接本地navicat，解决2003问题
连接阿里云服务器sudo apt-get install mysql-server下载数据库使用mysql -uroot -p输入密码登录验证是否安装成功。安装成功后，在本地navicat新建数据库连接，测试会出现2003错误。以下为解决流程：1：阿里云控制开开放数据库端口进入阿里云控制台->选择服务器->网络与安全->安全组->配置规则手动添加，开放3306端口，白名单设置为0.0.0.02.修改mysql登录权限登录云服务器，mysql -uroot -p 登
2020-08-15 22:41:54
443
原创 H5，保姆级别小白CSS基础动画笔记，附小动画例子。
CSS动画-Animations由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何JavaScript技术即可完成动画的制作。制作CSS动画步骤：1.声明动画：我们可以在CSS样式中使
2020-08-09 17:30:06
329
原创 H5，CSS选择器
CSS选择器在CSS选择器中，基本常用选择器有标签选择器、类选择器、ID选择器、普通选择器，还有层次选择器、伪类选择器和属性选择器。前面部分的选择器较为简单，不做笔记，本文章仅记录关于层次选择器、伪类选择器和属性选择器的笔记。**层次选择器:**1.后代选择器：使用空格隔开两个选择器，表示选择第一个元素中后代里的元素,后代元素可以是子元素也可以是孙元素。例如：CSS:.one span { color: blueviolet; }html：<div class="one">
2020-08-06 20:01:41
229
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人