mrwdhasd0903 / cesonblogfront

使用vue开发的博客前端页面

部署视频教程已上传b站,配合食用更佳BV12K4y1t7C6

0\了解整个网站架构

如图所示,需要部署2个Vue项目(前台+后台)以及2个后端项目(业务+文件库),其中文件库为war包部署,需要外置tomcat

1\环境准备

以下为本人环境版本,仅供参考

1. vue/cli 4.1.2
2. webpack 3.6.0
3. node v11.15.0
4. maven-3.5.2
5. jdk1.8.0
6. tomcat-9.0.24
7. MySql 5.5.62

2\项目准备

需要克隆4个项目,分别为

• 前台页面： https://github.com/mrwdhasd0903/cesonblogfront
• 后台页面： https://github.com/mrwdhasd0903/cesonblogadmin
• 后端业务接口： https://github.com/mrwdhasd0903/cesonblog
• 文件存储接口： https://github.com/mrwdhasd0903/upload

使用浏览器或者命令" git clone+上面的地址 "将源码克隆到本地

3\端口约定

为了项目安全,所有的接口均做了端口跨域限制处理,以下为该部署教程的端口约定,如有占用,请提前清理

• 前台页面访问端口：8080
• 后台页面访问端口：8081
• 后端业务请求端口：8088
• 文件存储请求端口(即外置tomcat端口)：8888
• MySql端口：3306

4\数据库准备

建库建表脚本存放在cesonblog项目目录下的blog.sql

使用图形化工具或者登入命令行执行" source +脚本路径 "(已含建库语句)，导入数据

其中t_user表中以含有一条管理员账号admin，密码123456，用于登入后台页面

5\前端部署

5.1\前台页面

1. 命令行进入cesonblogfront项目目录
2. 执行npm install安装工程依赖
3. 执行npm run serve运行环境
4. 浏览器进入http://localhost:8080/有页面的加载动画即可

5.2\后台页面

1. 命令行进入cesonblogadmin项目目录
2. 执行npm install安装工程依赖
3. 执行npm run serve运行环境
4. 浏览器进入http://localhost:8081/出现登录页面即可

6\后端部署

6.1\业务接口部署

1. 部署前请确认MySql账号为root密码为123456,否则请去改SpringBoot全局配置文件
2. 命令行进入cesonblog项目目录
3. 执行mvn spring-boot:run运行环境(若运行失败请检查maven环境变量或者导入IDEA)
4. 确认运行成功后,回到浏览器测试后台页面是否能登录系统,账号admin,密码123456

6.2\文件存储接口部署

1. 命令行进入upload项目目录
2. 执行mvn package生成war包(在target目录下),
3. 将生成的war包重命名为upload.war
4. 将upload.war复制到tomcat的webapps目录下
5. 确保tomcat端口号为8888,启动tomcat
6. 测试：在后台文章发布页面的编辑器中选择上传图片功能，能正常返回图片链接即可

至此，整个网站基本部署完成，如果对你有帮助请在GitHub上star这些项目小王的github

一些配置的内容在b站的视频中有讲到BV12K4y1t7C6

免责声明:所有开源代码仅适用于学习交流,请勿商用,为此构成的侵权行为本人不负任何责任