- 博客(59)
- 收藏
- 关注
RSS订阅原创 vue项目使用history模式，打包部署到服务器根目录与二级目录的方法
vue项目使用history模式，打包部署到服务器根目录与二级目录的方法
2022-09-14 10:25:21
5148
原创 nvm（nodejs版本管理工具）
温馨提示：如果本地有安装nodejs版本，请先卸载再进行安装nvmnvm安装步骤：1、nvm下载：https://github.com/coreybutler/nvm-windows/releases2、查看安装是否成功：nvm -v3、查看安装的node版本列表：nvm ls 或者nvm list4、使用nvm install <version> [<arch>]命令下载需要的版本，version参数是版本， arch参数表示系统位数，默认是64为。例如：nv
2020-07-24 15:45:28
176
原创 第二章：react项目 引入antd-mobile
一、create-react-app 创建的项目 引入antd-mobile参考：https://mobile.ant.design/docs/react/use-with-create-react-app-cn具体的配置上面官网地址写的很清楚了，就不再照搬了，同学们自己去查看即可~~~~细心的同学就会立即发现，怎么引入之后lib-flexible和postcss-px2rem的适配方案失效了？？？？？二、解决引入antd-mobile 之后lib-flexible和...
2020-07-21 16:25:18
1129
原创 第七章：nodejs koa2 mysql redis 全栈开发--（线上PM2部署和日志）
PM2简单介绍：1、pm2 是开源的基于Nodejs的进程管理器，包括守护进程、监控、日志的一整套完整的功能；2、pm2 基本是node应用程序不二的守护进程选择；3、事实上，pm2并不仅仅可以启动node程序，对于一般的脚本程序同样可以胜任；4、pm2 带有负载均衡功能，可以保持node应用进程永远运行在后台；5、pm2 还有个非常强大的deploy功能，可以从本地直接部署线...
2019-11-06 18:20:45
368
原创 第六章：nodejs koa2 mysql redis 全栈开发--cookie，session，redis的简单运用
koa2文档：https://koa.bootcss.com/#introduction一、koa2 使用传递简单参数的cookies模块ctx.cookies.get(name, [options])通过options获取 cookiename:signed所请求的cookie应该被签名koa 使用 cookies模块，其中只需传递参数。ctx.cookie...
2019-11-06 11:22:45
607
原创 第五章：nodejs koa2 mysql redis 全栈开发--安全（sql注入，xss攻击）
一、什么是sql注入：所谓SQL注入，就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。是最原始、最简单的攻击，从有了web2.0就有了sql注入攻击。这里举一个简单的典型例子：我们知道，用户登录的时候我们要去查询用户表（users），对比用户名（username）和密码（password）SQL语句：// 正常...
2019-10-25 16:38:04
1380
原创 第四章：nodejs koa2 mysql redis 全栈开发--登录（JWT 来实现用户的认证与授权）
为什么使用JWT？随着技术的发展，分布式web应用的普及，通过session管理用户登录状态成本越来越高，因此慢慢发展成为token的方式做登录身份校验，然后通过token去取redis中的缓存的用户信息，随着之后jwt的出现，校验方式更加简单便捷化，无需通过redis缓存，而是直接根据token取出保存的用户信息，以及对token可用性校验，单点登录更为简单。JWT架构图贴代码贴代...
2019-10-24 18:02:16
866
2
原创 第三章：nodejs koa2 mysql redis 全栈开发--注册（md5 加密）
为什么密码要MD5加密md5就是为了防止人偷窥，而当密码很短的时候，利用暴力搜索也比较容易搜索到，只有密码强度足够的情况下才有意义，你想转换也就没那么容易了。md5类hash算法的设计初衷就是单向，即不可逆。废话不多说，直接贴代码：1、在跟目录下面新增utils/cryp.js 封装一个密码加密文件：const crypto = require('crypto')// 密匙...
2019-10-24 16:38:09
336
原创 第二章：nodejs koa2 mysql redis 全栈开发--mySQL数据连接与查询
数据准备1、打开Navicat for MySQL，在locahost目录下面新建数据库【myblog】2、在数据库【myblog】下面简单建表【blogs】和【users】，3、与数据库mysql建立连接独立建立文件夹db（建立链接）和conf（配置项）db项目，建立mysql.js，专门用来连接数据库，统一调用，这样就不用每条查询/新增等都建立新的链接conf目录，...
2019-10-24 14:27:01
551
原创 第一章：nodejs koa2 mysql redis 全栈开发--环境准备
简介Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。环境准备1、安装nodeJS：从node....
2019-10-24 10:25:23
663
原创 vue-cli3快速创建 vue + typescript + sass + router + vuex 新项目起手式
文档参照：vue-property-decoratorvuex-classvue-class-componentTypeScript 中文网前期准备卸载旧版本vue cli 升级到3后，package的名字从 vue-cli 改为了 @vue/cli，装了旧版本的，官方的建议是，把旧版本的卸载了，再安装新版本。卸载指令如下：npm uninstall vue-cli ...
2019-08-30 11:31:24
1076
原创 NuxtJS 项目部署如何部署到nginx
NuxtJS 项目完成之后，如何部署到nginx？总流程：Nuxtjs打包----》服务器上部署运行----》nginx监听----》PM2进程守护提示：安装nginx （我目前使用的系统是win7）官网下载地址： https://nginx.org/en/download.html可参考：https://blog.csdn.net/u012878818/article/...
2019-08-28 11:42:01
13173
5
原创 为了少走弯路，记录一下Nuxt项目中一些步骤和坑
1.项目构建步骤1、npm install -g create-nuxt-app # 全局安装 Nuxt.js脚手架工具 create-nuxt-app步骤2、npx create-nuxt-app <项目名> # 根据提示安装必要模块步骤3、npm run dev #启动成功 访问路径：http://localhost:3000/根据上面三个步骤，一个基本服务端渲染...
2019-08-20 16:44:01
1130
原创 window系统如何用nginx搭建服务和代理配置
步骤：一：安装window （我目前使用的系统是win7） 官网下载地址： https://nginx.org/en/download.html如下图点击windows下载解压：解压之后的文件目录：二：运行nginx 在当前目录中打开cmd，快捷键方式：ctrl+shift -->鼠标右键---》在此处打开命令窗口 启动nginx: start ngin...
2019-08-05 15:12:09
1046
原创 vue 项目预渲染（prerender-spa-plugin）
服务器端渲染 vs 预渲染 (SSR vs Prerendering)如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如/,/about,/contact等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以...
2019-06-03 14:53:56
9888
2
原创 第一章：react项目的构建和web端项目初始化的一些基本配置
第一：如何使用 create-react-app 快速构建 React 开发环境npm install -g create-react-appcreate-react-app react-democd react-demo/npm start自动浏览器中打开http://localhost:3000/，结果如下图所示：第二：项目构建完之后，由于本人喜欢使用sass编辑...
2019-03-22 11:51:42
418
原创 vue使用lib-flexible和postcss-px2rem-exclude完美解决移动端适配的问题
第一部分：项目中引入lib-flexible一、项目中安装lib-flexiblenpm install lib-flexible --save二、在项目的入口main.js文件中引入lib-flexibleimport 'lib-flexible'通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。lib-flexible会自动在h...
2019-03-05 17:24:53
20849
11
原创 如何把vue项目改造成支持PWA的功能（第二章：加入service-worker）
第一章中，我们加入Manifest ，让我们的网站生产图标放在手机桌面上，入口更加的明显了，和native差不多，大大的提升了用户体验，免去用户收藏网址等操作。这章中，我们将加入PWA的核心：service-worker相关代码：https://github.com/hwq888/yeye-PWA1、什么是Service Worker？下面简单的介绍一下，本章主要说怎么和VUE结合...
2019-01-17 15:00:05
5215
原创 如何把vue项目改造成支持PWA的功能（第一章：加入Manifest）
什么是PWA：Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验PWA 的主要特点包括下面三点：可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现 体验 - 快速响应，并且有平滑的动画响应用户的操作 粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面PWA 具有下面一些特性：渐进式...
2018-12-21 16:24:25
7509
原创 端口映射工具：ngrok的使用
我们在没有服务器或者上传服务器测试比较麻烦的情况下可以使用ngrok工具，映射本地机器让外网访问，可以用来测试手机端哦。访问：https://ngrok.com/ 注册登录按照流程：1、下载2、解压安装3、建立链接4、启动要映射的项目5、ngrok http 端口 （进行映射）会自动生成一个外网可以访问的域名原因：新版的webpack-d...
2018-07-27 11:52:10
1020
原创 vue-cli 构建的项目如何加入骨架屏 skeleton
在使用 Native APP 时我们经常可以看到在实际内容加载出来之前会有一些占位图片，因为其结构和实际加载内容相似(如新闻页面加载之前也会有一个纵向列表)，因此让用户感知到自己的页面正在加载中，体验较好。而传统的 Web 站点因为无法实现这一点，在加载前统一为白屏，我们能优化的仅仅是缩短这个白屏时间，这就决定了 Web App 相较于 Native APP 在用户体验上的先天劣势。我们把...
2018-07-26 11:17:17
15992
19
原创 vue-i18n，ElementUI 国际化整理
ElementUI国际化链接： http://element-cn.eleme.io/#/...vue-i18n：https://github.com/kazupon/vu...安装: npm install vue-i18n --save先不使用ElementUI，就简单的vue.js+vue-i18n使用方法：在main.js同级建i18n新文件夹，里面新建i18n.js、langs文件夹，l...
2018-06-01 15:42:39
3219
1
转载 PWA 的探索与最佳实践
PWA 是在 Web 端具有颠覆性的一个概念，在国外已经被普遍接受，很多站点已经改造成 PWA，并且取得了非常好的成绩。例如 twitter 改造 PWA 完成后，twitter lite 平均用户停留时长增长了65%。在国内，PWA 的概念越来越被广泛接受，微博、饿了么等很多大型的站点都已经改造成 PWA，并且还有更多的站点正在进行改造。PWA 是什么对于 PWA 来说，用户体验才是核心。PWA...
2018-05-17 14:59:11
1554
原创 WebSocket 通信过程与实现
什么是 WebSocket ？WebSocket 是一种标准协议，用于在客户端和服务端之间进行双向数据传输。但它跟 HTTP 没什么关系，它是基于 TCP 的一种独立实现。以前客户端想知道服务端的处理进度，要不停地使用 Ajax 进行轮询，让浏览器隔个几秒就向服务器发一次请求，这对服务器压力较大。另外一种轮询就是采用 long poll 的方式，这就跟打电话差不多，没收到消息就一直不挂电话，也就是...
2018-05-17 14:34:54
447
原创 easy-mock 本地部署
Easy Mock 是一个可视化，并且能快速生成模拟数据的持久化服务如果没有内网部署的条件，推荐使用在线服务。只要直接注册就可以使用啦！！！在线使用文档现在来说说怎么window7系统下 本地部署Easy Mock环境快速开始在开始之前，假设你已经成功安装了 Node.js（>= v8.9）& MongoDB（>= v3.4）& Redis（>= v4.0）。Mo...
2018-04-13 11:32:24
12459
6
翻译 js根据银行卡号判断属于哪个银行，并返回银行缩写及银行卡类型
在做绑定银行卡，输入银行卡的时候，产品有这么一个需求，需要用户输入银行卡号的时候，显示对应的银行卡名称及简称。支付宝的开放API，银行卡校验接口 https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=6226661203661552&cardBinCheck=true ,直接放在浏览器url地址栏中便可以得到结果，...
2018-04-04 16:54:52
4759
转载 webstrom 配置eslint 自动修复错误
1、展示效果如何给vue项目添加eslint呢，如何自动修复呢？先展示一下效果：2、配置步骤1、安装插件ESLint pluginwebstrom 其实有个非常好用的插件，ESLint plugin(如果在先安装不来可以手动下载，下载地址https://plugins.jetbrains.com/plugin/7494-eslint)2、配置插件安装完毕后在这里几个地方配置一下：要注意两点第二个框...
2018-03-12 11:55:51
14513
1
翻译 Wireshark抓取本机报文
在进行通信开发的过程中，我们往往会把本机既作为客户端又作为服务器端来调试代码，使得本机自己和自己通信。但是wireshark此时是无法抓取到数据包的，需要通过简单的设置才可以。具体方法如下：①：以管理员身份运行cmd②：route add 本机ip mask 255.255.255.255 网关ipfor example： route add 10.10.100.192 mask 255.255....
2018-03-09 11:12:55
446
原创 VUE 如何使用3DES加密
如何在VUE-CLI手脚架建立的工程中使用3des加密： npm install crypto-js --save-dev import CryptoJS from 'crypto-js'//DES加密 Pkcs7填充方式encryptByDES(message, key){ const keyHex = CryptoJS.enc.Utf8.parse(...
2018-02-01 17:09:08
3248
原创 SourceTree 免登录跳过初始设置的方法
首先，安装完 SourceTree 以后先运行一次，弹出初始化登录页面后退出.打开 我的电脑，在最上方的地址栏直接输入以下地址：%LocalAppData%\Atlassian\SourceTree\在这个目录下新建一个名为 accounts.json 的文件。[ { "$id": "1", "$type": "SourceTree.Api.Host
2017-11-28 11:41:27
1361
原创 vue keep-alive的作用
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。结合router，缓存部分页面使用$route.meta的keepAlive属性： 需要在
2017-11-16 14:40:04
2634
原创 第四章：git add ， git commit 添加错文件 撤销
1. git add 添加 多余文件 这样的错误是由于， 有的时候 可能git add . （空格+ 点） 表示当前目录所有文件，不小心就会提交其他文件git add 如果添加了错误的文件的话撤销操作git status 先看一下add 中的文件 git reset HEAD 如果后面什么都不跟的话 就是上一次add 里面的全部撤销了 git reset
2017-11-11 00:18:24
553
原创 第三章：git多人协助开发
Git可以完成两件事情：1. 版本控制2.多人协作开发如今的项目，规模越来越大，功能越来越多，需要有一个团队进行开发。如果有多个开发人员共同开发一个项目，如何进行协作的呢。Git提供了一个非常好的解决方案 ---- 多人协作开发。1.多人协作原理典型的做法是，首先创建一个git服务器，被多个人所操作。 1.多人协助实现
2017-11-09 10:38:43
357
原创 第二章：git远程仓库（有了远程仓库，妈妈再也不用担心我的硬盘了）
第1步：创建SSH Key,$ ssh-keygen -t rsa -C "[email protected]"在git安装目录下里找到.ssh目录，里面有id_rsa和id_rsa.pub两个文件，这两个就是SSH Key的秘钥对，id_rsa是私钥，不能泄露出去，id_rsa.pub是公钥，可以放心地告诉任何人首先：创建版本库：版本库又名
2017-11-08 17:06:33
411
原创 在研究VUEX的过程中的一个范例
首先vuex概念比较多，一定要搞懂里面的概念，可以参考官网Vuex2.0概念，我写此文的目的是希望能对前端爱好者提供个参考，加深对vuex2.0各核心概念的理解。新增一个测试组件：vuex.vue vuex 测试 Clicked: {{ getCount }} times + - import { mapGetters } fr
2017-10-25 10:18:34
450
原创 axios 拦截 , 页面跳转, token 验证(经常用于判断用户是否登录)
第一步: 路由 多添加一个自定义字段 requireAuth path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的 }, component: Repository
2017-10-17 14:29:04
8641
原创 Vue常用经典开源项目汇总参考
Vue相关网站参考： Vue中文帮助网站：http://cn.vuejs.org/ Vue github开源地址：https://github.com/vuejs/vue Vue.js专业中文社区：http://www.vue-js.com/ 前端开发Vue相关：http://www.opendigg.com/tags/front-vue 本文开源地址：https:
2017-09-25 17:48:13
3252
原创 react-native-image-picker配置
测试环境：android react-native 0.47.1 1、npm install react-native-image-picker@latest --save2、react-native linkAndroid：1、在文件 android/settings.gradle中添加include ':react-native-image-
2017-08-21 11:47:09
794
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人