springboot+Vue项目-微博留言(前后端分离,跨域)

Posted 2021-06-30 MyAzhe0ci3

所用技术

• 数据库：mysql
• 后台框架：springboot,mybatis plus
• 前台框架：Vue
• 实体类：lombok
• 异步：axios

一丶微博留言后端

小贴士：约定>配置>编码
先做好准备,在去写代码

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;}
li{list-style:none;}
img{border:none;}
a{text-decoration:none;}
input,textarea{outline:none; resize:none; border:none;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{*zoom:1;}

body{background: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;
}
.loginList{width:100%;}
.loginList li{margin-bottom:10px; overflow:hidden;}
.hTxt{font:18px/1.5 "Microsoft YaHei";}
.inputs{width: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 .btns{text-align:right; background:none; width:280px;}
.reg{background:url(../img/btns.png) 0 -42px no-repeat; width:70px; height:42px; display:inline-block; overflow:hidden; opacity:.8;}
.login{background:url(../img/btns.png) 0 0 no-repeat; width:70px; height:42px; display:inline-block; overflow:hidden; opacity:.8;}
.reg:hover,.login:hover{opacity:1;}
Java项目:个人博客系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)

 Java项目:个人博客系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
 Yii + Vue 前后端交互(跨域)
 SpringBoot+mybatis+Vue实现前后端分离小项目
 vue+springboot前后端分离如何部署项目？
 使用 VUE + SpringBoot 实现前后端分离案例