El artículo que escribí anteriormente solo se da cuenta del proceso de lectura de la base de datos cuando la página se actualiza y no hay intervención humana. No es como algo formal. Esto puede ser similar al hábito que desarrollé al escribir c # antes. Siempre Quiero hacerlo perfecto, el primer paso es sacar la interfaz. Para ser honesto, cómo iniciar una función específica en php a través del botón. Aún no lo he descubierto. Ponga la interfaz aquí primero, y Lo agregaré cuando lo averigüe., Si hay un dios amable, por favor agrégueme la parte de cómo llamar a la función php, gracias.
El código de la parte de la interfaz es el siguiente:
<! DOCTYPE html>
<html ng-app = 'prueba'>
<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>
<! - CSS más reciente compilado y minimizado ->
<link rel =" hoja de estilo "href =" https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css "integration =" sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbd "crossEjhin4
script < "https://unpkg.com/vue@next"> </script>
<link rel = "stylesheet" type = "text / css" href = "./css/mystyle.css "/> <! - Un archivo que define un estilo por separado, cítelo aquí directamente ->
<script type =" text / javascript "src =" testdb.php ">
</script>
<title> Prueba de base de datos MySQL </title>
</head>
<body>
<div id = "app"> </div>
<! - Defina la información del encabezado ->
<div class = "header">
<h3> Operación de conexión a la base de datos MySQL </h3>
</div>
<! - Defina la información principal como 2 columnas ->
<div class = "row">
<! - Muestra la primera columna de información ->
<div class = "side">
<h3> Información del servidor </h3> <br>
<h3> Dirección IP: <input v-model = "IP" id = "id-ip" value = "127.0.0.1" /> </ h3>
<h3> Nombre de usuario: <input v-model = "username" value = "root" id = "username" /> </h3>
<h3> 口 令 ： <input v-model = "password" value = "root" id = "password" /> </h3>
<button class = "button1" οnclick = "Linkdb ()"> 连接 数据库 </ botón>
<h3> Deje un lugar, cuando haga clic en el botón para conectarse a la base de datos, el resultado de la conexión a la base de datos se mostrará aquí. </h3>
<! - Dibuje una línea ->
<hr />
<h3> Información de la base de datos del usuario </h3> <br>
<h3> Ingrese el nombre de la base de datos: <input v-model = valor "dbname" = "test" /> </h3>
<div class = "button1" οnclick = "testdb">
Compruebe si la base de datos existe
</div>
<div class = "button1" οnclick = "deldb">
Eliminar la base de datos
</ div>
<div class = "button1" οnclick = "createdb">
Crear base de datos
</div>
<h3> Ingrese el nombre de la tabla: <input v-model = "tablename" /> </h3>
<button class = "button1" οnclick = "testtable"> tabla de prueba </button>
<button class = "button1" οnclick = "deltable"> Eliminar tabla </button>
<button class = "button1" οnclick = "createtable"> Crear tabla </button>
<button class = "button1" οnclick = "showtablestru"> Mostrar estructura de tabla </ button > <br> <br>
<button class = "button1" οnclick = "addonrecord"> agregar un registro </button>
<button class = "button1" οnclick = "addrecords"> agregar varios registros </button>
<button class = "button1 "οnclick =" removerecords "> Borrar registros </button>
<button class =" button1 "οnclick =" shourecords "> Mostrar datos de la tabla </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>
</ tabla >
</center>
</div>
</div>
</div>
<! - Mostrar información inferior ->
<div class = "footer">
<h2 align = "center"> Baoding Feiling Embedded Technology Co., Ltd. </h2>
<h2 align = "right"> Producido por 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 = "ejemplo">';
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 aplicación = Vue.
dbname: 'scada',
tablename: 'db'
}
},
plantilla: "<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 ('contraseña ') $ .post ("testdb.php", connectdb (ip, nombre de usuario, contraseña,' prueba ') { $ ("# html_data"). html (datos); }); alerta (ip.value + '' + username.value + '' + contraseña.
{ } function addonrecord () { } function addrecords () { } function removerecords () { } function shourecords () { } </script> </html>
Hay muchas partes comentadas arriba, el proceso para principiantes, me da vergüenza.