个人博客 / 用于记录自己的生活
后台系统推荐
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
注意事项：
- 修改服务器中nginx.config
在server：listen 80中增加：
location /api/ {
proxy_pass https://127.0.0.1:7001/;
}
- 修改接口设计文件api
设置接口路径url
const findAll = () => {
return request({
url: '/api/users/findAll',
method: 'get'
});
};
1. 后台新增ToDo管理页面
2. 后台新增用户管理
3. 后台新增建站日志
4. 文章新增评论点赞功能
5. 其他小项目
……
1. 2022/04/14 项目架构重构
2. 2022/04/19 项目前后端部署
3. 2022/04/24 项目语法升级至vue3+ts
3. 2022/09/05 项目1.0完成
4. 2023/01/30 项目后端工作台基本完成
道阻且长