springboot+Vue项目-微博留言(前后端分离,跨域)
Posted MyAzhe0ci3
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了springboot+Vue项目-微博留言(前后端分离,跨域)相关的知识，希望对你有一定的参考价值。
所用技术
一丶微博留言后端
小贴士：约定>配置>编码
先做好准备,在去写代码
1.sql语句
CREATE TABLE `ol_msg` (
`id` VARCHAR(200) PRIMARY KEY ,
`create_date` DATETIME DEFAULT NULL,
`content` VARCHAR(2000) DEFAULT NULL,
`acc` INT(8) DEFAULT NULL,
`ref` INT(8) DEFAULT NULL
) ENGINE=INNODB DEFAULT CHARSET=utf8
2.改pom
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.chufeng</groupId>
<artifactId>springboot-vue-blog</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot-vue-blog</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<spring-boot.version>2.4.1</spring-boot.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>$spring-boot.version</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>true</fork>
<addResources>true</addResources>
</configuration>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>2.4.1</version>
<configuration>
<mainClass>com.chufeng.springbootvueblog.SpringbootVueBlogApplication</mainClass>
</configuration>
<executions>
<execution>
<id>repackage</id>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
3.写yml文件
server:
port: 8080
spring:
application:
name: springboot-vueblog
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
name: defaultDataSource
password: 123456
url: jdbc:mysql://localhost:3306/test?serverTimezone=UTC
username: root
4.业务类
BlogMapper
package com.chufeng.springbootvueblog;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.chufeng.springbootvueblog.entities.Blog;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface BlogMapper extends BaseMapper<Blog>
BlogService接口
package com.chufeng.springbootvueblog.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.chufeng.springbootvueblog.entities.Blog;
public interface BlogService extends IService<Blog>
BlogServiceImpl实现类
package com.chufeng.springbootvueblog.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.chufeng.springbootvueblog.entities.Blog;
import com.chufeng.springbootvueblog.mapper.BlogMapper;
import com.chufeng.springbootvueblog.service.BlogService;
public class BlogServiceImpl extends ServiceImpl<BlogMapper, Blog> implements BlogService
5.配置类
MybatisPlusConfig 数据分页配置类
package com.chufeng.springbootvueblog.config;
import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
@Configuration
public class MyBatisPlusConfig
// 最新版分页
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor()
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
AppConfig跨域配置类
package com.chufeng.springbootvueblog.config;
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class AppConfig
// 全局跨域配置： 可以在java后台配置，也可以在vue前台配置
private CorsConfiguration addCorsConfig()
CorsConfiguration corsConfiguration = new CorsConfiguration();
//请求常用的三种配置，*代表允许所有，当时你也可以自定义属性（比如header只能带什么，只能是post方式等等）
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
@Bean
public CorsFilter corsFilter()
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", addCorsConfig());
return new CorsFilter(source);
BlogController
package com.chufeng.springbootvueblog.controller;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.chufeng.springbootvueblog.entities.Blog;
import com.chufeng.springbootvueblog.service.BlogService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
@Slf4j
@RestController
@RequestMapping("/api/blogs")
public class BlogController
@Resource
private BlogService blogService;
@GetMapping
public IPage<Blog> selectByPage(Integer pageNo, Integer pageSize)
return blogService.page(new Page<>(pageNo,pageSize));
@PostMapping
public boolean savaBlog(@RequestBody Blog blog)
//打印日志
log.info(blog.toString());
return blogService.save(blog);
@DeleteMapping("/id")
public boolean deleteBlogById(@PathVariable("id") String id )
return blogService.removeById(id);
@PutMapping
public boolean updateBlog(@RequestBody Blog blog)
return blogService.updateById(blog);
二丶Vue前端
需要导入
- bootstrap.css
- axios.js
- jquery.js
- vue.js
自定义css代码
@charset "utf-8";
*margin:0; padding:0;
lilist-style:none;
imgborder:none;
atext-decoration:none;
input,textareaoutline:none; resize:none; border:none;
.clearfix:aftervisibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;
.clearfix*zoom:1;
bodybackground:url(../img/bg.jpg) center center no-repeat; background-size:100% 140%;
/*登陆*/
.loginBox
width:278px; padding:30px 80px 20px 80px; margin:40px auto;
background-image: -webkit-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));
box-shadow: 0 0 3px rgba(21,62,78,0.8); position:relative;
border-radius:2px;
.loginListwidth:100%;
.loginList limargin-bottom:10px; overflow:hidden;
.hTxtfont:18px/1.5 "Microsoft YaHei";
.inputswidth:260px; display:block; font-weight:bold; background:url(../img/inputBg.png) 0 0 no-repeat; height:14px; line-height:14px; padding:9px; color:#666;
.loginList .btnstext-align:right; background:none; width:280px;
.regbackground:url(../img/btns.png) 0 -42px no-repeat; width:70px; height:42px; display:inline-block; overflow:hidden; opacity:.8;
.loginbackground:url(../img/btns.png) 0 0 no-repeat; width:70px; height:42px; display:inline-block; overflow:hidden; opacity:.8;
.reg:hover,.login:hoveropacity:1;
.reg:active,.login:active以上是关于springboot+Vue项目-微博留言(前后端分离,跨域)的主要内容，如果未能解决你的问题，请参考以下文章
Java项目:个人博客系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
Java项目:个人博客系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)