- 博客(137)
- 收藏
- 关注
RSS订阅原创 vue中过滤器的使用
<el-menu-item v-for="(item, index) in navBar.list" :index="index | numToString" :key="index">{{item.name}}</el-menu-item>filters: { numToString (num) { return num.toString() }},
2020-07-07 15:35:15
242
原创 vue路由封装 - 自动生成路由
const routes = [ { path: '/', name: 'layout', redirect: { name: 'index' }, component: 'layout', children: [ { component: 'index' } ] }, { component: 'login' }, { path: '*', redirect: { name:
2020-07-07 12:10:52
671
原创 vue-lazyloading实现图片懒加载时图片引入路径问题
文档地址(https://www.npmjs.com/package/vue-lazyload)关于vue中main.js引入图片的问题刚接触vue的项目，很多东西需要学习在使用v-lazyload实现图片懒加载的时候，在main.js中引入图片地址的时候出现了问题我发现如果引入的路径是根目录下的 /static中的图片，没有任何问题，但是如果引入的是assets目录下的图片就找不到图片后来去网上查了一下才知道，原来是main.js中的图片除了/static目录外都需要通过reqiure(‘图片
2020-06-30 18:56:58
888
原创 vue-awesome-swiper实现轮播图问题总结
插件地址:https://github.com/surmon-china/vue-awesome-swiper动态数据渲染，loop无效，轮循无效解决方法：在swiper容器上加一个v-if判断一下，是否有数据加载<template> <swiper :options="swiperOption" v-if="showSwiper"> <!-- slides --> <swiper-slide v-for="item in swiperLi
2020-06-30 18:45:46
458
原创 vue项目中路径配置
vue-cli3以上根目录下创建vue.config.js文件const path = require('path');function resolve (dir) { return path.join(__dirname, dir)}// 项目的主要配置文件module.exports = { // webpack 配置进行更细粒度的修改 https://cli.vuejs.org/zh/config/#chainwebpack chainWebpack: (co
2020-06-30 18:39:06
1792
原创 vue移动端项目初始化配置
index.html中添加meta标签<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">reset.css@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}b
2020-06-30 18:36:04
621
原创 koa相关
koa基础使用创建空文件夹koas终端中进入该目录执行npm init -y安装koa：npm install --save koa创建index.js入口文件const Koa = require('koa')const app = new Koa()app.use(async ctx => { ctx.body = 'hello'})app.listen(3000)执行node index.js在浏览器中输入：localhost:3000koa-router
2020-06-22 16:41:25
147
原创 工程化-gulp简单使用实现自动化编译
初始化项目创建gulps空文件夹进入文件夹执行npm init -y 初始化node项目执行yarn add gulp -D安装完成修改package.json"scripts": { "build": "gulp" },执行npx gulp --version查看版本npm run build 执行gulp配置gulp的任务1. 初始化在根目录下创建gulpfile.js文件// 压缩、混淆jsfunction js () {}// 对scss/les
2020-06-19 15:09:04
494
原创 腾讯云服务器上docker部署线下DOClever
部署DOClever1. 打开DOClever官网；2. 点击线下部署；3. 选择码云或github下载，跳转到仓库；4. 选择使用docker部署，点击仓库的docker目录，跳转到相关库并且下面有部署说明文字；5. 在桌面创建docker-compose.yml文件如下：version: "2"services: DOClever: image: lw96/doclever restart: always container_name: "DOClever"
2020-06-18 14:11:52
394
原创 开发环境准备(1)
本地环境node.js(npm/yarn) + nvm(node.js版本管理)IDEvue-cli测试环境搭建linux(3选1)虚拟机自建环境购买云服务器（推荐），然后安装xshell连接云服务器并安装Dockerdocker安装参考博文centOs7-docker配置国内镜像源编辑/etc/docker/daemon.json文件，并输入国内镜像源地址vi /etc/docker/daemon.json设置镜像{ "registry-mirrors":[
2020-06-17 21:12:36
206
原创 数组（2）
数组的遍历方法1. for循环for (let i = 0; i < arr.length; i++) { console.log(arr[i])}2. forEach没有返回值，只针对每个元素调用funcforEach 的代码块中不能使用 break、continue，它会抛出异常arr.forEach(function(item, index, array){ console.log(item, index, array)})3. map()返回新的数组，每个
2020-06-12 21:43:41
170
转载 nrm安装 ，切换镜像源(1)
NRM是npm的镜像源管理工具，有时候国外资源太慢，就可以使用 nrm 快速地在 npm 源间切换安装widow全局安装npm install -g nrm使用执行命令查看可选源：nrm ls切换源到淘宝源nrm use taobao测速nrm test npm nrm test taobao增加定制源（添加自己的源）nrm add my http://192.168.1.111:8000删除源nrm del my...
2020-06-12 16:13:20
430
原创 node基础(1)
node常用内置模块File System 进行文件相关操作HTTP/HTTPS 创建服务，接收请求，返回响应信息OS 获取操作系统信息Path 处理文件路径相关内容Query Strings 对地址查询项进行相关处理URL 对地址信息进行相关操作创建服务const http = require('http')const fn = (res, req) => { console.log(req)}const server = http.createServer(fn)
2020-06-10 21:37:46
122
转载 按需加载element及自定义校验规则
按需加载element参考博客vue按需引入Element UI的方法element.js中引入使用的组件名字参考博客按需引入element组件表单组件自定义校验规则在data函数中创建校验函数data () { // 验证密码格式 var checkPsw = (rule, value, callback) => { const p = /^[\u4e00-\u9fa5a-zA-Z0-9_]{2,18}$/ if (!p.test(value)) {
2020-05-21 22:16:40
236
原创 使用jsonp和cors进行跨域的接口环境设置
使用jsonp和cors进行跨域的接口环境设置在src目录下创建env.js文件，判断和获取执行环境let baseURL;switch (process.env.NODE_ENV) { case 'development': baseURL = 'http://dev-mall-pre.springboot.cn/api' break case 'test': baseURL = 'http://test-mall-pre.springboot.cn/api'
2020-05-18 22:34:32
176
原创 axios使用
传参get请求必须使用params关键字axios.get('/user', { params: { ID: 12345 }}).then((res)=>{...})// 参数跟在请求地址后面axios.get('/user?ID=12345').then((res)=>{...})post请求axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone'}).then((res)=&
2020-05-18 20:50:25
192
原创 重学react--(2)
子组件接收的父组件数据限制数据类型和设置默认值使用 PropTypes 进行类型检查import PropTypes from 'prop-types';class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); }}// 限制类型，更多看官方文档Greeting.propTypes = { nam
2020-05-14 17:06:38
147
原创 重学react(1)-初探
开发环境准备windows下nvm的安装及使用参考博客如果之前本地已经安装了node一定要卸载将C:\Program Files下的nodejs文件夹删除将C:\Program Files (x86)下的nodejs文件夹删除删除node和npm的环境变量重启电脑安装nvm第一步下载直接到https://github.com/coreybutler/nvm-windows/releases下载nvm-noinstall.zip： 这个是绿色免安装版本，但是使用之前需要配置n
2020-05-14 00:46:40
155
原创 重学js--jq(4)
jq的作用HTML元素选取HTML元素操作HTML事件函数HTML DOM遍历和修改Utilitiescss操作js特效和动画ajaxjq引入在head中使用script引入本地jq的js文件引入官网jq文件jq的书写格式三种// 第一种：推荐$(document).ready(function(){ //代码})// 第二种$().ready(function(){ //代码})// 第三种$(function(){ //代码})...
2020-05-11 17:43:36
220
原创 重学js-正则(4)
正则的作用查找替换数据有效性验证创建正则表达式字面量或直接量var str1='i love js';var pattern=/js/;构造函数new RegExp('js','igm')new RegExp(变量,'igm')模式修饰符g 全局匹配exec：无论是否全局匹配，都会返回分组中匹配到的内容；无论是否全局匹配都只返回当前匹配到的内容，而不是所有；只不过全局匹配时可以继续匹配下去。match: 只有非全局匹配，才会返回分组中匹配到的内容；全
2020-05-11 13:03:00
162
原创 重学js--面向对象(3)
概述所有的函数都有prototype属性function fn(){};// fn.prototype ==> 内存地址 ==》存储一个对象alert(fn.prototype instanceof Object)闭包使用闭包可以在全局作用域下访问局部变量闭包的优缺点:优点：可以访问局部变量，封装性好缺点：使得局部变量一直在内存中，内存消耗大function fn1(){ var a=1; function fn2(){ // 在这里可以访问局部变量a a++;
2020-05-09 17:13:30
175
原创 重学js--函数相关(2)
js中的对象对象：就是值的集合创建对象字面量构造函数// 字面量var cat={};// 实例化var cat=new Object();对象相关操作var cat={ "name":"carol", "age" : 5, "eat" : "fish"}// 读取var name = cat.name;// 修改cat.name='yang';// 删除属性delete cat.name;console.log(cat.name); //undefi
2020-05-08 21:36:12
99
原创 重学js--作用域、作用域链、预解析及问题总结(1)
变量相关数据的类型基本类型：数字、字符串、布尔值、undefind、null引用类型：数组、对象基本类型和引用类型的区别：基本类型的值是不可修改的，只能覆盖，例如替换字符串中的某个字符，原先的字符串并不会发生变化；引用类型的值是可以修改的，如修改或增加对象的属性；基本类型是不能添加属性和方法的，当我们调用它的方法时，它是从它对应的包装对象上获取的，包装对象如String、Nu...
2020-05-08 15:27:06
104
原创 重学html5
DOCTYPE声明不是html的标签，它是在告诉浏览器，页面要使用哪个HTML版本进行编写的指令<!DOCTYPE html>新增的标签结构标签–有意义的divarticle 标记定义一篇文章header 定义一个页面或一个区域的头部nav 定义导航链接section 定义一个区域aside 定义页面内容部分的侧边栏hgroup 定义文件中一个区块的相关信...
2020-05-08 01:17:00
203
1
原创 重学css(1)
css使用方式行内样式；内部样式；使用link引用外部样式文件 (页面加载时，同时加载css样式)；导入式 (在读取完html文件后加载，有兼容性问题)<style> @import 'css/style.css'</style>使用方式优先级行内>内部>外部样式@import>link外部样式；内部>外部样式@impo...
2020-05-08 00:50:12
170
原创 重学js
js的数据类型简单数据类型undefined 未定义null表示一个空对象指针如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null，而不是其他值undefined值是派生自null值的，所以undefined==null的返回结果是truebooleanBoolean()除0之外的所有数字，转换为布尔值都为true除空字符串之外的所有字符，...
2020-05-07 23:32:12
195
原创 重学css3
CSS选择器子元素选择器div>ul相邻兄弟元素选择器p+div通用兄弟元素选择器选择某个元素后面所有的兄弟元素p~div属性选择器# 有href属性的a元素a[href]# href值等于#的a元素a[href="#"]# ~包含div[class~='one']# 以value开头div[class^='value']# 以value结尾...
2020-05-05 18:27:41
166
原创 工程化-webpack简单使用
REST特点客户端-服务端通过将用户界面、让数据与存储分开，通过简化服务器组件来实现跨多平台的应用无状态，可缓存客户端到服务端包含理解请求所需的所有信息统一接口常见接口测试工具插件类：postman、DHC、REST client平台类：Yapi、DOClever、RAP2、EasyMock、Swagger终端类：Postman、SoapUI、DOCleverMock数...
2020-04-29 02:49:57
297
原创 前端3类真机调试技巧
Chrom+Android/Safari+iosFiddler/CharlesWeinre,Spy-debugger、vConsole 不分系统都可以用，依赖nodejsSafari+ios真机调试windows电脑可以下载wind版本的Safari浏览器或者下载黑苹果打开Safari浏览器的开发调试控制台手机上的设置在设置中选择Safari浏览器打开高级选项，然后将web检...
2020-04-29 01:16:29
596
原创 vscode 插件安装
在应用插件商城中搜索vue相关的插件包Vue Extension Packreact相关的插件包搜索react extension pack选择Es7/react/Redux/GraphQL/React-Nativenode 相关nodejs extension packvscode常规设置1.打开设置面板文件》首选项》设置2.打开命令面板来打开设置面...
2020-04-29 00:27:17
250
原创 node相关
nvm控制切换node多个版本nvm的下载，安装与使用查看本地安装的nodenvm list使用指定版本的nodenvm use v1.5.7下载指定版本的nodenvm install v1.5.7npm设置淘宝镜像永久设置好后使用cnpm 代替npmnpm config set registry https://registry.npm.taobao.o...
2020-04-28 23:13:23
142
原创 Centos7上安装docker
Docker主要特性文件、资源、网络隔离变更管理、日志记录写时复制Linux系统上安装[参照菜鸟教程]参考博客1. 卸载旧版本$ sudo yum remove docker \ docker-client \ docker-client-latest \ docker-c...
2020-04-28 22:00:34
130
原创 ssh密钥方式远程链接Linux服务器
使用默认端口22链接服务器，输入命令后再输入密码回车就可以了输入root用户的密码回车后，链接到阿里服务器查看主机的名字修改ssh默认端口查看ssh服务器的状态查看默认监听端口修改端口号输入下面的指令回车vi /etc/ssh/sshd_config编辑红框中的字段修改成你想要的端口号4. 修改保存后执行下面的命令如果报not found我...
2020-04-28 18:32:53
859
1
原创 win10 开启Hyper-c虚拟环境并安装linux系统
开启Hyper-c打开控制面板选择程序与功能选择启动或关闭window功能，然后勾选上Hyper-c注意：如果Hyper-v虚拟机监控程序不能勾选，那就取消勾选电脑重启，然后进入bios设置模式开启虚拟化，选择Configuration的选项，将Intel Virtual Technology的选项设置成Enable的状态（不同的电脑开启虚拟化的方法不同，具体可百度)；我的电...
2020-04-28 15:39:19
1163
转载 测试工具
1.pycharm参考博文：https://www.cnblogs.com/cruelty_angel/p/10100760.html2.Navicat Premium参考博文：http://www.xue51.com/soft/35163.html3.fiddle跨域问题解决修改配置文件import System;import System.Windows.Forms;impor...
2020-03-05 20:43:51
289
原创 python web自动化框架架构思路整理
一. 文件结构learn 忽略无用的可以删除PageElement 存放每个页面的元素定位表达式和定位方式文件PageObjects 存放每个页面的验证的操作事件文件TestCase 存放每个页面的测试用例文件TestData 存放每个页面的测试数据文件二. 目录下的具体文件1.PageObjects目录秉承页面元素操作和用例分离的原则，该文件夹下存放的文件中只保存对元素操作...
2019-11-28 01:11:39
370
转载 vue-lazyloading实现图片懒加载及问题总结
文档地址(https://www.npmjs.com/package/vue-lazyload)关于vue中main.js引入图片的问题刚接触vue的项目，很多东西需要学习在使用v-lazyload实现图片懒加载的时候，在main.js中引入图片地址的时候出现了问题我发现如果引入的路径是根目录下的 /static中的图片，没有任何问题，但是如果引入的是assets目录下的图片就找不到图片...
2019-09-03 11:01:30
2014
原创 better-scroll实现页面滚动
npm安装npm install better-scroll --save在需要的页面引入<script>import BScroll from 'better-scroll'export default { mounted () { // 在dom元素渲染完成之后初始化better-scroll的实例 const scroll = new BScrol...
2019-09-02 23:21:32
2159
原创 重学vue--vue-awesome-swiper实现轮播图(3)
插件地址:https://github.com/surmon-china/vue-awesome-swipervue-awesome-swiper动态数据渲染，loop无效，轮循无效可以在swiper容器上加一个v-if判断一下，是否有数据加载<template> <swiper :options="swiperOption" v-if="showSwiper">...
2019-09-02 13:18:21
155
转载 VueCLI3如何更改安装时的包管理器为yarn或npm
在执行 vue create project 后如果显示如下npm run serve则表示你使用的是npm创建的项目。如果显示如下yarn serve则表示此项目为yarn创建那如何切换包管理器呢？在VueCLI3官网有如下一段描述：注意最后一句，明确的说明了包管理器和淘宝npm镜像源会存入 ~/.vuerc此文件如果是windows环境，则存在了 C:/user/admini...
2019-08-23 19:01:25
471
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人