- 博客(45)
- 收藏
- 关注
RSS订阅原创 vue+Nodejs+Koa搭建前后端系统（十）--实战之更新用户信息
本篇为实战篇，干货不多。基于上篇实现的上传图片接口，可以实现下更新用户信息功能，实现后的前端效果如下图：代码如下：1.修改http.ts文件代码：2.修改Pinia仓储3.头像下拉弹窗中链接列表数据顶部用户头像下拉弹窗区域自定义弹窗组件先写一个通用的弹窗组件，有利于弹窗行为的统一性，本组件采用了animate动画，所以需要引入一下animate.css1.安装animate.css2.引入animate.css3.编写通用的弹窗组件通用弹窗组件写完，就可以写具体的弹窗了4.设置型弹窗组
2024-04-01 13:51:34
411
原创 vue+Nodejs+Koa搭建前后端系统（九）-- 上传图片
web2.0的到来使网页世界正式进入了寒武纪，各式各样的多媒体资源屡见不鲜，上传资源变得刻不容缓！本文是在该系列的基础上，针对前后端代码的修改。HTTP上传图片时Content-Type值常见的有2种：application/json和multipart/form-data修改axios配置上述代码修改了请求拦截，即：若请求类型为application/json时，则处理；否则（主要是针对multipart/form-data），不处理。1.安装koa-body2.安装hexoid3.安装dayjs
2024-03-06 15:08:55
739
1
翻译 npm koa-body
一个全功能的koa body解析器中间件。支持multipart, urlencoded 和 json 格式的请求体。提供与的bodyParser相同的功能。
2023-08-25 15:54:53
199
翻译 npm koa-router
返回分离的中间件以响应OPTIONS请求，其中包含Allow Header的方法，以及响应405 Not allowed的方法和501 Not Implemented 的方法。此方法在将参数包含在URL中之前对参数进行URL编码。它们是按顺序调用的，请求从第一个中间件开始，并沿着中间件堆栈“向下”运行。将路由器处理成中间件，它会分发一个请求的路由到该中间件以供匹配。为指定的路由参数运行中间件。可以用来匹配所有的请求方式（HTTP动词）。当且仅当路由匹配时，使用给定的中间件。属性，路由可以匹配特定的主机。
2023-08-11 09:44:16
139
原创 vue+Nodejs+Koa搭建前后端系统（八）-- vue router路由嵌套、store状态管理
本文是在该系列的基础上，针对前端的修改。其中前端采用vue3框架，脚手架为vite，ui组件库为ElementPlus，路由为vue-router，状态管理库为Pinia。整合模块数据为路由、菜单所用数据模块接口文件模块文件模块文件在都必须在 /src/router/modules/ 目录下，并且每个模块必须有导出默认，路由文件最终生成的数据嵌套路由index页面顶部TopHeader页面菜单页面左侧菜单Menu页面，由于菜单数据是一种树形结构，所以该页面采用vue的渲染函数（
2023-08-04 09:18:27
349
原创 vue+Nodejs+Koa搭建前后端系统（七）-- 用户注册、注销
添加 /src/pages/register/register.vue 文件md5是加密插件，用于密码加密。安装md5编写注册页面register.vue页面代码：页面效果在这里有个小插曲：我在编写注册页时，用户名和密码输入框总是自动填充我之前登录过的信息，查了一些博客，原因找到了。是因为注册页和登录页的的用户名和密码在el-form组件的位置和某些关键属性（如prop）一样，所以被自动填充了。解决办法也有好多，但一一试验，只有在el-input组件添加 属性才有效。/src/router/in
2023-07-06 16:03:36
256
翻译 npm koa-session
使用配置项的encode和decode字段可以自定义编、解码方法。外部密钥key默认使用cookie，但您可以通过配置项来自定义外部密钥方法。get(ctx)：获取外部密钥key的方法。set(ctx, value)：设置外部密钥key的方法。
2023-06-29 09:25:00
131
原创 vue+Nodejs+Koa搭建前后端系统（六）-- 用户登录
如果有vue-router，就略过这一小节。vue-router完整教程：点这里>>第一步：npm安装第二步：新建路由文件 router/index.ts 用来配置路由，新建pages目录用于存放页面文件第三步：在pages目录中添加登录页（login）和首页（index），以备路由使用两个页面的内容先简单写成显示“index”和"login"，以index页为例：第四步：编写路由配置文件在 router/idnex.ts 文件中编写如下代码（若要使用alias别名，请参阅《VUE+ts项目配置–
2023-06-19 10:14:44
941
翻译 npm mysql插件
这是mysql数据库的node.js驱动程序，由javascript编写，无需编译，且是100% MIT许可的。});在一次连接上，每个方法都是排队并按序执行关闭连接是使用end()完成的，它能确保在向mysql服务器发送退出指令之前执行所有剩余的查询。也可以通过函数自定义类型转换，该函数会将一些列信息作为参数，比如数据库、表、列、列类型和列预定的大小。如果你仅想对某些类型进行转换，也可以通过该函数实现。field和next。通过field对象触发解析器函数，并为特定字段返回值。
2023-05-15 11:05:09
918
原创 vue+Nodejs+Koa搭建前后端系统（五）--Nodejs中使用数据库
我创建了createTable.sql文件，路径为F:\test\vue_node\hello-node\server2\mysql\createTable\createTable.sql。以用户表为例，创建create_user表，其中有id（用户id）、username（用户名）、password（用户密码）、create_time（创建时间）列。app.context 是 ctx对象 的原型。添加到整个应用程序中使用的属性或方法非常有用，这可能会更加有效（不需要中间件）和/或 更简单（更少的。
2023-05-10 12:46:20
998
原创 vue+Nodejs+Koa搭建前后端系统（四）--安装MYSQL
计算机系统为Windows 10 专业版MYSQL采用压缩版安装，版本为 v8.0.32。
2023-05-06 13:24:31
701
原创 vue+Nodejs+Koa搭建前后端系统（三）--koa-generator项目优化修改
计算机系统为Windows 10 专业版可以把路由目录自动加载的loadRoutes()方法做成中间件：新建/middleware/目录，用于存放中间件文件。同时可以把添加命名空间的代码也移到这个中间件中，而不用分散到各个路由文件中。//要遍历的文件夹所在的路径 var routesDir = path . resolve("routes/");//根据文件路径读取文件，返回文件列表 function loadRoutes(app , dirPath) {if(err) {
2023-04-27 11:19:51
1677
原创 vue+Nodejs+Koa搭建前后端系统（二）--koa-generator创建项目及分析
采用上一篇vue+Nodejs+Koa搭建前后端系统（一）–简易版创建的项目目录的基础上，创建新的后端服务项目server2使用脚手架创建后端项目计算机系统为Windows 10 专业版小说中，终成眷属一般就结局了，但现实是生活一直在继续，我们一直在调试生活的方式来满足我们有恃无恐的安全感。上一篇只是简单地搭建了后端服务器。这回我们要利用koa的脚手架搭建后端项目框架。
2023-04-15 12:00:00
1040
原创 vue+Nodejs+Koa搭建前后端系统（一）--简易版
vue3+vite搭建前端框架node+koa搭建后端框架包管理器使用npm（v8.5.5）HTTP请求使用axios编辑器使用Visual Studio Code（以下简称VS Code）本地项目目录：F:\test\vue_node\hello-node\开始前请确保已全局安装Node可以像VUE一样使用npm run的方式，自定义启动指令。在package.json文件中script字段中写就可以了。（server只是一个名字，随意）然后，在终端键入即可启动服务器。注意！
2023-04-06 11:33:07
1101
原创 VUE+ts项目配置--alias别名配置
需要说明的是，vue2中通过VUECLI脚手架创建项目，项目的配置文件是vue.config.ts(或vue.config.js)。他们俩在本质上是一样的，不同的是其服务的脚手架不同而已。正题，monorepo模式下，Vetur插件默认当前工作区的第一个文件夹（排除掉.vscode文件夹，这个是我测试是加上去的），比如上图中operatorManagement这个项目，其中tsconfig.json配置的baseUrl中是相对于project/app文件夹的，所以Vetur就会报错找不到。...
2022-07-26 11:09:47
4608
原创 JS手写简易验证码
/*opt:{ ele:【必填】宿主Dom的class（.className）或Id(#id) randomNum: 【可选】要随机出的字符数量 randomChars: 【可选】要显示的验证码字符，优先级大于randomNum randomType: 【可选】参加随机的字符，0或其他：表示数字+字母，1：表示数字，2：表示字母 randomAllChars: 【可选】自定义参.
2021-03-24 17:01:22
216
原创 《CSS世界》前三章小本本
前言：CSS是前端样式的基础，目前比较流行的Bootstrap、layui、sass、less等这些框架，都有CSS的影子。CSS是内功，需要静下心来修炼，以后的Bootstrap、layui、sass、less等这些是招式。内功不稳，很容易被打出内伤。所以建议你把CSS的内功修炼好，以后就可以见招拆招啦。——献给新新萌的你正文：1.流写CSS布局时，很少人会关注CSS流。其实CSS中的布局是由流完成的：流是CSS布局的规则，它是引导页面定位和布局的沟渠，默认的流向是自左向右，从上到下，但是可
2020-09-20 10:14:18
253
原创 做一个不正经的程序猿
星爷说过：我们虽然穷，但是不能说谎、也不能打架；不是我们的东西，我们不能拿；要好好读书，长大要做个对社会有用的人。没错，做人要踏踏实实，正正经经，不要太浮躁。这也是我的做人准则。
2018-08-23 00:15:46
366
2
原创 js中的eval方法详解（二）–eval方法中的高级应用
在实际的Ajax开发中，有时我们需要从服务器中动态的获取代码块来执行，以减轻初次载入代码过多而导致耗费性能的问题，这时就可以用eval()方法来使这些都代码执行。另一种情况是，一些代码是通过JavaScript动态获取的字符串，这时也可以用eval()方法来使其执行 。eval()方法中执行的代码也是有作用域的，其作用域继承eval()方法所在的作用域。即eval()方法中定义的变量总是在调用它的上下文空间内执行，无论是变量还是函数定义都是如此哦。
2018-08-23 00:12:40
3409
1
原创 js中的eval方法详解（一）–eval方法的初级应用
在我看来，js中的eval()方法就是一个js语言的执行器，它能把其中的参数按照JavaScript语法进行解析并执行。语法：eval(s);eval()方法中的参数s有多种情况。参数的不同形式，会使eval()方法执行的结果和返回值有差别。下面来说说他们的区别。
2018-08-23 00:01:16
27555
6
原创 RegExp正则表达式（五）–js中RegExp对象中的属性
RegExp对象中除了有一些方法外，还包含一些属性。这些属性有助于我们得到一些关于该对象的有用信息。RegExp对象的属性可以分为两大类，即： 实例属性 静态属性
2018-08-22 23:37:59
1900
原创 RegExp正则表达式（四）–js中与RegExp对象相关的方法
正则表达式的出现就是为了匹配预期的字符串，然后对匹配的字符串进行相应的处理。这些处理即是方法。在js中，处理正则表达式的方法分为两大类：一类是RegExp对象中的方法; 另一类是stringObj对象中处理RegExp对象的方法;RegExp对象是在定义正则表达式的时候返回的
2018-08-22 22:55:26
321
原创 RegExp正则表达式（三）–js中正则表达式的定义
在js中，RegExp正则表达式的定义有两种方式：一种是普通方式，另一种是构造函数方式。无论是那种定义正则表达式的方式，它们都会返回RegExp对象。如果表达式是变量字符串时，\w,\d这一类匹配字符集的特殊字符，要写成”\\w”,”\\d”这种格式。原因是，字符串在解析时会把”\”符号解析成转义字符，如果要使其解析成”\”字符,就要写成”\\”
2018-08-22 00:30:02
881
原创 RegExp正则表达式（二）–正则表达式的高级应用
在正则表达式中，其匹配规则有两种模式可遵循。一种是贪婪模式，另一种是非贪婪模式。在默认情况下，正则表达式启用的是贪婪模式。贪婪模式是指，在能匹配成功的前提下，尽可能多的匹配要匹配的字符。非贪婪模式是指，在能匹配成功的前提下，尽可能少的匹配要匹配的字符。它与贪婪模式正好相反。
2018-08-22 00:00:36
395
原创 RegExp正则表达式（一）–正则表达式的初级应用
正则表达式是用来匹配字符串的。它根据一套自定义的匹配规则来得到预期字符串。根据自定义的匹配规则，我们可以从字符串中得到0个或至少一个匹配结果，对于匹配结果我们就可以根据程序的需要进行后续的操作。
2018-08-15 00:08:24
4959
原创 谈谈JS的时间对象（三）–时间的常识了解
时间是一个生活中重要的参考参数，它就在我们身边。当我们的视野只放在身边周围时，我们切身体会的是当地时间；当我们把时间放在全球化潮流中的时候，当地时间这个参考参数已经不能满足我们的需求了
2018-08-14 22:39:34
547
原创 谈谈JS的时间对象（二）–Date对象中的方法
探索Date对象的秘密上一篇文章介绍了关于new Date()中传递参数的各种形式。无论传递的参数是什么形式，new Date()的返回值都是一个对象，这个对象我们叫它为Date对象。其实new Date()的作用是初始化Date对象，关于对象的解释这里不做详细的介绍，只要知道对象本身一般不能处理数据，只有对象中的方法才能针对具体业务中的具体数据做特别的处理。下面的一张图说明了对象与对...
2018-08-12 22:25:23
1294
原创 谈谈JS的时间对象（一）--Date对象的定义
探索Date对象的秘密理论1JS中用于处理时间的是Date对象，创建Date对象的语法为：var d = new Date();上面的Date()不传任何参数，这时默认返回当前时间的Date对象。除此之外，还有传入具体某一时间Date对象的语法： new Date(format)； new Date(yyyy,mth,dd,hh,mm,ss) ...
2018-08-12 21:33:41
1749
原创 CSS radial-gradient径向渐变
回顾前面讲的linear-gradient线性渐变，它控制的是背景容器直线平面的渐变，而这里的radial-gradient径向渐变控制的是背景容器曲线平面的渐变，它和linear-gradient的语法相似。radial-gradient语法：radial-gradient( [ [ circle || <length>] [at <posi...
2018-03-13 16:10:54
1225
原创 CSS linear-gradient线性渐变
人类对美的追求是无限的，色彩的搭配是美的最基本要求，重复产生美的感觉，随机产生美的感觉，单一产生美的感觉。人类用各种办法诠释着美，残缺美、犀利美、规律美…….包括这里要讲的渐变。渐变给人一种舒缓的感觉，它不那么的突兀，给人一种不逼迫、缓缓地感觉。CSS3中引入了渐变的这个词，在CSS3中目前的渐变分为线性渐变和径向渐变。听说还有角向渐变，但那是以后的事。这里我们就来探一下线性渐变和径向渐变...
2018-02-19 17:18:56
2040
原创 科技生活
前些日子，去小餐馆吃饭，扫码支付，因为不久前我买了一个小米手表，其中绑定了支付宝支付，所以想试试到底有多便利，就用手表付的款。老板惊奇的看着我问：手表也可以支付？我自豪感十足的对她笑笑。随着“嘟”的一声，交易完成。然后就等着我的美食出锅……期间我和老板进行了简短的对话，下面是经过我美化的对话概要 老板：现在科技是越来越发达了，随便带着一个手机一个手表就能到处吃喝玩乐。 我：（笑笑） ...
2018-02-15 00:50:01
324
原创 background简写属性
现在流行组合，什么歌唱团体，TFboys、至上励合等等。background属性也赶时髦，它也有组合。我们知道background有很多的单个属性，有background-position、background-repeat等，我们可以把这些background的这些属性简写到组合中
2017-12-10 00:29:42
4349
原创 CSS background-image属性
但凡牛掰人物出场，都伴随着“Duang”的特技，它们会不停的加特技，加特技，加特技。CSS背景图片的background-image就是这样一位牛人，它一登场肯定也会加“特技”。下面我们来看看它的“特技”；background-image属性值模式background-image的属性值模式就是用来给它加“特技”的。它的值模式有：url()模式linear-gradient()模式repeat
2017-12-08 21:47:44
45289
原创 程序秘籍
一点浩然气，千里快哉风！武林人士，你来我往，快意恩仇。武功，无形无影，攻守之道，秘籍之道，程序之道。 我有程序之秘籍，上书三字：内、外、心。内功 核心。汽车之于发动机，建筑之于地基，程序之于CPU。内功乃气，若无内功，汽车乃如废铁，建筑乃如石碓，程序乃如乱码。一切程序皆运行于CPU之处理，CPU机制乃程序运行之根本，深解CPU之机制，则益于驾驭程序。外功 技巧。汽车之于车轮，建筑之于框架，程序
2017-12-08 00:01:43
194
原创 玩
在程序员的世界，很流行“玩”这个字。一切都是玩，玩是一种心态。就在两年前，“玩”这个字，我只会用在游戏身上，玩魔兽世界，玩梦三国，玩LOL。那时，玩是一种体验，体验极致的快感，沉浸在体验之中。玩的时间久了，我渐渐为了玩而玩，于是在玩之中渡劫。随着境遇的变换，玩的方式也有了不同。小时候，玩捉迷藏，跳皮筋这些小游戏。稍微大一点，这些游戏已经不能满足玩的需求，于是开始玩足球，玩篮球。再大些，接触到了游戏机
2017-12-07 08:11:22
222
原创 CSS background-size属性
在生活中size无处不在，某些时候，size很重要……嗯嗯…….我说的是background-size，想歪的同学可以去静静的面壁了。先不管面壁的同学，我们来探探background-size的奥秘。小时候，看过《西游记》之后，做梦都在想着自己也能够拥有孙悟空那能大能小的金箍棒，感觉很是神奇。长大后才发现那只是童话故事，于是不再做梦。做了技术之后，我的梦又延续了，因为技术真的可以做到能大能小。bac
2017-12-06 11:43:45
1510
原创 CSS background-clip属性
Clip有“裁剪”的意思，，放到CSS的background中就是裁剪背景。当你看上一套西服，你非常喜欢，于是你一咬牙买了下来，却发现它并不合你的身，穿在你瘦小的身材上它显得有些肥大，这时你就需要裁剪。裁剪西服的工具是剪刀。转换场景，如果你发现背景不合适，裁剪的工具是什么呢？没错，就是这个background-clip。background-clip是CSS3的新属性。它就是一把剪刀，哪里不爽剪哪里
2017-12-05 09:48:48
2802
原创 CSS background-origin属性
我在讲解background-position属性时引出了背景图片坐标系的应用。当时说背景图片是相对于坐标原点定位的，而这个坐标原点就位于border-box区域的左上起点，其实这是不严谨的。因为那是默认情况下，而这里要讲解的background-origin属性就是控制这个坐标原点的位置的。Origin有“起源”的意思，而background-origin就有“背景图片起点”的意思。它是告诉浏览器
2017-12-02 20:38:48
12948
5
原创 CSS background-color属性
就color 这个单词就知道，background-color是设置背景颜色的。在CSS 中，它为背景容器设置纯色，这里的纯色指的是非渐变色。话说人靠衣装，马靠鞍。background-color让背景容器显得更加帅气。background-color属性的值有以下几种形式系统定义的颜色名HEX（十六进制）rgb()/rgba()hsl()/hsla()transparent系统定义的颜
2017-12-01 11:04:11
28816
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人