作为小白，分别学完JS，react，nodeJS，Koa2，实际动手做项目时，却不知怎么将浏览器、前端、后端联系起来。目前有一些自己的理解，先口头描述，可能不太对。
三者联系
浏览器在客户端，前后端代码存在服务器。
浏览器和前端进行数据交互，前端和后端进行数据交互。
image.png
- 位于客户端的浏览器向远方服务器发送请求，服务器返回主页。客户端浏览器进入到主页，目前页面上的内容是事先写在前端代码里的。(也有可能一开始就调用后端，要求处理些数据给前端）
-
客户端在input里填写数据并提交：image.png
这时前端向后端代码发送数据 4，后端在接收到 4 后进行处理，maybe 是在数据库里进行搜索。处理完后的数据再发送给前端。
- 前端接收到来自后端的数据，对页面进行变化，呈现在浏览器上。
实际细节
目前只有本地模拟。
文件结构
image.png
后端
采取koa2，express也是一样的
//server.js
//...
//router.post(url,(ctx,next)=>{ //....}) url就是给前端调用的接口
router.post('/switch2',(ctx,next)=>{
//...
//前端发来的数据在ctx.request里面
ctx.response.body='ho!' //后端用ctx.response.body返回数据给前端
})
//...
app.listen(8080) //此处我们后端代码监听8080号端口
这里有个两个坑：
- 可能数据库数据还没整完，ctx.response就已经返回给前端，导致实际数据并没有交给前端的问题。
参考：https://www.cnblogs.com/xiaoliu66007/p/6785769.html - 后端的ctx.request里怎么也找不到前端发来的数据
参考：https://www.jianshu.com/p/362847134906
前端
采用react-create-app
1.进入到package.json文件，加上
"proxy": "http://localhost:8080" //后端监听的进程端口号
保证axios参数url为"/switch2"时，react知道将API请求发给位于本地端口号8080的nodeJS服务器（就是监听着8080号端口的后端代码）
2.前端使用axios来访问后端提供的接口。（事先npm install axios）
axios用法：
import axios from 'axios'
axios.post(url,data).then((response)=>{/*...*/}) //url就是后端提供的接口
//post处可改为get
具体一点：
//index.js
let data={
name:'马克思',
}
axios.post('/switch2',data).then(response=>{ // '/switch2' 就是后端提供的接口
console.log('快看chrome控制台：'+response.data) //注意数据在response的data属性里
//现在拿到后端传来的数据，前端就可以根据数据进行下一步操作
})
到此为止，只是描述个大概。等上线了，看有什么难点再记录一下。
如有错处，还望指出，多谢！
