写在前面
- 前台预览地址：pickeddeng.club
- 后台管理地址：admin.pickeddeng.club/admin.php
- 用户名：admin 密码：123456
git地址
项目目录介绍
- blogs-express-api ---- express api接口
- api ---- api接口处理
- bin ---- 启动
- config ---- 配置信息
- routes ---- 后端路由信息
- blogs-manage ---- phpok后台管理界面
- _config 配置信息
- res ----资源文件存储文件夹
- tpl ---- 后端页面
- blogs-vue-web ---- vue前台博客展示界面
- src ----博客前台
- api ---- api请求接口
- assets ---- 静态文件 iconfont 等
- store ---- vuex 仓库
- views ---- 页面
- router ---- 前端路由
- src ----博客前台
- myblog.sql ---- 数据库sql 文件
- phpStudy.exe ---- 部署本地化服务工具
项目介绍
本着练手的初衷，编写了这个看上架构乱乱的系统（大佬可自行忽略本系统）。为了节约后台页面开发的时间，该项目由phpok模板搭建的统一后台管理，通过express读取数据表编写中间桥接API接口暴露给前台去请求。博客前台通过vue搭建，本人为前端对服务器等知之甚少，所以在线上部署的时候使用的都是比较基础的工具。
技术栈
- vue
- vuex
- express
- mysqls (处于便捷用mysqls替代了sequelize 去连接数据库)
- phpok
- 等
系统支持功能
- h5音乐播放器
- 动态多分类博客
- 博客置顶
- 博客标签
- 阅读数
- 富文本编辑
- 评论+回复
- 博主相册
- 友情链接
- 提交申请
- 链接审核
- 留言板
- 站点信息
- 打赏码
- ...
安装
- 新建一个数据库名称为 myblog 首先将myblog.sql 数据库文件导入到该数据库中
1、后台管理安装：
- 在blogs-manage -> _config -> db.ini.php 文件中第10、18、22行分别填入数据库配置host、user、pass；
- 拿phpstudy来举例（下载地址：www.xp.cn/download.ht…）将根目录下blogs-manage文件夹复制到本地开启的集成环境中，打开localhost/blogs-manage/admin.php可看到后台登录页。账号：admin 密码 123456
2、express 接口处理安装：
- 确保安装了node环境 cmd -> node -v 检擦是否已安装；
- 在blogs-express-api -> config -> db.js中 修改数据库链接配置
- 在blogs-express-api 下运行
npm i安装依赖 - cmd运行
npm start就可以启动api - 在文档中查看相应的接口文档进行个性化修改（自定义）
3 博客前台安装
- 在 blogs-vue-web文件夹下 cmd 运行
npm i安装项目依赖 - cmd 运行
npm run serve就可以看到，默认运行在localhost:8080
4、图片视频素材前缀配置
将blogs-manage后台管理文件部署完毕后例如部署后 在本地localhost/blogs-manage可打开，那么
- 1、需要在blogs-express-api -> config -> assetConfig.js 中修改前缀为
http://localhost/blogs-manage/注意 地址最后的/不要忘了 - 2、需要在blogs-vue-web -> src -> config -> config.js 中修改前缀为
http://localhost/blogs-manage/注意 地址最后的/不要忘了
