企业官网建设流程全解析

简介：面向毕业设计学生与全栈开发初学者的量化积分管理系统，基于Vue与SSM框架构建，覆盖管理员与用户两类角色的核心业务，管理员可在后台完成系统全面配置，用户可完成注册登录、查询书籍、发表评论与下载书籍等操作，完整呈现前后端分离开发模式。压缩包内共418个文件，整体约19.2MB，文件类型以Java后端源码、Vue前端组件、JavaScript逻辑、XML配置、SVG图标及CSS样式为主，同时附带数据库SQL脚本与Windows启动脚本，避免冗余资源，便于快速初始化与运行。已有55人学习下载。资源内不仅涵盖完整项目源码，还提供安装、运行脚本与设计文档，可帮助读者快速搭建本地环境，梳理SSM接口编写、Vue页面交互、角色权限区分与前后端联调的实现思路；清晰的模块划分也方便针对积分规则、书籍管理或用户中心等进行功能扩展，适合作为毕业设计选题或SSM/Vue综合实训的参考项目，尤其适合具备一定Java与Vue基础、希望掌握完整项目结构的学习者。

1. 基于Vue的量化积分管理系统，到底在管理什么

积分系统听起来简单，无非是增删改查加个排行榜。但一旦进入真实业务，“量化”这两个字才是关键：积分从哪来、按什么规则发、消耗时怎么扣、流水怎么对账、报表怎么出。手工记账或者用Excel管，积分一多必然乱账，这时候就需要一套独立的积分管理后台。SSM加Vue这套组合，是在校生和一线工程师都绕不开的经典技术栈：SSM负责把业务规则和数据处理落在服务端，Vue负责把积分变化、用户列表、排行榜这些界面交互做得直观。这篇博文就围绕“量化积分管理系统”这个具体项目，讲清楚这套系统从数据库设计、后端接口到前端页面怎么落地，以及把系统跑起来之后最常见的坑在哪。适合正在做SSM课程设计、Vue后端联调，或者想参考积分体系设计思路的人。

2. SSM与Vue前后端分离，量化积分系统为什么这么分

2.1 积分系统里SSM和Vue各自负责什么

积分管理系统的核心是数据：用户积分余额、积分流水、积分规则、商品兑换记录。这些数据必须由服务端统一管理，否则前端直接改数据库，账就乱了。SSM在这里的角色是稳定地提供RESTful接口，负责积分增减的事务控制、流水记录的写入、排行榜的查询统计。Vue则负责把用户的操作变成界面上的点击、输入和表格，通过Axios请求后端接口，拿到数据再渲染。

常见做法是后端端口8080，前端开发服务器端口8081，通过代理转发解决跨域，生产环境则由Nginx做静态资源和API的统一入口。需要明确一个边界：Vue里不写任何业务规则。比如“签到加10分”这个规则，前端只负责把签到动作发给后端，加多少由后端计算，这样规则变更不用重新打包前端。积分过期、积分冻结、异常流水回滚，这些逻辑都应该放在Service层而不是Vue组件里。

2.2 量化积分的核心数据模型设计

积分系统的数据库表，常见的设计是四张表打底：用户表、积分账户表、积分流水表、积分规则表。用户表存基本信息，账户表存实时余额，流水表记录每一笔变动，规则表配置“什么行为加多少分”。

CREATE TABLE `t_user` ( `id` INT PRIMARY KEY AUTO_INCREMENT, `username` VARCHAR(50) NOT NULL UNIQUE, `password` VARCHAR(100) NOT NULL, `nickname` VARCHAR(50), `created_time` DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE `t_points_account` ( `id` INT PRIMARY KEY AUTO_INCREMENT, `user_id` INT NOT NULL UNIQUE, `balance` INT NOT NULL DEFAULT 0, `total_earned` INT NOT NULL DEFAULT 0, `total_spent` INT NOT NULL DEFAULT 0, `version` INT NOT NULL DEFAULT 0, FOREIGN KEY (`user_id`) REFERENCES `t_user`(`id`) ); CREATE TABLE `t_points_log` ( `id` INT PRIMARY KEY AUTO_INCREMENT, `user_id` INT NOT NULL, `change_amount` INT NOT NULL, `balance_after` INT NOT NULL, `type` VARCHAR(20) NOT NULL COMMENT 'EARN/CONSUME/EXPIRE', `description` VARCHAR(255), `created_time` DATETIME DEFAULT CURRENT_TIMESTAMP );

这里有几个关键设计点。账户表里加了一个version字段，用于乐观锁控制并发扣减，这是积分系统最重要的防超扣保护。流水表必须有change_amount和balance_after，分别记录本次变动额和变动后余额，这样任何时候都能追溯“当时余额为什么是这个数”。type字段区分积分来源类型，避免统计时把签到和消费混为一谈。

积分规则表一般设计成rule_code、rule_name、points_value、status，比如SIGN_IN对应10分，ORDER_CONSUME对应消费金额的百分比。把规则存数据库而不是写死在代码里，运营改积分策略就不用重新发布应用。

2.3 前后端分离后的请求链路

前后端分离之后，一次积分查询请求的完整链路是：Vue组件在mounted生命周期里调用封装的API函数，API函数通过Axios向/api/points/balance发送GET请求，后端Controller接收参数，调用Service层查询账户表，Mapper执行SQL，数据一层层返回，Vue把返回的balance字段渲染到页面上。

// src/api/points.js import request from '@/utils/request' export function getBalance(userId) { return request({ url: '/points/balance', method: 'get', params: { userId } }) }

request工具类一般基于Axios封装，统一设置baseURL和请求头。开发环境通过Vue CLI的devServer.proxy把/api前缀转发到后端，避免跨域；生产环境则直接把前端静态文件放到Tomcat的webapps目录或者单独用Nginx托管，把/api反向代理到后端。这与热词里多次出现的“vue路由”“vue安装及环境配置”“vue前后端分离请求token处理”直接相关——路由负责页面切换，请求封装负责统一处理token和错误码。

3. 搭建SSM后端，把积分增删改查做成标准接口

3.1 Maven项目结构与Spring配置

SSM项目的标准结构是controller、service、dao、entity四层，配合resources目录下的Spring配置。Maven的pom.xml需要引入Spring、SpringMVC、MyBatis、Druid连接池和Jackson序列化依赖。版本搭配建议：Spring 5.x、MyBatis 3.4.x、Jackson 2.9.x，JDK用1.8，这个组合最成熟。

<dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>5.1.5.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.1.5.RELEASE</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.3.2</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.16</version> </dependency> </dependencies>

需要特别留意的是Druid连接池的配置。积分系统对数据库连接稳定性要求高，Druid除了连接池功能外，还能监控SQL执行情况，直接在http://localhost:8080/druid查看慢查询和活跃连接，这对排查积分流水写入慢的问题很有帮助。配置里initialSize设为5，maxActive设为20，maxWait设为60000毫秒，防止数据库连接被耗尽。

3.2 Service层的积分增减与事务控制

积分变更是写操作，必须加事务。一个标准的积分发放操作包括三个步骤：查询用户积分账户、计算新余额、更新余额并写入流水。这三步要么全部成功，要么全部失败，不能出现余额更新了但流水没记录的脏数据。

@Service public class PointsService { @Autowired private PointsAccountMapper accountMapper; @Autowired private PointsLogMapper logMapper; @Transactional(rollbackFor = Exception.class) public void addPoints(Integer userId, Integer points, String description) { PointsAccount account = accountMapper.selectByUserIdForUpdate(userId); if (account == null) { throw new BusinessException("用户积分账户不存在"); } Integer newBalance = account.getBalance() + points; account.setBalance(newBalance); account.setTotalEarned(account.getTotalEarned() + points); accountMapper.updateBalance(account); PointsLog log = new PointsLog(); log.setUserId(userId); log.setChangeAmount(points); log.setBalanceAfter(newBalance); log.setType("EARN"); log.setDescription(description); logMapper.insert(log); } }

@Transactional(rollbackFor = Exception.class)表示任何异常都回滚，包括自定义的BusinessException。如果只写@Transactional，默认只回滚RuntimeException，积分这种资金类数据必须显式声明。selectByUserIdForUpdate使用了SELECT ... FOR UPDATE行级锁，并发时同一个用户的两笔加分请求会排队执行，避免余额计算覆盖。积分扣减逻辑类似，但需要先判断余额是否充足，不足则抛异常回滚。

3.3 Controller层接口设计与统一返回格式

前后端对接最大的问题是返回格式不统一。有的接口返回Map，有的直接返回实体，前端每个接口都要单独写解析逻辑。常见做法是封装一个Result类，所有接口统一返回{ code, message, data }结构。

@RestController @RequestMapping("/api/points") public class PointsController { @Autowired private PointsService pointsService; @GetMapping("/balance") public Result getBalance(@RequestParam Integer userId) { PointsAccount account = pointsService.getAccountByUserId(userId); return Result.success(account); } @PostMapping("/grant") public Result grantPoints(@RequestBody GrantRequest request) { pointsService.addPoints(request.getUserId(), request.getPoints(), request.getDescription()); return Result.success(null); } @GetMapping("/logs") public Result getLogs(@RequestParam Integer userId, @RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize) { PageInfo<PointsLog> page = pointsService.getLogsByUserId(userId, pageNum, pageSize); return Result.success(page); } }

@RestController直接返回JSON，省去@ResponseBody的重复标注。分页查询使用PageHelper插件，在Mapper接口传入pageNum和pageSize，Service层返回PageInfo对象，前端就能拿到total、list、pages等分页信息。GrantRequest使用@RequestBody接收JSON，请求体格式是{ "userId": 1, "points": 10, "description": "签到奖励" }。

接口路径设计时要带/api前缀，这样开发环境做代理转发时直接把/api打到后端，不用每个请求单独处理跨域。同时后端配置Cors跨域过滤器，允许来自http://localhost:8081的请求携带token访问，双保险防止联调时浏览器跨域拦截。

4. Vue前端实现积分看板与后台管理界面

4.1 Vue项目的初始化和路由配置

创建Vue项目的标准流程是先用Vue CLI或Vite初始化，然后安装vue-router和axios两个核心依赖。特别要注意Vue 2和Vue 3的初始化命令完全不同，Vue 2用vue create，Vue 3也可以用同一命令但选择Vue 3预设。热词里频繁出现的“vue安装及环境配置”“vue安装依赖”“创建vue项目”指的就是这个过程。

vue create points-manage-frontend cd points-manage-frontend npm install vue-router@3 axios

Vue 2项目对应vue-router@3，Vue 3项目需要vue-router@4，装错版本会导致路由不生效。路由配置里体现积分系统的核心功能模块：

// src/router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', redirect: '/dashboard' }, { path: '/dashboard', component: () => import('@/views/Dashboard.vue') }, { path: '/users', component: () => import('@/views/UserList.vue') }, { path: '/logs', component: () => import('@/views/PointsLog.vue') }, { path: '/rules', component: () => import('@/views/PointsRule.vue') } ] })

mode: 'history'让URL看起来更干净，但生产环境需要Nginx配置try_files回退到index.html，否则刷新页面就404。() => import()实现路由懒加载，按需加载每个页面组件，减少首屏白屏时间。

4.2 Axios封装与token处理

积分管理系统的接口需要鉴权，Axios不能直接裸用，需要封装统一的请求实例，在请求拦截器里加token，在响应拦截器里统一处理登录失效和错误弹窗。

// src/utils/request.js import axios from 'axios' import { Message } from 'element-ui' import router from '@/router' const request = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 10000 }) request.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = 'Bearer ' + token } return config }) request.interceptors.response.use( response => { const res = response.data if (res.code !== 200) { Message.error(res.message || '请求失败') if (res.code === 401) { router.push('/login') } return Promise.reject(new Error(res.message)) } return res }, error => { Message.error(error.message) return Promise.reject(error) } ) export default request

baseURL通过环境变量控制，开发环境是/api走代理，生产环境是完整域名。401状态码统一跳转登录页，避免每个页面都写一遍判断逻辑。Message组件来自Element UI，做全局错误提示，不用每个请求回调手动写alert。

4.3 积分看板页面的数据绑定与ECharts图表

积分看板是量化积分系统的门面，通常展示总积分、今日发放、今日消耗三个数字，下面配一张近七天积分变化趋势折线图。数字用Element UI的Card组件展示，图表用ECharts，通过npm install echarts安装。

<template> <div class="dashboard-container"> <el-row :gutter="20"> <el-col :span="8"> <el-card> <div class="stat-num">{{ totalPoints }}</div> <div class="stat-label">总积分余额</div> </el-card> </el-col> </el-row> <el-card> <div ref="chart" style="height: 400px"></div> </el-card> </div> </template> <script> import * as echarts from 'echarts' export default { data() { return { totalPoints: 0, trendData: [] } }, mounted() { this.fetchDashboardData() }, methods: { fetchDashboardData() { request({ url: '/points/dashboard', method: 'get' }).then(res => { this.totalPoints = res.data.totalBalance this.trendData = res.data.trend this.initChart() }) }, initChart() { const chart = echarts.init(this.$refs.chart) chart.setOption({ xAxis: { type: 'category', data: this.trendData.map(item => item.date) }, yAxis: { type: 'value' }, series: [{ type: 'line', data: this.trendData.map(item => item.points), smooth: true }] }) } } } </script>

注意mounted里初始化图表时，DOM必须已经渲染完成。如果数据是异步获取的，initChart必须在回调里调用，放在mounted同步位置会导致this.$refs.chart为undefined。echarts.init之前如果容器是隐藏的或宽高为0，图表也渲染不出来。

4.4 积分流水表格与分页组件

积分流水页是最常用的功能，按用户查看每一笔积分变动的来源、时间、变动额和余额。表格用Element UI的el-table，分页用el-pagination，两个组件配合实现服务端分页。核心是分页参数的变化要触发重新请求：

<template> <div> <el-table :data="logList" stripe> <el-table-column prop="description" label="变动说明"></el-table-column> <el-table-column prop="type" label="类型" width="100"> <template slot-scope="scope"> <el-tag :type="scope.row.type === 'EARN' ? 'success' : 'danger'"> {{ scope.row.type === 'EARN' ? '获得' : '消耗' }} </el-tag> </template> </el-table-column> <el-table-column prop="changeAmount" label="变动值" width="100"></el-table-column> <el-table-column prop="balanceAfter" label="变动后余额" width="120"></el-table-column> <el-table-column prop="createdTime" label="时间" width="180"></el-table-column> </el-table> <el-pagination background layout="total, prev, pager, next" :total="total" :current-page.sync="pageNum" :page-size="pageSize" @current-change="fetchLogs"> </el-pagination> </div> </template> <script> export default { data() { return { logList: [], total: 0, pageNum: 1, pageSize: 10 } }, created() { this.fetchLogs() }, methods: { fetchLogs() { request({ url: '/points/logs', method: 'get', params: { pageNum: this.pageNum, pageSize: this.pageSize } }).then(res => { this.logList = res.data.list this.total = res.data.total }) } } } </script>

el-table-column的prop属性必须与后端返回的JSON字段名完全对应，如果后端返回的是驼峰命名balanceAfter，前端就不能写成balance_after，这前后端约定字段名时最容易翻车的地方。@current-change绑定分页切换事件，换成第几页就自动重新调用fetchLogs。

5. 量化积分的进阶玩法，规则引擎与Excel导出

5.1 积分规则可配置化，前端表单驱动后端解析

基础版的积分系统把规则写到if...else里，比如“签到加10分，消费加1%”，看起来够用，但运营想调积分活动的时候只能找程序员改代码。把规则表做成可配置之后，运营自己就能调整活动方案。

常见做法是规则表加rule_code、rule_params和status字段，后端提供一个统一的触发接口。比如“消费返积分”这条规则，rule_params存的是{"percent": 0.01}，后端收到消费金额后按percent计算应发积分并写入流水。这样运营在管理后台改参数，前端用户立刻拿到新规则，不用重启Tomcat。

活动期间需要在基础规则上叠加奖励时，规则表里加一个priority字段控制执行顺序，比如签到送10分是常态规则，活动期间签到翻倍是临时规则，临时规则优先级更高，后执行覆盖先执行的部分。

5.2 Excel导出，把积分报表交给运营

积分系统的报表功能离不开Excel导出。后端用POI生成.xlsx文件，前端触发下载，这一步在毕业设计和实际项目验收里几乎是必用点。导出接口用HttpServletResponse输出文件流，不用走JSON返回，所以在Controller里要单独处理响应：

@GetMapping("/export") public void exportLogs(@RequestParam Integer userId, HttpServletResponse response) throws IOException { List<PointsLog> logs = pointsService.getAllLogsByUser(userId); Workbook workbook = new XSSFWorkbook(); Sheet sheet = workbook.createSheet("积分流水"); String[] headers = {"流水ID", "变动值", "变动后余额", "类型", "说明", "时间"}; Row headerRow = sheet.createRow(0); for (int i = 0; i < headers.length; i++) { headerRow.createCell(i).setCellValue(headers[i]); } int rowIdx = 1; for (PointsLog log : logs) { Row row = sheet.createRow(rowIdx++); row.createCell(0).setCellValue(log.getId()); row.createCell(1).setCellValue(log.getChangeAmount()); row.createCell(2).setCellValue(log.getBalanceAfter()); row.createCell(3).setCellValue(log.getType()); row.createCell(4).setCellValue(log.getDescription()); row.createCell(5).setCellValue(log.getCreatedTime().toString()); } response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); response.setHeader("Content-Disposition", "attachment; filename=points_log.xlsx"); workbook.write(response.getOutputStream()); workbook.close(); }

导出接口要特别注意内存占用，积分流水超过几万条时，用XSSFWorkbook全文一次性写入内存极容易OOM。超过10万条数据改用SXSSFWorkbook流式写入，它可以控制内存中保留的行数。同时导出不是用户核心操作，数据量大时用异步任务生成文件，生成完再通知前端下载，避免接口超时。

5.3 打包部署后布局异常，与积分散户对账验证

开发环境一切正常，npm run build后放到服务器却布局错乱，热词里“vue 打包后 布局异常”对应的正是这个问题。最常见的原因是静态资源路径用了绝对路径，打包配置里publicPath没有改成相对路径。在项目根目录的vue.config.js里设置：

module.exports = { publicPath: './', outputDir: 'dist', productionSourceMap: false }

publicPath: './'让打包后的CSS和JS文件引用相对路径，适合直接放到Tomcat webapps下用IP加端口访问的情形。如果用了Nginx搭配域名部署，可以保持publicPath: '/'并在Nginx里配置location /指向dist目录。

打包后另一个高频问题是history路由模式刷新404。Nginx配置需要加上：

location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; }

系统上线前做一次对账验证：初始化10个用户每人100积分，跑一批签到和兑换操作，然后执行一条SQL核对账户余额和流水差额。SELECT user_id, SUM(change_amount) FROM t_points_log GROUP BY user_id的结果必须等于t_points_account.balance，如果对不上，优先检查事务是否生效，以及是否有跳过流水表直接改余额的代码路径。这一步验证过，积分系统才算真正能用起来。

本文还有配套的精品资源，点击获取