- 博客(37)
- 收藏
- 关注
RSS订阅原创 Element UI 重置表单功能
这个功能比较简单：先给表单<el-form>取个名字ref="addUserFormRef"，再给<el-dialog>对话框设置监听关闭事件函数addUserDialogClosed:在函数中我们只要调用addUserFormRef的resetFields()方法就可以在表单关闭的时候重置表单内容了效果：...
2020-12-31 16:23:50
1593
原创 Element UI 自定义校验规则
比如我们有个需求，要验证邮箱和手机号：我们需要在data中非return{}的部分定义两个方法作为验证字段的规则：方法接收3个参数,rule,value和cb，其中value是要验证的字段的值，cb是验证以后的回调函数如果值可以通过正则校验，就return cb()否则调用cb并且传入一个错误对象实例接着在校验规则对象中，在具体的校验规则数组里添加一个校验规则对象，通过validator指定自定义的校验规则方法：效果：上代码：<!-- 添加用户对话框 --> &l
2020-12-31 16:10:48
4292
3
原创 Element UI修改message控件显示的时间
全局挂载message控件的时候，可以给$message传递一个对象，里面可以通过duration设置显示时间
2020-12-31 12:19:53
2522
原创 Vue电商项目(六)-分配权限列表组件
控制分配权限对话框的显示与隐藏：我们在弹出对话框之前要先获取所有权限数据：弹出对话框前要获取所有权限数据：效果：为了显示这些数据，我们要用到一个新的tree控件对于defaultProps对象，里面的children就代表父子嵌套数据之间是通过哪个字段链接的，label代表前面看到的文本是哪一个数据字段这些都是label，我们的例子里面label是属性authName下面我们定义自己的defaultProps我们接下来要在树形控件的前面显示可选框：只要加上show..
2020-12-31 00:33:58
411
1
原创 Vue爬坑之处理ESLint语法报错问题
ESLint语法报错非常烦，我们可以在项目根目录新建一个.prettierrc文件，然后在里面编辑规则{ "semi": false, // 不加分号 "singleQuote": true, // 单引号 "tabWidth": 2 //tab为2个空格}遇到这样的情况，因为logout方法后面的()与logout之间没有空格报错我们可以这样解决：复制错误信息space-before-function-paren然后在根目录找到 eslintrc.js文件并修改：
2020-12-23 23:58:10
321
原创 Vue爬坑之imported multiple times
项目中按需导入element-ui的组件报错：解决方案：放在同一个括号里导入：这样就可以了注意：ESLint语法比较严格，所以一定要在每个","后面加上空格，如上如蓝色框内所示
2020-12-23 22:16:49
1004
原创 Vue爬坑之v-model和v-bind(二)
<template> <div class="login_container"> <div class="login_box"> <div class="avatar_box"> <img src="../assets/logo.png" alt="" /> </div> <!-- 登录表单区域 --> <el-form :mo
2020-12-23 14:34:03
185
原创 Vue低级报错汇总
对于这个组件的代码：// App.vue<template> <div id="app"> App根组件 </div></template><script>export default { name: "app"};</script><style></style>编译时有报错：先看第一个：后面多一个空格再看第二个：字符串必须用单引号再看第三个：多余的
2020-12-23 09:04:42
75
原创 JS模块化相关规范
安装依赖包npm i --save-dev @babel/core @babel/cli @babel/preset-env @babel/node新建babel.config.js文件，进行如下配置：const presets = [ [ "@babel/env", { targets: { edge: "17", firefox: "60", ...
2020-12-21 15:00:21
129
原创 vue之路由
实现一个简单路由<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟路由</title> <script src="../vue202012...
2020-12-20 22:14:41
1086
4
原创 VS Code中快速创建自定义代码模板的方法
我们就以创建vue自定义模板为例子来演示一下输入html回车把准备好的模板复制到body中： "prefix": "vh", "body": [ "<!DOCTYPE html>", "<html lang=\"zh-CN\">\n", "<head>", "\t<meta charset=\"UTF-8\">", "\t<meta name=\"viewport\" content=\"width=device-widt
2020-12-20 13:44:52
916
2
原创 Vue的is属性
我们看一个切换标签的例子：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic Components Example动态组件</title> <script src="../vue202012/vue.js"></scri
2020-12-20 11:24:51
360
1
原创 async/await处理多个异步请求
/* async/await 处理异步操作 */ axios.defaults.baseURL = 'http://localhost:9999' async function queryData() { let result = await axios.get('adata') console.log(result) } queryDa...
2020-12-19 18:23:58
6143
1
原创 axios响应结果主要属性及拦截器
配置请求的基准地址：配置完毕以后，接下来发请求就可以简化了：配置请求头效果但是要记住，对于跨域，请求头是需要在后台配置的，比如刚才的mytoken配置成功，就是因为之前我们配置了mytoken：axios拦截器包括请求拦截器和响应拦截器结果：结果：返回两个一样的东西，一个是代码17行打印的，一个是23行打印的如果我们只关心response里面的data,可以这样处理：结果：...
2020-12-19 15:16:09
660
1
原创 axios四种方式GET/POST/DELETE/PUT的参数传递
看一个最简单的例子：app.get('/adata', (req, res) => { res.send('hello axios!')}) axios.get('http://localhost:9999/adata').then((response)=>{ console.log(response.data) })结果：注意这里的data是固定的如果我们只看返回的response:axios参数传递..
2020-12-19 14:44:54
55897
5
原创 接口调用Fetch方法以及fetch请求参数
fetch概述看一个基本的例子：服务端代码：app.get('/fdata',(req,res)=>{ setTimeout(function(){ res.send('this is content retrived by fetch method') },3000)})测试：<script> fetch('http://127.0.0.1:9999/fdata').then((data) => {
2020-12-18 23:36:06
15627
1
原创 Vue之前后端交互与Promise简单使用
前后端交互模式1.1 接口调用方式：原生ajax基于jquery的ajaxfetchaxios1.2 URL地址格式我们先看一个例子：index.js:const express = require('express')const app = express()const bodyParser = require('body-parser')app.use(express.static('public'))app.use(bodyParser.json())app.
2020-12-18 21:54:02
691
原创 express处理跨域的2种常用方案
对于这样的代码，我们执行以后，浏览器端访问会报跨域错误：方案一：手动解决// 设置允许跨域访问该服务app.all('*',function(req,res,next){ res.header("Access-Control-Allow-Origin","*"); res.header("Access-Control-Allow-Methods","PUT,GET,POST,DELETE,OPTIONS"); res.header("Access-Control-Allow.
2020-12-18 15:12:05
2316
原创 Vue组件之插槽
不具名插槽<body> <div id="app"> <test-slot></test-slot> <test-slot>Server Error</test-slot> </div> <script> Vue.component('test-slot',{ template:` &
2020-12-17 14:47:08
582
原创 Vue组件间数据交互
我们写一个例子演示一下，点击A下面的按钮时，B数字+1，点击B下面的按钮时，A数字+10:<body> <div id="app"> <test-a></test-a> <test-b></test-b> </div> <script> // 事件中心 var hub = new Vue() // 组件a.
2020-12-17 09:23:01
97
原创 Vue组件之组件间数据交互
父组件向子组件传递值先看一个父组件向子组件传递数据的例子：父组件通过属性的方式静态传递值给子组件，子组件通过props接收，效果如下：父组件还可以通过动态绑定的方式动态传值给子组件：还可以混搭传值：==注意：==props属性命名规则：注意： v-bind绑定和不加冒号绑定区别：<body> <div id="app"> <div>{{ pmsg }}</div> <menu-item
2020-12-17 00:04:02
599
原创 Vue组件基础以及注意事项
vue注册全局组件：注意：组件里面的data必须是一个函数，返回一个对象作为组件的数据，这本质上是一个闭包，让各个组件的数据互相独立注意：组件模板内容必须是单个根元素如图，这个组件的模板里面就有两个根元素button，这样会报错：解决办法：可以在外面套一层div使其变成一个整体:`<div><button @click="handle">Click {{ count }} times</button><button>Test</butt
2020-12-11 16:25:23
157
原创 Vue之v-model和v-bind
初学vue容易把这两个搞混淆,简单来说，v-bind属于单向绑定，v-model是双向绑定<input v-model="message"> 与下面的两行代码是一致的：<input v-bind:value="message" v-on:input="message = $event.target.value" /><input :value="message" @input="message = $event.target.value" /> //缩写v-bi
2020-12-11 10:00:32
148
原创 css盒模型
外边距塌陷：上面的margin-bottom和下面的margin-top合并了解决：flex布局没有这个问题，或则使用BFC----->父元素没有设置position,默认position就是static,当父元素是static时，子元素positon为absolute就以body为参照系：--->如果把父元素的position设置为relative:--->...
2020-12-10 23:59:31
64
3
原创 vue侦听器模拟用户名校验
html: <div id="app"> <div> <span>Name:</span> <input type="text" v-model.lazy="uname"> <span>{{tip}}</span> </div> </div>js:<script>
2020-12-10 13:51:49
132
原创 Vue表单域修饰符
1.number:转化为数值点击click多次以后：是字符串拼接如果我们想要计算，就需要：2.trim:去掉开始和结尾的空格3.lazy:将input事件切换为change事件input事件每次输入都会触发change事件当失去焦点时候触发...
2020-12-09 23:22:01
110
原创 vue常用特性之表单操作
css:<style> form div{ height: 40px; line-height: 40px; } form div:nth-child(4){ height: auto; } form div span:first-child{ display: inline-block; ..
2020-12-09 16:51:36
108
原创 vue小案例之tab
效果：主要就是利用v-for循环list里面的元素，然后渲染标题和图片再判断currentIndex是否和当前遍历元素的索引index相等，相等就显示通过事件绑定来动态根据鼠标点击的元素修改currentIndex<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
2020-12-09 15:21:13
95
原创 Vue样式绑定class
.active { border: 4px solid rgb(3, 27, 240); width: 100px; height: 100px; } .error { background-color: orangered; } .test { color: white; }<div id="app
2020-12-09 10:16:38
91
原创 redis安装和使用
下载redis并解压：cmd切换到当前redis路径(最好用cmd,powershell貌似有兼容性问题)出现这样的页面就是开启服务成功了，这个窗口别关再在此目录打开cmd:node连接redis:npm安装redis，创建redisClient客户端并测试：const redis = require('redis')// 创建redis客户端const redisClient = redis.createClient(6379, '127.0.0.1')redisClient.o
2020-12-07 07:50:17
133
原创 cookie做登陆测试的思路
cookie做登陆测试的思路：user.js/routerconst login = require('../controller/user')const { SuccessModel, ErrorModel } = require('../model/resModel')const handleUserRouter = (req,res)=>{ const method = req.method // 登录 if(method === 'GET' &&
2020-12-06 18:49:09
278
原创 node中mysql查询结果
插入：const mysql = require('mysql')const con = mysql.createConnection({ host:'localhost', user:'root', password:'root', port:3306, database:'myblog'})con.connect()let sql = `insert into blogs (title,content,createtime,author) val.
2020-12-06 09:58:10
625
原创 Cannot read property ‘join‘ of undefined
今天调试代码时候，浏览器控制台总是有这个报错查了一下，解决办法就是在body里面加一个空的div就可以了，原理未知
2020-12-05 22:35:43
1992
1
原创 复习ajax-实现步骤及参数传递(part1)
先启动一个服务器，端口9999开放static静态资源服务，指定路由为/p/注册一个get方式的路由，命中返回this is test1新建一个html页面，我们分4个步骤去发送ajax请求：1.创建一个ajax对象xhr2.告诉xhr我们要用什么方式(get)去请求哪个地址3.发送ajax请求4.调用xhr.onload方法获取服务器返回的数据控制台打印出来了，说明ajax发送成功这里只是一个演示，真实项目中，不会去获取一段字符串，服务端大多数情况下会以JSON对象作为响应数据的格
2020-12-04 15:29:58
158
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人