llllb / vue_blog

vue 开发个人博客

开发一个简单的个人博客

整体风格上，我对设计没有太多的见解，做的时候参考了好多网上现有的博客，总体喜欢简约。

项目结构

 -src
   -assets 			//公共 css js  img
 -components		//公共组件 封装
 	-card 			//博客基本信息卡片组件
 	-footer			//页脚
 	-nav			//页头
 -router			//路由
 -utils				//工具类
 -views				
 	-author			
 	-code
 	-essaydetail		//博客信息页
 	-home			
 	-labels
 	-life
 	-message		//留言

用到的技术

前端

vue + vue-router + axios + element ui框架的样式 + aos.css 动画 + less + media 媒体查询 自适应 Web+H5

包含技术点：

1. axios请求封装
2. aos动画的使用
3. 博客代码高亮highlight
4. 基本组件封装
5. 父子组件传值
6. 路由传参
7. 传参加密
8. 同界面路由变更回到顶部 watch()
9. 媒体查询@media

后端

Java

springboot + mysql + mybatis + redis

包含技术点：（这对后端开发其实没啥技术点）

1. springboot+mybatis 实现基本增删改查
2. redis工具类
3. aop规范控制台日志
4. 统一返回 （code,msg,data）
5. Dockerfile 编写

服务（部署Java）

阿里云服务器 centos8 + docker + dockerfile + nginx+ mysql

包含技术点：

1. centos8 安装 docker。
2. docker + mysql 文件挂载、远程连接。
3. docker + nginx 文件挂载、负载、反向。
4. docker化 nginx后，SSL证书的配置。
5. dockerfile 文件，实现项目打包镜像。

" 基本实现了一个简单的个人网页 ： https://www.dahuangzi.work/ "

1、获取项目到本地

2、vscode 终端 输入 npm i 下载package.json中的依赖包

3、npm run dev 启动

4、修改 utils 下 https 中封装的 baseURL 为自己的后端接口地址