1. 首页
  2. IT资讯

【Vue+Koa2+Mysql全栈撸win10风格管理系统】交个朋友系列

前言

这可能是目前唯一一个用Vue+Koa构建较为完整windows10风格的开源前后端集成的管理系统(效果如下图)

  • 前端 Vue + Vuex + Vue-Router + Element+UI
  • 后端 Node + koa2 + Sequelize
  • 数据库 mysql【Vue+Koa2+Mysql全栈撸win10风格管理系统】交个朋友系列文章,带各位全栈撸win10风格管理系统开发,当然项目也参考很多优秀的前后端项目构建方案(比如vue-element-admin、win10ui、winadmin、BBS_node)和我在工作中的一些中的一些经验应用,主要是交个朋友的心态,如果你对这个项目有兴趣,也希望你的加入一起完善维护这个项目,let go~~~

【Vue+Koa2+Mysql全栈撸win10风格管理系统】交个朋友系列

完整项目地址:vue-win10-admin

#### 本篇文章是【Vue+Koa2+Mysql全栈撸win10风格管理系统】交个朋友系列(1)-基础阶段,主要讲述:项目框架搭建思想以及项目构建

一、目前项目情况

序号功能功能描述
0前端系统功能开发中仪表盘工作台、分析页面、主题设置
1前端系统UI已完成win10风格桌面系统:仿开始菜单、快捷菜单、任务栏、消息、支持窗口大小拖动(有小bug待修复)
2前端功能已完成(1)登录、动态菜单和权限生成
(2)系统设置:权限设置、角色设置、用户设置、系统日志
(3)平台管理:桌面背景设置
3后端已完成跨域解决、token 统一拦截、权限拦截、路由合并、基本完成相关功能的API开发

二、项目展望

Vue3发布后会考虑同步更新,TS重写,mock数据的搭建,更多其他有趣的功能开发~

三、项目技术架构

粗糙画了个技术栈图,大概意思一下

【Vue+Koa2+Mysql全栈撸win10风格管理系统】交个朋友系列
## 四、项目搭建

(0)项目初始化

开发环境: 安装 node + mysql,项目框架是由vue-cli 构建的
编译器: Visual Studio Code(个人习惯,其他也可)
数据库可视化工具: Navicat for MySQL(个人习惯,其他也可)
接口调试工具: Postman(个人习惯,其他也可)

(1)项目目录

├── public // 项目前端html模板
├── server // 服务端源代码
│   ├── config // 服务端基础配置
│   │    ├── config.js // 数据库信息配置和密钥
│   │    ├── db.js // 配置Sequelize的数据库链接
│   ├── controllers // 控制器
│   ├── module // 数据表模型
│   ├── routes // 服务端路由
│   ├── utils // 服务端封装的基础工具
│   ├── validate // 服务端请求参数校验文件
│   ├── app.js // 服务端启动文件
├── src // 前端源代码
│   ├── api // 前端所有请求
│   ├── assets // 前端主题 字体等静态资源
│   ├── components // 前端全局公用组件
│   ├── dictionary // 前端字典
│   ├── filtres // 前端全局 filter
│   ├── layout // 前端基础公共布局
│   ├── mock // 前端项目mock 模拟数据
│   ├── router // 前端路由
│   ├── store // 前端全局 store管理
│   ├── styles // 前端全局样式和字体图标
│   ├── utils // 前端全局公用方法
│   ├── views // 前端view
│   ├── App.vue // 入口页面
│   ├── main.js // 入口 加载组件 初始化等
│ ├── permission.js // 权限管理
│ └── settings.js // 基础设置
├── .env.development // 开发环境全局变量配置
├── .env.prod // 生产环境全局变量配置
├── .env.test // 测试环境全局变量配置
├── babel.config.js // babel 配置项
├── package.json // package.json
├── .gitignore // git 忽略项
└── vue.config.js // vue配置文件

(2)项目运行介绍

我们看到 package.json文件

  "scripts": {
    "dev": "vue-cli-service serve",
    "server": "nodemon server/app",
    "start": "concurrently -k "npm run server" "npm run dev"",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  • dev 是启动前端项目,方便单独开发前端
  • server 是启动服务端,方便单独开发服务端
  • start 是同时启动服务端和前端服务

值得一提是这里用了同时启动服务端和前端服务的方案
concurrently插件,这样可以让npm script命令同时开启多个监听服务,而且如果一个进程服务失败,其他进程服务仍然继续运行,甚至不会注意到其中的区别,赞~

(3)项目启动

步骤一、创建一个空的mysql数据库(如:db_win),可以直接导入创建数据库和数据, 在’server/mysql/db_win.sql’步骤二、在server/config/config.js修改相关数据库配置

const config = {
  // 启动端口
  port: 3000,
  //秘钥
  secret:'win10',
  // 数据库配置
  database: {
    dbName: 'db_win',
    host: 'localhost',
    port: 3306,
    user: 'root',
    password: '123456@cao',
    timezone: '+08:00'
  }
}

module.exports = config

登录账号:root, 密码:root (数据库存的密码进行了md5加密)

接下来就可以愉快的玩耍了~

五、项目拓展

1、 添加新页面

现在⽂件 src/router/asyncRoutes.js 中按照其他路由的格式添加新的⻚⾯,添加完成后在使⽤管理员账号在系统设置-权限设置中新增权限,菜单的路径与上述⽂件配置中的name字段对应,必须保持⼀致

2、 添加新功能

功能是依附于菜单的,需要先配置系统设置-权限设置 才能在菜单下⾯挂功能接⼝

3、 添加或者更新新数据库表

server/model 里对应添加数据库模型,根据模型自动创建表,只需要建完模型后,把server/config/db.js 里把下面这段代码放开,运行 npm run server或者npm run start ,看到 init db ok,说明数据库表更新完~

// sequelize
//   .sync({alter: true} )
//   .then(() => {
//     console.log('init db ok')
//   })
//   .catch(err => {
//     console.log('init db error', err)
//   })

3、 添加功能接口

六、总结

【Vue+Koa2+Mysql全栈撸win10风格管理系统】交个朋友系列(1)-基础阶段,主要讲述:项目框架搭建思想和项目运行相关的配置。目前已经开发完一个基础项目,接下来【Vue+Koa2+Mysql全栈撸win10风格管理系统】交个朋友系列文章,会根据项目搭建和讲功能点实现,欢迎大家一起交流~

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/199460.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code