- 博客(98)
- 收藏
- 关注
RSS订阅
原创 vue项目常用知识精简版
基础准备技术选型1). 前台数据处理/交互/组件化2). 前后台交互3). 模块化4). 项目构建/工程化5). css预编译器6). 其它接口相关理解1). 接口、API - 简单理解：前后端通信的地址 - 复杂理解：包含请求地址、请求方式、请求参数、响应的结果等所有内容才是一个完整接口 - vue接口文档：vue向外暴露的功能方法、属性等2). 接口文档3). 对/调/测接口 / 联调4). 前后台分离5). mock数据/接口git 版本控制的基
2020-12-02 00:07:01
303
2
原创 Vue项目基础配置以及常见知识点积累
全局安装vuenpm i -g vue全局安装@vue/clinpm i -g @vue/cli全局安装serve快速运行打包生成的文件,运行服务器启动在dist下文件npm i -g serve创建项目Your connection to the default yarn registry seems to be slow.Use https://registry.npm.taobao.org for faster installation?你到默认纱线注册表的连接似乎很.
2020-11-30 00:21:14
1382
原创 JavaScript ES5-ES6详解
ES51.严格模式1.全局严格模式严格模式修复了一些导致JavaScript引擎难以执行优化的缺陷：有时候，相同的代码，严格模式可以比非严格模式下运行得更快如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用a.开启全局严格模式<script> "use strict" //在全局开启严格模式b.变量必须声明才能使用<script> "use strict" a = 1;
2020-11-15 00:08:06
991
原创 Redis
基础相关概念Redis特点应用场景Redis和MongoDB区别安装docker镜像mkdir zerorediscd zeroredisvi docker-compose.ymlversion: '3'services: zero-redis: image: 'redis' restart: always container_name: 'zero-redis' ports: - 15001:6379 volumes:
2021-09-02 16:26:36
302
1
原创 NoSQL数据库/docker使用MongoDB
数据库数据库分类NoSQL数据库意义数据库相关概念内嵌父引用子引用反范式NoSQL设计原则MongoDB下载cd /home/mkdir mongotestcd mongotest/vi docker-compose.ymlversion: '3.1'services: mongo: image: mongo restart: always environment: MONGO_INITDB_ROOT_USE
2021-08-29 12:20:48
319
原创 前端自动化 Jenkins/TravisCI/CiecleCi
前端自动化介绍git push origin master -f强制覆盖先前提交CI/CDgithub登录github创建仓库要是公共项目才可以本地拉取仓库创建.circleci文件夹/config.ymlversion: 2.1jobs: build: docker: - image: circleci/node:14-browsers steps: - run: echo 'A first hello' - r
2021-08-24 23:16:56
699
原创 文档管理工具 ShowDoc安装使用/hexo部署github
四款工具介绍ShowdoceoLinkerMinDocapizzaShowDoc安装docker --verisondocker pull star7th/showdocmkdir /showdoc_datamkdir /showdoc_data/htmlchmod -R 777 /showdoc_data/修改权限/所有用户都可以进行编辑查看1.所有设置端口的地方要在服务器上进行放行2.云服务器防火墙添加这个端口放行电信8080 80 443 封禁,备案才放行启动sh
2021-08-01 16:37:17
575
原创 前端框架总结
UI框架layUIhttps://www.layui.com/pc 移动 响应式后台是收费的iView(不适用与react/angular) 和element齐名https://weapp.iviewui.com/iView-admin 免费的iView-Weapp 微信小程序Ant Design(React)VuetifyFrameWorksFluttertaro 跨平台小程序Framework7 跨平台桌面https://ant.design/index-cn移动.
2021-07-04 18:47:37
176
原创 Koa基础使用以及配置开发热加载/webpack调试
Koa基础介绍核心概念原理特点基础实现npm init -ynpm install --save koaindex.js根目录const Koa = require("koa");const app = new Koa();app.use(async (ctx) => { ctx.body = "hello,koa";});app.listen(3000);kao-Routernpm install -S koa-router使用con
2021-07-04 15:51:36
818
2
原创 gulp基本配置
gulp介绍gulp flowgulp可以并行或者串行处理任务npm init -yyarn add gulp -Dpackage.json "scripts": { "build": "gulp" },npx gulp --versionnpm run build根目录创建gulpfile.jsnpx gulp --tasksnpx gulp 任务名plugingulp-uglifyhttps://gulpjs.com/plugins压缩/混淆j
2021-06-06 22:25:22
395
原创 webpack基础配置
前端工程化介绍webpack安装支持符合ES5规范的浏览器但是import promise就要使用下面,让旧浏览器也支持webpack核心概念https://www.webpackjs.com/webpack4之后webpack和webpack-cli已经分离开来了Loader和plugins区别Loader处理的是webpack不能处理的文件(除了js外)plugins做一些更加复杂的内容npm init -y快速初始化项目npm install webpack web
2021-06-06 17:39:02
291
原创 Fiddler/Proxifier/Charles
过滤请求调试微信开发者工具设置微信开发者工具设置filldderFidder默认是不会抓取HTTPS的数据包，这个时候就需要我们对Fidder进行配置打开旁边的Acions 点击Trust Root Certificate信任该证书安装该证书重启Fidder...
2021-05-31 20:04:25
698
1
原创 RESTful API/DOClever/Mock
RESTful API什么是REST特点RESTful API定义常见接口测试工具DOClever中Mock数据开发使用下载http://www.doclever.cn/controller/download/download.htmlhttps://github.com/sx1989827/DOClever新建文件夹vi docker-compose.ymlversion: "2"services: DOClever: image: lw96/doc
2021-05-30 22:50:47
303
原创 Node以及Nvm
Node介绍事件驱动:好比去饭店下单点菜过程非阻塞:先接待,不影响运转NvmNode Version Managerhttps://github.com/nvm-sh/nvm#installing-and-updatingvi ~/.bash_profilenvm --version查看版本nvm list查看所有node版本nvm ls-remote服务器端(远程)有哪些版本nvm install 版本号nvm --help帮助nvm use 版本号切换版本
2021-05-30 18:53:10
783
原创 Docker/Docker-compose以及DockerHub
Docker介绍Docker操作先删除之前旧版本(如果没有可以跳过)sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \
2021-05-30 15:24:02
663
原创 uniapp
用户登录<button class="login wechatLogin" open-type="getUserInfo" @getuserinfo="bindgetuserinfo">uniapp将原先小程序的返回数据,放在mp属性中路由传参// login界面路由传参methods: { bindgetuserinfo(info){ let {userInfo} = info.detail if(userInfo){ uni.reLaunch({
2021-01-03 23:30:31
459
1
原创 原生小程序思路
用户首次登录1.实现授权弹窗 -> 组件button,添加标签属性open-type=“getUserInfo”2.监听用户操作,接受用户数据监听用户操作->绑定事件->事件名称:getuserinfo获取用户数据->通过形参->event.detail内部3.动态渲染将数据放入data中,并在页面上使用插值语法显示二次登录免授权在onLoad中,使用wx.getUserInfo方法,检测用户是否已经授权过如果已经授权,可以通过success得到用户信息个人
2020-12-30 23:11:40
305
1
原创 微信小程序开发(原生)
简介微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小， 下载速度很快，用户感觉不到下载的过程 )2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线小程序刚发布的时候要求压缩包的体积不能大于1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M...
2020-12-30 23:11:07
4508
原创 时间相关
moment进入维护期,推荐使用day.js官网npm i moment演示import moment from "moment"totaltime: moment(result.songs[0].dt).format('mm:ss')
2020-12-30 23:10:41
133
原创 koa
下载npm initnpm i koa koa-router基础代码const Koa = require("koa");const KoaRouter = require("koa-router");const app = new Koa();const router = new KoaRouter();app.use(router.routes()).use(router.allowedMethods());router.get("/test", function (ctx,
2020-12-30 23:10:16
156
原创 手写分页器
<template> <div class="paginationContainer"> <button :disabled="current === 1">上一页</button> <button v-if="startEnd.start > 1" @click="current = 1" :class="{ active: current === 1 }" > 1
2020-12-26 00:07:17
217
1
原创 nginx
nginx1、nginx 简介是什么？一个高性能的 web 服务器，开源免费作用：静态资源服务器反向代理负载均衡Gzip 压缩2、正向代理和反向代理正向代理：隐藏客户端，由代理服务器接收所有客户端的请求，在发送给服务器。服务器并不知道请求是从哪个客户端发送的如：翻墙工具反向代理：隐藏服务器，由代理服务器将所有服务器集合在一起，客户端发送请求时并不知道请求哪个服务器，只访问代理服务器，由代理服务器将服务器资源取出然后响应给客户端。如：解决跨域3、ng
2020-12-23 09:55:51
162
1
原创 图表工具
ElemeFEgitHub官网安装npm i v-charts echarts -S使用main.jsimport "./plugins/vcharts";plugins文件夹EChartsy轴名称曲线主题线条颜色阴影防止溢出响应式
2020-12-22 01:12:27
150
原创 lodash
网址gitHub文档下载 使用npm i lodash// 节流import throttle from "lodash/throttle"使用防抖
2020-12-22 01:00:53
169
原创 vue组件间通信11种方式
组件间多种通信方式组件间通信1: props组件间通信2: vue自定义事件组件间通信3: 事件总线组件间通信4: v-model组件间通信5: .sync 属性修饰符组件间通信6: attrs与attrs与attrs与listeners组件间通信7: children与children与children与parent组件间通信8: provide与inject组件间通信9: vuex组件间通信10: 作用域插槽slot-scope11.组件间通信11:PubSub 项目中不会使用
2020-12-22 00:26:09
367
原创 require.context实现前端工程自动化
require.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块动态加载vuex中所有的modules模块不再需要通过import手动一个一个引入 const context = require.context( 处理的目录, 要
2020-12-22 00:25:24
256
1
原创 前端基础知识总结
1.null和undefined的区别?null是一个空对象指针,指向一个空对象undefined是找不到2.null的使用场景作为对象原型链的终点作为函数的参数,表示该函数的参数不是对象让一个对象变成垃圾对象定义的变量准备在将来用于保存对象3.undefined的使用场景变量被声明但是没有赋值,等于undefined调用函数时,应该提供的参数没有提供,该参数等于undefined对象没有赋值的属性,该属性的值为undefined函数没有返回值时,默认返回undefined
2020-12-18 00:32:17
589
原创 Vue后台项目知识点总结
ES6暴露默认导出/* 默认导出,只能有一个 */const a = 1;// const b = 2;export default a;// export default b默认暴露实际暴露的内容：{default: 1}当你 import result from ‘./xxx’ 引入时实际相当于 import { default as result } from ‘./xxx’ 写法import result from "./test/es-module/test1";
2020-12-18 00:18:54
876
原创 二维码生成
qrcode网址以及下载gitHubnpm install --save qrcodeimport QRCode from "qrcode"; name: "Pay", methods: { async openPay() { let QRcode = await reqCreateWechat(this.$route.query.orderId); // {codeUrl: "weixin://wxpayxxxxxxxxxxxxxxxxx, orderI
2020-12-18 00:18:25
142
原创 图片懒加载
Vue-LazyloadgitHub地址npm i vue-lazyload -S npm install --save vue-lazyloadplugins目录import Vue from "vue";import VueLazyload from "vue-lazyload";import loading from "@assets/imgs/loding.gif";Vue.use(VueLazyload, { loading: loading,});main.js
2020-12-18 00:17:59
152
原创 数据效验
vee-validate一定要在data中声明变量才有效果gitHub以及官网gitHub地址-----------官网----------------------npm install vee-validatenpm install vee-validate使用components: { ValidationProvider}import { ValidationProvider, extend } from "vee-validate";import { require
2020-12-10 00:04:58
156
原创 生成ID工具类
UUID说明userTempId 未登录用户的临时id 通过uuid来生成1. 因为每个userTempId自己的购物车数据 后台会根据userTempId的值来返回购物车数据 如果userTempId刷新了，购物车数据就没了（清空了） 所以生成后要持久存储起来，未来将来可以反复使用 localStorage 永久存储 sessionStorage 回话存储（一旦关闭浏览器数据就会被清空） xxx.setItem(key, value) 存储 xxx.getItem(
2020-12-07 00:18:21
488
原创 轮播图
SwiperSwiper6默认只有核心轮播图功能，其他功能没有,要使用其他功能，需要先加载npm install swipernpm install swiperimport Swiper from "swiper";import "swiper/swiper-bundle.css";错误方式下面这样子是错误的 mounted() { this.getBannersData(); new Swiper(".swiper-container", { //
2020-12-02 00:07:45
271
原创 模拟数据Mock
MockgitHub地址文档npm i -D mockjsnpm i -D mockjs配置服务器import Mock from "mockjs";import banners from "./rbanners.json";import floors from "./rfloors.json";// 一旦运行就会拦截Get请求，请求地址/mock/banners// 并最后参数作为响应结果响应~Mock.mock("/mock/banners", "get", { code:
2020-12-01 00:39:13
231
原创 vuex
vuex是什么github站点: https://github.com/vuejs/vuex在线文档: https://vuex.vuejs.org/zh-cn/简单来说: 对vue应用中多个组件的共享状态进行集中式的管理(读/写)状态自管理应用state: 驱动应用的数据源view: 以声明方式将state映射到视图actions: 响应在view上的用户输入导致的状态变化(包含n个更新状态的方法)流程actions函数内部调用commit触发某个mu
2020-11-30 00:20:24
3685
原创 进度条相关插件
nprogressgithub地址nprogress下载/引入npm install --save nprogress// 引入进度条插件import NProgress from "nprogress";// 引入样式import "nprogress/nprogress.css";使用// 开始进度条NProgress.start(); // 结束进度条 NProgress.done();示例...
2020-11-30 00:19:26
159
原创 Vue基础知识精简总结
Vue渐进式 JS 框架MVCM - Model 数据层（数据库）V - View 视图层（页面、ejs）C - Controler 控制层（路由）MVVMM - Model 数据层（data、computed…）V - View 视图层（模板页面）VM - ViewModel 视图模型层（vm 实例对象）数据能由 ViewModel 操作渲染到视图层上（当数据将来发生修改，自动重新渲染到视图层上-响应式）页面数据发生变化，能由 ViewModel 操作来修改数据层的
2020-11-30 00:12:53
770
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人