关于前端:VueKoa2全栈撸win10风格管理系统交个朋友系列1

vue-win10-admin

这可能是目前惟一一个用 Vue+Koa 构建较为残缺 windows10 格调的开源前后端集成的管理系统(成果如下图)
前端 Vue + Vuex + Vue-Router + Element+UI
后端 Node + koa2 + Sequelize
数据库 mysql

【vue-koa2 全栈撸 win10 格调管理系统】交个敌人系列文章，带各位全栈撸 win10 格调管理系统开发，当然我的项目也参考很多优良的前后端我的项目构建计划（比方 vue-element-admin、win10ui、winadmin、BBS_node）和我在工作中的一些中的一些教训利用，次要是交个敌人的心态，如果你对这个我的项目有趣味，也心愿你的退出一起欠缺保护这个我的项目，let go~~~

残缺我的项目地址：vue-win10-admin

序号	性能	性能	形容
0	前端零碎性能	开发中	仪表盘工作台、剖析页面、主题设置
1	前端零碎 UI	已实现	win10 格调桌面零碎：仿开始菜单、快捷菜单、任务栏、音讯、反对窗口大小拖动（有小 bug 待修复）
2	前端性能	已实现	(1)登录、动静菜单和权限生成 (2) 零碎设置：权限设置、角色设置、用户设置、系统日志 (3) 平台治理：桌面背景设置
3	后端	已实现	跨域解决、token 对立拦挡、权限拦挡、路由合并、根本实现相干性能的 API 开发

Vue3 公布后会思考同步更新，TS 重写，mock 数据的搭建，更多其余乏味的性能开发~

毛糙画了个技术栈图，大略意思一下

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

├── 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 配置文件

咱们看到 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 命令 同时开启多个监听服务，而且如果一个过程服务失败，其余过程服务依然持续运行，甚至不会留神到其中的区别，赞~

步骤一、创立一个空的 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 加密)

接下来就能够欢快的游玩了~

【vue-koa2 全栈撸 win10 格调管理系统】交个敌人系列（1）- 根底阶段，次要讲述：我的项目框架搭建思维和我的项目运行相干的配置。目前曾经开发完一个根底我的项目，接下来【vue-koa2 全栈撸 win10 格调管理系统】交个敌人系列文章，会依据我的项目搭建和讲性能点实现，欢送大家一起交换~

关于前端:VueKoa2全栈撸win10风格管理系统交个朋友系列1

前言

本篇文章是【vue-koa2 全栈撸 win10 格调管理系统】交个敌人系列（1）- 根底阶段，次要讲述：我的项目框架搭建思维

一、目前我的项目状况

二、我的项目瞻望

二、我的项目技术架构

三、我的项目搭建

（0）我的项目初始化

（1）我的项目目录

（2）我的项目运行介绍

（3）我的项目启动

三、总结