使用vue+spring boot搭建的前后端分离博客项目。 涉及到的技术框架
- vue-cli
- element-ui
- spring-boot 以下为实现过程中笔记记录:
-
安装node.js
-
全局安装安装webpack和webpack-cli
npm install webpack -g
npm install webpack webpack-cli -g
webpack -v
- 全局安装vue-cli
npm install --global vue-cli
使用vue-cli脚手架创建项目,进入自己想要保存的项目目录,初始化项目和各个配置,其中eslint校验不用打开,其对空格和换行的校验令人抓狂。
vue init webpack vueBlog
进入项目vueBlog
npm install
启动项目
npm run dev
启动成功就可以本地http://localhost:8080 访问初始的vue前端项目了。
安装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("*")
- 搭建vue-cli项目,整合element-ui,创建管理后台登录页
- 搭建spring-boot后端项目,解决跨域问题,登陆接口实现交互
- 管理后台添加页
- 管理后台列表页
- 文章展示列表页
- 文章展示内容页
- 分类管理设计与实现
- 标签列表管理设计与实现
- 数据库设计
- 后端服务的基础配置
- 后端接口的实现