springboot+vue的微信小程序的投票系统

蔚来源码二站

894人浏览 · 2025-07-02 20:17:38

蔚来源码二站 · 2025-07-02 20:17:38 发布

技术栈设计

后端技术栈

Spring Boot 2.x：提供RESTful API、事务管理及安全控制。
Spring Security：实现JWT token认证与权限控制。
MyBatis/MyBatis-Plus：数据库ORM框架，支持动态SQL。
Redis：缓存投票结果、防止重复提交。
MySQL：关系型数据库存储核心数据。

前端技术栈

Vue 3：构建微信小程序前端，使用Composition API。
Uni-app：跨平台框架，编译为微信小程序代码。
Vant Weapp：UI组件库，提供表单、按钮等组件。
微信小程序原生API：调用微信登录、支付等功能。

辅助工具

Swagger：API文档生成与测试。
Jenkins：自动化部署。
JUnit/Mockito：后端单元测试。

功能模块设计

用户模块

微信授权登录（获取openid及用户信息）。
个人中心（查看历史投票、修改昵称）。

投票模块

创建投票（单选/多选、截止时间、匿名设置）。
投票列表（分页、按热度/时间排序）。
投票详情（实时结果统计、图表展示）。

管理模块

后台审核（敏感词过滤、人工审核投票内容）。
数据报表（导出Excel、用户活跃度分析）。

安全模块

IP限流（防止刷票）。
Token失效机制（JWT过期时间设置）。

数据库表设计

用户表（user）

CREATE TABLE `user` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `openid` varchar(64) NOT NULL COMMENT '微信openid',
  `nickname` varchar(50) DEFAULT NULL,
  `avatar_url` varchar(255) DEFAULT NULL,
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_openid` (`openid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

投票表（vote）

CREATE TABLE `vote` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL COMMENT '创建人ID',
  `title` varchar(100) NOT NULL,
  `description` text,
  `type` tinyint DEFAULT '0' COMMENT '0单选 1多选',
  `anonymous` tinyint DEFAULT '0' COMMENT '是否匿名',
  `end_time` datetime NOT NULL,
  `status` tinyint DEFAULT '0' COMMENT '0正常 1关闭',
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

选项表（option）

CREATE TABLE `option` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `vote_id` bigint NOT NULL,
  `content` varchar(255) NOT NULL,
  `image_url` varchar(255) DEFAULT NULL,
  `count` int DEFAULT '0' COMMENT '票数',
  PRIMARY KEY (`id`),
  KEY `idx_vote_id` (`vote_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

投票记录表（vote_record）

CREATE TABLE `vote_record` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL,
  `vote_id` bigint NOT NULL,
  `option_id` bigint NOT NULL,
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_user_vote` (`user_id`,`vote_id`) COMMENT '用户每票仅投一次'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

核心代码示例

Spring Boot 投票接口（Controller）

@RestController
@RequestMapping("/api/vote")
public class VoteController {
    @Autowired
    private VoteService voteService;

    @PostMapping("/create")
    public Result createVote(@RequestBody VoteDTO voteDTO) {
        return voteService.createVote(voteDTO);
    }

    @GetMapping("/list")
    public Result listVotes(@RequestParam(defaultValue = "1") Integer page) {
        return voteService.getVoteList(page, 10);
    }
}

Vue 小程序投票页面

<template>
  <view class="vote-item" v-for="item in list" :key="item.id">
    <text>{{ item.title }}</text>
    <button @click="goDetail(item.id)">查看详情</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const list = ref([]);

const fetchData = async () => {
  const res = await uni.request({ url: '/api/vote/list' });
  list.value = res.data;
};
fetchData();
</script>

系统测试方案

接口测试（Postman）

测试注册/登录接口的Token返回有效性。
模拟高并发投票请求验证Redis限流。

UI测试（微信开发者工具）

页面渲染速度（WXML加载时间）。
表单验证（选项为空时的提示逻辑）。

性能测试（JMeter）

压测投票接口（500并发下的响应时间）。
数据库查询优化（EXPLAIN分析慢SQL）。

安全测试

XSS注入测试（提交带脚本的投票标题）。
SQL注入尝试（通过选项ID参数测试）。

技术栈设计

后端技术栈

Spring Boot 2.x：提供RESTful API、事务管理及安全控制。
Spring Security：实现JWT token认证与权限控制。
MyBatis/MyBatis-Plus：数据库ORM框架，支持动态SQL。
Redis：缓存投票结果、防止重复提交。
MySQL：关系型数据库存储核心数据。

前端技术栈

Vue 3：构建微信小程序前端，使用Composition API。
Uni-app：跨平台框架，编译为微信小程序代码。
Vant Weapp：UI组件库，提供表单、按钮等组件。
微信小程序原生API：调用微信登录、支付等功能。

辅助工具

Swagger：API文档生成与测试。
Jenkins：自动化部署。
JUnit/Mockito：后端单元测试。

功能模块设计

用户模块

微信授权登录（获取openid及用户信息）。
个人中心（查看历史投票、修改昵称）。

投票模块

创建投票（单选/多选、截止时间、匿名设置）。
投票列表（分页、按热度/时间排序）。
投票详情（实时结果统计、图表展示）。

管理模块

后台审核（敏感词过滤、人工审核投票内容）。
数据报表（导出Excel、用户活跃度分析）。

安全模块

IP限流（防止刷票）。
Token失效机制（JWT过期时间设置）。

数据库表设计

用户表（user）

CREATE TABLE `user` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `openid` varchar(64) NOT NULL COMMENT '微信openid',
  `nickname` varchar(50) DEFAULT NULL,
  `avatar_url` varchar(255) DEFAULT NULL,
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_openid` (`openid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

投票表（vote）

CREATE TABLE `vote` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL COMMENT '创建人ID',
  `title` varchar(100) NOT NULL,
  `description` text,
  `type` tinyint DEFAULT '0' COMMENT '0单选 1多选',
  `anonymous` tinyint DEFAULT '0' COMMENT '是否匿名',
  `end_time` datetime NOT NULL,
  `status` tinyint DEFAULT '0' COMMENT '0正常 1关闭',
  PRIMARY KEY (`id`),
  KEY `idx_user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

选项表（option）

CREATE TABLE `option` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `vote_id` bigint NOT NULL,
  `content` varchar(255) NOT NULL,
  `image_url` varchar(255) DEFAULT NULL,
  `count` int DEFAULT '0' COMMENT '票数',
  PRIMARY KEY (`id`),
  KEY `idx_vote_id` (`vote_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

投票记录表（vote_record）

CREATE TABLE `vote_record` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `user_id` bigint NOT NULL,
  `vote_id` bigint NOT NULL,
  `option_id` bigint NOT NULL,
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_user_vote` (`user_id`,`vote_id`) COMMENT '用户每票仅投一次'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

核心代码示例

Spring Boot 投票接口（Controller）

@RestController
@RequestMapping("/api/vote")
public class VoteController {
    @Autowired
    private VoteService voteService;

    @PostMapping("/create")
    public Result createVote(@RequestBody VoteDTO voteDTO) {
        return voteService.createVote(voteDTO);
    }

    @GetMapping("/list")
    public Result listVotes(@RequestParam(defaultValue = "1") Integer page) {
        return voteService.getVoteList(page, 10);
    }
}

Vue 小程序投票页面

<template>
  <view class="vote-item" v-for="item in list" :key="item.id">
    <text>{{ item.title }}</text>
    <button @click="goDetail(item.id)">查看详情</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const list = ref([]);

const fetchData = async () => {
  const res = await uni.request({ url: '/api/vote/list' });
  list.value = res.data;
};
fetchData();
</script>

系统测试方案

接口测试（Postman）

测试注册/登录接口的Token返回有效性。
模拟高并发投票请求验证Redis限流。

UI测试（微信开发者工具）

页面渲染速度（WXML加载时间）。
表单验证（选项为空时的提示逻辑）。

性能测试（JMeter）

压测投票接口（500并发下的响应时间）。
数据库查询优化（EXPLAIN分析慢SQL）。

安全测试

XSS注入测试（提交带脚本的投票标题）。
SQL注入尝试（通过选项ID参数测试）。

天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能