SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程03---实现公告板功能并解决跨域问题

简介: SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程03---实现公告板功能并解决跨域问题

豆宝社区项目实战教程简介


本项目实战教程配有免费视频教程,配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目。本项目难度适中,为便于大家学习,每一集视频教程对应在Github上的每一次提交。


项目首页截图

image.png


代码开源地址

前端

后端

视频教程地址

视频教程

前端技术栈


Vue

Vuex

Vue Router

Axios

Bulma

Buefy

Element

Vditor

DarkReader


后端技术栈


Spring Boot

Mysql

Mybatis

MyBatis-Plus

Spring Security

JWT

Lombok


后端实现公告


1.实体类

package com.notepad.blog.domain;
import com.baomidou.mybatisplus.annotation.*;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import java.io.Serializable;
import java.util.Date;
// @Builder 支持链式操作 @Accessors 支持链式操作
@Data
@Builder
@Accessors(chain = true)
@TableName("bms_billboard")
public class BmsBillboard implements Serializable {
    private static final long serialVersionUID = 1L;
    /**
     * 主键
     */
    @TableId(type = IdType.AUTO)
    private Integer id;
    /**
     * 公告牌
     */
    @TableField("content")
    private String content;
    /**
     * 公告时间
     */
    @TableField(value = "create_time", fill = FieldFill.INSERT)
    private Date createTime;
    /**
     * 1:展示中,0:过期
     */
    @Builder.Default
    @TableField("`show`")
    private boolean show = false;
}

2.mapper层接口搭建

//@Repository  在启动类 @MapperScan("com.notepad.blog.mapper")
public interface BmsBillboardMapper extends BaseMapper<BmsBillboard> {
}

3.service层搭建

@Service
public class BmsBillboardService extends ServiceImpl<BmsBillboardMapper,BmsBillboard> {
}

4.controller

@RestController
@RequestMapping("/billboard")
public class BmsBillboardController {
    @Autowired
    private BmsBillboardService bmsBillboardService;
    @GetMapping("/show")
    public ApiResult getNotices() {
        BmsBillboard billboard = bmsBillboardService.getNotices();
        return ApiResult.success(billboard);
    }
}

5.service

@Service
public class BmsBillboardService extends ServiceImpl<BmsBillboardMapper, BmsBillboard> {
    @Autowired
    private BmsBillboardMapper billboardMapper;
    public BmsBillboard getNotices() {
        return billboardMapper.getNotices();
    }
}

6.mapper接口

//@Repository  在启动类 @MapperScan("com.notepad.blog.mapper")
public interface BmsBillboardMapper extends BaseMapper<BmsBillboard> {
    BmsBillboard getNotices();
}

7.在mapper/创建BmsBillboardMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.notepad.blog.mapper.BmsBillboardMapper">
    <select id="getNotices" resultType="com.notepad.blog.domain.BmsBillboard">
        SELECT bb.id,
               bb.content,
               bb.create_time,
               bb.SHOW
        FROM bms_billboard bb
        WHERE bb.SHOW = 1
        ORDER BY rand()
        LIMIT 1
    </select>
</mapper>

访问地址测试 :http://localhost:8081/billboard/show


前端实现公告


1.在src下创建/utils/request.js

将下面内容复制即可,简单看看注释

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
// 1.创建axios实例
const service = axios.create({
  // 公共接口--这里注意后面会讲,url = base url + request url
  baseURL: process.env.VUE_APP_SERVER_URL,
  // baseURL: 'https://api.example.com',
  // 超时时间 单位是ms,这里设置了5s的超时时间
  timeout: 5 * 1000
})
// 设置cross跨域 并设置访问权限 允许跨域携带cookie信息,使用JWT可关闭
service.defaults.withCredentials = false
service.interceptors.response.use(
  // 接收到响应数据并成功后的一些共有的处理,关闭loading等
  response => {
    const res = response.data
    // 如果自定义代码不是200,则将其判断为错误。
    if (res.code !== 200) {
      // 50008: 非法Token; 50012: 异地登录; 50014: Token失效;
      if (res.code === 401 || res.code === 50012 || res.code === 50014) {
        // 重新登录
        MessageBox.confirm('会话失效,您可以留在当前页面,或重新登录', '权限不足', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          window.location.href = '#/login'
        })
      } else { // 其他异常直接提示
        Message({
          showClose: true,
          message: '⚠' + res.message || 'Error',
          type: 'error',
          duration: 3 * 1000
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    /** *** 接收到异常响应的处理开始 *****/
    // console.log('err' + error) // for debug
    Message({
      showClose: true,
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
export default service

2.在根目录下创建 .env


这里请求的是后端地址,注意是建在根目录下,不是src目录里

VUE_APP_SERVER_URL = 'http://localhost:8081'

3.在src下创建/api/billboard.js

请求地址

import request from '@/utils/request'
export function getBillboard() {
    return request({
        url: '/billboard/show',
        method: 'get'
    })
}

4.修改src/home.vue

<template>
  <div>
    <div class="box"> 🔔  {{ billboard.content }} </div>
  </div>
</template>
<script>
import { getBillboard } from "@/api/billboard";
export default {
  name: 'Home',
  data() {
    return {
      billboard: {
        content: "",
      },
    };
  },
  created() {
    this.fetchBillboard();
  },
  methods: {
    async fetchBillboard() {
     getBillboard().then((value) => {
        const { data } = value;
        this.billboard = data;
      });
    },
  },
};
</script>

5.启动项目

yarn serve


image.png

image-20210211185749335


后端跨域


方式一(不推荐):

// controller 上添加
@CrossOrigin

方式二(推荐):

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class GlobalWebMvcConfigurer implements WebMvcConfigurer {
    /**
     * 跨域
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允许所有域名进行跨域调用
        config.addAllowedOrigin("*");
        //允许跨越发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}


相关文章
Spring Boot 便利店销售系统项目分包设计解析
本文深入解析了基于Spring Boot的便利店销售系统分包设计,通过清晰的分层架构(表现层、业务逻辑层、数据访问层等)和模块化设计,提升了代码的可维护性、复用性和扩展性。具体分包结构包括`controller`、`service`、`repository`、`entity`、`dto`、`config`和`util`等模块,职责分明,便于团队协作与功能迭代。该设计为复杂企业级应用开发提供了实践参考。
139 0
在SpringBoot项目中使用Netty实现远程调用
本文介绍了使用Netty解决网络连接性能问题的方法,重点讲解了Netty的NIO特性及其在SpringBoot中的应用。Netty作为高效的NIO框架,支持非阻塞IO,能通过单线程管理多个客户端连接,简化TCP/UDP套接字服务器开发。文章详细展示了Netty在SpringBoot中实现远程调用的过程,包括服务端与客户端代码实现、依赖配置及测试验证。通过示例代码,如`NettyServer`、`NettyClientUtil`等,清晰说明了Netty的工作原理和实际应用,解决了半包等问题,并提供了完整的测试结果。
130 3
深入理解 Spring Boot 项目中的分页与排序功能
本文深入讲解了在Spring Boot项目中实现分页与排序功能的完整流程。通过实际案例,从Service层接口设计到Mapper层SQL动态生成,再到Controller层参数传递及前端页面交互,逐一剖析每个环节的核心逻辑与实现细节。重点包括分页计算、排序参数校验、动态SQL处理以及前后端联动,确保数据展示高效且安全。适合希望掌握分页排序实现原理的开发者参考学习。
151 4
Spring Boot 与 Vue.js 前后端分离中的数据交互机制
本文深入探讨了Spring Boot与Vue.js在前后端分离架构下的数据交互机制。通过对比传统`model.addAttribute()`方法与RESTful API的设计,分析了两者在耦合性、灵活性及可扩展性方面的差异。Spring Boot以RESTful API提供数据服务,Vue.js借助Axios消费API并动态渲染页面,实现了职责分明的解耦架构。该模式显著提升了系统的灵活性和维护性,适用于复杂应用场景如论坛、商城系统等,为现代Web开发提供了重要参考。
283 0
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
163 0
|
3月前
|
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
355 4
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
230 77
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
142 17
Vue 文件批量下载组件封装完整使用方法及优化方案解析
本文详细介绍了批量下载功能的技术实现与组件封装方案。主要包括两种实现方式:**前端打包方案(基于file-saver和jszip)** 和 **后端打包方案**。前者通过前端直接将文件打包为ZIP下载,适合小文件场景;后者由后端生成ZIP文件流返回,适用于大文件或大量文件下载。同时,提供了可复用的Vue组件`BatchDownload`,支持进度条、失败提示等功能。此外,还扩展了下载进度监控和断点续传等高级功能,并针对跨域、性能优化及用户体验改进提出了建议。可根据实际需求选择合适方案并快速集成到项目中。
165 17

热门文章

最新文章