快速开始指南

本文档将帮助您快速搭建和运行好耐得科技网站项目。

前置要求

Node.js 18 或更高版本
npm 或 yarn 包管理器
代码编辑器（VS Code 推荐）

安装步骤

1. 安装依赖

npm install

2. 配置环境变量

复制 .env.example 为 .env.local：

# Windows
copy .env.example .env.local

编辑 .env.local，配置必要的环境变量：

# API地址（开发环境）
NEXT_PUBLIC_API_URL=http://localhost:3000
NEXT_PUBLIC_SITE_URL=http://localhost:3000

# Session 密钥（用于加密session，请修改为随机字符串）
SESSION_SECRET=your-secret-key-change-this-in-production

# Google reCAPTCHA v3 密钥
# 获取密钥：https://www.google.com/recaptcha/admin
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your_recaptcha_site_key_here
RECAPTCHA_SECRET_KEY=your_recaptcha_secret_key_here

3. 初始化数据库

# 生成 Prisma Client
npm run prisma:generate

# 创建数据库和表结构
npm run prisma:push

# 导入初始数据（可选）
npx tsx prisma/seed.ts

4. 启动开发服务器

npm run dev

访问：http://localhost:3000

项目概述

技术栈

框架: Next.js 14 (App Router)
语言: TypeScript
样式: TailwindCSS
图标: Lucide React
数据库: Prisma + SQLite
认证: Session + bcrypt
富文本: React Quill
图片处理: Sharp

项目结构

hndqc/
├── src/
│   ├── app/                    # Next.js App Router页面
│   │   ├── (public)/          # 公开页面
│   │   │   ├── page.tsx       # 首页
│   │   │   ├── about/         # 关于我们
│   │   │   ├── products/      # 产品介绍
│   │   │   ├── news/          # 新闻动态
│   │   │   ├── careers/       # 招贤纳士
│   │   │   └── contact/       # 联系我们
│   │   ├── login/             # 登录页面
│   │   └── admin/            # 后台管理（需认证）
│   │       ├── layout.tsx     # 后台布局
│   │       ├── page.tsx       # 仪表盘
│   │       ├── news/          # 新闻管理
│   │       ├── products/      # 产品管理
│   │       ├── jobs/          # 招聘管理
│   │       ├── users/         # 用户管理
│   │       ├── categories/    # 分类管理
│   │       ├── pages/         # 页面管理
│   │       ├── company/       # 公司信息
│   │       ├── settings/      # 站点设置
│   │       └── cache/         # 缓存管理
│   ├── api/                  # API 路由
│   │   ├── auth/           # 认证API
│   │   ├── news/           # 新闻API
│   │   ├── products/       # 产品API
│   │   ├── jobs/           # 招聘API
│   │   ├── users/          # 用户API
│   │   ├── categories/     # 分类API
│   │   ├── pages/          # 页面API
│   │   ├── company/        # 公司信息API
│   │   ├── settings/       # 设置API
│   │   ├── upload/         # 图片上传API
│   │   └── cache/          # 缓存API
│   ├── components/            # React组件
│   │   ├── admin/          # 后台组件
│   │   │   ├── RichTextEditor.tsx
│   │   │   ├── ImageUpload.tsx
│   │   │   └── Delete*.tsx
│   │   ├── Header.tsx       # 网站头部
│   │   └── Footer.tsx       # 网站页脚
│   └── lib/                   # 工具函数
│       ├── prisma.ts       # Prisma客户端
│       ├── auth.ts         # 认证函数
│       ├── validations.ts  # Zod验证schemas
│       └── sanitize.ts     # HTML清洗
├── public/                    # 静态资源
│   ├── logo.png
│   └── uploads/          # 上传的图片
├── prisma/
│   ├── schema.prisma       # 数据库模型
│   ├── seed.ts            # 初始数据
│   └── dev.db             # SQLite数据库（自动生成）
├── tailwind.config.ts         # TailwindCSS配置
├── tsconfig.json              # TypeScript配置
├── next.config.js             # Next.js配置
└── package.json               # 项目依赖

快速命令

# 开发
npm run dev                # 启动开发服务器（http://localhost:3000）

# 构建
npm run build              # 构建生产版本
npm start                   # 启动生产服务器（端口3001）

# 数据库
npm run prisma:generate    # 生成Prisma客户端
npm run prisma:push        # 推送schema到数据库
npm run prisma:studio      # 打开数据库可视化工具
npx tsx prisma/seed.ts    # 导入初始数据

# 代码质量
npm run lint               # 运行ESLint检查

访问地址

前台网站

首页: http://localhost:3000
产品: http://localhost:3000/products
新闻: http://localhost:3000/news
招聘: http://localhost:3000/careers
关于我们: http://localhost:3000/about
联系我们: http://localhost:3000/contact

后台管理

登录页: http://localhost:3000/login
仪表盘: http://localhost:3000/admin
默认账号: admin / admin123

API端点

新闻: http://localhost:3000/api/news
产品: http://localhost:3000/api/products
招聘: http://localhost:3000/api/jobs
分类: http://localhost:3000/api/categories
用户: http://localhost:3000/api/users
设置: http://localhost:3000/api/settings
公司信息: http://localhost:3000/api/company

数据库模型

主要表

User - 用户表
用户名、密码（bcrypt加密）
姓名、角色、状态
News - 新闻表
标题、内容（HTML）、摘要
分类、图片URL
发布状态
Product - 产品表
名称、描述、详情
分类、图片
特性、规格、应用场景
发布状态、排序
JobPosition - 招聘职位表
职位名称、部门、地点
薪资、描述、要求
发布状态、排序
Category - 分类表
名称、类型（news/product）
排序
Page - 页面内容表
slug、标题、内容
CompanyInfo - 公司信息表
名称、描述、联系方式
SiteSetting - 站点设置表
key-value配置

默认账号

用户名: admin
密码: admin123

重要： 首次登录后请立即修改密码！

常见问题

Q1: 安装依赖时报错？

A: 尝试以下步骤： 1. 删除 node_modules 文件夹 2. 删除 package-lock.json 3. 重新运行 npm install

Q2: 数据库初始化失败？

A: 1. 确认运行了 npm run prisma:generate 2. 检查 prisma/schema.prisma 是否存在 3. 删除 prisma/dev.db 重新运行

Q3: 登录后台提示失败？

A: 1. 确认使用正确的账号密码 2. 检查 reCAPTCHA 密钥是否配置 3. 如果在中国部署，考虑使用替代方案（见中国部署指南）

Q4: 图片上传失败？

A: 1. 检查文件大小是否超过5MB 2. 确认 /public/uploads 目录存在 3. 查看浏览器控制台错误信息

Q5: 页面不显示数据？

A: 1. 确认内容已设置为"已发布"状态 2. 清除浏览器缓存（Ctrl+Shift+R） 3. 检查 API 是否正常响应

下一步

安装完成后，建议查看以下文档：

后台管理完整指南 - 详细的后台功能说明
部署指南 - 如何部署到生产环境
中国部署指南 - 中国特殊网络环境部署注意事项

祝开发顺利！🚀

宏旭文档

快速开始指南

快速开始指南

前置要求

安装步骤

1. 安装依赖

2. 配置环境变量

3. 初始化数据库

4. 启动开发服务器

项目概述

技术栈

项目结构

快速命令

访问地址

前台网站

后台管理

API端点

数据库模型

主要表

默认账号

常见问题

Q1: 安装依赖时报错？

Q2: 数据库初始化失败？

Q3: 登录后台提示失败？

Q4: 图片上传失败？

Q5: 页面不显示数据？

下一步

评论 (1)