一 项目简介
大学信息查询平台是一个基于React + Vite + Tailwind CSS构建的现代化Web应用,专门用于查询中国各大高校的详细信息。该项目不仅功能实用,更在用户体验和界面设计上做到了极致。

二 核心功能
2.1. 智能大学搜索
javascript
// 搜索功能核心代码
const searchUniversity = async (universityName) => {
if (!universityName.trim()) {
setError('请输入大学名称');
return;
}
setLoading(true);
setError(null);
try {
const result = await UniversityService.searchUniversity(universityName);
if (result.success) {
const formattedData = UniversityService.formatUniversityData(result.data);
setSearchResults(formattedData);
} else {
setError(result.message);
}
} catch (err) {
setError(err.message || '搜索失败');
} finally {
setLoading(false);
}
};

2.2 错误处理
javascript
// 错误处理机制
export class UniversityService {
static async searchUniversity(name) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 10000);
try {
// 先尝试直接请求
const response = await fetch(`${API_BASE_URL}?daxue=${encodeURIComponent(name)}`, {
signal: controller.signal
});
clearTimeout(timeoutId);
return await response.json();
} catch (error) {
// 失败时使用备用代理
const proxyResponse = await fetch(`${CORS_PROXIES[1]}${API_BASE_URL}?daxue=${encodeURIComponent(name)}`, {
signal: controller.signal
});
clearTimeout(timeoutId);
return await proxyResponse.json();
}
}
}

2.3 界面设计亮点
javascript
```jsx
// 学士帽图标动画效果
<motion.div
animate={{
scale: [1, 1.1, 1],
rotate: [0, -5, 0, 5, 0]
}}
transition={{
duration: 3,
repeat: Infinity,
ease: "easeInOut"
}}
whileHover={{ scale: 1.2 }}
>
<GraduationCap className="w-12 h-12 text-primary-600" />
</motion.div>
```
### 2. 打字机效果展示
```jsx
// 学校信息逐字显示效果
const TypewriterText = ({ text, speed = 50, delay = 0 }) => {
const [displayText, setDisplayText] = useState('');
useEffect(() => {
const timer = setTimeout(() => {
let currentIndex = 0;
const interval = setInterval(() => {
if (currentIndex <= text.length) {
setDisplayText(text.slice(0, currentIndex));
currentIndex++;
} else {
clearInterval(interval);
}
}, speed);
return () => clearInterval(interval);
}, delay);
return () => clearTimeout(timer);
}, [text, speed, delay]);
return (
<div className="inline-block">
{displayText}
<span className="animate-pulse">|</span>
</div>
);
};
三 技术栈特色
前端技术
**React 18** + **Vite** - 现代化的开发体验
**Tailwind CSS** - 实用优先的CSS框架
**Framer Motion** - 流畅的动画效果
**Lucide React** - 精美的图标库
工程化配置
javascript
// vite.config.js
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
open: true
},
css: {
postcss: {
plugins: [tailwindcss(), autoprefixer()]
}
}
});
```
```javascript
// tailwind.config.js
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
primary: {
100: '#dbeafe',
200: '#bfdbfe',
600: '#2563eb',
}
}
}
},
plugins: []
};
四 项目亮点
1. 响应式设计
完美适配桌面端和移动端
流畅的过渡动画效果
现代化的玻璃拟态设计
2. 用户体验优化
实时搜索反馈
优雅的加载状态
智能的错误处理
直观的操作引导
3. 代码质量
清晰的组件结构
可复用的自定义Hook
类型安全的API调用
完善的错误边界
五 快速开始
环境要求
Node.js 16+
npm 或 yarn
安装运行
安装依赖
npm install
启动开发服务器
npm run dev
构建生产版本
npm run build
👍 **点赞收藏是对我最大的鼓励!**
-
您的每一个点赞都是我继续分享的动力
-
收藏这个项目,随时可以回来学习参考
-
分享给更多同学,一起进步成长