idea半天搭建属于自己的个人博客,支持二次开发,springboot+vue+mysql

        经过了半个月的折腾,虽然本其他事情耽误了,但也完成了这个轻量级博客的初期开发工作,实现了博客的核心功能,虽有许多不足,但只用于记笔记是绰绰有余的,前后端项目全是本人开发,大家可以随意二次开发下面介绍如何启动项目

项目链接

前端项目

后端项目

        拉取到本地后,请检查配置项是否正常,需要检查的地方如下:

前端方面

        

        打开localSave.js,全局配置的参数都保存在这里,请查看imageAddress的ip以及端口是否和后端一致,如果不一致,请把其内容改为"http://后端服务器ip:后端项目port/upload/image/",如两个项目只在本地运行,则只需跟下面一致即可

        打开vue.config.js

        请确定target指向的是后端项目运行的ip及端口(port),port:8088 表示前端项目使用8088端口:

 

 后端方面

        打开application.yml,请确保配置的后端运行  端口(port)、ip  与前端的imageAddress所指向的一致

         请确保图片保存路径指向的文件夹存在:

         请确保连接数据库的账户密码正确,这里有一个坑,password在本地运行正常,但部署到linux服务器时必须加引号,否则密码验证失败:

 数据库方面

        指向的数据库服务器中创建新库axinfree,将后端项目目录下的axinfree.sql导入到库中即可,请注意账户密码填写正确

部署到服务器

        如果需要将两个项目部署到linux的同学,在确保ip port配置正常且linux中已有完整的axinfree库,将前端后端项目打包然后在linux下运行即可,详细请看:

前端相关 

        点击此处运行前端项目打包程序,这个时间会比较久,稍等片刻就会生成一个dist文件夹

        将这个dist文件夹拿出来先放好,我们后续要用到它

后端相关

        idea的打jar包存在一些问题,我们直接使用maven的install就可以避免这个问题

         将目录下生成的jar包拿出来放好,我们后面要用到它

         一切准备就绪之后,打开你的虚拟机或者云服务器的终端界面,请确保它是可以正常连接互联网的

关于宝塔

        宝塔是一个非常好用的系统,使用起来也很方便

        使用 SSH 连接工具,如 堡塔SSH终端 连接到您的 Linux 服务器后, 挂载磁盘 ,根据系统执行相应命令开始安装(大约2分钟完成面板安装): 遇到问题?协助安装

//Centos安装脚本

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

Ubuntu/Deepin安装脚本

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec

//Debian安装脚本

wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && bash install.sh ed8484bec

//万能安装脚本

if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec

//国产龙芯架构安装脚本

wget -O install_panel.sh http://download.bt.cn/install/0/loongarch64/loongarch64_install_panel.sh && bash install_panel.sh ed8484bec

//注意:必须为没装过其它环境如Apache/Nginx/php/MySQL的新系统,推荐使用centos 7.X的系统安装宝塔面板

//推荐使用Chrome、火狐、edge浏览器,国产浏览器请使用极速模式访问面板登录地址

//如果不确定使用哪个Linux系统版本的,可以使用万能安装脚本

//国产龙芯架构CPU安装命令,支持龙芯架构的loongnix 8.x、统信UOS 20、kylin v10系统

        详细请看官方文档:宝塔下载

        下载过程比较漫长,稍作等待即可,请一定保存最后提示的宝塔访问地址,账号以及密码,妥善保管

        进入宝塔页面: 

        宝塔会提示你安装一些东西,请参考下面的配置,MySQL的版本高一点也没有问题:

        点击这里可以获取MySQL服务器root账户的密码,请使它和后端项目的配置保持一致

        

         点击上图绿色的按钮添加数据库,名称需是 axinfree,需要更改的同学可以自行更改,添加时只需要输入数据库的名字即可,其他的配置无需更改,点击下面的按钮后选择axinfree.sql文件导入数据库,确认数据正常后即可开始部署前后端项目:

        点击此处查看数据库情况

前端部署

        在网站添加新站点,域名如果没有可以直接使用服务器或者虚拟机的ip

         站点开启后,我们打开文件界面:

        在此目录下找到你刚刚创建的站点,然后进入其目录下,将你的dist文件上传到目录下即可:

 

        直接将文件夹拖拽到目录下即可

        然后回到网站设置:

        

        设置站点的项目目录,哦!是这熟悉的dist:

        对于nginx服务器,我们还有一些配置来避免问题:

        请添加圈中的配置,proxy_pass指定的是后端项目的http://ip:port/

         点击保存即可

后端部署

        这里需要安装tomcat或者jdk,我直接选择安装了tomcat9

         点击添加java项目,这里相对于一键部署有一个优势,它可以看到项目的输出日志,你可以把后端打包出来的jar包放到linux的任何地方,但是要记住它的路径,在下面选中它,请确保端口和后端项目配置的端口保持一致:

         提交后,等待片刻即可看到端口出显示出 刚刚输入的端口,如此就成功了,下面是运行结果图:

 

        如需调整布局美观,请查阅前端src/router目录下的路由配置,项目结构很简单就不在此介绍

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
非常感谢您的提问。关于开发基于Spring BootVue.js个人博客系统,通常需要采取以下步骤: 1. 安装Java Development Kit (JDK)和Node.js。Spring Boot需要Java环境,而Vue.js需要Node.js环境。 2. 下载并安装Spring Boot CLI (Command Line Interface)。使用Spring Boot CLI能够快速创建Spring Boot应用程序,并且可以提供许多有用的工具和命令。 3. 创建Spring Boot应用程序。您可以使用Spring Initializr来快速创建一个基于Spring Boot的工程。选择您需要使用的依赖项,然后下载并解压缩代码。 4. 设置数据库连接。您可以使用任何关系型数据库,例如MySQL或PostgreSQL。配置数据库连接相关的属性,然后创建并管理数据库。 5. 创建RESTful服务API。使用Spring MVC和Spring Data JPA来创建API。 6. 创建Vue.js应用程序。使用Vue CLI来快速创建Vue.js应用程序。在创建应用程序之前,您需要安装Vue CLI。 7. 集成Vue.js应用程序和Spring Boot应用程序。可以使用Webpack来构建Vue.js应用程序,然后将生成的JavaScript文件嵌入到Spring Boot应用程序中。 8. 创建前端路由。Vue.js应用程序的路由可以通过Vue Router创建。 9. 创建组件。使用Vue.js创建组件是一个很好的选择。您可以使用Vue组件来构建前端UI。 10. 使用Vuex管理应用程序状态。Vuex是一个专用于Vue.js的状态管理模式。 以上是开发Spring BootVue.js个人博客系统的一般步骤。当然,其中包含了更多细节和复杂性,因此建议您在实际开发过程中参考相关资料和文档。希望这些信息对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱飞的男孩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值