自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(46)
  • 资源 (1)
  • 论坛 (1)
  • 收藏
  • 关注

原创 [记录八]Vue+node+koa2+mysql+nginx+redis,全栈开发小程序和管理员管理系统项目——使用定时任务执行脚本

前言:系统的日常维护必然不能单靠人24小时守着电脑去操作系统;像数据的同步、交易流水的校验、订单号的初始值等等需要在晚上或者系统使用量最低的时候去做,避免数据的丢失。为此选好时间让系统自动在那个时间去执行脚本就显得非常重要了。本节介绍定时执行脚本。下载node-schedule依赖yarn add node-schedule导入使用//app.jsconst schedule = require('node-schedule')const script = require('./util/s

2020-10-08 22:40:28 102 1

原创 [记录七]Vue+node+koa2+mysql+nginx+redis,全栈开发小程序和管理员管理系统项目——生成请求日志

前言:日志是系统非常重要的东西,倘若生成环境中突然报错或异常,要想快速知道哪里出现了问题,最快的方式就是查看系统日志。日志不仅仅是系统异常后帮助定位错误的作用,也可以了解用户操作了什么请求,客户端ip和所在地址都是可以知道的,将用户的操作信息保存下来供系统管理员查看。下面来看看node是如何将日志信息保存下来并提供api给前端查看。日志表结构这是数据库的其中一张数据表,我将请求日志信息保存在这,方便管理员可以查看。创建生成日志的中间件//app.js// 日志app.use(async (ct

2020-10-08 17:04:39 213 21

原创 [记录六]Vue+node+koa2+mysql+nginx+redis,全栈开发小程序和管理员管理系统项目——服务端图片上传与下载

本项目需要涉及前端上传图片与显示图片,为此自己实践一下图片相关的东西,挺有意思所以就分享出来。实现思路:服务端的处理方式是将前端上传的文件保存在服务端本地,然后重命名该文件名字,再将图片在服务端的路径存入表中,前端请求图片地址的时候去服务端找出文件并返回给前端显示。在routes文件夹下新建一个common.js文件//common.js//导入所需模块const router = require('koa-router')()const api = require('../controller

2020-09-30 15:56:18 2381 49

原创 [记录五]Vue+node+koa2+mysql+nginx+redis,全栈开发小程序和管理员管理系统项目——使用swagger自动生成接口文档

因为我们是异地对接接口文档,为此有对接文档是非常必要的,经过对比我选用swagger,但是node使用swagger有很多坑(细节)需要注意,我花费了两天时间才将文档展现出来,尤其是对注释部分需要严格按照格式去写。我这里选用swagger-jsdoc和koa2-swagger-ui去实现。首先我们在routes文件夹中另起一个文件swagger.js,为什么在routes文件下呢?因为在给到别人看文档的时候你是打开127.0.0.1:300/swaggger这样的网址的,所以它相当于node的其中一个路

2020-09-26 09:27:06 2366 61

原创 [记录四]Vue+node+koa2+mysql+nginx+redis,全栈开发小程序和管理员管理系统项目——token控制接口权限

上节我们已了解后端是如何将数据加密成token以及如何解密回用户数据的,但是并没有做到用户没有登录就不可以请求某个接口(需要用户信息的api),这样不控制的话就直接请求那就会报错了,当然为了安全是肯定要对大部分接口进行登录后才能调用的控制的。这里我采用中间件去控制。在utils文件夹下新建一个whiteList.js文件这里就写免登录的接口路由,这些是客户端不传登录态token也是可以调用成功了,后面需要不登录就能调用接口就直接在这个数组后面加多个接口的路由。在app.js中编写一个中间件,根据上面

2020-09-21 13:58:20 1449 45

原创 [记录三]Vue+node+koa2+mysql+nginx+redis,全栈开发小程序和管理员管理系统项目——token校验登录态

项目中凡事涉及到用户登录注册的都需要一个登录态来验证用户的登录状态,常用的登录台无外乎是token、session啊这些标识。这里我使用的是token字段。token一般会包含用户的个人信息,如:账号、账号id、用户名等等,更为安全的是加入一个自定义的盐(salt)一起加密,防止用户信息泄漏。下面就一起来使用一下:说到token,肯定会想到后端是怎么知道前端给我的token是不是我传给他的有效值呢?就是说后端需要有个值去跟前端传过来的token进行比较才知道合法性。所以后端在生成token的同时自己也需要

2020-09-21 11:35:00 16381 257

原创 [记录二]Vue+node+koa2+mysql+nginx+redis,全栈开发小程序和管理员管理系统项目——编写接口路由

前言写这个项目需要用到很多的依赖,node导入依赖也很方便,直接:let mysql=require('mysql')以下是我做这个项目使用到的依赖:后面都会一一来使用和介绍。编写接口编写接口之前需要配置数据库和写一个处理sql语句的方法。在controllers文件夹下新建defaultConfig.js和mysqlConfig.js。//defaultConfig.jsconst config = { // 数据库配置 database: { DATABASE:

2020-09-16 18:02:57 1634 55

原创 [记录一]Vue+node+koa2+mysql+nginx+redis,全栈开发小程序和管理员管理系统项目——前期准备

前言:最近在开发一款小程序以及配套的后台管理系统,主要是想改变一下自己对后端的无知。考虑到开发的成本就选用了适合前端人的服务端开发语言node.js。此博客会一直更新到这个项目的结束以及在生产环境上遇到的问题的总结,纯属个人的锻炼技术。开发环境前期准备:1、下载集成环境(⚠️下载它的最新版避免踩坑。)。MxSrvs集成软件:它减少了配置和需要下载多个文件的烦恼(我是这么想的) 已经自带Nginx+redis+mysql必备的开发工具了。2、安装node+koa2开发环境(具体的安装教程请百度,网

2020-09-16 17:24:32 267

原创 爬取线上小程序源码看这一篇就够了!

前言:前段时间看到某某小程序做得还不错,对于开发者来说肯定想搞一搞接口和源码啥的,但是我用抓包软件发现抓不了,反扒了。所以就直接撸源码撸。前期准备以下都是在电脑上装的:手机模拟器:MUMU模拟器 / 夜神模拟器 推荐使用MUMU模拟器文件管理器:re文件管理器装好上面的模拟器后,打开模拟器,在里面安装re管理器和微信:打开微信,访问你想要爬下来的小程序后使用RE管理器打开路径你会看到像c31ad******es72这样类似的文件,这是多个微信号产生的文件。怕找不到的话先删除掉这些类似的文件

2020-11-06 13:11:17 1767 4

原创 做自带流量的微信小程序,看这一篇就够了

第一步:注册一个邮箱账号备用。在微信公众平台上点立即注册,选择小程序填好刚才注册的邮箱和其他信息。点注册,然后去邮箱验证激活,之后信息登记,输入提示的内容。完成后登录在微信公众平台上扫码登录。手机上选择刚才注册的邮箱账号的小程序登录。我的是这个:进来后你可以对小程序的一些信息就行补充:我这里已经填写完了。接下来你需要在设置里面的开发设置中获取你的小程序appid这个AppID复制下来备用。第二步:打开微信开发者工具点击第一个框添加一个小程序—新建项目的信息:填好后点击新

2020-10-29 14:35:41 10347 69

原创 小程序接入vant Weapp组件的详细步骤

刚创建的项目的文件结构首先在你项目的根目录下打开终端,输入npm init 对项目初始化这时会生成pachage.json文件。继续在终端运行以下命令我这里用这个:npm i vant-weapp -S --production运行完如图所示:安装成功后 回到小程序开发工具 点击 工具 => 构建npm运行完截图:完成后在编辑器右边的详情把红框内的打勾上使用组件在你想使用组件库的的json文件内引入组件。比如你想在fundIncome页面内使用button组件

2020-10-26 11:18:07 1965 27

原创 h5购物车功能实现里程碑祭奠1024

前言:本文实现购物车的思路是:获取后端的商品列表——前端本地缓存添加的商品数据——从缓存中获取数据渲染到购物车页面——从缓存中获取数据并提交订单。所以主要是购物车数据的存和取以及清除。商品选择页面分析:考虑到商品列表会多处使用,并且增加、减少商品数量的操作都是一样的,所以将右侧的列表做成组件。/*shopListRight.vue*/<template> <div class="shopListRight"> <div class="view-box"&g

2020-10-24 00:36:34 307

原创 项目中总会用到的方法,即开即用(持续更新ing)

前言:你是否有这样的烦恼,每构建一次项目都会用到很多过滤器?本篇将为你解决这个烦恼,这里整理了很多在开发中需要用到的过滤器或方法,都是复制即用的。时间过滤器// 对Date的扩展,将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子: // (new Date()).Format("yyyy-MM-dd

2020-10-18 21:33:25 98 1

原创 基于php的校园失物招领平台系统(自动化匹配招领启事)

最近开发了一个php后台的校园失物招领平台系统,实现了以学生为中心的快速做到失物招领的效率和准确率。只要同个学院的人进入网站即可查阅目前现在其他学生丢失了什么东西和谁捡到什么东西都是一目了然,更可以作为目击者提供发布启事的人一些有用的线索,帮助他人快速找回失物。其中,当发布的启事与招领的信息相似度高的话系统会自动匹配给用户,提高准确度。有兴趣的朋友可以直接到我的github下载源码查看!去查看如有其他问题可以直接wx:huang009516...

2020-10-15 16:55:48 758 2

原创 基于php的酒店预订信息管理系统(自动化管理)

这是我的一个毕设项目,当初不懂java和node.js,所以选择了入门门槛较低的php,总体上达到了毕设系统的要求。涉及了多个模块,开发过程也慢慢得解决问题,一步一个脚印地去完成。这个系统可以说是在线预订客房和浏览酒店最新动态信息以及酒店管理员对酒店客房、用户信息、入住信息、餐饮预订等模块集于一身。界面也是自己的DIY审美(勿吐槽)。更多信息和源码可以直接去我的github地址查看。基于php的酒店预订信息管理系统...

2020-10-15 16:53:54 104

原创 你想要的js正则表达式都在这!

一、校验数字的js正则表达式1、数字:^[0-9]*$2、n位的数字:^\d{n}$3、至少n位的数字:^\d{n,}$4、m-n位的数字:^\d{m,n}$5、零和非零开头的数字:^(0|[1-9][0-9]*)$6、非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$7、带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})?$8、正数、负数、和小数:^(\-|\+)?\d+(\.\d+)?$9、有两位小数的正实数:^[0-9]+(

2020-10-10 12:37:46 196 1

原创 小程序实现索引栏遇到的坑

最近在做小程序项目的时候遇到了索引栏功能的东西,该项目是选择车型的需求。先看效果图:实现上面的功能大概有自定义弹框、点击索引字母跳转到对应的位置、搜索关键字高亮等。下面一个个来实现。特别说明:刚开始看到这种索引栏组件,就想到了使用vant的indexBar组件,但是后面使用popup组件indexBar共用的时候,点击索引字母是失效的,原因是因为popup的弹出层需要定位导致跳转对应的字...

2020-10-10 12:33:32 877 1

原创 Mac的MxSrvs切换php版本报错解决方案

相信进来的你也是无奈才选择这个MxSrvs集成环境软件,这里建议去MxSrvs官网下载最新版的,旧版坑太多了。但你会发现MxSrvs软件会自带7.*以上的php版本,这时候因为项目的需要或者其他原因想要修改php版本,当你开开心心得去官网下载好版本之后,拷贝进去会发现php运行报错了。大概是这样子的:崩溃吧!下面将提供解决方案(我花费????从大佬那亲测有效的办法,网上的全是需要付费的,如解决了你的问题,请给个小星星鼓励一下)注:下载好MxSrvs先不要打开软件。还不知道怎么切换版本的小伙伴直接往下

2020-10-10 12:30:00 557 1

原创 Vue中移动端使用postcss-px2rem和lib-flexible解决自适应

前端页面移动端免不了需要自适应高度宽度字体大小等等,如果直接写rem的话那会很麻烦,前端还需要根据设计图自己去转rem写样式,那样会非常麻烦且不易维护。本文将介绍前端写px像素单位自动转为rem单位。添加依赖postcss-pxtoremyarn add postcss-pxtorem 或 nmp install postcss-pxtorem添加依赖lib-flexibleyarn add lib-flexible 或 npm install lib-flexible在package.j

2020-09-22 14:13:10 181 1

原创 vue中导出报表并兼容客户端的方式

涉及到管理后台系统都免不了需要导出报表的功能。纵然网上资源千千万,但我这种是可以兼容客户端的方法(亲测之前的方法在客户端会有bug),经过不断优化在客户端也得到很好的效果。我这里的需求是:点击导出调起后端的api,返回下载文件的url,前端根据url地址创建下载的iframe。下面看使用:comm.jsexport default { // Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象。 install: funct

2020-08-10 09:12:39 126 2

原创 小程序底部弹起组件化与插槽案例

小程序中经常会遇到点击从底部弹出一个框,并且框在底部的位置,假设多个页面都需要用到这种特效的话,建议是写成自定义组件会比较好(个人建议!!!)。直接看设计效果:类似于这种情况的效果:点击按钮弹出一个框,显示相应的信息。框内的信息多种多样,为此我这里作成了插槽,用法类似于vue的slot。bottomDialog.jsComponent({ /** * 组件的属性列表 */ /** *注:这里需要启用插槽 */ options: { multipleSlo

2020-07-23 17:20:16 162 1

原创 element中table组件根据属性合并行数据
原力计划

最近写项目的时候,有个需求是这样的:购买项目的时候勾选了两个以上的员工(这里假设张三和李四两个员工),那么在统计业绩或者提成的时候,张三和李四就需要均分该项目的业绩和提成金额,显示的时候需要将张三和李四统计在一起,方便修改其中一个员工的业绩的时候另外一个也跟着变。设计图如下:从设计图可见修改mb006员工的销售业绩或提成金额的时候是需要变动同个项目下其他员工(gt_test和mb005)的销售业绩或提成总额的。并且这里是根据项目名称(轮胎修补与打蜡2223)来合并员工数据的。而后台返回的数据是这样的:

2020-05-12 17:24:19 940 2

原创 vue-devtools调试工具导入浏览器简单教程

相信用过vue开发的前端大佬们都用过vue-devtools调试工具,它可以帮你快速锁定数据流在哪一个步骤发生错误。下面介绍如何导入并使用。第一步首先下载好一个官方devtools的文件。文件地址 不过官方的devtools文件下载下来是需要下载依赖并编译的,需要很多的操作,伸手党可以直接花几积分下载我处理好的文件,直接安装文件地址直接导入就可以使用了。第二步下载好文件之后打开浏览器点...

2020-05-07 10:43:27 623 1

原创 将后台数据转化为符合el-tree组件的结构

相信进来这的朋友一定跟我当时的心情是一样的,后台给到的数据看似能用但是又不符合我们要使用el-tree组件的数据结构,为此需要前端处理后台返回的数据,先来看看我们需要的数据结构长什么样:elementUI的el-tree组件的格式,elementUI传送门。就是这种需要子级结构的数据,当一级 1下还有数据(即children不为空)需要点击一级 1展开它的子级数据,当子级数据还有下级的时候同...

2020-03-22 13:08:49 856

原创 认识可选链和双问号语法

目录可选链操作符(双问号操作符)nullish coalescing operatorBigInt我们都知道一个新的ECMAScript标准的发布需要经过五个阶段,分别是Stage 0-Stage 4阶段,每个阶段都需要TC39的审批和全体成员的一致同意才能提交至下一个阶段。本文中提到的特性是处于Stage 3 || Stage 4阶段。所以说以下提到的新特性很快就可以为我们程序员造福了,下面...

2020-01-05 16:48:24 1242 15

原创 element的日期选择器el-date-picker分开的日期约束

elementUI自带了很多的日期选择组件,但是总有一些需求是无法满足我们这些开发者的。我遇到的需求是活动时间是不能够写在一块的,像这种:为此我只能用两个组件去拼凑成“开始时间“和”结束时间"分开选择,但是结束时间和开始时间的选择是有一定的约束限制的。比如:不能够选择过去的时间、结束时间需要大于开始时间。经过多次的尝试,我选择了两个el-date-picker组件完成需求并且做到时间选择的限制...

2019-10-08 20:36:05 442

原创 前端请求接口的几种方式总结

作为一名前端工程师,请求后台接口获取数据是必然的,也是要求前端人员需要掌握的必备技能。但你一段时间只用一种请求方法,突然让你换成其他方式不一定能够立马实现的来,为此总结了一下前端请求API的方法,方便今后查阅。一、vue-resource优点:体积小、支持主流的浏览器、支持Promise API和URI Templates、支持拦截器。安装 $ yarn add vue-resour...

2019-08-24 15:46:57 4448

原创 VScode保存时自动根据eslint格式化代码

最近做项目时使用vs-code编辑器,项目中也使用了eslint,但很多时候不小心写到不规范的代码就会冒红,虽然不影响运行,但有代码洁癖的我是不允许这样的代码存在的,为了代码的规范性,加入了eslint格式校验,并且配置了自动化符合eslint格式的设置。安装eslint和vetur插件配置settingjs.json文件路径:文件 -> 首选项 -> 找到settingjs...

2019-08-17 16:54:10 178

原创 时间戳转换为其他时间格式的封装

最近做vue相关的项目,用到了后台返回的时间,因为后台返回的时间都是时间戳格式,加上项目中多次用到了时间的不同格式的显示,为此自行封装了关于时间戳转换时间格式的方法,可能有待优化,但对于新手都是可以理解的,不足之处还望各位大佬指正。言归正传,封装方法考虑的就是参数的问题,根据参数执行方法,直接上代码,不懂的可以看注释。<script> /* *@param {时间戳...

2019-08-03 14:33:08 157

原创 最简单的使用git上传项目到github仓库

最简单的使用git上传项目到github仓库前言介绍前期准备交流前言介绍每当完成一个自己努力之后的项目实现后,心中总有多多少少的成就感,就像跟别人分享或者写下自己的心得,那么开源github绝对是一个交流学习的好机会。下面我将介绍如何利用git将项目发布到github上。前期准备首先你需要一个github账号,未注册的朋友请走快捷通道 ↓点击去注册有了账号之后我们需要安装git工具,同...

2019-06-08 16:36:55 166

原创 使用webpack脚手架创建一个vue项目

使用webpack脚手架创建一个vue项目前言介绍前期环境准备开始创建项目前言介绍创建vue的项目方式有很多种,这里仅介绍使用webpack脚手架来创建一个vue项目,下面将创建一个movie为例的项目。前期环境准备第一步 :安装好npm、node从官网下载本机对应的npm版本和node版本,这里不做介绍。安装完成后检查是否安装成功。检验方法:打开控制命令行程序-》cmd,输入node...

2019-06-08 13:09:07 1052 19

原创 我认知的ES6语法

工作中难免会遇到有关于ES6语法的用法及注意事项。以下是个人总结的一些知识,如有不足或错误还望指正!那么,在ES6中,我们有哪些改变的地方呢?1、变量声明之前的写法:var a;//声明一个变量avar PI=3.14;//声明一个常量PI并赋值ES6的写法:let a;//声明一个变量aconst PI=3.14;//声明一个常量PI并赋值ES6中引入了let、const。...

2019-02-16 00:33:02 133

原创 自用款公共样式common.css(含注释)

网站开发中一般都是需要公共样式的css文件,为此作为一个前端工程师有自己的公共样式是很有必要的。一下是2我自己使用的common.css代码,仅供参考,适合初学者使用,大牛勿喷。话不多说,上代码!body, html,div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockq...

2019-02-15 11:03:50 1464 1

原创 小程序--广州旅游推荐

这两天做了一个微信小程序,讲学的知识运用到项目中去,该小程序主要是为广州周边旅游的用户提供一种便利的目的,线该小程序已经上线,望各位指正!项目描述: 本项目是为了方便微信用户人群在不用下载旅游APP的情况下快速查看广州周边旅游的相关景点、酒店、美食和游玩路线等信息.技术要领:1、本项目的数据都是通过接口请求渲染到页面上,并使用template模板加快项目的开发和代码的复用.2、各数据模块...

2018-10-24 19:36:41 571

原创 原生JS完整轮播图

分享一个比较完整的原生JS写的轮播图,有焦点跟随,有进入焦点切换图片,点击箭头切换图片.算是比较完整的轮播图. 首先是布局问题.用一个盒子装全部图片,用一个UL LI装六个图片.用决定定位将图片全部定位到盒子的左边.然后将UL置于盒子的右侧.每次将一个图片从右边切进来,同时将盒子里面的图片往左边切出去.当切到最后一张的时候,就将第一张图片快速扯到盒子的右侧,接着就是将图片切出,.第一张进来.一直...

2018-08-24 19:53:04 371

转载 JS中三大家族方法

document.body.clientWidth ==&gt; BODY对象宽度 document.body.clientHeight ==&gt; BODY对象高度 document.documentElement.clientWidth ==&gt; 可见区域宽度 document.documentElement.clientHeight ==&gt; 可见区域高度 网页可见区域...

2018-08-22 12:07:32 473

转载 闭包经典面试题

闭包&nbsp; 正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是属性),function scope内默认有个名为...

2018-08-22 12:05:25 7412 2

原创 工作项目总结心得

总结一下最近做的静态页面布局项目,做个总结方便今后查阅项目的疑难点,做到项目的后期技术提升工作.以下是我在做这个项目中的体会和技术感想.还望大牛手下留情!技术总结:一、盒子居中 /*父盒子内填充,用padding与子盒子隔开*/ /*.father { width: 200px; ...

2018-08-15 19:02:42 4090

转载 常用的布局小技巧

单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)使用inline-block 和 text-align实现.parent{text-align: center;}.child{display: inlin...

2018-08-09 13:10:49 121

原创 清除浮动的几种办法

1、父级div定义伪类:after和zoom&lt;style type="text/css"&gt; .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{f...

2018-07-24 08:35:10 131

可以直接安装的vue-devtools调试工具.zip

该文件下载后可以直接安装。不再需要想网上大多数文件哪那样需要下载依赖又要编译的操作。这些步骤我已经做好了,你只需下载文件导入到浏览器就可以使用了。不会导入的可直接到我博客查看导入devtools文件教程解说!地址:https://blog.csdn.net/Smell_rookie/article/details/105966884

2020-05-07

小程序使用vant weapp

发表于 2020-10-27 最后回复 2020-10-27

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除