用ReactJS和Back4App构建博客平台单页面应用（SPA）

1\ 介绍 本教程将指导您通过使用 reactjs 作为前端和 back4app 作为后端构建完整的单页面应用程序 (spa) 的过程。我们将涵盖从设置开发环境、使用 redux 管理全局状态、实现路由和导航，到使用 back4app 执行 crud 操作的所有内容。 目标： 创建一个功能齐全的博客平台，用户可以创建、编辑和删除博客文章，读者可以查看和评论文章。该应用程序将利用 reactjs 作为前端，back4app 作为后端操作。 主要特性： 用户认证 文章的创建、编辑和删除 查看文章和评论 使用 redux 管理全局状态 使用 react router 进行路由和导航 先决条件： javascript、reactjs 和 redux 的基本知识 一个活跃的 back4app 账户 在本地环境中安装 node js 和 npm 2\ 初始设置 2 1 设置 reactjs 项目 步骤 1 使用 create react app 创建一个新的 react 项目。 步骤 2 启动开发服务器。 2 2 设置 back4app 步骤 1 登录到您的 back4app 账户并创建一个新应用程序。 步骤 2 在 back4app 仪表板中，导航到 "core > browser" 并创建以下类： 帖子 （用于存储博客文章） 评论 （用于存储对帖子的评论） 步骤 3 从 "应用设置 > 安全与密钥" 部分获取您的应用程序 id 和 javascript 密钥。 2 3 安装必要的包 安装 react、redux 和 back4app 集成所需的依赖项。 npm install parse @reduxjs/toolkit react redux react router dom 2 4 配置 parse sdk 步骤 1 创建一个名为 parseconfig js 的文件在 src 文件夹中并配置 parse sdk import parse from 'parse'; parse initialize("your app id", "your javascript key"); parse serverurl = 'https //parseapi back4app com/'; export default parse; 3\ 博客平台的开发 3 1 项目结构 按照以下结构组织项目 src/ \| components/ \| | postlist js \| | postdetails js \| | postform js \| | commentlist js \| redux/ \| | store js \| | postslice js \| | commentslice js \| parseconfig js \| app js \| index js 3 2 使用 redux 实现全局状态管理 步骤 1 在 redux/store js 中设置 redux 存储 import { configurestore } from '@reduxjs/toolkit'; import postreducer from ' /postslice'; import commentreducer from ' /commentslice'; export const store = configurestore({ reducer { posts postreducer, comments commentreducer, }, }); 步骤 2 在 redux/postslice js 中创建一个切片以管理帖子 import { createslice, createasyncthunk } from '@reduxjs/toolkit'; import parse from ' /parseconfig'; export const fetchposts = createasyncthunk('posts/fetchposts', async () => { const query = new parse query('post'); const results = await query find(); return results map(post => ({ id post id, title post get('title'), content post get('content'), })); }); const postslice = createslice({ name 'posts', initialstate { list \[], status null, }, reducers {}, extrareducers { \[fetchposts fulfilled] (state, action) => { state list = action payload; state status = 'success'; }, }, }); export default postslice reducer; 步骤 3 在 redux/commentslice js 中创建一个切片以管理评论 import { createslice, createasyncthunk } from '@reduxjs/toolkit'; import parse from ' /parseconfig'; export const fetchcomments = createasyncthunk('comments/fetchcomments', async (postid) => { const query = new parse query('comment'); query equalto('post', { type 'pointer', classname 'post', objectid postid }); const results = await query find(); return results map(comment => ({ id comment id, content comment get('content'), postid postid, })); }); const commentslice = createslice({ name 'comments', initialstate { list \[], status null, }, reducers {}, extrareducers { \[fetchcomments fulfilled] (state, action) => { state list = action payload; state status = 'success'; }, }, }); export default commentslice reducer; 3 3 使用 react router 实现路由 步骤 1 在 app js 中设置路由。 import { browserrouter as router, route, switch } from 'react router dom'; import postlist from ' /components/postlist'; import postdetails from ' /components/postdetails'; import postform from ' /components/postform'; function app() { return ( \<router> \<switch> \<route path="/" exact component={postlist} /> \<route path="/post/\ id" component={postdetails} /> \<route path="/new post" component={postform} /> \</switch> \</router> ); } export default app; 3 4 创建组件 步骤 1 创建 postlist 组件以显示所有博客文章。 import react, { useeffect } from 'react'; import { usedispatch, useselector } from 'react redux'; import { fetchposts } from ' /redux/postslice'; import { link } from 'react router dom'; const postlist = () => { const dispatch = usedispatch(); const posts = useselector(state => state posts list); useeffect(() => { dispatch(fetchposts()); }, \[dispatch]); return ( \<div> \<h1>blog posts\</h1> \<link to="/new post">create new post\</link> \<ul> {posts map(post => ( \<li key={post id}> \<link to={`/post/${post id}`}>{post title}\</link> \</li> ))} \</ul> \</div> ); }; export default postlist; 步骤 2 创建 postdetails 组件以显示特定文章的详细信息。 import react, { useeffect } from 'react'; import { useparams } from 'react router dom'; import { usedispatch, useselector } from 'react redux'; import { fetchcomments } from ' /redux/commentslice'; const postdetails = () => { const { id } = useparams(); const dispatch = usedispatch(); const comments = useselector(state => state comments list); useeffect(() => { dispatch(fetchcomments(id)); }, \[dispatch, id]); return ( \<div> \<h1>post details\</h1> \<p>comments \</p> \<ul> {comments map(comment => ( \<li key={comment id}>{comment content}\</li> ))} \</ul> \</div> ); }; export default postdetails; 步骤 3 创建 postform 组件用于创建和编辑文章。 import react, { usestate } from 'react'; import parse from ' /parseconfig'; import { usehistory } from 'react router dom'; const postform = () => { const \[title, settitle] = usestate(''); const \[content, setcontent] = usestate(''); const history = usehistory(); const handlesubmit = async (e) => { e preventdefault(); const post = parse object extend('post'); const post = new post(); post set('title', title); post set('content', content); try { await post save(); history push('/'); } catch (error) { console error('error creating post ', error); } }; return ( \<div> \<h1>create new post\</h1> \<form onsubmit={handlesubmit}> \<div> \<label>title\</label> \<input type="text" value={title} onchange={(e) => settitle(e target value)} /> \</div> \<div> \<label>content\</label> \<textarea value={content} onchange={(e) => setcontent(e target value)} /> \</div> \<button type="submit">submit\</button> \</form> \</div> ); }; export default postform; 4\ 测试和部署 4 1 测试应用程序 步骤 1 在本地测试应用程序以确保所有功能正常工作 测试创建、编辑和删除帖子。 验证每个帖子的评论是否正确显示。 测试不同路由之间的导航。 4 2 为生产构建应用程序 步骤 1 为生产构建应用程序。 npm run build 步骤 2 将构建的应用程序部署到像 back4app containers 这样的托管服务 4 3 配置 back4app 以用于生产 back4app 已经是一个生产就绪的环境，但您可以查看您的代码并更新任何必要的环境变量和密钥。 5\ 结论 总结： 本教程指导您创建一个完整的博客平台单页应用程序，使用 reactjs 和 back4app。您学习了如何在 back4app 上设置和配置后端，使用 redux 管理全局状态，使用 react router 实现路由，以及执行 crud 操作。该平台现在可以扩展更多功能，例如用户身份验证、高级评论系统等。 后续步骤： 探索使用 back4app 添加用户身份验证。 增强评论系统，实现实时更新。 实现 seo 功能以提高搜索引擎可见性。 6\ 源代码和其他资源 github 仓库： 提供应用程序完整源代码的 github 链接。 附加资源： reactjs 文档 https //reactjs org/docs/getting started html redux 文档 https //redux js org/ react router 文档 https //reactrouter com/ back4app 文档 https //www back4app com/docs 7\ 常见问题 / 故障排除 常见问题： 连接到 back4app 时出错： 请仔细检查您的应用程序 id 和 javascript 密钥。 redux 状态未更新： 确保您的操作和 reducer 配置正确。 支持： 如果您遇到任何问题，可以联系 back4app 支持或在相关开发者社区提问。