教你搭一个简单的前后端交互小网站

最近想自己搭一个网站，但仅仅会前端还是有点做不到实际情况中的前后端交互，就自己瞎鼓捣了几个工具，来搭一个简单的网站。

工具：

        后端处理这种自己做的小网站用 Node是最好不过来（其他语言不会。。），选Express跟Koa都可以，这边我选的是Express，数据库当然也需要来一个，这边我选的是mongoDB：官网；安装的话可以看网上教程，前端可以选个框架，这边平常用的React比较多，就用React，Vue的话看也一样可以用，前后端交互跟框架渲染机制跟前端数据交互关系不大，然后就可以代码写起来了。

• 先搭框架，各个框架脚手架了解一下

window 系统

npm install -g create-react-app

iOS系统

sudo npm install -g create-react-app

创建项目

create-react-app my-app

然后npm start就可以跑起来了，推荐使用国内淘宝镜像

 npm install -g cnpm --registry=https://registry.npm.taobao.org

• 装依赖

先介绍一下各个依赖的作用：

Express：Node框架。

axios：基于promise用于浏览器和node.js的http客户端，一个异步请求的工具，也可以用Ajax。

hotnode：node的热加载，通俗讲就是避免每次修改代码都要重启一次服务，命令行node app.js => hotnode app.js。

mongoose：连接数据库。

cnpm i express axios hotnode mongoose --save

• 启动服务器

先创建一个js文件，可以放在与项目入口文件同一级，我这边叫app.js。

在文件夹敲入以下代码：

//app.js
const express = require('express');
const app = express();



app.listen(8080, function(){
    console.log('node成功监听在8080端口');
})

hotnode app.js就可以在控制台看到：

然后就可以跟前端交互起来，这边要注意端口，后台的端口是8080，但是前端就要是另一个，这里前端我们用3000，端口号不同，这就涉及到跨域问题，稍后我们会提到。

• 向后端请求数据

现在在前端写一些用