SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程05---每日一句功能实现-阿里云开发者社区

SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程05---每日一句功能实现

2023-05-17 106

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程05---每日一句功能实现

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

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

项目首页截图

代码开源地址

前端

后端

视频教程地址

视频教程

前端技术栈

Vue

Vuex

Vue Router

Axios

Bulma

Buefy

Element

Vditor

DarkReader

后端技术栈

Spring Boot

Mysql

Mybatis

MyBatis-Plus

Spring Security

JWT

Lombok

每日一句后端

1.实体类

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;
@Data
@NoArgsConstructor
@TableName("bms_tip")
public class BmsTip implements Serializable {
    private static final long serialVersionUID = 1L;
    /**
     * 主键
     */
    private Integer id;
    /**
     * 内容
     */
    @TableField("`content`")
    private String content;
    /**
     * 作者
     */
    private String author;
    /**
     * 1：使用，0：过期
     */
    private boolean type;
}

2.mapper接口层

public interface BmsTipMapper extends BaseMapper<BmsTip> {
}

3.BmsTipMapper.xml

resource/mapper创建BmsTipMapper.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.BmsTipMapper">
    <select id="getRandomTip" resultType="com.notepad.blog.domain.BmsTip">
        select *
        from bms_tip
        order by rand()
        limit 1
    </select>
</mapper>

每日一句前端

1.在src下创建/api/tip.js

import request from '@/utils/request'
export function getTodayTip() {
    return request({
        url: '/tip/today',
        method: 'get'
    })
}

2.修改tip.vue

<template>
  <div>
    <el-card>
      <div class="header">
        <span>每日一句</span>
      </div>
      <div class="has-text-left block">
          {{ tip.content }}
      </div>
      <div class="has-text-right mt-5 block">
          {{ tip.author }}
      </div>
    </el-card>
  </div>
</template>
<script>
import { getTodayTip } from "@/api/tip";
export default {
  name: "CardBar",
  data() {
    return {
        tip: {}
    };
  },
  created() {
      this.fetchTodayTip()
  },
  methods: {
      fetchTodayTip() {
          getTodayTip().then(Response => {
              const { data } = response
              this.tip = data
          })
      }
  }
};
</script>