关于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

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

优良案例

询问一下，略显尊重