L'article que j'ai écrit plus tôt ne réalise le processus de lecture de la base de données que lorsque la page est actualisée et qu'il n'y a pas d'intervention humaine. Ce n'est pas comme un truc formel. Cela peut être similaire à l'habitude que j'ai développée en écrivant c # auparavant. J'ai toujours voulez Pour le rendre parfait, la première étape est de sortir l'interface. Pour être honnête, comment démarrer une fonction spécifique en php via le bouton. Je ne l'ai pas encore compris. Mettez l'interface ici en premier, et je va l'ajouter quand je le découvrirai., S'il y a un Dieu gentil, s'il vous plaît ajoutez-moi la partie de la façon d'appeler la fonction php, merci.
Le code de la partie interface est le suivant:
<! DOCTYPE html>
<html ng-app = 'test'>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "Content-type = text / html; charset = utf-8" />
<! - jQuery ->
<script type = "text / javascript "src =" http://code.changer.hk/jquery/1.11.2/jquery.min.js "> </script>
<! - Dernier CSS compilé et minifié ->
<link rel =" stylesheet » href = "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" intégrité = "SHA384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u" crossorigin = "anonymes">
<script src = "https://unpkg.com/vue@next"> </script>
<link rel = "stylesheet" type = "text / css" href = "./css/mystyle.css "/> <! - Un fichier qui définit un style séparément, citez-le ici directement ->
<script type =" text / javascript "src =" testdb.php ">
</script>
<title> Test de la base de données MySQL </title>
</head>
<body>
<div id = "app"> </div>
<! - Définir les informations d'en-tête ->
<div class = "header">
<h3> Opération de connexion à la base de données MySQL </h3>
</div>
<! - Définissez les informations principales comme 2 colonnes ->
<div class = "row">
<! - Affichez la première colonne d'informations ->
<div class = "side">
<h3> Informations sur le serveur </h3> <br>
<h3> Adresse IP: <input v-model = "IP" id = "id-ip" value = "127.0.0.1" /> </ h3>
<h3> Nom d'utilisateur: <input v-model = "username" value = "root" id = "username" /> </h3>
<h3> 口 令 ： <input v-model = "password" value = "root" id = "password" /> </h3>
<button class = "button1" οnclick = "Linkdb ()"> 连接 数据库 </ bouton>
<h3> Laissez un endroit, lorsque vous cliquez sur le bouton pour vous connecter à la base de données, le résultat de la connexion à la base de données sera affiché ici. </h3>
<! - Tracez une ligne ->
<hr />
<h3> Informations sur la base de données utilisateur </h3> <br>
<h3> Veuillez saisir le nom de la base de données: <input v-model = "dbname" value = "test" /> </h3>
<div class = "button1" οnclick = "testdb">
Vérifier si la base de données existe
</div>
<div class = "button1" οnclick = "deldb">
Supprimer la base de données
</ div>
<div class = "button1" οnclick = "createdb">
Créer une base de données
</div>
<h3> Veuillez saisir le nom de la table: <input v-model = "tablename" /> </h3>
<button class = "button1" οnclick = "testtable"> test table </button>
<button class = "button1" οnclick = "deltable"> Supprimer le tableau </button>
<button class = "button1" οnclick = "createtable"> Créer un tableau </button>
<button class = "button1" οnclick = "showtablestru"> Afficher la structure du tableau </ button > <br> <br>
<button class = "button1" οnclick = "addonrecord"> ajouter un enregistrement </button>
<button class = "button1" οnclick = "addrecords"> ajouter plusieurs enregistrements </button>
<button class = "button1 "οnclick =" removerecords "> Effacer les enregistrements </button>
<button class =" button1 "οnclick =" shourecords "> Afficher les données du tableau </button>
<hr>
<div class =" ">
<center>
<table class = "table table-
bordered table-striped"> <thead>
<tr>
<td align = "center"> 学 号 </td>
<td align = "center"> 姓 </td>
<td align = "center"> 名 </td>
<td align = "center"> 邮件 地址 </td>
</tr>
</thead>
<tbody id = "tbody"> </tbody>
</ table >
</center>
</div>
</div>
</div>
<! - Afficher les informations du bas ->
<div class = "footer">
<h2 align = "center"> Baoding Feiling Embedded Technology Co., Ltd. </h2>
<h2 align = "right"> Produit par Six-Classics-note-Me 2021.321 </ h2 >
</div>
</body>
<script type = "text / javascript">
//"{"id":"1","firstname":"John","lastname":"Doe","email":"[email protected]"}{"id":"2 "," firstname ":" Mary "," lastname ":" Moe "," email ":" [email protected] "} {" id ":" 3 "," firstname ":" Julie "," lastname ":" Dooley "," email ":" [email protected] "} {" id ":" 4 "," firstname ":" John "," lastname ":" Doe "," email ":" [email protected] " } {"id": "5", "firstname": "Mary", "lastname": "Moe", "email": "[email protected]"} {"id": "6", "firstname" : "Julie", "lastname ":" Dooley "," email ":" [email protected] "} {" id ":" 7 "," firstname ":" John "," lastname ":" Doe "," email ":" john @ example.com "} {" id ":" 8 "," firstname ":" Mary "," lastname ":" Moe "," email ":" [email protected] "} {" id ":" 9 "," firstname ":" Julie "," lastname ":" Dooley "," email ":" [email protected] "} {" id ":" 10 "," firstname ":" John "," lastname " : "Doe", "email": "[email protected]"} {"id": "11", "firstname": "Mary", "lastname": "Moe", "email": "Mary @ example .com "} {"id": "12", "firstname": "Julie", "lastname": "Dooley", "email": "[email protected]"} "
{',' '); trStr + = '<tr class = "exemple">';
trStr + = '<td width = "15%">' + JSON.parse (a [i]). id + '</td>';
trStr + = '<td width = "15%">' + JSON.parse (a [i]). firstname + '</td>';
trStr + = '<td width = "15%">' + JSON.parse (a [i]). lastname + '</td>';
trStr + = '<td>' + JSON.parse (a [i]). email + '</td>';
// trStr + = '<td>' + JSON.parse (a [i]). reg_date + '</td>';
trStr + = '</tr>';
}
$ ("# tbody"). html (trStr);
}
}); * /
var app = Vue.
dbname: 'scada',
tablename: 'db'
}
},
template: "<h2> {
{message}} </h2>"
})
var vm = app.mount ("# app")
function testdb () { } / * 连接 数据库 * / function Linkdb () { var ip = document.getElementById ('id-ip') var username = document.getElementById ('username') var password = document.getElementById ('password ') $ .post ("testdb.php", connectdb (ip, nom d'utilisateur, mot de passe,' test ') { $ ("# html_data"). html (données); }); alert (ip.value + '' + username.value + '' + password.
{ } function addonrecord () { } function addrecords () { } function removerecords () { } function shourecords () { } </script> </html>
Il y a beaucoup de parties commentées ci-dessus, le processus de débutant, j'ai honte.