当前位置：首页 > news >正文

AI工具箱源码+成品网站源码+springboot+vue

news 2025/9/18 2:43:39

大家好，今天给大家分享一个靠AI广告赚钱的项目：AI工具箱成品网站源码，源码支持二开，但不允许转售！！

本人专门为小型企业和个人提供的解决方案。不懂技术的也可以直接部署工具箱网站，成为站长，推广接靠广告赚钱。网站源码做了基础的seo优化，通过后台管理可以设置：网站logo，title，keyword，ai类目，ai工具应用，写一些ai相关的文章等。具体功能请看视频介绍。

哔哩哔哩视频演示

https://www.bilibili.com/video/BV1htoNYEEnr/?share_source=copy_web&vd_source=4bcaad8c0c78dc2c2408f7d53c6b0699

其它视频演示地址

AI工具箱源码+成品网站源码+springboot+vue

项目截图

项目实现与解析

前端介绍

项目前端采用了主流的vue3框架，大量使用了动画，比如粒子动画particles：

网络框架采用的是 axios，封装成了通用的requests.js 非常容易维护：

import axios from 'axios'
import { ElMessage } from 'element-plus'// 创建axios实例
const service = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL || '/',timeout: 15000
})// 请求拦截器
service.interceptors.request.use(config => {// 从localStorage获取tokenconst token = localStorage.getItem('token')if (token) {config.headers['Authorization'] = `Bearer ${token}`}// 添加全局请求头config.headers['app'] = 1return config},error => {console.error('请求错误:', error)return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {const res = response.dataif (response.data.code == '405') {// ElMessage({//   message: res.msg || '系统错误',//   type: 'error',//   duration: 5 * 1000// })return Promise.reject(new Error(res.msg || '系统错误'))}// 如果返回的状态码不是200，说明接口有问题，应该给出提示if (response.data.code !== '0') {// ElMessage({//   message: res.msg || '系统错误',//   type: 'error',//   duration: 5 * 1000// })return Promise.reject(new Error(res.msg || '系统错误'))}return res},error => {console.error('响应错误:', error)// 处理401未授权的情况if (error.response && error.response.status === 401) {// 清除token并跳转到登录页localStorage.removeItem('token')window.location.href = '/login'}ElMessage({message: error.message || '请求失败',type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)export default service

整个源码我已经整理清楚，移步（非免fei）：

gitcode（典） C 〇 M/hadluo2/ai-tools.git

各业务层的接口请求也抽取成独立的api js ，后期维护和修改的成本大大降低。

后端介绍

整个源码我已经整理清楚，移步（非免fei）：

gitcode（典） C 〇 M/hadluo2/ai-tools.git

由于公司有曾经在上市公司工作过的技术研发，所以代码也是很优秀，比如下面更新文章阅读数，考虑到并发性，使用了分布式锁：

/**** 文章阅读数加加*/public ApiResponse incrArticleVisit(ArticleDTO dto) {if (dto.getArticleId() == null || dto.getArticleId() <= 0) {return ApiResponse.success();}ThreadPoolUtils.execute(() -> {// 工具id作为keyString lockKey = "aitools:article:" + dto.getArticleId();long waitTime = 5000; // 等待5秒long leaseTime = 30000; // 持有锁30秒try {if (distributedLockUtil.tryLock(lockKey, waitTime, leaseTime)) {// 更新访问量Article toolbox = articleMapper.selectById(dto.getArticleId());if (toolbox != null) {toolbox.setVisit(toolbox.getVisit() == null ? 0 : toolbox.getVisit());toolbox.setVisit(toolbox.getVisit() + 1);articleMapper.updateById(toolbox);}}} finally {// 确保释放锁distributedLockUtil.unlock(lockKey);}});return ApiResponse.success();}

管理端和前端接口的分离，后期如果并发量上来了，需要将管理端和前端分离也是很容易。