Skip to content

WeikuiWang/vueBlog

Repository files navigation

vueBlog

使用vue+spring boot搭建的前后端分离博客项目。 涉及到的技术框架

  • vue-cli
  • element-ui
  • spring-boot 以下为实现过程中笔记记录:

准备工作

npm install webpack -g
npm install webpack webpack-cli -g
webpack -v
  • 全局安装vue-cli
npm install --global vue-cli

1-项目开始

使用vue-cli脚手架创建项目,进入自己想要保存的项目目录,初始化项目和各个配置,其中eslint校验不用打开,其对空格和换行的校验令人抓狂。

vue init webpack vueBlog

进入项目vueBlog

npm install

启动项目

npm run dev

启动成功就可以本地http://localhost:8080 访问初始的vue前端项目了。

2-整合element ui/搭建登录页/解决跨域问题

安装vue-router,前面初始化项目时没有选择,这里手动安装是为了熟悉流程。

npm install vue-router --save

整合element-ui

npm i element-ui -S

使用element ui组件搭建登陆首页。 安装axios

npm install axios --save-dev

登陆接口前后端代码骨架完成,前端:

onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          this.$axios.post('http://localhost:8081/api/login', this.form).then((res)=>{
            this.$router.push("/blogs")
          })
        } else {
          return false;
        }
      });
    }

后端:

@RestController
@RequestMapping("/api")
public class EnterController {
    @PostMapping(value = "/login")
    public String index(@Validated @RequestBody LoginDto loginDto, HttpServletResponse response) {
        return "hello:" + JSON.toJSONString(loginDto);
    }
}

在后端服务端解决跨域问题:

@Configuration
public class CorsConfig implements WebMvcConfigurer {
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
        .allowedOriginPatterns("*")
        .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
        .allowCredentials(true)
        .maxAge(3600)
        .allowedHeaders("*");
  }
}

其中allowedOriginPatterns是在spring-boot2.4后的版本使用方式,之前的可使用allowedOrigins("*")

Todolist:

  • 搭建vue-cli项目,整合element-ui,创建管理后台登录页
  • 搭建spring-boot后端项目,解决跨域问题,登陆接口实现交互
  • 管理后台添加页
  • 管理后台列表页
  • 文章展示列表页
  • 文章展示内容页
  • 分类管理设计与实现
  • 标签列表管理设计与实现
  • 数据库设计
  • 后端服务的基础配置
  • 后端接口的实现

Releases

No releases published

Packages

No packages published