（一）撸起袖子就是干 - 先把项目跑起来

陈小瓦
840 阅读4分钟

回顾

写完之后看到了一篇文章，写的更详细，贴在这里做参考：
用 React 和 Node/Express 开发全栈应用入门

前言

第一次从头开始写一个项目一头雾水，要怎么设计系统 ui，要实现哪些功能，是不是得加登录功能，要不要文章评论功能，鉴权怎么搞，一堆不会的问题，越想越乱迟迟不能动手。后来换了个思路，与其想这么多，不如先把项目跑起来，啥也不管，跑起来能通信就行。

前端项目

由于我不会 webpack，重点也不在这里，所以直接使用 create-react-app 来生成项目。

  1. 新建项目文件夹 my-blog
mkdir my-blog
cd my-blog
  1. 新建前端项目 front-end，我想使用 ts
npx create-react-app front-end --typescript // 支持 ts

如果最开始没有加 --typescript 生成了项目，也可以单独安装 ts

yarn add typescript @types/node @types/react @types/react-dom @types/jest

然后把项目里的 js 文件重命名为 tsx 后重启项目即可。

  1. 按照提示运行项目
cd front-end
yarn start

成功后自动打开页面

image.png 4. 看一下生成的项目目录

image.png
ok！看一眼就行，先不用管那么多，长征走了四分之一啦！接下来跑后端项目。

后端项目

跟前端项目一样，我们也使用 Express 一键生成工具 express-gengerator

  1. my-blog 下新建后端项目 back-end
cd my-blog
mkdir back-end
cd back-end
npx express-generator
  1. 按照提示安装依赖 & 运行
yarn // or npm install
yarn start

运行成功后页面

image.png 3. 看一眼目录结构

image.png

前后端通信

前后端项目分别跑起来后，下一步就想实现工作中最常写的流程：请求接口获得json数据后渲染出来。

前端页面

  1. 首先打开 front-end/src/app.js 把原来的内容全删了，换成最常见的一串，hooks 全怼上
import { useState, useEffect } from 'react'

function App() {
  const [data, setData] = useState({ name: '' })
  useEffect(() => {
    // 需要个接口
    // queryData().then(res => setData(res)).catch(err => console.log(err))
  }, [])
  return <div className='App'>{data.name}</div>
}

export default App

既然需要接口了就搞个接口

在 src 目录下新建 api 文件夹，新建 index.ts，考虑到现在后端项目跑在 localhost:3000，暂定接口名就是这个

// src/api/index.ts

export const queryData = () => fetch('http://localhost:3000/', {method: 'get'}).then(res => res.json())

后端接口

前端页面写好后，继续处理后端接口。
前端页面请求的接口是 localhost:3000，所以我们需要定义一个对应的 get 接口

  1. 看一下 back-end/app.js，凭感觉看到一行 app.use('/', indexRouter)，盲猜修改这里

image.png

  1. 打开 indexRouter 看一下

image.png
想一下刚才项目跑起来的页面， 感觉是直接返回了 html，改成返回数据试试

router.get('/', function(req, res, next) {
  res.send('hello');
});
  1. 尝试前后端项目都运行起来，先把后端运行起来，起在 3000 端口上，然后启前端项目，这时显示 3000 端口被占用，试着启在 3001 端口上，然后访问 localhost:30001

image.png

image.png hhh不出意外的跨域了，但讲真目前为止我对跨域也仅限于了解概念，硬背面试题的那种程度。不过不慌，这次唯一的目的就是让接口能通信，所以直接谷歌 express 如何解决跨域，找个一个简单粗暴的方法 4. 安装 cors 包

yarn add cors
  1. 在 app.use('/')前增加代码
var cors=require("cors");

app.use(cors());

重新运行项目

image.png yeah！200！但是此时页面还是没有数据，看下接口返回

image.png

image.png 跟想要的 json 数据不符合，又查了一下 express 如何返回 json 数据
修改一下 indexRouter

router.get('/', function (req, res, next) {
  res.json({ name: 'hello' })
})

重新运行项目

image.png yeah！大功告成！！

热更新

发现 express 每次修改后都得需要重新允许，安装 nodemon 实现热更新

// 1. 安装 nodemon
yarn add nodemon

// 2. 修改 package.json
  "scripts": {
    "start": "nodemon ./bin/www"
  },

// 3. 重新执行，即可热更新

总结

当看到 hello 出现的时候还是很激动的，虽然中间好多知识点都不清不楚的，但一个个解决问题，把项目运行起来，建立起了整体概念。接下来则要连接数据库了，crud boy上线：
（二）连接数据库

avatar
文章
阅读
粉丝