- 博客(69)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 [记录三]Vue+node+koa2+mysql+nginx+redis，全栈开发小程序和管理员管理系统项目——token校验登录态
项目中凡事涉及到用户登录注册的都需要一个登录态来验证用户的登录状态，常用的登录台无外乎是token、session啊这些标识。这里我使用的是token字段。token一般会包含用户的个人信息，如：账号、账号id、用户名等等，更为安全的是加入一个自定义的盐(salt)一起加密，防止用户信息泄漏。下面就一起来使用一下：说到token，肯定会想到后端是怎么知道前端给我的token是不是我传给他的有效值呢？就是说后端需要有个值去跟前端传过来的token进行比较才知道合法性。所以后端在生成token的同时自己也需要
2020-09-21 11:35:00
25145
296
原创 [记录二]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
3207
60
原创 [记录一]Vue+node+koa2+mysql+nginx+redis，全栈开发小程序和管理员管理系统项目——前期准备
前言：最近在开发一款小程序以及配套的后台管理系统，主要是想改变一下自己对后端的无知。考虑到开发的成本就选用了适合前端人的服务端开发语言node.js。此博客会一直更新到这个项目的结束以及在生产环境上遇到的问题的总结，纯属个人的锻炼技术。开发环境前期准备：1、下载集成环境（⚠️下载它的最新版避免踩坑。）。MxSrvs集成软件：它减少了配置和需要下载多个文件的烦恼（我是这么想的） 已经自带Nginx+redis+mysql必备的开发工具了。2、安装node+koa2开发环境（具体的安装教程请百度，网
2020-09-16 17:24:32
715
原创 vue中导出报表并兼容客户端的方式
涉及到管理后台系统都免不了需要导出报表的功能。纵然网上资源千千万，但我这种是可以兼容客户端的方法（亲测之前的方法在客户端会有bug），经过不断优化在客户端也得到很好的效果。我这里的需求是：点击导出调起后端的api，返回下载文件的url，前端根据url地址创建下载的iframe。下面看使用：comm.jsexport default { // Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。 install: funct
2020-08-10 09:12:39
412
2
原创 小程序底部弹起组件化与插槽案例
小程序中经常会遇到点击从底部弹出一个框，并且框在底部的位置，假设多个页面都需要用到这种特效的话，建议是写成自定义组件会比较好（个人建议！！！）。直接看设计效果：类似于这种情况的效果：点击按钮弹出一个框，显示相应的信息。框内的信息多种多样，为此我这里作成了插槽，用法类似于vue的slot。bottomDialog.jsComponent({ /** * 组件的属性列表 */ /** *注：这里需要启用插槽 */ options: { multipleSlo
2020-07-23 17:20:16
596
38
原创 element中table组件根据属性合并行数据
最近写项目的时候，有个需求是这样的：购买项目的时候勾选了两个以上的员工（这里假设张三和李四两个员工），那么在统计业绩或者提成的时候，张三和李四就需要均分该项目的业绩和提成金额，显示的时候需要将张三和李四统计在一起，方便修改其中一个员工的业绩的时候另外一个也跟着变。设计图如下：从设计图可见修改mb006员工的销售业绩或提成金额的时候是需要变动同个项目下其他员工(gt_test和mb005)的销售业绩或提成总额的。并且这里是根据项目名称（轮胎修补与打蜡2223）来合并员工数据的。而后台返回的数据是这样的：
2020-05-12 17:24:19
3297
2
原创 vue-devtools调试工具导入浏览器简单教程
相信用过vue开发的前端大佬们都用过vue-devtools调试工具，它可以帮你快速锁定数据流在哪一个步骤发生错误。下面介绍如何导入并使用。第一步首先下载好一个官方devtools的文件。文件地址 不过官方的devtools文件下载下来是需要下载依赖并编译的，需要很多的操作，伸手党可以直接花几积分下载我处理好的文件，直接安装文件地址直接导入就可以使用了。第二步下载好文件之后打开浏览器点...
2020-05-07 10:43:27
1312
1
原创 将后台数据转化为符合el-tree组件的结构
相信进来这的朋友一定跟我当时的心情是一样的，后台给到的数据看似能用但是又不符合我们要使用el-tree组件的数据结构，为此需要前端处理后台返回的数据，先来看看我们需要的数据结构长什么样：elementUI的el-tree组件的格式，elementUI传送门。就是这种需要子级结构的数据，当一级 1下还有数据（即children不为空）需要点击一级 1展开它的子级数据，当子级数据还有下级的时候同...
2020-03-22 13:08:49
2948
原创 认识可选链和双问号语法
目录可选链操作符（双问号操作符）nullish coalescing operatorBigInt我们都知道一个新的ECMAScript标准的发布需要经过五个阶段，分别是Stage 0-Stage 4阶段，每个阶段都需要TC39的审批和全体成员的一致同意才能提交至下一个阶段。本文中提到的特性是处于Stage 3 || Stage 4阶段。所以说以下提到的新特性很快就可以为我们程序员造福了，下面...
2020-01-05 16:48:24
2858
21
原创 element的日期选择器el-date-picker分开的日期约束
elementUI自带了很多的日期选择组件，但是总有一些需求是无法满足我们这些开发者的。我遇到的需求是活动时间是不能够写在一块的，像这种：为此我只能用两个组件去拼凑成“开始时间“和”结束时间"分开选择，但是结束时间和开始时间的选择是有一定的约束限制的。比如：不能够选择过去的时间、结束时间需要大于开始时间。经过多次的尝试，我选择了两个el-date-picker组件完成需求并且做到时间选择的限制...
2019-10-08 20:36:05
2433
原创 前端请求接口的几种方式总结
作为一名前端工程师，请求后台接口获取数据是必然的，也是要求前端人员需要掌握的必备技能。但你一段时间只用一种请求方法，突然让你换成其他方式不一定能够立马实现的来，为此总结了一下前端请求API的方法，方便今后查阅。一、vue-resource优点：体积小、支持主流的浏览器、支持Promise API和URI Templates、支持拦截器。安装 $ yarn add vue-resour...
2019-08-24 15:46:57
17976
2
原创 VScode保存时自动根据eslint格式化代码
最近做项目时使用vs-code编辑器，项目中也使用了eslint，但很多时候不小心写到不规范的代码就会冒红，虽然不影响运行，但有代码洁癖的我是不允许这样的代码存在的，为了代码的规范性，加入了eslint格式校验，并且配置了自动化符合eslint格式的设置。安装eslint和vetur插件配置settingjs.json文件路径：文件 -> 首选项 -> 找到settingjs...
2019-08-17 16:54:10
563
原创 时间戳转换为其他时间格式的封装
最近做vue相关的项目，用到了后台返回的时间，因为后台返回的时间都是时间戳格式，加上项目中多次用到了时间的不同格式的显示，为此自行封装了关于时间戳转换时间格式的方法，可能有待优化，但对于新手都是可以理解的，不足之处还望各位大佬指正。言归正传，封装方法考虑的就是参数的问题，根据参数执行方法，直接上代码，不懂的可以看注释。<script> /* *@param {时间戳...
2019-08-03 14:33:08
473
原创 最简单的使用git上传项目到github仓库
最简单的使用git上传项目到github仓库前言介绍前期准备交流前言介绍每当完成一个自己努力之后的项目实现后，心中总有多多少少的成就感，就像跟别人分享或者写下自己的心得，那么开源github绝对是一个交流学习的好机会。下面我将介绍如何利用git将项目发布到github上。前期准备首先你需要一个github账号，未注册的朋友请走快捷通道 ↓点击去注册有了账号之后我们需要安装git工具，同...
2019-06-08 16:36:55
416
原创 使用webpack脚手架创建一个vue项目
使用webpack脚手架创建一个vue项目前言介绍前期环境准备开始创建项目前言介绍创建vue的项目方式有很多种，这里仅介绍使用webpack脚手架来创建一个vue项目，下面将创建一个movie为例的项目。前期环境准备第一步 ：安装好npm、node从官网下载本机对应的npm版本和node版本，这里不做介绍。安装完成后检查是否安装成功。检验方法：打开控制命令行程序-》cmd,输入node...
2019-06-08 13:09:07
1661
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
317
原创 小程序--广州旅游推荐
这两天做了一个微信小程序,讲学的知识运用到项目中去,该小程序主要是为广州周边旅游的用户提供一种便利的目的,线该小程序已经上线,望各位指正!项目描述: 本项目是为了方便微信用户人群在不用下载旅游APP的情况下快速查看广州周边旅游的相关景点、酒店、美食和游玩路线等信息.技术要领:1、本项目的数据都是通过接口请求渲染到页面上,并使用template模板加快项目的开发和代码的复用.2、各数据模块...
2018-10-24 19:36:41
1130
1
原创 原生JS完整轮播图
分享一个比较完整的原生JS写的轮播图,有焦点跟随,有进入焦点切换图片,点击箭头切换图片.算是比较完整的轮播图. 首先是布局问题.用一个盒子装全部图片,用一个UL LI装六个图片.用决定定位将图片全部定位到盒子的左边.然后将UL置于盒子的右侧.每次将一个图片从右边切进来,同时将盒子里面的图片往左边切出去.当切到最后一张的时候,就将第一张图片快速扯到盒子的右侧,接着就是将图片切出,.第一张进来.一直...
2018-08-24 19:53:04
517
转载 JS中三大家族方法
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域...
2018-08-22 12:07:32
630
转载 闭包经典面试题
闭包 正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是属性),function scope内默认有个名为...
2018-08-22 12:05:25
8707
2
原创 工作项目总结心得
总结一下最近做的静态页面布局项目,做个总结方便今后查阅项目的疑难点,做到项目的后期技术提升工作.以下是我在做这个项目中的体会和技术感想.还望大牛手下留情!技术总结：一、盒子居中 /*父盒子内填充,用padding与子盒子隔开*/ /*.father { width: 200px; ...
2018-08-15 19:02:42
4867
转载 常用的布局小技巧
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）使用inline-block 和 text-align实现.parent{text-align: center;}.child{display: inlin...
2018-08-09 13:10:49
249
原创 清除浮动的几种办法
1、父级div定义伪类：after和zoom<style type="text/css"> .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
206
转载 对绝对定位、固定定位，以及其层级关系和脱离文档流的影响
最近去培训问到关于脱离标准层的问题,特意去找了以下相关内容.了解到如下:定位：一般父级用相对定位，子级用绝对定位1.相对定位：position：relative2.绝对定位：position：absolute3.固定定位：position：fixed默认static没有定位偏移量：left和top比right和bottom的优先级要高相对定位：相对于自身...
2018-07-24 08:28:04
4385
4
原创 Jquery遍历的next()方法和prev()方法的使用
如果想快速查找指定元素集合中每一个元素紧邻的下一个同辈元素的元素集合，此时可以用next()方法。$("button:last").click(function() { //找到所有class=item-2的li //然后筛选出第一个，加上蓝色的边 $('.item-1').next(':first').css('border', '1px sol...
2018-05-31 23:36:45
6992
转载 DOM替换replaceWith()和replaceAll()
replaceWith()和replaceAll()方法用起来总是会混淆，下面将说明一下这两者之间的区别于一年、、.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合简单来说：用$()选择节点A，调用replaceWith方法，传入一个新的内容B（HTML字符串，DOM元素，或者jQuery对象）用来替换选中的节点A看个简单的例子：一段...
2018-05-31 15:12:58
1472
原创 Jquery语法中单双引号的使用
一般来，Jquery和javascript一样，可以使用单引号也可以使用双引号。如下面的例子当中，使用单引号或双引号都是可以被浏览器识别的。$("select #select").val();$('input[name="password"]:checked').val();$('#id').val();但是使用它们时需要注意一点这几点:1、引号必须成对出现。如$("#id")或者$('#id')...
2018-05-30 23:58:55
1446
1
原创 DOM节点empty和remove的区别
empty方法严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点empty不能删除自己本身这个节点remove方法该节点与该节点所包含的所有后代节点将同时被删除提供传递一个筛选的表达式，删除指定合集中的元素举个例子：$("#bt1").on('click', function() { //删除了ID为test下的元素 $("#test...
2018-05-30 00:13:41
380
转载 关于jquery中html()、text()和val()方法的使用
html()方法获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容.html( htmlString ) 设置每一个匹配元素的html内容.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数.html()方法内部使用的是DOM的inne...
2018-05-28 09:00:51
468
vue搭建的服装类商城手机模板
2021-01-11
新年烟花代码(纯js和html)
2021-01-02
可以直接安装的vue-devtools调试工具.zip
2020-05-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人