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

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

工具：

        后端处理这种自己做的小网站用 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，端口号不同，这就涉及到跨域问题，稍后我们会提到。

• 向后端请求数据

现在在前端写一些用于展示我们从后端传过来的数据的代码，你可以随便新建一个文件，我这边叫index.jsx，写入如下代码：

//index.jsx
import React, { Component } from 'react';
import axios from 'axios';


export default class demo extends Component {
    constructor() {
        super()
        this.state = {
            getDataFromBase: ''
        }
    }
    componentDidMount() {
        axios.get('http://localhost:8080').then((res) => {//请求了我们开启的服务器地址
            this.setState({
                getDataFromBase: res.data
            });
            console.log(res);
        })
    }
    render() {
        return (
            <div>
                <span>{this.state.getDataFromBase}</span>
            </div>
        )
    }
}

接下来在服务端响应前端的请求：

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

app.get('/', function (req, res) {//我们请求的是根路由，所以这边监听'/'
    res.send('node启动成功')
})

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

不出意外的话，你啥也读不到，控制台报错如下：

这表示你跨域了，后台默认不允许你请求数据，所以你要在后台设置哪些请求可以被允许：

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

// 设置跨域访问
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");// 这里设置允许所有跨域访问
    res.header("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});


app.get('/', function (req, res) {// 我们请求的是根路由，所以这边监听'/'
    res.send('node启动成功')
})

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

这样，页面上显示‘’node 启动成功‘’，控制台显示如下：

从后台拿数据就是这样了，接下来开始把数据提交给后台，保存在数据库我们就完成了一个完整的前后端交互了。

• 提交数据

数据提交用post方法，模拟一个很常见的注册账号提交的情况：

//index.jsx
import React, { Component } from 'react';
import axios from 'axios'


export default class demo extends Component {
    constructor() {
        super()
        this.state = {
            getDataFromBase: ''
        }
       //创建接收参数的对象
        this.user = {
            phone: '',
            userName: '',
            passWord: ''
        }
    }
    componentDidMount() {
        axios.get('http://localhost:8080').then((res) => {//请求了我们开启的服务器地址
            this.setState({
                getDataFromBase: res.data
            })
            console.log(res)
        })
    }
    register = () => {
        var _this = this
        axios.post('http://localhost:8080', {
            data: JSON.stringify(_this.user) // 用JSON格式传输数据更优
        }).then((res) => {
            console.log(res)// 这是从后台返回的数据
        })
    }
    render() {
        return (
            <div>
                <span>{this.state.getDataFromBase}</span>
                <div className='register'>
                    手机号：<input type="text" onChange={(e) => { this.user.phone = e.target.value }} />
                    账号：<input type="text" onChange={(e) => { this.user.userName = e.target.value }} />
                    密码：<input type="password" onChange={(e) => { this.user.passWord = e.target.value }} />
                    <button onClick={this.register}>提交</button>
                </div>
            </div>
        )
    }
}

这里要装一个Express的中间件body-parser，用来解析请求体中的信息。

cnpm i body-parser --save

后端响应post请求，并返回状态。

//app.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');

//设置全局使用
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));

// 设置跨域访问
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");// 这里设置允许所有跨域访问
    res.header("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

//响应get请求
app.get('/', function (req, res) {
    res.send('node启动成功');
})

//响应post请求
app.post('/', function (req, res) {
    const registerData = JSON.parse(req.body.data); // 解析一下JSON格式数据
    if (registerData) {
        console.log(registerData);
        res.send(`phone:${registerData.phone},username:${registerData.userName},password:${registerData.password}`); // 向前端发送数据
    }
})
//监听端口
app.listen(8080, function(){
    console.log('node成功监听在8080端口');
})

后端控制台输出：

前端控制台输出：

 

• 将数据存入数据库

mongoose是连接数据库的工具，具体使用方法常见官网：https://mongoosejs.com/

先新建一个定义数据库结构的文件，叫做 schemas.js，还有一个定义数据库模版的文件叫model.js，需要把提交上来的注册信息保存在数据库，schemas中定义存储数据的结构如下：

// schemas.js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// 创建数据结构
const userSchema = new Schema({
    phone: String,
    username: String,
    password: String,
    date: String // 这里加一个注册日期
})

module.exports = userSchema;

然后定义一个数据库库模版：

// model.js

const userSchema = require('./schemas');
const mongoose = require('mongoose');
const User = mongoose.model('User', userSchema);

module.exports = User;

在app中连接数据库，在此之前要先在mongoDB中定义一个数据库，这里叫website，在mongoDB的命令行中输入：

use website 

在app.js中加入以下代码：

mongoose.connect('mongodb://localhost/website', {
    useNewUrlParser: true
}, function (param) {
    console.log('mongodb connected')
});

保存后控制台输出：

说明数据库已经成功连接了

接下来就是保存数据了

//app.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const User = require('./model.js')

//设置全局使用
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));

// 设置跨域访问
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");// 这里设置允许所有跨域访问
    res.header("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

//响应get请求
app.get('/', function (req, res) {
    res.send('node启动成功');
})

//响应post请求
app.post('/', function (req, res) {
    const registerData = JSON.parse(req.body.data); // 解析一下JSON格式数据
    if (registerData) {
        console.log(registerData);
        res.send(`phone:${registerData.phone},username:${registerData.userName},password:${registerData.passWord}`); // 向前端发送数据
        // 创建模版实例，导入数据，在这之前你可以对数据做任何处理，比如密码md5加密
        const user = new User({
            phone: registerData.phone,
            username: registerData.useName,
            password: registerData.passWord,
            date: (new Date()).getTime()
        })
        // 将数据存入数据库
        user.save(function (err, user) {
            if (err) {
                console.log(err);
            } else {
                console.log(user);
            }
        })
    }
})
//监听端口
app.listen(8080, function(){
    console.log('node成功监听在8080端口');
})

去数据库看下，有没有我们保存的数据，命令行输入：

use website,

show collections  显示所有的集合，不出意外会出来一个users的集合

db.users.find({})  查找集合的所有内容

刚刚填的数据就有保存在里面了。

之后写登录只需要再次重复注册的请求方式，然后在后台查找数据库中的数据进行匹配，方法如下：

// login.jsx
app.post('/login', function (req, res) {
    var postLoginValue = JSON.parse(req.body.data)

    // 根据username查找
    User.find({
        username: postLoginValue.userName
    }, function (err, user) {
        console.log(typeof (user))
        console.log(user.length)
        if (err) {
            console.log(err)
            res.sendStatus(400)
        }
        if (user.length > 0) {
            res.send('900') // 登录成功
        } else {
            res.send('904') // 登录失败
        }
    })
})

一个简单的网站就搭起来了，简单的前后端交互也就实现了。