个人作品展示平台小程序：基于ThinkPHP+uni-app的全栈开发实战
前后端分离架构，包含前台展示与后台管理，支持数据可视化与分析
🎯 项目概述
今天给大家分享一个完整的个人作品展示平台项目，包含前台展示系统和后台管理系统。该项目采用前后端分离架构，前端基于uni-app（Vue.js）开发，后端基于ThinkPHP框架提供RESTful API接口。虽然前端代码未完全开源，但提供了足够的基础功能和自定义空间。
📁 源码地址
- 后端源码：
- 前端源码：
🚀 系统功能特色
前台展示功能
- 个人信息展示：完整展示个人简介、技术栈、联系方式
- 项目案例展示：支持项目分类、图片轮播、详情查看
- 数据可视化：集成ECharts，展示客户分布地图和访问统计
- 多渠道联系：提供多种联系方式并支持在线留言
后台管理功能
- 用户权限管理：完善的用户管理和权限控制系统
- 项目内容管理：项目信息、分类、图片等内容管理
- 数据统计分析：访问统计、地理分布、热门页面分析
- 系统参数配置：灵活的系统设置和技术栈管理
🛠️ 技术架构
后端技术栈
// ThinkPHP RESTful API 示例
namespace app\api\controller;
use think\Controller;
use think\Request;
class Projects extends Controller
{
// 获取项目列表
public function index()
{
$projects = model('Project')->with('category')->select();
return json(['code' => 200, 'data' => $projects]);
}
// 获取单个项目详情
public function read($id)
{
$project = model('Project')->with('images')->find($id);
return json(['code' => 200, 'data' => $project]);
}
}前端技术栈
// uni-app 页面示例
<template>
<view class="project-detail">
<swiper :indicator-dots="true" :autoplay="true">
<swiper-item v-for="(image, index) in project.images" :key="index">
<image :src="image.url" mode="aspectFill" />
</swiper-item>
</swiper>
<view class="project-info">
<text class="title">{{ project.title }}</text>
<text class="description">{{ project.description }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
project: {}
}
},
onLoad(options) {
this.getProjectDetail(options.id)
},
methods: {
async getProjectDetail(id) {
const res = await this.$http.get(`/projects/${id}`)
this.project = res.data
}
}
}
</script>📊 数据可视化实现
系统集成了ECharts实现丰富的数据可视化效果：
// ECharts 配置示例
const initChart = () => {
const chart = echarts.init(document.getElementById('visit-chart'))
const option = {
title: { text: '访问统计' },
tooltip: {},
xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
yAxis: {},
series: [{
name: '访问量',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130]
}]
}
chart.setOption(option)
}⚙️ 安装部署指南
环境要求
- PHP版本：7.4+（推荐8.0+）
- 数据库：MySQL 5.7+ 或 PostgreSQL
- Web服务器：Nginx/Apache
- Node.js：14.0+（前端构建需要）
后端部署步骤
克隆源码
git clone https://github.com/newpetersun/petersun-php-admin.git cd petersun-php-admin安装依赖
composer install环境配置
cp .env.example .env # 编辑.env文件配置数据库信息数据库初始化
php think migrate:run php think seed:run配置Web服务器
# Nginx配置示例 server { listen 80; server_name your-domain.com; root /path/to/petersun-php-admin/public; location / { try_files $uri $uri/ /index.php?$query_string; } location ~ \.php$ { include fastcgi_params; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; } }
前端部署步骤
克隆源码
安装依赖
npm install配置API地址
// 修改config/api.js中的后端API地址 export const BASE_URL = 'https://your-api-domain.com/api'构建项目
# 构建H5版本 npm run build:h5 # 或构建微信小程序版本 npm run build:mp-weixin
🔒 代码安全保护建议
对于PHP后端代码，建议使用加密保护以防止源码泄露：
推荐加密平台
PHP代码加密平台 提供：
- 多种加密方式：Sg16、Deck3、Ic12等多种版本
- 灵活的方案：支持goto、enphp、noname等加密方式
- 完全免费：全站免费使用，支持扩展和非扩展加密
- 易于使用：轻松保护代码安全
加密示例
# 加密前后对比
# 加密前：可读的PHP代码
public function getUserInfo($userId) {
return Db::name('user')->where('id', $userId)->find();
}
# 加密后：保护的核心业务逻辑
# 加密后的代码无法直接阅读，有效防止源码分析🎨 自定义修改指南
虽然前端未完全开源，但支持以下自定义：
样式修改
/* 修改主题颜色 */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
/* 调整布局样式 */
.project-card {
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}功能扩展建议
- 添加博客模块：集成Markdown编辑器
- 增强SEO：实现SSR服务端渲染
- 多语言支持：添加i18n国际化
- 性能优化：实现缓存和CDN加速
📈 项目特色亮点
- 完整的全栈解决方案：提供从后端到前端的完整代码
- 现代化技术栈：采用主流框架和开发模式
- 丰富的可视化效果：集成ECharts实现数据展示
- 响应式设计：完美适配各种设备屏幕
- 良好的代码结构：便于二次开发和功能扩展
💡 使用建议
- 学习参考：适合学习ThinkPHP和uni-app开发
- 项目展示：可用于个人作品集展示
- 二次开发：基于现有架构进行功能扩展
- 商业应用：适当修改后可用于商业项目
🎉 结语
这个个人作品展示平台项目提供了一个完整的前后端分离开发范例，无论是学习全栈开发技术，还是需要搭建个人作品展示网站，都是很好的选择。项目的模块化设计和清晰的代码结构，使得二次开发和功能扩展变得相对容易。
温馨提示：
- 部署前请仔细阅读文档和代码注释
- 生产环境建议启用HTTPS和代码加密
- 定期备份数据库和源码文件
如果您对这个项目感兴趣，欢迎：
- ⭐ Star GitHub仓库支持开发者
- 🐛 提交Issue反馈问题
- 🔄 Fork代码进行二次开发
欢迎在评论区留言交流使用体验和技术问题！
