gangmin / blog-springboot Goto Github PK

这是一个基于Vue+Springboot+Springcloud的博客项目，实现了前后端分离。前端使用了CB-ysx的客户界面和后台管理系统。后端使用了当前的Springboot项目。因为前端的接口并没有实现标准的REST风格，因此本项目中也只使用了GET和POST方法来实现所有功能。

博客地址

• vue
• ElementUi

• Springboot
• Mybatis
• SpringCloud

• 文章列表
• 分类/标签列表（按列表搜索文章）
• 文章按时间归档
• “关于我”界面
• 搜索功能
• 评论
• 文章详情页
• 友链

• 登陆
• 首页数据统计
• 文章增删改查
• 标签增删改查
• 分类增删改查
• 编辑“关于我”
• 编辑博客配置页面
• 评论管理

1.前往前端代码Clone代码

2.用WebStorm打开前端项目，修改src/api/index.js

在涂黑处修改成自己的地址或者域名，如在本地测试可直接用ip，例如填写为127.0.0.1:4677

3.在下面Terminal处输入npm install -g vue-cli，就会自动安装相关依赖（需要先安装node.js）

4.在Terminal输入npm run build，则会编译程序，生成可以运行的静态资源。结束后可以在项目根目录下看到dist文件夹

5.Clone当前项目，使用IDEA打开当前项目，根据软件提示导入Maven所提示的相关依赖

6.数据库配置文件在blog-item/blog-item-service/src/main/resource/application.yaml，修改数据库的数据库名，账号和密码。其中数据库表的结构文件在当前项目的根目录下，可以事先导入到Mysql中。

7.项目中图片都放在了七牛云上，使用前需要先注册一个七牛云账号。注意需要把对象存储空间的名字改成blogimg。在自己的七牛云上取得AK.SK以及空间域名，填入到以下位置中，该文件在blog-item/blog-item-service/src/main/java/com/blog/item/controller/TokenController中。

8.在blog-item/blog-item-service/src/main/java/com/blog/item/controller/AdminController取消注释注册的那部分代码，因为数据库中没有用户信息是无法登陆后台管理页面的。

9.配置Nginx，以上面第二步中配置的4677端口为例子，下面是部分配置文件，这里直接使用Nginx实现了跨域访问，简单粗暴，配置完并启动

	server {
        listen       80;
        server_name  127.0.0.1;
		root	填第四步生成dist文件夹的目录;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            try_files	$uri $uri/ /index.html;
            index  index.html index.htm index.php;
        }
	}

	server {
		listen 4677;
		server_name 127.0.0.1;

		add_header Access-Control-Allow-Origin *;
		add_header Access-Control-Allow-Methods GET,POST,OPTIONS,PUT,DELETE;
		add_header Access-Control-Allow-Headers Content-Type,isdebug,isAdmin,accessToken,x-requested-with;
		add_header Access-Control-Allow-Credentials true;
		
		location / {
			index index.html index.htm index.php;
		}
		
		location /apex {
		
		if ($request_method = 'OPTIONS') {
			 return 200;
			}
		
			proxy_pass http://127.0.0.1:10010;
			proxy_set_header Host $host:4677;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_connect_timeout 600;
			proxy_read_timeout 600;
		}
	}

10.在IDEA中调出Dashboard,在里面分别运行三个微服务BlogRegistry、BlogApiGateway和BlogItemService。

11.浏览器访问127.0.0.1就可以直接访问博客页面了，使用POSTMAN或者Insomnia等发包工具创建账户，如下图所示：

12.通过127.0.0.1/admin，并使用刚才创建的账号密码登陆到后台页面。

可以在阿里云或者腾讯云中部署自己的博客，部署方法和本地部署方法类似。前端项目可以直接将dist文件夹放在服务器中，本后端项目则可以通过打包成jar包的方式进行部署。

在IDEA中，可以在右侧栏调出Maven Project。在父工程中点击install按键，接下来会自动对每一个子工程进行打包，并生成jar包

在每一个子工程的target下都有生成的jar包，将它们放到服务器中，运行其中三个blog-registry-1.0.0-SNAPSHOT.jar、blog-api-gateway-1.0.0-SNAPSHOT.jar、blog-item-service-1.0.0-SNAPSHOT.jar

运行命令如下：

nohup java -jar xxx.jar > systemxxx.log 2>&1 &

其中前一个xxx代表每一个包名，后一个用来区分每一个进程所记录的日志名字