- 博客(46)
- 收藏
- 关注
RSS订阅
原创 (js)数组相关方法
数组及数组中常用的方法方法的作用和含义方法的实参(类型和含义)方法的返回值原来的数组是否会发生改变声明var arr1 = []; //数组字面量var arr2 = new Array(); //不推荐var arr3 = Array();//不使用 通过系统内置的Array构造函数声明 稀松数组var arr = [,1,,,2,3,];console.log(arr.length);//6 最后一个不算toString数组转字符串 “脱掉括号
2020-12-09 16:31:48
94
原创 (坑)node代码顺序导致跨域问题
今天遇到一个问题 说大也不大 说小也不小。但是搞了一个晚上一个全栈项目：express+mongoose+vue在某个模块进行添加数据操作时，出现了跨域错误。但是我已经安装了cors包，讲道理不会出现这个问题，查了很久。发现是代码顺序问题之前写的是先require再use的顺序…const express = require('express')const app = express()const path = require('path')app.use(require('cors')(
2020-08-22 00:21:24
171
原创 (vant)使用vant轮播图无法使用本地图片
使用vant框架的轮播图组件时，直接引用本地图片会无法显示。解决办法是在数据外加上requireeg：<template> <div> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe-item v-for="item in img" :key="item"> <van-image :src="i.
2020-07-26 15:32:32
2226
4
原创 (vue-awesome-swiper)使用vue-awesome-swiper报错找不到依赖的css
今天使用vue-awesome-swiper的时候报错：搞了很久 发现错得很让人吐血~！…我安装的版本： "dependencies": { "core-js": "^3.6.5", "swiper": "^6.0.4", "vue": "^2.6.11", "vue-awesome-swiper": "^4.1.1", "vue-router": "^3.2.0" },官方说明了安装6.0版本的话需要引入另外一个css// If you use
2020-07-19 18:16:32
2588
12
原创 (mongodb)mongo-relation
观看up全栈之巅(使用Mongoose基于MongoDB建模并设置关联)所作学习记录观看地址：https://www.bilibili.com/video/BV1wb41157FX安装mongoose：npm i mongooseconst mongoose = require('mongoose')mongoose.connect('mongodb://localhost:27017/mongo-relation',{ useNewUrlParser: true, useUnifie
2020-07-07 22:02:07
140
原创 es6模块化
暴露模块分别暴露： export 暴露内容统一暴露： export { xx,yy }默认暴露： export default 暴露内容在es6中使用哪种引入取决于使用哪种暴露引入模块import { xx, yy } from ‘./utils/…’ (分别和统一暴露使用此种引入)import module1(文件名) from ‘./module1’分别暴露：export function test() { console.log('test..');}expo.
2021-01-10 14:34:33
125
原创 微信小程序相关
切换tabwxml<!-- 注意每个tab要绑定同一个事件 --><view style="display:flex;justify-content:space-between"> <view class="{{activeType == 1 ? 'active' : ''}}" data-type="1" bindtap="click">tab1</view> <view class="{{activeType == 2 ? 'act.
2021-01-09 20:33:37
172
原创 elementui相关
更改按钮默认样式<el-button type="info">主要按钮</el-button>.el-button--info{ color: #fff; background-color: #FF69B4; border-color: #FF69B4;}.el-button--info:disabled { background-color: #999999; border-color: #999999;}.el-button--primary.
2020-12-25 14:43:47
170
原创 (vue)vue中按钮权限控制
使用自定义指令实现vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { buttonPermission: { add: true, edit: true, delete: false } }, mutations: { //定义好请求的方法,这里将把后台返回的按钮权限数.
2020-12-10 10:46:57
595
原创 webpack版本兼容问题
运行webpack时报错：Cannot find module 'webpack/bin/config-yargs'This is probably not a problem with npm. There is likely additional logging output above.可能是版本兼容问题，更正后的版本： "devDependencies": { "webpack": "^4.39.2", "webpack-cli": "^3.3.12", "webp
2020-12-04 14:41:45
895
原创 (js)异步加载
默认加载js方式是同步加载(阻塞模式)加载script脚本会阻塞css和其他文件加载 所以一般放在后面(只是减少阻塞 不能根本解决)defer和asyncasync就是异步，在不影响其他资源加载的同时，异步加载这个文件；defer就是延迟加载。Defer(IE8及以下): 标识脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。async(W3C html5属性 IE9及以上支持):表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。如果想.
2020-12-02 17:08:10
78
原创 vue组件封装
menu组件封装app.vue <template> <div id="app"> <vvMenu> <vvMenuItem>导航一</vvMenuItem> <vvMenuItem>导航二</vvMenuItem> <vvMenuItem>导航三</vvMenuItem> </vvMenu> <router-.
2020-12-02 13:44:53
78
原创 vue-element-admin
时间格式过滤器// import parseTime, formatTime and set to filterexport { parseTime, formatTime } from '@/utils'/** * Show plural label if time is plural number * @param {number} time * @param {string} label * @return {string} */function pluralize(time,.
2020-11-18 09:08:58
346
原创 (js)数组方法
数组声明var arr1 = []; //数组字面量var arr2 = new Array(); //不推荐var arr3 = Array();//不使用 通过系统内置的Array构造函数声明 稀松数组var arr = [,1,,,2,3,];console.log(arr.length);//6 最后一个不算在原数组上做修改的数组方法pop、push、var arr = [2,3,4];arr.pop();console.log(arr);//2,3 删除末尾
2020-10-16 09:39:42
84
原创 (demo)动画实现原理
动画原理获得盒子当前位置让盒子在当前位置上加1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位，才能使用element.style.leftcss： .box { position: relative; width: 200px; height: 200px; background: antiquewhite; }body：<div class="box"></div>
2020-09-10 20:28:23
194
原创 (demo)回到顶部
点击按钮回到顶部使用js实现一个回到顶部的小demo前置知识：css：html,body { height:1000%; background-color: bisque; } .back { position: fixed; width: 70px; height: 25px; right: 50px; bottom: 80px; }body： <button class="
2020-09-04 12:47:44
95
原创 (demo)实现盒子居中方式
方法一：知道盒子宽高情况下.box { position: absolute; box-sizing: border-box; width: 200px; height: 200px; border: 5px solid bisque; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; } <div cl.
2020-09-03 23:36:10
284
原创 (demo)点击删除数组
实现点击删除技能 <el-col :md="12" v-for="(item,i) in model.skills" :key="i"> <el-form-item label="名称"> <el-input v-model="item.name"></el-input> </el-form-item> <
2020-08-26 18:34:51
162
原创 (demo)element-ui上传图片
使用element-ui的upload进行图片上传 <el-form-item label="图标"> <el-upload class="avatar-uploader" :action="$http.defaults.baseURL + '/upload'" :show-file-list="false" :on-success="afterUpload"> <img v-if="model.icon" :src="model.i.
2020-08-25 00:31:14
264
原创 (vue)路由中指定prop属性
1.将props设为true。作用同this. $ routes.params。但是推荐使用props，因为要让组件和路由解耦，所以尽量不要在组件中使用$routes。{ path:'/categories/edit',component:CategoryEdit,props:true},这样在组件中：data(){ return { props:id } },可以直接用 this.id取值，而可以不用 this.$route.params.id 取值...
2020-08-22 12:49:01
963
原创 (js)预编译
预编译检查通篇的语法错误预编译的过程解释一行，执行一行函数声明整体提升变量只有声明提升，赋值不提升var a=b=1; 创建全局变量b=1，var a，a=b a为局部 b为全局imply global暗示全局变量：。无论声明与否，都存在于window a = 1 console.log(a); //1 a = window.a = 1 var b = 1 console.log(b); //1 b = window.b = 1 //等同于
2020-08-15 23:29:35
255
原创 (github+hexo)blog
创建仓库使用gitee+hexo搭建个人博客(无需服务器)首先在gitee添加仓库创建同名仓库语言选择JavaScript本地关联(不赘述)在仓库首页开启gitee pages服务 上传一个index.html 如能正常显示 及可进行hexo的搭建 注意每次更改代码上传后需要在pages里更新服务hexo全局安装hexo(也可局部 可查官网)npm install -g hexo-clihexo init (xx)文件名cd xxhexo server(启
2020-08-12 14:42:59
89
原创 git使用
git交互模型创建index.html文件初始化配置# 设置用户名git config --global user.name "你的名字"# 配置用户邮箱git config --global user.email "你的常用邮箱"# 查看配置列表项git config --list (q退出)基本使用工作区git add xx->暂存区git commit -m ‘xx’->本地仓库git commit -a -m ‘xx’git init初始化一个 Git
2020-08-11 23:38:54
209
原创 Ajax-请求参数传递
传递get请求参数传递post请求参数html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body&g
2020-08-10 15:41:54
521
原创 Ajax-服务器响应的数据格式
服务器端响应的数据格式在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。 JSON.parse() // 将 json 字符串转换为json对象处理服务器端返回的JSON数据app.js app.get('/responseData',(req,res)
2020-08-10 12:50:45
253
原创 (打包部署)生产环境编译
以此全栈项目为例1.cd adminnpm run buildnpm i -g serveserve dist 点击即可访问2.修改http.jsconst http = axios.create({ baseURL:process.env.VUE_APP_API_URL || 'admin/api', baseURL:'http://localhost:3000/admin/api'})在amin src创建.env.development baseURL:proces.
2020-08-06 20:45:06
369
原创 (node)express开发api
使用express框架开发API。无数据库mkdir demo2-express-apicd demo2-express-apinpm init -ynpm install express新建app.jsconst express = require('express')const app = express()app.get('/',(req,res) => { res.send('hello')})app.listen(3000,() => { conso
2020-08-05 22:41:27
150
原创 (node+mongoose)服务端编写
npm i axios新建http文件：import axios from 'axios'const http = axios.create({ baseURL:'http://localhost:3000/admin/api'})export default http去main.js中导入httpimport http from './http'Vue.prototype.$http = http之后就可以在任何页面使用this.$http访问这个接口写服务端代..
2020-08-05 21:43:51
156
原创 (elment-ui)Container、form
container布局容器<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。<el-header>：顶栏容器。<el-aside>：侧边栏容器。<el-main>：主要区域容器。<el-footer>：底栏容器。el-menu添加router属性 就可在el-menu里添加路径注意是根路径
2020-08-03 20:18:16
242
原创 (vuex)mutations
Vuex的store状态的更新唯一方式：提交Mutationmutations主要包括：字符串的事件类型(type)一个回调函数，该回调函数的第一个参数就是state在通过mutation更新数据的时候，有可能希望携带一些额外的参数，参数被称为是mutation的payload但是如果参数不是一个的话。通常让payload以对象的形式传递vue<template> <div id="app"> <h2>{{$store.state.cou
2020-08-01 15:05:49
140
原创 (mongodb)mongoose的模块化
连接数据库(绑定监听) plugins->db.js创建模型对象 model->xx.js操作数据库 routes->web->index.js分别新建js文件
2020-07-28 00:16:23
67
原创 (vant)使用精灵图和grid组件实现列表
vue<template> <div> <van-grid class="navicon mt-3" :column-num="4"> <van-grid-item v-for="(item,index) in naviconList" :key="index"> <i class="sprite" :class="item.activeClass"></i> <div c
2020-07-26 17:33:45
1701
3
原创 (axios)axios总结
最简单的axios用法main.jsimport axios from 'axios'axios({ url:'http://xxxx'}).then(res => { console.log(res);})axios发送并发请求使用axios.all()可以放个多个请求的数组axios.all([])返回的结果是一个数组，使用axios.spread()可以将数组展开axios.all([axios({ url:'xxx'}),axios({ url:'
2020-07-24 19:36:13
154
原创 -导航组件
NavBar使用vue中的具名插槽MyNavBar.vue<template> <div class="nav-bar"> <div class="left"><slot name="left"></slot></div> <div class="center"><slot name="center"></slot></div> <div cla
2020-07-24 15:29:11
82
原创 demo1-点击item切换
parent.vue<template> <div> parent <child :data="['新闻','公告','活动']"></child> </div></template><script>import Child from '@/views/Child.vue'export default { components: { Child, },}</sc
2020-07-23 18:57:22
60
原创 (glidejs)glidejs的使用
官网https://glidejs.com/docs/setup/githubhttps://github.com/glidejs/glide在html中使用下载压缩包 引入css文件： <link rel="stylesheet" href="libs/glide/glide.core.min.css"> <link rel="stylesheet" href="libs/glide/glide.theme.min.css"&
2020-07-20 21:15:36
918
1
原创 事件处理
事件处理绑定监听:v-on:xxx=“fun”@xxx=“fun”@xxx=“fun(参数)”默认事件形参: event隐含属性对象: $event<h2>1. 绑定监听</h2> <button @click="test1">test1</button> <button @click="test2('abc')">test2</button> <button @click="test3('atg
2020-07-08 16:26:08
93
原创 模板语法
模板语法模板的理解:动态的html页面包含了一些JS语法代码双大括号表达式指令(以v-开头的自定义标签属性)双大括号表达式语法: {{exp}} 或 {{{exp}}}功能: 向页面输出数据可以调用对象的方法指令一: 强制数据绑定功能: 指定变化的属性值完整写法:v-bind:xxx=‘yyy’ //yyy会作为表达式解析执行简洁写法::xxx=‘yyy’指令二: 绑定事件监听功能: 绑定指定事件名的回调函数完整写法:v-on:click=‘xxx’简洁写法:@
2020-07-07 23:56:08
138
原创 (mongodb)mongoose的增删改查
mongodb可视化工具robomongo接口测试vscode中可以安装插件rest clientrest client使用：在根目录下新建后缀名为http的文件，每个请求路径用###分开也可以自行下载postman数据库连接在node中使用mongodb需要用到mongoose安装mongoosenpm i mongooseconst express = require('express')const app = express() //返回一个应用实例const mongoo
2020-07-07 21:56:18
132
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人