微信扫一扫 分享朋友圈

已有 1555 人浏览分享

开启左侧

如何使用html连接数据库

[复制链接]
1555 0
一、写一个html登录页面
<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>测试登录页面</title>
        <style>
        body{
    width: 100%;
                background-image:url("./back2.jpg");
                background-repeat:no-repeat;
                background-size:100% ;
        }
        .login{
                float:right;
                margin-right:20vh;
          margin-top:15vh;
                opacity:0.7;
                height: 35vh;
                width:50vh;
                background:#CCFF80;
                border-radius: 20px;
        }
        .title{
                font-size:30px;
                text-align:center;
        }
        .biao{
                margin-top:20px;
                font-size:20px;
                text-align:center;
        }
        </style>
</head>
<body>
        <div>
                <div class='login'>
                        <div class='title'>欢迎登录</div>
                        <div class='biao'>
                                <form action="/login" method='post'>
                                        <label>用户:</label><input type="text" name='user'><br><br>
                                        <label>密码:</label><input type="password" name='pwd'><br>
                                        <input type="submit" value='登录' style='width:240px;height:30px;margin-top:25px;background:#B7FF4A'>
                                </form>
                        </div>
                </div>
        </div>
</body>
</html>

二、创建数据库
我通过脚本文件编写
通过mysql -uroot<‘拖拽脚本文件’ //加上回车执行
login.sql文件
set names utf8;
#如果存在,丢弃数据库
drop database if exists login;
create database login charset=utf8;
#进入数据库
use login;
#创建数据表
create table laptop(
  id int primary key auto_increment,#自增主键
  user varchar(40) unique,  #用户名
  password varchar(20) not null  #非空密码
);
#插入几条数据
insert into laptop values(1,'root','123456');
insert into laptop values(2,'123456','root');
insert into laptop values(3,'帅','666666');
insert into laptop values(4,'shuai','654321');
insert into laptop values(5,'1111','888888');

三、编写接口文档连接数据库与网页
这里我通过创建数据库池的方式,post方法传递数据,将获取到的数据与数据库里数据进行比较
login.js文件
const express=require('express');//引入express方法
const app=express();
const mysql=require('mysql');
const pool=mysql.createPool({
        host:'127.0.0.1',
        port:'3306',
        user:'root',
        password:'',
        database:'login',
        connectionLimit:15
});//数据库池连接数据库
app.listen(8080);//建立服务器
app.use(express.static('./'));//获取到html网页
app.use(express.urlencoded({
        extended:false
}));//将获取到的数据转化成对象
app.post('/login',(req,res,next)=>{
        console.log(req.body);//获取到我们输入数据对象,在控制台中可以得到我们输入的数据
        //pool.query方法中写查询的数据库语句
        pool.query('select * from laptop where user=?',[req.body.user],(err,result)=>{
                if(err){
                        next(err);
                        return               
                }
                        if(result.length===0){
                                console.log('用户名错误!')
                                res.send('<h1>用户名错误!<h1>')
                        }else{
                        if(result[0].password==req.body.pwd){
                        console.log('登录成功!')
                        res.send('<h1>登录成功!</h1><br>'+'欢迎用户:'+result[0].user)
                        }else if(result[0].password!==req.body.pwd){
                        console.log('密码错误!')
                        console.log(result[0].password)
                        res.send('<h1>密码错误!<h1>')
                        }}
        })


})
//错误排出
app.use((err,req,res,next)=>{
        console.log(err);
        res.status(404).send({code:404,msg:'糟糕!出错了!'})
})

文件存放在同一个位置
image.png
在控制台中转到我们文件的目录
通过cd +目录名
如果不是在c盘通过e:转盘
输入 node login 加回车运行服务器(注意不要加分号!)
在浏览器中输入http://localhost:8080/login.html进行验证

免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

37

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2024-10-6 03:25 , Gzip On, MemCached On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。