vscode对于mysql vscode sqlserver

转载

footballboy 2023-11-01 22:24:31

文章标签 vscode对于mysql sqlserver web 数据库 html 文章分类 MySQL 数据库

Web入门之VScode通过javascript连接并插入html前端参数到SQLserver数据库（超详细）附常见问题解决

在上周我们将新建的web项目连接上了数据库，可以通过新建查询的方式，用SQL语言增删改查数据库，但是在编写函数的时候还是需要通过js语言获取前端web页面输入的参数，然后进行插入操作，那么今天让我们一起来实现吧。
VScode连接SQL server数据库的详情可以参考之前的文章哦。
.

新建数据库

第一步当然是新建一个数据库啦，我们在SQLserver里面新建一个表，就叫test，包含三列，id,name,job，这个可以凭自己的喜好。
代码如下：

create table test
(id int,
name char(12),
job char(12)
)

我们在VScode的项目里新建一个查询看看，是否建立成功。

当当当，非常成功的建立了一个表。

vscode对于mysql vscode sqlserver_html

设计前端界面

接下来我们来设计一下前端界面，因为数据库有三列，那我们就设计三个输入框好了，然后再加一个按钮。如下所示

vscode对于mysql vscode sqlserver_html_02

非常简单的一个界面，每个输入框都有一个默认值，代码如下：

<html>
<head>
    <title>introduction to the DOM</title>
   <script type="text/javascript" src="js/test.js"charset="utf-8"></script>
</head>

<body>
    <input name="myid" value="01"/>
    <input name="myname" value="name01"/>
    <input name="myjob" value="job01"/>
    <input id="insert" type="button" value="insert" onclick="insertItem(myid.value, myname.value, myjob.value)" />
</body>
</html>

编写函数

接下来我们开始写函数啦，其实从上面也可以看出来，我们写了一个名为insertItem(,)的函数在js文件夹下的test.js文件里面。
好，那我们接下来新建一个js文件夹，然后再js文件夹下新建一个test.js文件。

function insertItem(idv, namev, jobv) {
    const newLocal = new ActiveXObject("ADODB.Connection");
    var conn = newLocal; 
    var strdsn = "Driver={SQL Server};SERVER=DESKTOP-U4DC9JE;UID=sa;PWD=;DATABASE=school";
    try {
        conn.Open(strdsn);
    }
    catch (e) {
        alert(e.message);
    }
    var id=Number(idv);
    alert(typeof(id));
    var sql = "INSERT INTO test VALUES(" + idv + ", '" + namev + "', '" + jobv + "')";
    try {
        conn.execute(sql);
        alert("successfully inserted !");
    }
    catch (e) {
        alert(e.description);
    }
    sql.close();
    conn.close();
}

注意一下参数哦

SERVER的意思就是服务器名称，在我们登录的时候，这个蓝底的服务器名称后面的这个就是，直接复制粘贴就好。

UID就是登录名，这里我们填sa。

PWD就是密码。

DATABASE就是我们选择连接的数据库的名称，我们刚刚新建的test表就是建在这个数据库下面的。

vscode对于mysql vscode sqlserver_html_03