关于vue.js:项目实战SpringBootvueiview打造一个极简个人博客系统

我的项目介绍

集体极简博客

【集体极简博客】是一个实用于初学者学习的博客零碎，其中蕴含文章分类、写文章、标签治理、用户治理等根底性能，代码简洁正文欠缺，易上手学习。技术栈基于SpringBoot+MybatisPlus+vue+iview等更多优良组件及前沿技术开发，正文丰盛，代码简洁，开箱即用。极其适宜尝试全栈开发及实战练手训练也能够当作毕业设计进行二次开发，是个轻松学习的好机会。

<p align="center">

<p align="center">    <a href="https://cn.vuejs.org/">        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2cbacee30e364a079bc858c759e35be8~tplv-k3u1fbpfcp-zoom-1.image" alt="iview">    </a>     <a href="https://www.uviewui.com/">        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1be593e8e6ff4596998f36c336ac5cbc~tplv-k3u1fbpfcp-zoom-1.image" alt="iview">    </a>     <a href="https://shiro.apache.org/">        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/139b927a083d4748b5114e3c5d85b0b4~tplv-k3u1fbpfcp-zoom-1.image" alt="shiro">    </a>     <a href="http://spring.io/projects/spring-boot">        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09465b4cc1094e68b870996769876b8b~tplv-k3u1fbpfcp-zoom-1.image" alt="spring-boot">    </a>    <a href="http://mp.baomidou.com">        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d85f9c1d28564a9dad89e9b662a23790~tplv-k3u1fbpfcp-zoom-1.image" alt="mybatis-plus">    </a>       <a href="http://hutool.cn/">        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24ad29ffa17b45358ff0b9359ca4c05b~tplv-k3u1fbpfcp-zoom-1.image" alt="mybatis-plus">    </a>     <a href="./LICENSE">        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b12324744e654191adb46ed5465dc6fd~tplv-k3u1fbpfcp-zoom-1.image" alt="license Apache 2.0">    </a></p>

</p>

疾速链接

公众号：JavaDog程序狗

关注公众号，发送 【blog】或【博客】，无任何套路即可取得

体验地址

拜访地址

集体极简博客

http://myblog.javadog.net

猜你喜爱

文章举荐

【我的项目实战】SpringBoot+uniapp+uview2打造H5+小程序+APP入门学习的聊天小我的项目

【我的项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序

【模块分层】还不会SpringBoot我的项目模块分层？来这手把手教你！

【ChatGPT】手摸手，带你玩转ChatGPT

【ChatGPT】SpringBoot+uniapp+uview2对接OpenAI，带你开发玩转ChatGPT

猜你想问

1.如何熟练掌握全栈技术

2.如何将学到的常识利用理论我的项目

关注公众号【JavaDog程序狗】，任何留言发问我都会一一回复，如果有须要能够间接分割我，有问必答

次要功能模块

️模块思维导图

web前端页面

首页

用户通过域名根门路拜访，如http://myblog.javadog.net/，查看首页文章列表，以时间轴模式展现已公布的文章

文章详情

用户通过文章列表点击后，跳转文章详情，其中蕴含文章题目、分类、标签、公布工夫等

⛄admin后盾治理

用户拜访http://myblog.javadog.net/#/admin，如果登录受权过则跳转后盾，否则跳转登录注册页

注册

未创立后盾用户时，填入用户名、明码、确认明码进行注册

登录

已创立后盾用户时，填入用户名、明码进行登录

首页

登陆后默认关上【admin欢送页】，前期可依据访问量进行首页大屏剖析图展现迭代

文章

所有文章

点击【所有文章】，展现所有文章列表，列表蕴含题目、状态、分类、标签、拜访、公布工夫等，操作列中蕴含预览、编辑、删除等按钮

分类目录

点击【分类目录】，左侧展现所有表单名称、形容，可新增更新；右侧展现分类列表

写文章

点击【写文章】，其中蕴含markdown编辑器，文章题目，点击【公布】后，弹出文章设置，表单包含文章题目、分类、标签、摘要，可点击公布或者抉择搁置草稿箱

标签

点击【标签】，左侧展现表单标签名、色彩，可新增更新；右侧平铺展现标签

用户

个人资料

点击【个人资料】，左侧展现个人信息表单包含头像、昵称、性别、出生日期、简介，可进行更新；右侧展现批改密码表单包含原始明码、新密码、确认明码，可进行明码批改

组件

后端组件

前端组件

代码结构图

后端代码

前端代码

️疾速启动

启动前端

1. 在blog-web我的项目目录下下载依赖

   npm install 或者 cnpm install  

   2. 依赖下载胜利后，在blog-web我的项目目录下启动我的项目

      npm run serve

2. 启动胜利
   

   ---

启动后端

1. 开发工具内配置好，并将maven配置好，倡议应用阿里云镜像
2. 抉择激活对应的环境，如本地则可应用dev

3. 将blog-boot根门路下的/db/db_blog.sql进行本地执行，并在application配置文件中批改数据库配置
   

4. 运行启动SpringBoot我的项目，如见到以下日志即为启动胜利

体验

总结

本篇文章以实战我的项目模式进行开展，适宜咱初学者进行理论开发体验，纯熟SpringBoot+vue同时，也加深分层的思路。上手全栈开发，体验实操的快感。我的项目虽小，但五脏俱全。心愿大家在学习的同时，不要忘了点赞关注不迷路呦。

Tips

如有想拿此我的项目做毕设或用于学习之外用处时，肯定询问征求本狗意见，开源不易，增强版权意识。

优良案例

询问一下，略显尊重