16.Ajax與SQL

一、代碼和包的準備
1.在VScode中新建16文件夾，16文件下新建static文件夾和server.js文件，static文件夾下新建index.html文件和ajax.js文件

2.在16文件夾下安裝mysql包，16文件夾右鍵在終端中打開，輸入npm init（初始化項目），出現提示按回車，其中在description和repository項時輸入ajax

{
  "name": "16",
  "version": "1.0.0",
  "description": "ajax",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "repository": {
    "type": "git",
    "url": "ajax"
  },
  "author": "",
  "license": "ISC"
}

項目初始化完成後在16文件夾中自動創建node_modules文件夾、package-lock.json、package.json文件

3.給ajax.js、index.html、server.js三個文件添加代碼
ajax.js代碼

function ajax(options) {
    var xhr = new XMLHttpRequest()
    var str = ""
    for (var key in options.data) {
        str += "&" + key + "=" + options.data[key]
    }
    str = str.slice(1)
    if (options.type == "get") {
        var url = options.url + "?" + str
        xhr.open("get", url)
        xhr.send()
    } else if (options.type == "post") {
        xhr.open("post", options.url)
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
        xhr.send(str)
    }else if(options.type=='put'){
        xhr.open('PUT', options.url)
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
        xhr.send(str)
    }else if(options.type=='delete'){
        xhr.open('delete', options.url)
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
        xhr.send(str)
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var d = xhr.responseText
            options.success && options.success(d)
        } else if (xhr.status != 200) {
            options.error && options.error(xhr.status)
        }
    }
}

index.html的標籤

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>index</title>
    <script src="ajax.js"></script>
    <style>
    </style>
</head>
<body>
    <label>用戶</label>
    <input type="text" id="user"><br>
    <label>密碼</label>
    <input type="text" id="pass"><br>
    <input type="button" value="添加" id='add'>
    <table border="1" id='table'>
        <tr>
            <th>id</th>
            <th>用戶名</th>
            <th>密碼</th>
            <th></th>
            <th></th>
        </tr>
        <tr id="template">
            <td>{{id}}</td>
            <td>{{username}}</td>
            <td>{{password}}</td>
            <td><button name={{id}}>修改</button></td>
            <td><button name={{id}}>刪除</button></td>
        </tr>
    </table>
    <script>
        var table = document.querySelector('#table')
        var add = document.querySelector('#add')
        var user = document.querySelector('#user')
        var pass = document.querySelector('#pass')
        //模板處理函數
        function template(id, data) {
            var template = document.querySelector(id),
                trHTML = ''
            for (i = 0; i < data.length; i++) {
                trHTML += template.outerHTML
                    .replace(/\{\{id\}\}/g, data[i].id)
                    .replace(/\{\{username\}\}/g, data[i].username)
                    .replace(/\{\{password\}\}/g, data[i].password)
            }
            template.outerHTML = trHTML
        }
   	
    </script>
</body>
</html>

server.js基本代碼（簡化了對urls.pathname的處理）

var http = require('http')
var fs = require('fs')
var url = require('url')
var querystring = require('querystring')
var mysql = require('mysql')
var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '123456',
    database: 'test'
})
connection.connect()

http.createServer(function (req, res) {
    var urls = url.parse(req.url, true)
    if (urls.pathname == '/') {
        fs.readFile('./static/index.html', function (err, data) {
            res.writeHead(200, { 'Content-Type': 'text/html' })
            res.write(data)
            res.end()
        })
    } else if (urls.pathname == '/ajax.js') {
        fs.readFile('./static/ajax.js', function (err, data) {
            res.writeHead(200, { 'Content-Type': 'application/x-javascript' })
            res.write(data)
            res.end()
        })
    } else if (urls.pathname == '/users') {
    	var sql = ''
        switch (req.method) {
            case 'GET':

                break;
            case 'POST':

                break;
            case 'PUT':

                break;
            case 'DELETE':

                break;
        }
    } else {
        res.end()
    }
}).listen(8080)
console.log('http://127.0.0.1:8080')
//自定義mysql數據庫操作函數
function mysql_query(sql, res) {
    connection.query(sql, function (err, results) {
        res.writeHead(200, { 'Content-Type': 'application/json;charset=UTF8' })
        if (err) {
            res.write('SQL錯誤')
        } else {
            res.write(JSON.stringify(results))
        }
        res.end()
    })
}

二、前端Ajax與後端SQL操作
1.get與select
在index.html中template函數代碼塊的後面執行Ajax方法，其中給type屬性爲get

        ajax({
            type: 'get',
            url: 'http://127.0.0.1:8080/users',
            data: {},
            success: function (results) {
                console.log(results)//控制檯輸出獲取得到的數據
            },
            error: function (err) {
                console.log(err)
            }
        })

後端server.js的switch的case ‘GET’:中添加select查詢數據語句，再執行mysql_query函數

sql = 'select * from users'
mysql_query(sql, res)

2.post與insert
在index.html中script標籤中繼續添加add添加按鈕的鼠標點擊的方法，當user用戶和pass密碼輸入框不爲空時，ajax通過post類型發送user用戶和pass密碼的value值。

add.onclick = function () {
    if (pass.value != '' && user.value != '') {
        ajax({
            type: 'post',
            url: 'http://127.0.0.1:8080/users',
            data: {
                username: user.value,
                password: pass.value
            },
            success: function (result) {
                location.reload()
            },
            error: function (err) {
                console.log(err)
            }
        })
    } else {
        alert('用戶名和密碼不能爲空')
    }
}

後端server.js的switch的case ‘POST’:中添加insert添加數據語句，再執行mysql_query函數

var body = ''
//接收post數據
req.on('data', function (data) {
    body += data
});
//當接收完成時執行回調函數
req.on('end', function () {
    body = querystring.parse(body)
    var field = '', values = ''
    //對接受數據的key和value進行處理
    for (var item in body) {
        field = field + item + ','
        values = values + '"' + body[item] + '",'
    }
    field = field.substring(0, field.lastIndexOf(','))
    values = values.substring(0, values.lastIndexOf(','))
    
    sql = 'insert into users (' + field + ') values(' + values + ')'
    mysql_query(sql, res)
})

3.put與update
在index.html中script標籤中繼續添加table的鼠標點擊的方法，因爲修改和刪除按鈕是循環創建，通過判斷table中被點擊元素的innerHTML屬性區分是刪除、修改、確定（確定修改）按鈕。點擊修改，表格的中對應修改行的user和pass變成輸入框；點擊確定，通過ajax的put類型提交user、pass輸入框和id值的數據。

table.onclick = function (e) {
   if (e.target.innerHTML == '刪除') {

    } else if (e.target.innerHTML == '修改') {
        var tr = e.target.parentNode.parentNode
        tr.children[1].innerHTML = '<input type="text" value="' + tr.children[1].innerHTML + '">'
        tr.children[2].innerHTML = '<input type="text" value="' + tr.children[2].innerHTML + '">'
        e.target.innerHTML = '確定'
    } else if (e.target.innerHTML == '確定') {
        var tr = e.target.parentNode.parentNode
        e.target.innerHTML = '修改'
        ajax({
            type: 'put',
            url: 'http://127.0.0.1:8080/users',
            data: {
                id: e.target.name,
                username: tr.children[1].children[0].value,
                password: tr.children[2].children[0].value
            },
            success: function (result) {
                location.reload()
            },
            error: function (err) {
                console.log(err)
            }
        })
    }
}

後端server.js的switch的case ‘PUT’:中添加update更新數據語句，再執行mysql_query函數

var body = ''
req.on('data', function (data) {
    body += data
});
req.on('end', function () {
    body = querystring.parse(body)
    sql = 'update users set username="' + body.username + '",password="' + body.password + '" where id = ' + body.id
    mysql_query(sql, res)
})

4.delete與delete
在table.onclick的e.target.innerHTML == '刪除’條件下執行ajax的type爲delete的方法，傳遞id參數。

ajax({
    type: 'delete',
    url: 'http://127.0.0.1:8080/users',
    data: {
        id: e.target.name
    },
    success: function (result) {
        location.reload()
    },
    error: function (err) {
        console.log(err)
    }
})

後端server.js的switch的case ‘DELETE’:中添加delete刪除數據語句，再執行mysql_query函數。

var body = ''
req.on('data', function (data) {
    body += data
});
req.on('end', function () {
    body = querystring.parse(body)
    sql = 'delete from users where id=' + body.id
    mysql_query(sql, res)
})

最終效果

10.靜態資源

11.簡單路由

19.echarts圖表

14.自定義ajax

17.(99元1年)雲服務器

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結