vue.js koa2 mysql_nodejs-koa2-mysql-sequelize-jwt

最新推荐文章于 2023-01-04 21:17:27 发布
最新推荐文章于 2023-01-04 21:17:27 发布
阅读量137 收藏 1
点赞数
文章标签： vue.js koa2 mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39974223/article/details/113516061
版权

BOBLOG-03.png

build-passing-brightgreen.svg

license-MIT-green.svg

一、项目介绍

完整的一套个人博客网站

技术栈：

服务端：Nodejs，框架Koa2

前端和后台模板：Vue.js

数据库：MySQL

完整包含技术：Node.js, Koa2, MySQL, Sequelize, JWT; Vue.js.

项目亮点：

前后端分离，服务器端使用Koa2做接口，前端和后台管理使用Vue.js

Koa2项目代码结构清晰，功能模块化开发。

使用ES6最新的技术栈，代码规范。

代码简单明了，适合新手和有经验开发的朋友。

使用Sequelize ORM管理数据库MySQL，JWT验证。

保持更新中.. 代码质量一直在提高。

已实现的功能模块：

权限

用户登录注册

JWT验证

权限组分配(开发中)

分类

无极限分类

分类增删改查

文章

文章增删改查

七牛上传图片

分类关联多文章

分页

软删除文章

前端网站

Vue.js

自己封装组件

积累的Vue.js经验搭建的开发框架

后台管理网站(Vue.js + iviews)

Vue.js

iviews组件

对网站的数据进行管理

喜欢或对你学习有帮助的话请点Star，Thanks！

二、如何学习和使用

2.1.首先克隆整套项目代码git clone:

git clone https://github.com/liangfengbo/nodejs-koa2-mysql-sequelize-jwt.git

2.1.服务端Node.js Koa2项目使用

2.1.1. 在根目录下，安装包，执行: npm install 命令

2.1.2. 需要在目录下的config文件下db.js配置本地数据库

// 重要一定要创建好数据库，且在config文件夹下的db.js配置好数据库。

const sequelize = new Sequelize('数据库', '数据库用户名', '数据库密码', {})

别忘了创建数据库，黑窗口登录msyql：create database '数据库用户名'

2.1.3. 开启服务 npm start；然后看到成功创建本地的数据库；浏览器打开：http://localhost:3000/ 即可以访问，但会有JWT权限提示。

2.2.前端项目使用

3.2.1. 在根目录下进入web项目：cd web，

3.2.2. 安装包，执行: npm install 命令，

3.2.3. 启动服务: npm run dev; 浏览器打开：http://localhost:8080/ 即可以访问。

2.3. 后台管理系统使用

3.2.1. 在根目录下进入admin项目：cd admin，

3.2.2. 安装包，执行: npm install 命令，

3.2.3. 启动服务: npm run dev; 浏览器打开：http://localhost:8081/ 即可以访问。

三、项目重点说明

项目结构：

根目录都是 Koa2 项目源代码，根目录下的 web 文件夹下都是前端项目源代码，根目录下的 admin 文件夹下都是后台管理系统的源代码。

服务端Koa2项目结构说明

前端项目，后台管理项目都是Vue.js写的，自己整理搭建的框架vue-cli-project，重点使用了Vuex管理api接口数据，推荐看一看，有什么好的建议或者改进欢迎留言issues，谢谢。

以下是整个项目结构，自己可以看代码研究看，有什么问题请留言issues：

└──

admin - 后台管理系统

bin

config - * 配置数据库

controllers - * 控制器，在这里处理前端发来的请求，以及数据。

middleware - * 中间件，在这里处理用户是否有权限操作

models - * 模型，对数据库进行增删改查操作都在这里

public/stylesheets

routes - * 路由地址

schema - * 对数据库进行建表等操作

views

web - 前端项目

.gitignore

LICENSE

README.md

app.js - * 路由

package-lock.json

package.json

start.json

四、相关文档：

五、部分接口说明

5.1.用户(管理员)接口

5.1.1.注册接口

地址：

/user/register

请求方式

POST

参数说明

参数

说明

必填

类型

username

用户名

是

String

password

用户名

是

String

email

邮箱

是

String

roles_id

角色ID

否

Number

示例(postman软件测试，自己下载测试)

http://localhost:3000/api/v1/user/register

参数一：username bobo

参数二：password bobo123

参数二：email itbo@163.com

创建成功

{

"code": 200,

"msg": "创建用户成功",

"data": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImxpYW5nZmVuZ2JvIiwiaWQiOjMsImlhdCI6MTU0MzM4MjAwOCwiZXhwIjoxNTQzMzg1NjA4fQ.-AEyGpqf5l7uKdaHArEGpKC3L5wHRHSNkvcciVumhBo"

}

5.1.2.登录

地址

/user/login

请求方式

POST

参数说明

参数

说明

必填

类型

username

用户名

是

String

password

用户名

是

String

示例(postman软件测试，自己下载测试)

http://localhost:3000/api/v1/user/login

参数一：username bobo

参数二：password bobo123

创建成功

{

"code": 200,

"msg": "登录成功",

"data": {

"id": 3,

"username": "liangfengbo",

"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImxpYW5nZmVuZ2JvIiwiaWQiOjMsImlhdCI6MTU0MzM4MjI2MiwiZXhwIjoxNTQzMzg1ODYyfQ.xsTAkURA8nx8cMS12IGAb5uU69-ipmkgfpk6fROV7Ec"

}

}

5.1.3.获取用户信息

地址

/user/info

请求方式

GET

参数说明

参数

说明

必填

类型

Authorization

JWT验证是报文headers带过来的token参数

是

String

在header发送中加入token传递格式为：

Authorization Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImxpYW5nZmVuZ2JvIiwiaWQiOjMsImlhdCI6MTU0MzM4MjI2MiwiZXhwIjoxNTQzMzg1ODYyfQ.xsTAkURA8nx8cMS12IGAb5uU69-ipmkgfpk6fROV7Ec，该token是由上面登录接口返回来的token

处理jwt验证时候，我添加了方法，凡是以下没有过滤的接口，都要带上token验证，否则报401权限不足错误。

// |-在根目录app.js文件下，过滤不用jwt验证

// 此接口列表，过滤不用jwt验证

// 此接口列表，过滤不用jwt验证

app.use(jwt({secret: secret.sign}).unless({

path: [

// 文章列表

/^\/api\/v1\/article\/list/,

// 文章详情

/^\/api\/v1\/article\/detail/,

// 文章搜索

/^\/api\/v1\/article\/search/,

// 上传token

/^\/api\/v1\/upload\/token/,

// 注册

/^\/api\/v1\/user\/register/,

// 登录

/^\/api\/v1\/user\/login/,

// 分类列表

/^\/api\/v1\/category\/list/,

// 分类文章

/^\/api\/v1\/category\/article/,

// 分类列表

/^\/api\/v1\/category\/article\/list/

]

}))

示例

http://localhost:3000/api/v1/user/info

返回成功信息

{

"code": 200,

"msg": "查询成功",

"data": {

"id": 3,

"username": "liangfengbo",

"email": "itbo@163.com"

}

}

最后

项目已实现登录注册接口，文章增删改查，分页，查询以及分类增删改查，无极限分类等接口，自己可以根据项目代码学习，以及到postman软件中测试或学习；喜欢或对你有帮助的话请点star或有您有更好的建议和意见，请提出来告知我，可以留言issues。

希望能够帮助到你学习！Thanks！

License

Copyright (c) 2018 Fengbo Liang

weixin_39974223
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
koa2-vue-ssr-template：具有SSR呈现和Koa2 API的VueJS入门套件
02-04
Koa2-API Vue.js + SSR Sequelize-用于安全的数据库查询和可重用模型配置-更好的环境配置Axios-用于基于统一Promise的HTTP请求（客户端和服务器）发展： npm run dev 建立： npm run build 生产： npm run start ...
koa+mysql项目中Sequelize配置
福小娟儿的博客
03-09 306
项目涉及到的文件 第一步配置自己项目数据库的基础文件config下的devConfig.js (此处名字不重要，根据自己的实际情况即可) var devConfig = { environment: 'dev', data:{ host: 'localhost',// 主机名 username: 'root', // 用户名 password: '123456', port: '3306', // 端口号，MySQL默认3306 database: 'testnode',// 使用
koa2 mysql项目教程_blogs: Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站...
weixin_34963576的博客
02-17 286
一、这是个什么的项目？基于 Node.js Koa2 实战开发的一套完整的博客项目网站，使用 Koa2 二次开发一套适合多端的 RESTful API，同时配套完整的后台管理系统，且前端展示既有基于 ejs 服务端渲染，也有基于 Vue.js 前后端分离的 2 套前端网站。二、项目包含什么功能？2.1.Node.js Koa2服务端 RESTful API管理员与权限控制接口文章管理接口评论/回复...
vue2+node（koa2）+mongodb（mongoose）前后端访问
~~
03-04 1247
一、服务端-koa2 1、koa-generator搭建koa2项目 首先使用koa脚手架搭建好基础的框架，具体步骤，见：https://blog.csdn.net/qq_40323256/article/details/109256624 2、封装mongoose连接池 安装mongoose包 cnpm i -S mongoose 在根目录下新建db.js //db.js let mongoose = require('mongoose') mongoose.set('useCrea
【享你所想】Nodejs+koa+vue 博客系统开发教程+源码
classbao-cn与您分享
01-04 273
Nodejs+koa+vue 网页端平台开发教程
微信公众号小程序实战开发vue3+nodejs+koa2+mysql+nginx阿里云部署教程
weixin_41687718的博客
05-06 2618
本课程的视频教程同步持续更新中 本课程通过开发微信公众号的实战学习，对接淘宝客系统开发出一套微信公众号自动找淘宝、天猫内部优惠券的系统，同时打通微信公众号对接小程序的云开发。使用到的技术栈有：vue3 + nodejs + koa2 + nginx服务器https后台部署 + mysql数据库等 第一课 课程介绍 一、课程背景及痛点 开发本课程目的是用javaScript开发一套可以实战运营的微信公众号和小程序系统，让前端开发的初学者甚至有经验的开发者学到最新的前端知识的同时能开发一套属于自己的能够上线
don-blog：一个基于Vue.js + Nuxt.js + SCSS + ES67 + Node.js + Koa.js + MySQL + Redis开发的个人博客
02-03
技术栈Vue.js + Nuxt.js + SCSS + ES6 / 7 + Node.js + Koa.js + mySql + Redis访问地址扫码访问：项目运行# clone projectgit clone https://github.com/XNAL/don-blog.git# install dependencies$ npm install # ...
博客：我的博客由Vue.js和Koa提供支持
02-03
vue + koa博客 在开始该项目之前，请确保已安装MongoDB。 快速开始 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev && node app.js # build for production with ...
naice-blog-koa：博客后台node-koa
01-31
服务器节点+柯阿+猫鼬路由用了装饰器包装，鉴别参数是否正确登录权限jwt百度sro推送，邮件通知pm2自动化部署nginx + ssl + http2缓存....未来可能加入网易云音乐移动适应页面数据可视化统计React性的....如在浏览中
这是一个全栈完整项目uniapp小程序+vue后台管理系统+node.js完整项目+mysql数据库
07-09
uni-app+webpack+vue+axios+node.js+express+mysql 小程序端项目描述 **具体模块的实现：**轮播图与招聘车队的展示、赛事规则与精彩十佳球的查看、赛赛车队人员信息的查看、流程页面采用触底页进行渲染、用户登录...
Koa+mysql后台框架
09-12
使用koa2+mysql搭建的后台管理系统,封装了mysql的常规用法,支持分页查询,
web全栈后台权限管理系统（VUE+ElementUi+nodeJs+koa2）
xdididi的博客
10-15 852
web全栈后台权限管理系统（VUE+ElementUi+nodeJs+koa2） 主要技术 前端 vue 全家桶 ElementUI 后端 Node.js Koa2 Mongoess 数据库 mongodb 介绍 基于 VUE+Node.js 后台权限管理系统。采用简单的 rbac 模型（既权限与角色相关联，用户通过成为适当角色的成员而得到这些角色的权限）；主要对菜单与按钮进行权限控制。 页面 登录页 菜单管理 用户管理 角色管理 使用 后端 安装mongodb 参
nodejs中执行Shell命令（koa+vue）
weixin_30588675的博客
06-28 1285
nodejs中怎么执行系统命令或者linux命令来完成一些功能呢？ 假设有这样一个需求，在页面中，点击按钮重启服务，升级系统之类的，服务是部署在linux下的C++项目。需要发送请求到web后台，web后台中来执行Linux命令实现重启或者升级服务的功能。刚好在工作中遇到了这样的问题，做一个简要记录。 先查了一部分资料http://nodejs.cn/api/child_proc...
Vue+koa+node 结合element Ui 实现后台图片上传数据库
qq_46019581的博客
03-07 955
最近用vue 和node，koa写后台管理项目，后台用element ui 上传图片时，遇到很多坑，查了很多方法，解决后尽可能详尽的记录了下来 1.node部分 //npm 下载 const bodyParser = require("koa-bodyparser"); const multer = require("@koa/multer"); const cors = require("koa-cors"); app.use(cors()); //跨域插件 app.use(bodyParser())
vue3+node(koa2)写一个网站(二)-node篇
海阔天空
11-08 630
使用koa2框架来开发，使用方式如下： npm install koa-generator -g koa2 project-name cdproject-name npm install 然后npm run dev就可以跑起来了。 1.其他环境的搭建 需要安装redis、MySQL客户端（本地调试需要用到），安装方法可在网上搜索。 还可以安装Workbench客户端，MySQL图形化管理工具，操作起来比较方便。 npm install cross-env --save-dev 设置环境变量 //.
从node+koa后端模板引擎渲染到vue+node+koa+ajax前端请求
weixin_43443341的博客
09-20 750
koa-swig模板引擎开发和vue前端框架开发对比
Koa2+Echarts+vue可视化项目
Liangyl8818的博客
04-03 284
koa使用 快速上手koa 创建koa_study文件夹，该文件夹下启动cmd。 创建app.js文件 和 package.json //app.js // 导入koa，和koa 1.x不同，在koa2中，我们导入的是一个class，因此用大写的Koa表示: const Koa = require('koa'); // 创建一个Koa对象表示web app本身: const app = new Koa(); // 对于任何请求，app将调用该异步函数处理请求： app.use(async (ctx, n
Vue3.0+ElementPlus+Koa2搭一个全栈后台管理模板项目！！！！！
WoSNBBCSDN的博客
03-01 666
https://github.com/MrDotYan/vue3.0-elemenplus-admin-template.git
​"user" is not exported by "../../../../uniapp-FRD_v1.0/common/mysql_q.js", imported by "../../../../uniapp-FRD_v1.0/pages/login.vue".​
最新发布
11-17
这个错误提示表明在文件"../../../../uniapp-FRD_v1.0/pages/login.vue"中导入的"../../../../uniapp-FRD_v1.0/common/mysql_q.js"模块中的"user"未被导出，因此无法在"../../../../uniapp-FRD_v1.0/pages/login.vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值