• springboot+vue3+ts实现一个点赞功能

    前端：vite+vue3+ts+elementplus+less

    后端：springboot2.7.13+mybatisplus

    最终效果大致如下：

    后端：

    引入pom依赖

    1. <dependencies>
    2.     <dependency>
    3.         <groupId>org.springframework.bootgroupId>
    4.         <artifactId>spring-boot-starter-webartifactId>
    5.     dependency>
    6.  
    7.     <dependency>
    8.         <groupId>mysqlgroupId>
    9.         <artifactId>mysql-connector-javaartifactId>
    10.         <version>8.0.33version>
    11.     dependency>
    12.  
    13.     <dependency>
    14.         <groupId>org.projectlombokgroupId>
    15.         <artifactId>lombokartifactId>
    16.         <version>1.18.28version>
    17.     dependency>
    18.  
    19.     <dependency>
    20.         <groupId>com.baomidougroupId>
    21.         <artifactId>mybatis-plus-boot-starterartifactId>
    22.         <version>3.5.3.1version>
    23.     dependency>
    24.  
    25.     <dependency>
    26.         <groupId>org.springframework.bootgroupId>
    27.         <artifactId>spring-boot-starter-testartifactId>
    28.         <scope>testscope>
    29.     dependency>
    30. dependencies>

    运行sql

    1. /*
    2.  Navicat Premium Data Transfer
    4.  Source Server         : MyDemo
    5.  Source Server Type    : MySQL
    6.  Source Server Version : 80027
    7.  Source Host           : 192.168.157.134:3306
    8.  Source Schema         : giveALike
    10.  Target Server Type    : MySQL
    11.  Target Server Version : 80027
    12.  File Encoding         : 65001
    14.  Date: 21/11/2022 23:50:34
    15. */
    16.  
    17. SET NAMES utf8mb4;
    18. SET FOREIGN_KEY_CHECKS = 0;
    19.  
    20. -- ----------------------------
    21. -- Table structure for article
    22. -- ----------------------------
    23. DROP TABLE IF EXISTS `article`;
    24. CREATE TABLE `article`  (
    25.   `id` int NOT NULL AUTO_INCREMENT COMMENT '编号',
    26.   `content` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL COMMENT '内容',
    27.   PRIMARY KEY (`id`) USING BTREE
    28. ) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
    29.  
    30. -- ----------------------------
    31. -- Records of article
    32. -- ----------------------------
    33. INSERT INTO `article` VALUES (1, '11');
    34. INSERT INTO `article` VALUES (2, '666');
    35. INSERT INTO `article` VALUES (3, '777');
    36. INSERT INTO `article` VALUES (4, '999');
    37.  
    38. -- ----------------------------
    39. -- Table structure for giveALike
    40. -- ----------------------------
    41. DROP TABLE IF EXISTS `giveALike`;
    42. CREATE TABLE `giveALike`  (
    43.   `id` int NOT NULL AUTO_INCREMENT COMMENT '编号',
    44.   `user_id` int NULL DEFAULT NULL COMMENT '用户编号',
    45.   `article_id` int NULL DEFAULT NULL COMMENT '文章编号',
    46.   `is_like` int NULL DEFAULT NULL COMMENT '是否点赞(0表示未点赞，1表示点赞)',
    47.   PRIMARY KEY (`id`) USING BTREE
    48. ) ENGINE = InnoDB AUTO_INCREMENT = 935456769 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
    49.  
    50. -- ----------------------------
    51. -- Records of giveALike
    52. -- ----------------------------
    53.  
    54. -- ----------------------------
    55. -- Table structure for user
    56. -- ----------------------------
    57. DROP TABLE IF EXISTS `user`;
    58. CREATE TABLE `user`  (
    59.   `id` int NOT NULL AUTO_INCREMENT COMMENT '编号',
    60.   `username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '用户名',
    61.   `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '密码',
    62.   PRIMARY KEY (`id`) USING BTREE
    63. ) ENGINE = InnoDB AUTO_INCREMENT = 2 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
    64.  
    65. -- ----------------------------
    66. -- Records of user
    67. -- ----------------------------
    68. INSERT INTO `user` VALUES (1, '11', '11');
    69.  
    70. SET FOREIGN_KEY_CHECKS = 1;

    项目结构

    yml配置，数据库改成你自己的数据库

    1. server:
    2.   port: 5000
    3.  
    4. spring:
    5.   application:
    6.     name: service-user
    7.  
    8.   datasource:
    9.     url: jdbc:mysql://192.168.157.134:3306/giveALike?serverTimezone=GMT%2B8&characterEncoding=utf-8&useSSL=false
    10.     driver-class-name: com.mysql.cj.jdbc.Driver
    11.     username: root
    12.     password: root

    entity下的三个实体类

    Article： 

    1. @Data
    2. public class Article {
    3.     @TableId(value = "id", type = IdType.AUTO)
    4.     private Integer id;//编号
    5.     private String content;//内容
    6.     @TableField(exist = false)
    7.     private int isLike;//是否点赞(0表示未点赞，1表示点赞)
    8. }

     GiveALike：

    1. @Data
    2. @TableName("giveALike")
    3. public class GiveALike {
    4.     @TableId(value = "id", type = IdType.AUTO)
    5.     private Integer id;
    6.     private Integer articleId;//文章编号
    7.     private Integer userId;//用户编号
    8.     private int isLike;//是否点赞(0表示未点赞，1表示点赞)
    9. }

    User：

    1. @Data
    2. public class User {
    3.     @TableId(value = "id", type = IdType.AUTO)
    4.     private Integer id;//用户id
    5.     private String username;//用户名
    6.     private String password;//密码
    7. }

    mapper

    ArticleMapper：

    1. @Mapper
    2. public interface ArticleMapper extends BaseMapper
       {
    3. }

    GiveALikeMapper：

    1. @Mapper
    2. public interface GiveALikeMapper extends BaseMapper {
    3. }

    UserMapper：

    1. @Mapper
    2. public interface UserMapper extends BaseMapper {
    3. }

    controller

    1. @Slf4j
    2. @CrossOrigin
    3. @RestController
    4. @RequestMapping("/giveALike")
    5. public class GiveALikeController {
    6.  
    7.     @Resource
    8.     private UserMapper userMapper;
    9.  
    10.     @Resource
    11.     private ArticleMapper articleMapper;
    12.  
    13.     @Resource
    14.     private GiveALikeMapper giveALikeMapper;
    15.  
    16.     //登录
    17.     @PostMapping("/login")
    18.     public User login(@RequestBody User user) {
    19.         QueryWrapper userQueryWrapper = new QueryWrapper<>();
    20.         userQueryWrapper.eq("username", user.getUsername());
    21.         User vo = userMapper.selectOne(userQueryWrapper);
    22.         if (vo != null && Objects.equals(vo.getPassword(), user.getPassword())) {
    23.             return vo;
    24.         } else {
    25.             return null;
    26.         }
    27.     }
    28.  
    29.     //获取所有文章数据
    30.     //TODO 优化建议：使用分页，减少并发
    31.     @GetMapping("/getList")
    32.     public List
       getList() {
    33.         List
       articles = articleMapper.selectList(null);
    34.         List
       list = new ArrayList<>();
    35.         for (Article item : articles) {
    36.             QueryWrapper wrapper = new QueryWrapper<>();
    37.             wrapper.eq("article_id", item.getId());
    38.             GiveALike giveALike = giveALikeMapper.selectOne(wrapper);
    39.             if (giveALike == null || giveALike.getIsLike() == 0) {
    40.                 item.setIsLike(0);
    41.             } else {
    42.                 item.setIsLike(1);
    43.             }
    44.             list.add(item);
    45.         }
    46.         return list;
    47.     }
    48.  
    49.     //点赞
    50.     @PostMapping("/saveUserLike")
    51.     @Transactional
    52.     public GiveALike saveUserLike(@RequestBody GiveALike giveALike) {
    53.         QueryWrapper wrapper = new QueryWrapper<>();
    54.         wrapper.eq("article_id", giveALike.getArticleId()).eq("user_id", giveALike.getUserId());
    55.         GiveALike vo = giveALikeMapper.selectOne(wrapper);
    56.         if (vo != null) {
    57.             if (vo.getIsLike() == 0) {
    58.                 vo.setIsLike(1);
    59.             } else {
    60.                 vo.setIsLike(0);
    61.             }
    62.             giveALikeMapper.updateById(vo);
    63.             return vo;
    64.         } else {
    65.             giveALike.setIsLike(1);
    66.             giveALikeMapper.insert(giveALike);
    67.             return giveALike;
    68.         }
    69.     }
    70. }

    前端：

    相关依赖

    目录结构

    main.ts页面

    1. import { createApp } from 'vue'
    2. import ElementPlus from 'element-plus'
    3. import 'element-plus/dist/index.css'
    4. import App from './App.vue'
    5. import router from "./router";
    6.  
    7. createApp(App).use(router).use(ElementPlus).mount('#app')

    App.vue页面

    1. <template>
    2.   <div id="app">
    3.     <router-view/>
    4.   div>
    5. template>
    6. <style>
    7.  
    8. style>

     路由router.ts

    1. import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
    2.  
    3. const routes: Array<RouteRecordRaw> = [
    4.     {
    5.         path: "/home",
    6.         name: '首页',
    7.         component: () => import('../page/home.vue')
    8.     },
    9.     {
    10.         path: "/",
    11.         name: '登录',
    12.         component: () => import('../page/login.vue')
    13.     },
    14. ]
    15.  
    16. const router = createRouter({
    17.     history: createWebHistory(),
    18.     routes: routes,
    19. })
    20.  
    21. export default router

     登录页面login.vue

    1. <template>
    2.   <div class="main">
    3.     <div class="main_username">
    4.       <input v-model="user.username" class="username" type="text" placeholder="请输入用户名">
    5.     div>
    6.     <div class="main_password">
    7.       <input v-model="user.password" class="password" type="password" placeholder="请输入密码">
    8.     div>
    9.     <el-button @click="login" type="primary" class="main_login">登录el-button>
    10.   div>
    11. template>
    12.  
    13. <script setup lang="ts">
    14. import {ElMessage} from 'element-plus'
    15. import {reactive} from "vue";
    16. import axios from "axios";
    17. import router from "../router";
    18.  
    19. interface User {
    20.   username: string,
    21.   password: string
    22. }
    23.  
    24. //登录所需的信息
    25. const user = reactive<User>({
    26.   username: '11',
    27.   password: '11'
    28. })
    29.  
    30. //登录
    31. const login = () => {
    32.   axios.post("http://localhost:5000/giveALike/login", user).then((res) => {
    33.     if (res.data != '') {
    34.       ElMessage({
    35.         message: '登录成功',
    36.         type: 'success',
    37.       })
    38.       //跳转页面
    39.       router.push("/home")
    40.       //将用户信息存到session
    41.       window.sessionStorage.setItem("user", JSON.stringify(res.data))
    42.     } else {
    43.       ElMessage.error('登录失败')
    44.     }
    45.   })
    46. }
    47. script>
    48.  
    49. <style lang="less" scoped>
    50. .main {
    51.   .main_username {
    52.     margin-bottom: 10px;
    53.  
    54.     input {
    55.       font-size: 30px;
    56.     }
    57.   }
    58.  
    59.   .main_password {
    60.     input {
    61.       font-size: 30px;
    62.     }
    63.   }
    64.  
    65.   .main_login {
    66.     font-size: 30px;
    67.     margin-top: 10px;
    68.   }
    69. }
    70. style>

     home.vue页面

    1. <template>
    2.   <div>
    3.     <div v-for="item in data.articleList" :key="item.id">
    4.       <div class="item">
    5.         <div class="item_id">编号：{{ item.id }}div>
    6.         <div class="item_content">内容：{{ item.content }}div>
    7.         <div>{{ item }}div>
    8.         <img v-if="item.isLike===0" @click="handleLike(item.id)" src="../assets/未点赞.png" class="item_img" alt="图片">
    9.         <img v-else @click="handleLike(item.id)" src="../assets/点赞.png" class="item_img" alt="图片">
    10.       div>
    11.     div>
    12.   div>
    13. template>
    14.  
    15. <script setup lang="ts">
    16. import axios from "axios";
    17. import {reactive} from "vue";
    18. import {ElMessage} from "element-plus";
    19.  
    20. const data = reactive({
    21.   articleList: [] as Article[],//所有内容列表
    22.   userLikeList: [] as any[]//当前用户点赞表的数据
    23. })
    24.  
    25. interface GiveALike {
    26.   articleId: number,
    27.   userId: number
    28. }
    29.  
    30. interface Article {
    31.   id: number,
    32.   content: string,
    33.   isLike?: number
    34. }
    35.  
    36. //点赞所需的参数
    37. const giveALikeParam = reactive<GiveALike>({
    38.   articleId: 0,//文章编号
    39.   userId: 0//用户编号
    40. })
    41.  
    42. //获取所有内容
    43. const getList = () => {
    44.   axios.get("http://localhost:5000/giveALike/getList").then((res) => {
    45.     data.articleList = res.data
    46.     console.log(res.data)
    47.   })
    48. }
    49.  
    50. //点赞
    51. const handleLike = (row: number) => {
    52.   //从session中获取用户信息
    53.   const user = JSON.parse(window.sessionStorage.getItem("user") ?? '')
    54.   //设置用户编号
    55.   giveALikeParam.userId = user.id
    56.   //设置文章编号
    57.   giveALikeParam.articleId = row
    58.   axios.post("http://localhost:5000/giveALike/saveUserLike", giveALikeParam).then((res) => {
    59.     data.articleList[row - 1].isLike = data.articleList[row - 1].isLike === 1 ? 0 : 1;
    60.     if (res.data.isLike == 1) {
    61.       ElMessage({
    62.         message: '点赞成功',
    63.         type: 'success',
    64.       })
    65.     } else {
    66.       ElMessage({
    67.         message: '取消点赞',
    68.         type: 'warning',
    69.       })
    70.     }
    71.   })
    72. }
    73.  
    74. getList()
    75. script>
    76.  
    77. <style lang="less" scoped>
    78. .item {
    79.   display: flex;
    80.  
    81.   .item_id {
    82.     margin-right: 10px;
    83.   }
    84.  
    85.   .item_content {
    86.     width: 100px;
    87.   }
    88.  
    89.   .item_img {
    90.     width: 100px;
    91.     height: 100px;
    92.     cursor: pointer;
    93.   }
    94. }
    95. style>

     Gitee仓库地址：Gitee

    上述代码如有问题，欢迎提出来，博主看到了会第一时间解决

    springboot3+react18+ts版

  • 相关阅读:
    苹果macOS系统M1、M2芯片关闭sip的方法
    大数据开发之Apache Hive
    windows开启启动bat脚本
    PHP中性能优化之生成器
    【时间复杂度】定义与计算方法
    5G紧急呼叫流程分析
    【操作系统】9/35MMAP
    前端页面项目——博客系统
    面了个腾讯拿38K跳槽出来的，见识到了真正的测试天花板
    遗传算法GA求解连续函数问题
  • 原文地址：https://blog.csdn.net/crazy1013/article/details/127974796