教你搭一個簡單的前後端交互小網站

最近想自己搭一個網站，但僅僅會前端還是有點做不到實際情況中的前後端交互，就自己瞎鼓搗了幾個工具，來搭一個簡單的網站。

工具：

後端處理這種自己做的小網站用 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') // 登錄失敗
        }
    })
})

一個簡單的網站就搭起來了，簡單的前後端交互也就實現了。

教你搭一個簡單的前後端交互小網站

移動端關於video標籤視頻全屏播放的兼容適配問題

前端如何製作出透明背景視頻

新手入門級搭建服務器

解決移動端輸入法鍵盤隱藏時頁面拉不下來問題。

字符串的一些用法總結

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結