springboot+vue个人博客系统（一）框架搭建以及登陆注册实现

柔光的暖阳◎ 2022-01-25 17:33 474阅读 0赞

# 一、概述 #

很早就想自己写一个博客系统，但是苦于对前端技术不熟，一直都没有做，近日终于学习了vue框架，就想着实现这个想法。

# 二、项目总览 #

### 2.1前端总览 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70][]

前端使用vue框架，使用bootstrap的样式，目前没有对于文章的管理，仅仅是一个基本的框架。

### 2.2后台总览 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70 1][]

后台使用springboot、Elasticserch框架，数据库使用MySQL。

# 三、前端各模块介绍 #

后台暂且不说，现在并没有太多的东西。

### 1、主页 ###

主页引入了header和footer组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70 2][]

### 2、登陆注册 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70 3][]

# 四、遇到的主要问题 #

### 1、跨域问题 ###

重写config下的index.js中的proxyTable

proxyTable: {
          '/api': {  //使用"/api"来代替
            target: 'http://127.0.0.1:8080', //源地址
            changeOrigin: true, //改变源
            pathRewrite: {
              '^/api': 'http://127.0.0.1:8080' //路径重写
            }
          }
        },

### 2、Elasticserch问题 ###

刚开始我的springboot版本是2.1.4，Elasticserch版本是7.0，结果问题很大，各种冲突。

最后将springboot版本降至1.5.9，Elasticserch版本将为2.4.4才可以。

# 五、GitHub地址 #

### 前端：[https://github.com/sustly/blog\_vue\_web][https_github.com_sustly_blog_vue_web] ###

### 后端：[https://github.com/sustly/blog\_vue\_server][https_github.com_sustly_blog_vue_server] ###

# 六、后续 #

下一步就会加上文章管理等内容。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70]: /images/20220126/02b4d58a4712427594547316ef711771.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70 1]: /images/20220126/3da5f4562cd54e9b98f16f93d217fc23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70 2]: /images/20220126/6d6983d679394e8a81a62a79c259e488.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B5Y2hhcm1fdQ_size_16_color_FFFFFF_t_70 3]: /images/20220126/329abac771104b138e0e858014714768.png
[https_github.com_sustly_blog_vue_web]: https://github.com/sustly/blog_vue_web
[https_github.com_sustly_blog_vue_server]: https://github.com/sustly/blog_vue_server