Skip to content

xiaobinwu24/vue_blog

 
 

Repository files navigation

开发一个简单的个人博客

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

Image text Image text

项目结构

 -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 为自己的后端接口地址

About

vue 开发个人博客

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 55.2%
  • JavaScript 36.6%
  • HTML 4.0%
  • Less 3.6%
  • CSS 0.6%