使用|使用 Next.js、LeanCloud 和 Tailwind CSS 创建全栈应用
了解如何使用 LeanCloud 创建数据库并使用 Next.js 创建带有服务端的应用程序。前言 通过本教程您将了解到：
- 使用 LeanCloud 作为免费数据库
- 使用 Next.js 开发一个包含前后端的应用
- 将应用发布到 Vercel
- 使用 Tailwind 轻松设置样式
文章图片
创建 Next.js 应用 使用 Next.js 官方模板创建项目
& npx create-next-app --example with-tailwindcss my-app该目标已经为您配置好以下内容：
- Next.js 最新版本
- TypeScript
- Tailwind CSS & 自动去除未使用的类名
- Next.js API 路由示例
pages/index.tsx 是应用的入口文件，我们先来修改整体布局// pages/index.tsx
import type { NextPage } from 'next'
import Head from 'next/head'const Home: NextPage = () => {
return (我看过的 - 锐客网
我看过的
电影 / 动漫 / 剧 / 书)
}export default Home接下来，我们需要为应用添加一个卡片组件，用于显示影视作品的信息，新建
components/card.tsx 文件// components/card.tsx
import Image from 'next/image'export const Card: React.FC = (props) => {
return (2022/04/02
鬼灭之刃
（2019）
评分：
还行
分类：
动漫
老套的升级打怪式剧情，但动画制作的质量还不错，适合下饭图片我们使用了
next/image 组件，我们需要修改一下 next.config.js 文件，添加图片域名配置// next.config.js
module.exports = {
reactStrictMode: true,
images: {
domains: [
'img1.doubanio.com',
'img2.doubanio.com',
'img3.doubanio.com',
'img9.doubanio.com',
],
},
}然后我们可以添加
pages/index.tsx 中，看一下效果// pages/index.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import { Card } from '../components/card'const Home: NextPage = () => {
return (我看过的 - 锐客网
我看过的
电影 / 动漫 / 剧 / 书至此应用的外观已经初见雏形了，接下来我们为
Card 添加一些 props，首先我们来定义 props 的类型，我们在根目录下新建一个 types.ts 文件// types.ts
export type Record = {
date: string
title: string
score: 1 | 2 | 3 | 4 | 5
comment?: string
year: number
img: string
type: 'movie' | 'tv' | 'anime' | 'book'
}之所以放在根目录，是因为等一下创建 API 时也会用到这个类型
接下来我们修改一下
Card 组件，将数据部分替换成 props// components/card.tsx
import Image from 'next/image'
import { Record } from '../types'type Props = Recordconst Score: React.FC> = ({ score }) => {
switch (score) {
case 1:
return 不看也罢
case 2:
return 无聊
case 3:
return 还行
case 4:
return 值得一看
case 5:
return 神作！
}
}const renderType = (type: Props['type']) => {
const typeMap = {
movie: '电影',
tv: '剧',
book: '书',
anime: '动漫',
}
return typeMap[type] ?? '未知'
}export const Card: React.FC = (props) => {
return ({ new Date(props.date).toLocaleDateString() }
{ props.title }
（{props.year}）
评分：
分类：
{ renderType(props.type) }
{ props.comment }设置 LeanCloud Storage LeanCloud 是一个 BaaS(Backend as a Service)^Backend as a Service: [后端即服务] 平台，建议注册国际版 LeanCloud，可免实名认证
首先，我们需要在 Data Storage 中创建一个 Class
- 将 Class 命名为
Records - 添加
img、title、type、comment和type字段，它们的类型都是String - 添加
year、score字段，将他们的类型设置为Number
文章图片
创建读取数据 API 现在我们来创建一个 API 用于读取 LeanCloud 中的数据
首先我们需要安装 LeanCloud JS SDK
$ npm install leancloud-storage --save然后我们需要将 LeanCloud 的配置信息添加到
.env.local 中，配置信息可以在 "Settings" -> "App keys" 中找到LEANCLOUD_APP_ID="{replace-your-app-id}"
LEANCLOUD_APP_KEY="{replace-to-your-app-key}"
LEANCLOUD_SERVER_URL="{replace-to-your-server-url}"新建
pages/api/records.ts// pages/api/records.ts
import AV from 'leancloud-storage'
import { Record } from '../../types'import type { NextApiRequest, NextApiResponse } from 'next'export default async function handler(
_req: NextApiRequest,
res: NextApiResponse
) {
try {
const {
LEANCLOUD_APP_ID: appId,
LEANCLOUD_APP_KEY: appKey,
LEANCLOUD_SERVER_URL: serverURL,
} = process.env
if (!appId || !appKey || !serverURL) {
res.status(500).json({ error: 'Missing Leancloud config' } as any)
return
}AV.init({ appId, appKey, serverURL })const query = new AV.Query('Record')const data = https://www.it610.com/article/await query.find()
const records: Record[] = data.reverse().map(x => {
const json = x.toJSON()
return {
date: json.createdAt,
title: json.title,
score: json.score,
comment: json.comment,
year: json.year,
img: json.img,
type: json.type,
}
})
res.status(200).json(records)
} catch (e: any) {
res.status(500).json(e)
}
} 接着我们修改一下
pages/index.tsx，从 /api/records 接口获取数据// pages/index.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import { useEffect, useState } from 'react'
import { Card } from '../components/card'
import { Record } from '../types'const Home: NextPage = () => {const [ records, setRecords ] = useState(null)
useEffect(() => {
fetch('/api/records')
.then(res => res.json())
.then(setRecords)
}, [])const renderCards = () => {
if (!records) {
return null
}
return records.map(x => 我看过的 - 锐客网
我看过的
电影 / 动漫 / 剧 / 书{ renderCards() })
}export default Home 部署到 Vercel 我们的应用已经可以在本地运行了，下一步让我们把它部署到 Vercel 上。
- 将我们的代码提交到 git 仓库（如 Github、GitLab、BitBucket）
- 将 Next.js 项目导入 Vercel
- 在导入期间设置环境变量
- 点击“Deploy”
添加数据 现在我们的应用已经运行在公网上了，我们可以在 LeanCloud 上尝试添加几条数据，然后刷新页面看看是否能够正常显示。
总结 【使用|使用 Next.js、LeanCloud 和 Tailwind CSS 创建全栈应用】在本教程中，我们能够创建一个 Next.js 应用程序，通过 Tailwind CSS 美化界面，显示从 LeanCloud 动态获取的数据列表。
- 查看源码
- 查看演示
本文转载自我的博客 https://www.zehao.me/full-sta...
推荐阅读
- 理解为什么要给useEffect声明依赖
- centos之上|docker从安装到简单使用（初级）
- Java|Java序列化和反序化
- Java|Java枚举类型
- python|使用OpenCV和MediaPipe实现基于深度学习的人体姿态估计
- python|python常见报错合集
- 使用Pytorch在StarCraft II 星际争霸2上实现多智能体强化学习算法
- 一文读懂什么是元宇宙，元宇宙使用技术
- XSS系列之3种类型
- Python|Python之单元测试使用的一点心得