node.js
文章平均质量分 97
旅行者1024号
穷则在家呆着,达则四处溜达
展开
-
vue+Nodejs+Koa搭建前后端系统(十)--实战之更新用户信息
本篇为实战篇,干货不多。基于上篇实现的上传图片接口,可以实现下更新用户信息功能,实现后的前端效果如下图:代码如下:1.修改http.ts文件代码:2.修改Pinia仓储3.头像下拉弹窗中链接列表数据顶部用户头像下拉弹窗区域自定义弹窗组件先写一个通用的弹窗组件,有利于弹窗行为的统一性,本组件采用了animate动画,所以需要引入一下animate.css1.安装animate.css2.引入animate.css3.编写通用的弹窗组件通用弹窗组件写完,就可以写具体的弹窗了4.设置型弹窗组原创 2024-04-01 13:51:34 · 461 阅读 · 0 评论 -
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 · 824 阅读 · 1 评论 -
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 · 408 阅读 · 0 评论 -
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 · 302 阅读 · 0 评论 -
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 · 1092 阅读 · 0 评论 -
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 · 1038 阅读 · 0 评论 -
vue+Nodejs+Koa搭建前后端系统(四)--安装MYSQL
计算机系统为Windows 10 专业版MYSQL采用压缩版安装,版本为 v8.0.32。原创 2023-05-06 13:24:31 · 738 阅读 · 0 评论 -
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 · 1780 阅读 · 0 评论 -
vue+Nodejs+Koa搭建前后端系统(二)--koa-generator创建项目及分析
采用上一篇vue+Nodejs+Koa搭建前后端系统(一)–简易版创建的项目目录的基础上,创建新的后端服务项目server2使用脚手架创建后端项目计算机系统为Windows 10 专业版小说中,终成眷属一般就结局了,但现实是生活一直在继续,我们一直在调试生活的方式来满足我们有恃无恐的安全感。上一篇只是简单地搭建了后端服务器。这回我们要利用koa的脚手架搭建后端项目框架。原创 2023-04-15 12:00:00 · 1141 阅读 · 0 评论 -
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 · 1254 阅读 · 0 评论