MuYuCat's Blog

个人博客 / 用于记录自己的生活

后台系统推荐2230px(24寸)屏幕进行浏览，不同尺寸或存在适配问题

技术栈

Vue 3 + Typescript + Vite + Element-Plus

代码架构

Blog
├─ .editorconfig               // 帮助开发者定义和维护代码风格
├─ .eslintrc.js                // 检查js/ts代码规范
├─ .gitignore                  // git忽略文件列表
├─ .prettierrc                 // 格式化代码
├─ README.md
├─ auto-imports.d.ts           // 自动引入
├─ components.d.ts             // 自动引入组件
├─ index.html                  // 根页面
├─ package.json                // npm包
├─ public
│  └─ Mlogo.png                // 页面图标
├─ src
│  ├─ App.vue                  // VUE主页面
│  ├─ api
│  │  ├─ article.ts            // 文章相关api
│  │  ├─ baota.ts              // 宝塔相关api
│  │  ├─ dict.ts               // 字典相关api
│  │  ├─ home.ts               // 主页面相关api
│  │  ├─ log.ts                // console.log设置
│  │  ├─ map.ts                // 定位相关api
│  │  ├─ poetry.ts             // 诗歌相关api
│  │  ├─ request.ts            // axios封装
│  │  ├─ user.ts               // 登陆相关api
│  │  └─ weather.ts            // 天气相关api
│  ├─ assets
│  │  ├─ font                  // 字体静态文件
│  │  ├─ icons                 // 图标静态文件
│  │  └─ images                // 图片静态文件
│  ├─ components
│  │  ├─ avatar.vue            // 用户头像组件(x)
│  │  ├─ banner.vue            // banner组件
│  │  ├─ clickPage.vue         // 点击页面效果展示组件
│  │  ├─ footer.vue            // 底边栏组件
│  │  ├─ header.vue            // 头边栏组件
│  │  ├─ headerTab.vue         // 头边栏路由切换组件
│  │  └─ sidebar.vue           // 侧边栏组件
│  ├─ config
│  │  ├─ host.ts               // 规定的host配置
│  │  └─ dict.ts               // 规定的字典配置
│  ├─ content.ts               // 规定的字段配置
│  ├─ env.d.ts
│  ├─ interface
│  │  └─ index.ts              // 接口规范配置
│  ├─ main.ts                  // 页面主逻辑
│  ├─ router
│  │  ├─ error.ts              // 错误页面路由
│  │  ├─ index.ts              // 路由主页面
│  │  ├─ web-bs.ts             // 后台路由
│  │  └─ web-fs.ts             // 前台路由
│  ├─ store
│  │  ├─ baota.ts              // 宝塔数据存储
│  │  ├─ index.ts              // 存储主页面
│  │  ├─ map.ts                // 地图数据存储
│  │  ├─ permission.ts         // 权限数据存储
│  │  ├─ poetry.ts             // 诗歌数据存储
│  │  ├─ user.ts               // 用户数据存储
│  │  └─ weather.ts            // 天气数据存储
│  ├─ styles
│  │  ├─ common.scss           // 公共样式
│  │  ├─ el-table.scss         // el-table样式
│  │  ├─ font.scss             // 字体样式
│  │  ├─ form.scss             // 表单样式
│  │  ├─ icons.scss            // icon样式
│  │  └─ img.scss              // 图片样式
│  ├─ utils
│  │  ├─ fixStyle.ts           // 修改数据样式方法
│  │  ├─ map.ts                // 获取定位的方法
│  │  ├─ permission.ts         // 判断权限的方法
│  │  ├─ poetry.ts             // 获取诗歌的方法
│  │  ├─ showLog.ts            // 展示console.log的方法
│  │  ├─ track                 // 自定义指令，进行埋点
│  │  │  ├─ consig.md
│  │  │  ├─ index.ts
│  │  │  └─ method.ts
│  │  ├─ weather.ts            // 获取天气的方法
│  │  └─ weatherConfig.ts      // 天气的说明
│  ├─ web-bs                   // 后台页面
│  │  ├─ components
│  │  │  └─ crumb.vue          // 头部面包屑
│  │  ├─ utils
│  │  │  └─ baota.ts           // 宝塔调用方法(x)
│  │  └─ views
│  │     ├─ articleMgt         // 后台文章管理
│  │     │  └─ index.vue
│  │     ├─ articleView        // 后台文章查看
│  │     │  ├─ config.ts
│  │     │  └─ index.vue
│  │     ├─ baoTaInfo          // 后台宝塔信息(x)
│  │     │  └─ index.vue
│  │     ├─ home               // 后台工作台
│  │     │  └─ index.vue       
│  │     ├─ markDown           // 后台文章编辑
│  │     │  ├─ config.ts
│  │     │  └─ index.vue
│  │     └─ materialMgt        // 后台素材管理
│  │        ├─ components
│  │        │  ├─ addSub.vue
│  │        │  └─ changeRank.vue
│  │        └─ index.vue
│  └─ web-fs                   // 前台页面
│     ├─ components
│     │  └─ login.vue          // 前台登陆弹窗(x)
│     └─ views
│        ├─ 404.vue            // 前台404
│        ├─ Demo.vue           // 前台demo
│        ├─ blogList           // 前台文章列表
│        │  └─ index.vue
│        ├─ blogView           // 前台文章查看
│        │  └─ index.vue
│        ├─ home               // 前台主页面(跳转文章列表)
│        │  └─ index.vue
│        ├─ login              // 前台登陆页面
│        │  └─ index.vue
│        └─ materialList       // 前台素材页面
│           └─ index.vue
├─ tsconfig.json               // ts配置
├─ tsconfig.node.json
├─ vite.config.ts              // vite项目配置
└─ yarn.lock

前端页面部署

注意事项：

1. 修改服务器中nginx.config

  在server：listen 80中增加：
  location /api/ {
    proxy_pass http://127.0.0.1:7001/;
  }

2. 修改接口设计文件api

  设置接口路径url
  const findAll = () => {
    return request({
      url: '/api/users/findAll',
      method: 'get'
    });
  };

待办

  1. 后台新增ToDo管理页面
  2. 后台新增用户管理
  3. 后台新增建站日志
  4. 文章新增评论点赞功能
  5. 其他小项目
  ……

logs

  1. 2022/04/14 项目架构重构
  2. 2022/04/19 项目前后端部署
  3. 2022/04/24 项目语法升级至vue3+ts
  3. 2022/09/05 项目1.0完成
  4. 2023/01/30 项目后端工作台基本完成

道阻且长