用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)

news2024/11/19 1:47:30

目录 

一、写在前面

二、效果图

三、实现思路

四、实现代码

1、login总界面

2、registercheck总代码

3、logoutcheck总代码

4、amendcheck总代码

相关文章

jsp实现简单登入注册界面功能用jsp实现简单登入注册界面功能（css美化）（软件idea）_一个名叫追的程序猿的博客-CSDN博客_jsp登陆注册界面
JDBC 连接 MySQL不会吧不会吧，这博主居然用了1.6w+字来讲 JDBC 连接 MySQL，还花了好几个晚上写出来的

一、写在前面

       哈喽~大家好，这篇呢我们来看看用 JSP 连接 MySQL 登入注册项目实践，这里就可能有人问了，唉？追桑~前些天不是写了 jsp 登入注册的项目吗？怎么这次还在写呢？哈哈，您别担心，这次呢，肯定和上次不同，我们先来看看效果吧！

26c99ab9af474ef4b08eb41acc456710.gif

二、效果图

96ae438c38104da08ee6f54469a99e45.gif

数据库界面

2a35c9ed2abd4deb8f3d5b4a9f11308c.png

感觉是不是不一样了，哈哈哈，那么接下来我们来看看是怎么实现的。

三、实现思路

首先我们这里很明显，有四个总页面分别是 login(登入界面)、logout(注销界面)、amend(修改界面)、register(注册界面)，这四个总页面分别对应着检查页面(check)、成功页面(success)、失败页面(fail)。建立之好后，通过 from 的 action 来进行跳转，我们先来看看 MySQL (数据库)表名叫 login。

我们这里数据库共三列，第一列叫 name （用户名）、pass（密码）、time（注册时间），name 与 pass 都是 int（整型） 类型的，time 是 varchar （可变长类型），如图。

e1ea94611a364e93a86a0153f814fdbf.png

四、实现代码

1、login总界面

首先我们先有个页面，有基本的用户名框，密码框，两按钮，一个注册，一个注销，通过 from进行跳转，代码如下

    <form method="post" action="check.jsp">
        <input type="text" name="user" style="width: 300px;height: 50px" placeholder="请输入用户名："
        > <br>
        <input type="password" name="pass" style="width: 300px;height: 50px" placeholder="请输入密码：" > <br>
        <button type="submit" style="width:80px;height:40px; font-size: 20px" class="clear">登录</button>
        <button type="reset" style="width:80px;height:40px; font-size: 20px" class="clear">重置</button>
        <br>
        没有账号?<a href="register.jsp">点击注册</a><br>
        不想用了?<a href="logout.jsp">点击注销</a>
    </form>

用 check 连接数据库(如何连接数据库，前面文章已经给出了，有兴趣的小伙伴可以看看前面写的文章，也放在前面了) 同样的道理，还是那五个步骤（这里就不过多的解释，可以看看上面表格给出的文章），先来看看代码。

ebd90025f45b4ce382599b354ac5bd39.png

        String user = request.getParameter("user"); // getParameter  与 getAttribute  区别
        String pass = request.getParameter("pass");
        // String getParameter(String name):根据参数名称获取参数值
        // getAttribute()获取的是服务器设置的数据。getAttribute() 方法返回指定属性名的属性值。

        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            String url = "jdbc:mysql://localhost:3306/db1?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC";
            String user1 = "root";
            String pass1 = "123456";
            Connection connection = DriverManager.getConnection(url,user1,pass1);
            String sql = "select * from login where name=? and pass=?";

            PreparedStatement ps = connection.prepareStatement(sql);
            ps.setString(1,user);
            ps.setString(2,pass);
            ResultSet re = ps.executeQuery();

            if (re.next()){
                response.sendRedirect("loginsuccess.jsp");
                session.setAttribute("user",user);
            }else {
                response.sendRedirect("loginfail.jsp");
            }

        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }

这里 response.sendRedirect 跳转了两个页面一个 loginsuccess 和 loginfail 的两个界面，下面我们来看看，这两个文件（其实很简单）

loginsuccess 代码

            <div class="form">
                <h2> <h22>登录成功</h22><br>
                </h2>
                <fon>恭喜您成功登入 <br> &nbsp;&nbsp; 欢迎使用 <br>
                    <a class="a1" href="login.jsp">返回登入界面</a>
                </fon>
            </div>

loginfail 代码：

                <h2> <h22>登录失败</h22><br>
                </h2>
                <fon>宝~是不是账号或密码记错惹？ <br>
                    <a class="a1" href="login.jsp">返回登入界面</a><br>
                    <p1><a href="amend.jsp">点击修改密码</a></p1>
                </fon>

这里我们点击运行看看效果

fdc90e68742f4b48a2639581dbbf080c.png

这里我们用两个升级 大装备（html）(css) 来美化一下我们的页面，这里我们页面美化的，用的是这位大佬的页面（博主名为键盘奏鸣曲），大家可以来看看，点击链接

HTML 代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>123</title>


</head>
<body>

<section>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <div class="container">
            <div class="form">
                <h2>登录</h2>
                <form method="post" action="check.jsp">
                    <div class="inputBox">
                        <input type="text" placeholder="姓名" name="user">

                    </div>
                    <div class="inputBox">
                        <input type="password" placeholder="密码" name="pass">

                    </div>
                    <div class="inputBox">
                        <input type="submit" value="登录">

                    </div>
                    <p class="forget">不想用了?<a href="logout.jsp">
                        点击这里
                    </a></p>
                    <p class="forget">没有账户?<a href="register.jsp">
                        注册
                    </a></p>
                </form>
            </div>
        </div>
    </div>
</section>
</body>

</html>

 CSS 代码

/*.center{*/
/*    text-align:center;*/
/*    margin-top: 50px;*/
/*}*/
.fon{
    font-size: 40px;
}
/*body{*/
/*    background: url("images/image-2.jpg") no-repeat 0 0;*/
/*    background-size: 100% 100%;*/
/*    text-decoration:none;*/
/*}*/

/*input {*/
/*    background-color: transparent;*/
/*    outline: none;*/
/*    color: black;*/
/*}*/
/*.clear{*/
/*    opacity:0.3;*/
/*}*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 使用flex布局，让内容垂直和水平居中 */

section {
    /* 相对定位 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}

/* 背景颜色 */

section .color {
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
    filter: blur(200px);
}

/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */

section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}

section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}

section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}

.box {
    position: relative;
}

/* 背景圆样式 */

.box .circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* 使用filter(滤镜) 属性，改变颜色。
    hue-rotate(deg)  给图像应用色相旋转
    calc() 函数用于动态计算长度值
    var() 函数调用自定义的CSS属性值x*/
    filter: hue-rotate(calc(var(--x) * 70deg));
    /* 调用动画animate，需要10s完成动画，
    linear表示动画从头到尾的速度是相同的，
    infinite指定动画应该循环播放无限次*/
    animation: animate 10s linear infinite;
    /* 动态计算动画延迟几秒播放 */
    animation-delay: calc(var(--x) * -1s);
}

/* 背景圆动画 */

@keyframes animate {
    0%, 100% {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}

.box .circle:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}

.box .circle:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}

.box .circle:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}

.box .circle:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
}

.box .circle:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}

/* 登录框样式 */

.container {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}

/* 登录标题样式 */

.form h2 {
    text-align: center;
    position: relative;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}

.form h2 h22 {
    top: -40px;
    text-align: center;
    position: relative;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}

.form .a1, .form p1 {
    bottom: -90px;
    left: 50px;
    position: relative;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 5px;
    /*margin-bottom: 10px;*/
    cursor: pointer;
    text-decoration: none;
}

.form p1 a{

    position: relative;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 5px;
    /*margin-bottom: 10px;*/
    cursor: pointer;
    text-decoration: none;
}

.form fon {
    top: -30px;
    left: 30px;
    position: relative;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}
/* 登录标题的下划线样式 */

.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0px;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}

.form h2 h22::before {
    content: "";
    position: absolute;
    /*left: 0;*/
    /*bottom: -10px;*/
    /*width: 0px;*/
    /*height: 3px;*/
    /*background: #fff;*/
    /*transition: 0.5s;*/
}

.form h2:hover:before {
    width: 53px;
}

.form .inputBox {
    width: 100%;
    margin-top: 20px;
}

/* 输入框样式 */

.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form .inputBox input::placeholder {
    color: #fff;
}

/* 登录按钮样式 */

.form .inputBox input[type="submit"],.form .inputBox input[type="reset"]  {
    background: #fff;
    color: #666;
    max-width: 100%;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
}

.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}

.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

同样的道理我们来升级一下 loginsuccess 与 loginfail 。

loginsuccess 代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登入成功界面</title>
    <link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<%--<div class="center">--%>
<%--    <p class="fon">登入成功界面</p>--%>
<%--    <p class="fon1">恭喜您成功登入，欢迎使用</p>--%>
<%--    <a href="login.jsp">点击退出,返回登入界面</a>--%>
<%--</div>--%>

<section>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <div class="container">
            <div class="form">
                <h2> <h22>登录成功</h22><br>
                </h2>
                <fon>恭喜您成功登入 <br> &nbsp;&nbsp; 欢迎使用 <br>
                    <a class="a1" href="login.jsp">返回登入界面</a>
                </fon>
            </div>
        </div>
    </div>
</section>

</body>
</html>

loginfail 代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登入失败界面</title>
    <link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<%--<div class="center">--%>
<%--    <p class="fon">登入失败界面</p>--%>
<%--    <p class="fon1">对不起，您账号或密码有误，请返回登入界面</p>--%>
<%--    <a href="login.jsp">返回登入界面</a><br>--%>
<%--    忘记密码？<a href="amend.jsp">点击修改密码</a>--%>
<%--</div>--%>

<section>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <div class="container">
            <div class="form">
                <h2> <h22>登录失败</h22><br>
                </h2>
                <fon>宝~是不是账号或密码记错惹？ <br>
                    <a class="a1" href="login.jsp">返回登入界面</a><br>
                    <p1><a href="amend.jsp">点击修改密码</a></p1>
                </fon>
                
            </div>
        </div>
    </div>
</section>

</body>
</html>

点击运行，我们来看看效果

9732b7ce976a45c3a4f73cc6454bd78f.png

 那么这里我们是完成了，login总界面的效果，同样的道理，代码都差不多，我们直接 cv 大法，这里就给出重点要改的代码。

2、registercheck总代码

里面要重点改的代码，一个是 sql 语句插入，另一个是时间格式转换。

String sql = "insert into login(name, pass,time)VALUES(?,?,?)";
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");// 时间转换，要不然就会是国际时间格式
            String data = formatter.format(new Date());// 记录的是当前的时间
            ps.setString(3,data);

3、logoutcheck总代码

里面要重点改的代码，是 sql 语句删除。

String sql = "DELETE FROM login WHERE name =? and pass =?";

4、amendcheck总代码

里面要重点改的代码，是 sql 语句更新。

String sql = "update login set pass='"+pass+"'";

然后分别是各个总页面的 success 与 fail 页面来实现好，这里有一个小细节，我们在作抛出异常，这里可以 out.println 来打印出信息来测试，可以输出在网页上，这样可以方便知道那里有异常。

fe1f495531c74b5399d50ee3bcc29c96.png

catch (ClassNotFoundException e) {
            e.printStackTrace();
            out.println("1");
            // response.sendRedirect("registerfail.jsp");
        } catch (SQLException e) {
            e.printStackTrace();
            out.println("2");
            // response.sendRedirect("registerfail.jsp");
        }

cc1ac469a1934f9ab857b742d7d2eda9.png

 好了，点击运行，完成总效果。

98df24cf5e644bb5983b1fe0ab011dc1.png

（求关注）持续更新中…… 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409354.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【前端点击穿透】pointer-events属性详解

【前端点击穿透】pointer-events属性详解

什么是pointer-events&#xff1f; pointer-events 属性是一个指针属性&#xff0c;是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。 This CSS property,when set to “none” allows elements to not receive hover/click events,instead the event will occur…
阅读更多...
使用Three.js实现web端显示点云

使用Three.js实现web端显示点云

需要了解html、js、websocket的基本使用&#xff0c;建议浏览three.js文档中场景、渲染器、光源、相机以点模型、Buffergeometry的相关知识 第一步&#xff0c;创建html文件 <!DOCTYPE html> <html><head><meta charset"utf-8"><title&…
阅读更多...
vue3+vite在main.ts或者main.js文件中引入/App.vue报错（/App.vue不是模块）

vue3+vite在main.ts或者main.js文件中引入/App.vue报错（/App.vue不是模块）

vscode报错&#xff1a;./APP.vue不是模块场景复现情况一、vue3.0js情况二、vue3.0ts方案一&#xff1a;根目录新建env.d.ts方案二&#xff1a;根目录新建tsconfig.jsonvue3报错提示 找不到模块“/App.vue”或其相应的类型声明 场景复现 在使用 vue3➕vite➕ts 或者 js 搭建前…
阅读更多...
微信小程序--》从零实现小程序项目案例

微信小程序--》从零实现小程序项目案例

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;微信小程序 &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&…
阅读更多...
react-前端excel 文件/PDF文件 导入 --导出，照片上传

react-前端excel 文件/PDF文件 导入 --导出，照片上传

需要了解&#xff0c;new FormData() --上传时&#xff0c;将内容转为文件流 new FileReader()--base64压缩&#xff0c;目前不了解 一、excel文件导出 三种导出: 一种是纯粹前端导出&#xff1b;两种后端导出: 分为 后端给地址导出&#xff0c;还有就是文件流的形式导出&…
阅读更多...
攻防世界web新手 - very_easy_sql（非常详细的wp）

攻防世界web新手 - very_easy_sql（非常详细的wp）

文章目录攻防世界web新手XCTF - very_easy_sql知识点解题思路ssrf发现ssrf详解什么是ssrfssrf的利用产生SSRF漏洞的函数ssrf漏洞利用gopher协议报错注入查数据库查表查列名查内容分割读取攻防世界web新手XCTF - very_easy_sql 题目知识点确实很多&#xff0c;我想我这个wp大概…
阅读更多...
【Vue全家桶】Vuex状态管理

【Vue全家桶】Vuex状态管理

&#x1f373;作者&#xff1a;贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛\color{#FF0000}{贤蛋 大眼萌 &#xff0c;一名很普通但不想普通的程序媛}贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛&#x1f933; &#x1f64a;语录&#xff1a;多一些不为什么的…
阅读更多...
windows10下安装和配置nodejs环境

windows10下安装和配置nodejs环境

一、下载安装node.js 官方下载地址:下载最新LTS windows版本: 16.15.0 (includes npm 8.5.5) Node.js ,如下图安装可以更改安装路径(我的是默认地址C:\Program Files\) 其余的都是选择 下一步, 安装 测试是否安装 成功 打开开始菜单中输入cmd&#xff0c;打开cmd命令窗口&a…
阅读更多...
微信小程序实现客服功能（客服消息）

微信小程序实现客服功能（客服消息）

纯前端操作&#xff0c;无后端接入的情况下实现此功能 1&#xff0c;需要一个按钮button&#xff0c;加上open-type“contact”属性 <button open-type"contact">咨询</button> 需在真机上测试&#xff0c;点击按钮就可以进入客服页面。 2&#xff0c…
阅读更多...
猿创征文｜前端之行，任重道远（来自大三学长的万字自述）

猿创征文｜前端之行，任重道远（来自大三学长的万字自述）

&#x1f9d1;‍&#x1f4bc;个人简介&#xff1a;本科大三学生、全栈领域优质创作者、华为云享专家、阿里云专家博主、第十三届蓝桥杯国赛三等奖获得者&#xff0c;拥有软件著作权1项。一个不甘平庸的平凡人&#x1f36c; &#x1f4d6; 前言 目前正值开学季&#xff0c;很多…
阅读更多...
HTML系列之多媒体视频标签 video

HTML系列之多媒体视频标签 video

文章の目录1、video 是什么了2、video的相关属性2.1、autoplay2.2、buffered2.3、controls2.4、loop2.5、muted2.6、height2.7、width2.8、preload2.9、src2.10、poster2.11、controlslist2.12、crossorigin2.13、currentTime2.14、disablePictureInPicture2.15、disableRemote…
阅读更多...
web前端-JavaScript中的函数（创建，参数，返回值，方法，函数作用域，立即执行函数）

web前端-JavaScript中的函数（创建，参数，返回值，方法，函数作用域，立即执行函数）

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列专栏&#xff1a;web前端基础教程 &#x1f451;名言警句&#xff1a;海…
阅读更多...
VsCode安装yarn：yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名

VsCode安装yarn：yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名

1.出现的问题&#xff1a; 在使用VSCode终端的时候&#xff0c;输入命令&#xff1a;yarn install &#xff0c;出现了问题: yarn : 无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&…
阅读更多...
Less预处理——变量和嵌套

Less预处理——变量和嵌套

系列文章目录 文章目录系列文章目录一、Less 变量1、选择器变量2、属性变量3、url 变量4、声明变量5、变量运算6、变量的作用域7、用变量去定义变量二、Less 嵌套1、& 的使用2、媒体查询3、小技巧&#xff1a;添加私有样式一、Less 变量 1、选择器变量 让选择器变成动态的…
阅读更多...
ant design vue的table取消自带分页

ant design vue的table取消自带分页

在我们使用ant design vue的table组件的时候会发现&#xff1a; 组件使用如示&#xff1a; <a-table :columns"columns" :data-source"data" bordered></a-table> 显然并没有配置pagination属性&#xff0c;那为什么会出现分页器呢&#xff1…
阅读更多...
Three.js基础入门系列（一）

Three.js基础入门系列（一）

01 Three.js前提须知 讲到 Three.js&#xff0c;就需要先说一下 OpenGL 和 WebGL。 OpenGL 是一个跨平台的3D/2D的绘图标准&#xff08;规范&#xff09;&#xff0c;WebGL&#xff08;Web Graphics Library&#xff09;是一种3D绘图协议。 WebGL允许把JavaScript和OpenGL 结…
阅读更多...
uniapp 开发安卓App实现高德地图路线规划导航

uniapp 开发安卓App实现高德地图路线规划导航

文章目录技术概述技术详述问题与解决我的总结参考文献技术概述 描述这个技术是做什么的/什么情况下会使用到这个技术&#xff0c;学习该技术的原因&#xff0c;技术的难点在哪里。控制在50-100字内。 uniapp的map组件中导航路线的展示。是uniapp开发app时引入地图导航的实现方…
阅读更多...
21个超实用的 CSS 技巧分享（附图示）

21个超实用的 CSS 技巧分享（附图示）

本文中分享的所有CSS技巧都是来自GitHub代码库“css tips tricks”的手工精选&#xff0c;此代码库专为开发者提供专业的CSS技巧。1、文档布局使用仅两行CSS代码&#xff0c;创建一个响应式的文档布局。这个布局风格类似于文档页面&#xff0c;可以很好地展示各种信息。.parent…
阅读更多...
【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~

【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~

目录 一、通过querySelector / querySelectorAll获取元素 1.1 单个标签选中 1.2 多个标签选中 二、基于这组DOM API&#xff0c;对元素进行操作 2.1 innerHTML获取/修改元素内容 2.2获取/修改元素属性 三、单标签元素属性的获取和修改 3.1 value 3.2checked 3.3 type …
阅读更多...
网上蛋糕商城JSP页面

网上蛋糕商城JSP页面

首先是一个注册页面&#xff1a; 视图如下&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html> <head><title>用户注册</title><meta name"viewport" content"widthdevice-width, initial-scale1"><meta …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023