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

前言

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

前端项目

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

1. 新建项目文件夹 my-blog

mkdir my-blog
cd my-blog
复制代码

2. 新建前端项目 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 后重启项目即可。

3. 按照提示运行项目

cd front-end
yarn start
复制代码

成功后自动打开页面

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

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

后端项目

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

1. my-blog 下新建后端项目 back-end

cd my-blog
mkdir back-end
cd back-end
npx express-generator
复制代码

2. 按照提示安装依赖 & 运行

yarn // or npm install
yarn start
复制代码

运行成功后页面

3. 看一眼目录结构

前后端通信

前后端项目分别跑起来后，下一步就想实现工作中最常写的流程：请求接口获得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

复制代码

既然需要接口了就搞个接口，工作中用的是公司内部封装的 fetch 包，此处就用 node-fetch 先写个最简单的 get 出来。

2. 安装 node-fetch

yarn add node-fetch
复制代码

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

// src/api/index.ts

import fetch from 'node-fetch'

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

4. 发现 ts 报错，提示信息已经很明确了，node-fetch 包本身缺少类型定义，按照提示安装类型包就行了，不慌

yarn add -D @types/node-fetch
复制代码

后端接口

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

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

2. 打开 indexRouter 看一下

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

router.get('/', function(req, res, next) {
  res.send('hello');
});
复制代码

3. 尝试前后端项目都运行起来，先把后端运行起来，起在 3000 端口上，然后启前端项目，这时显示 3000 端口被占用，试着启在 3001 端口上，然后访问 localhost:30001

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

yarn add cors
复制代码

5. 在 app.use(‘/’)前增加代码

var cors=require("cors");

app.use(cors()); 
复制代码

重新运行项目

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

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

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

重新运行项目

yeah！大功告成！！

总结

当看到 hello 出现的时候还是很激动的，虽然中间好多知识点都不清不楚的，但一个个解决问题，把项目运行起来，建立起了整体概念。接下来要滚去学习 express 和跨域了，以及第二篇预告：
（二）漂亮是第一生产力 – 博客 ui 设计