12-代码实战——服务器版表白墙

已于 2023-06-18 07:26:42 修改
阅读量3.2k 收藏 5
点赞数 4
分类专栏： JavaWeb 文章标签： 前端
于 2023-06-17 13:15:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WWXDwrn/article/details/131242512
版权
文章讲述了在Web开发中如何处理用户数据，从最初的将表白信息存储在内存中的简单实现，到通过创建数据库和使用MySQLJDBC进行数据持久化的改进。主要涉及前后端交互接口的定义、HTML前端页面的创建、Servlet后端处理以及数据库操作。这两个版本分别展示了数据存储的不同策略及其优缺点。
摘要由CSDN通过智能技术生成

目录

1.版本一：将数据存到内存中

①约定前后端交互接口

a.添加表白信息：

b.查询表白列表：

②在webapp包下创建message-wall.html前端文件

③在java包下创建AddMessageServlet后端类

④在java包下创建MessageListServlet后端类

2.版本二：将数据存到数据库中

①创建数据库, 创建 messages 表

②在pom.xml中添加MySQL JDBC依赖

③在utils包下创建 DBUtils 类

④在java包下创建AddMessageServletV2后端类

⑤在webapp包下创建message-wallv2.html前端页面

⑥在java包下创建MessageListServletV2后端类

1.版本一：将数据存到内存中

①约定前后端交互接口

所谓 "前后端交互接⼝" 是进⾏ Web 开发中的关键环节。

具体来说，就是允许⻚⾯给服务器发送哪些 HTTP 请求，并且每种请求预期获取什么样的 HTTP 响应。

  • Java里不会直接去操作内存，但后端所有的Servlet类是运行在内存中，这里所说的将数据存到内存中，就是在后端程序中创建一个集合List，List里有一个对象，将数据存到List中，就相当于是存到内存中了。
  • 当不重启Tomcat时，换浏览器都会展示提交的数据；但若重启Tomcat，会释放内存，不会展示提交的数据了。
  • 后端拿到前端传递的3个数据后，将数据放到List里，并且提供一个查询接口。
  • 总共2个接口：①添加表白信息的接口；②查询表白列表的接口。

a.添加表白信息：

  1. url：/message/add
  2. type：POST
  3. 参数：from=xxx&to=yyy&msg=zzz
  4. 返回值：int类型数字

b.查询表白列表：

  1. url：/message/list
  2. type：GET
  3. 参数：无
  4. 返回值：[{"from":"", "to":"", "msg":""}, ...]（json对象）

注：不建议写成一个url，不同的type，触达不同的业务。因为ajax使用哪个类型不能决定执行哪个业务方法。

②在webapp包下创建message-wall.html前端文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <title>表白墙</title>
    <style>
       * {
            margin: 0;
            padding: 0;
       }
        .container {
            width: 400px;
            margin: 0 auto;
       }
        h1 {
            text-align: center;
            padding: 20px 0;
       }
        p {
            color: #666;
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
       }
        .row {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
       }
        span {
            width: 100px;
            line-height: 40px;
       }
        .edit {
            width: 200px;
            height: 30px;
       }
        .submit {
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
       }
        .submit:active {
            background-color: #666;
       }
    </style>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="container" class="container">
    <h1>表白墙</h1>
    <p>输⼊后点击提交, 会将信息显示在表格中</p>
    <div class="row">
        <span>谁: </span>
        <input id="from" class="edit" type="text">
    </div>
    <div class="row">
        <span>对谁: </span>
        <input id="to" class="edit" type="text">
    </div>
    <div class="row">
        <span>说什么: </span>
        <input id="message" class="edit" type="text">
    </div>
    <div class="row">
        <input type="button" value="提交" class="submit" onclick="mySubmit()">
    </div>
    <div id="allMsg">
    </div>
</div>
<script>
    //添加表白信息
    function mySubmit() {
        var from = jQuery("#from");
        var to = jQuery("#to");
        var msg = jQuery("#message");

        //1.非空效验
        if(from.val().trim() == "") {
            alert("请先输入from！");
            from.focus(); //聚焦光标
            return false; //不走下面的代码了
        }
        if(to.val().trim() == "") {
            alert("请先输入to！");
            to.focus();
            return false;
        }
        if(msg.val().trim() == "") {
            alert("请先输入msg！");
            msg.focus();
            return false;
        }

        //2.ajax提交数据给后端
        jQuery.ajax({
            url:"message/add", //提交到后端的地址
            type:"POST", //提交类型
            data:{
                from:from.val(),
                to:to.val(),
                msg:msg.val()
            }, //data是前端给后端提交的key值/参数
            success:function(result) { //回调函数，匿名函数，result是后端给前端返回的数据，result是一个int类型的值
                if(result != null && result > 0) {
                    alert("恭喜：添加成功！");
                    //刷新表白列表
                    getAllMsg();
                } else {
                    alert("抱歉：添加失败，请重试！");
                }
            }
        });
    }

    //查询表白列表
    function getAllMsg() {
        jQuery.ajax({
            url:"message/list", //最前面没有'/'
            type:"GET",
            data:{},
            success:function(result) { //result是一个json对象
                if(result != null && result.length > 0) {
                    //有表白数据
                    var msgHtml = "";
                    for(var i = 0; i < result.length; i++) {
                        msgHtml += 
                        '<div class = "row">'
                            + result[i].from +'对'
                            + result[i].to +'说'
                            + result[i].message 
                            + '</div>';
                    }
                    jQuery("#allMsg").html(msgHtml);
                } else if(result != null && result.length == 0) {
                    //没有表白数据
                    console.log("没有表白信息");
                } else {
                    alert("访问出错！");
                }
            }
        });
    }
    //要在页面加载时就执行，那么直接在下面调用即可
    getAllMsg();
</script>
</body>
</html>

③在java包下创建AddMessageServlet后端类

public class StringUtils {
    /**
     * 用来判null和判空的，如果为null或空，返回false
     * @param str
     * @return
     */
    public static boolean hasLength(String str) {
        return !(str == null || str.length() == 0);
    }
}
import lombok.Getter;
import lombok.Setter;
import utils.StringUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

/**
 * 添加表白信息
 */
@WebServlet("/message/add")
public class AddMessageServlet extends HttpServlet {
    public static List<Message> msgList = new ArrayList<>();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int result = -1;
        //1.得到前端参数并效验
        String from = req.getParameter("from");
        String to = req.getParameter("to");
        String msg = req.getParameter("msg");
        if(StringUtils.hasLength(from) && StringUtils.hasLength(to) && StringUtils.hasLength(msg)) {
            //2.将表白对象加入到集合（内存）
            msgList.add(new Message(from, to, msg));
            result = 1;
        }
        //3.将结果返回给前端
        resp.setContentType("text/html; charset=utf-8");
        resp.getWriter().println(result);
    }
}

@Setter
@Getter
class Message {
    private String from;
    private String to;
    private String message;

    public Message(String from, String to, String message) {
        this.from = from;
        this.to = to;
        this.message = message;
    }
}

④在java包下创建MessageListServlet后端类

import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

/**
 * 查询表白列表
 */
@WebServlet("/message/list")
public class MessageListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Message> messageList = AddMessageServlet.msgList;
        resp.setContentType("application/json; charset=utf-8");
        ObjectMapper objectMapper = new ObjectMapper();
        resp.getWriter().println(objectMapper.writeValueAsString(messageList));
    }
}

2.版本二：将数据存到数据库中

把表白墙程序修改成服务器版本JDBC+Servlet，这样即使页面关闭、服务器重启，表白墙的内容也不会丢失。

①创建数据库, 创建 messages 表

②在pom.xml中添加MySQL JDBC依赖

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.49</version>
</dependency>

③在utils包下创建 DBUtils 类

DBUtils 类主要实现以下功能：

  1. 创建 MysqlDataSource 实例，设置 URL, username, password 等属性。
  2. 提供 getConnection ⽅法，和 MySQL 服务器建⽴连接。
  3. 提供 close ⽅法，⽤来释放必要的资源。
import com.mysql.jdbc.Connection;
import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class DBUtils {
    //单例模式3步：
    //①声明一个私有的构造方法
    private DBUtils() {

    }

    //②提供一个私有的对象属性
    private static volatile MysqlDataSource mysqlDataSource;
    private static volatile Connection connection;

    //③提供一个公共的对外访问的方法，并且这个方法要加volatile和DCL双重效验锁
    private static MysqlDataSource getMysqlDataSource() {
        if(mysqlDataSource == null) {
            synchronized (DBUtils.class) {
                if(mysqlDataSource == null) {
                    mysqlDataSource = new MysqlDataSource();
                    mysqlDataSource.setURL("jdbc:mysql://127.0.0.1:3306/messagewall?character=utf8&useSSL=true");
                    mysqlDataSource.setUser("root");
                    mysqlDataSource.setPassword("12345678");
                }
            }
        }
        return mysqlDataSource;
    }

    //1.get connect
    public static Connection getConnection() {
        if(connection == null) { //首次访问
            synchronized (DBUtils.class) {
                if(connection == null) {
                    try {
                        MysqlDataSource dataSource = getMysqlDataSource();
                        connection = (Connection) dataSource.getConnection();
                    } catch (SQLException throwables) {
                        throwables.printStackTrace();
                    }
                }
            }
        }
        return connection;
    }

    //2.提供关闭资源的方法
    public static void close(ResultSet resultSet, PreparedStatement statement, Connection connection) throws SQLException {
        if(resultSet != null) {
            resultSet.close();
        }
        if(statement != null) {
            statement.close();
        }
    }
}

④在java包下创建AddMessageServletV2后端类

import com.mysql.jdbc.Connection;
import lombok.SneakyThrows;
import utils.DBUtils;
import utils.StringUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.PreparedStatement;
import java.util.ArrayList;
import java.util.List;

/**
 * 添加表白信息
 */
@WebServlet("/message/add2")
public class AddMessageServletV2 extends HttpServlet {
    public static List<Message> msgList = new ArrayList<>();

    @SneakyThrows
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int result = -1;
        //1.得到前端参数并效验
        String from = req.getParameter("from");
        String to = req.getParameter("to");
        String msg = req.getParameter("msg");
        if(StringUtils.hasLength(from) && StringUtils.hasLength(to) && StringUtils.hasLength(msg)) {
            //2.将表白对象加入到数据库
            //2.1.得到Connect
            Connection connection = DBUtils.getConnection();
            //2.2.拼接sql，创建执行器
            String sql = "insert into messages(`from`,`to`,`message`) values(?,?,?)";
            PreparedStatement statement = connection.prepareStatement(sql);
            statement.setString(1,from);
            statement.setString(2,to);
            statement.setString(3,msg);
            //2.3.执行执行器，并返回结果
            result = statement.executeUpdate();
            //2.4.关闭资源
            DBUtils.close(null, statement, connection);
        }
        //3.将结果返回给前端
        resp.setContentType("text/html; charset=utf-8");
        resp.getWriter().println(result);
    }
}

⑤在webapp包下创建message-wallv2.html前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <title>表白墙——连接数据库版本</title>
    <style>
       * {
            margin: 0;
            padding: 0;
       }
        .container {
            width: 400px;
            margin: 0 auto;
       }
        h1 {
            text-align: center;
            padding: 20px 0;
       }
        p {
            color: #666;
            text-align: center;
            font-size: 14px;
            padding: 10px 0;
       }
        .row {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
       }
        span {
            width: 100px;
            line-height: 40px;
       }
        .edit {
            width: 200px;
            height: 30px;
       }
        .submit {
            width: 304px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
       }
        .submit:active {
            background-color: #666;
       }
    </style>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="container" class="container">
    <h1>表白墙</h1>
    <p>输⼊后点击提交, 会将信息显示在表格中</p>
    <div class="row">
        <span>谁: </span>
        <input id="from" class="edit" type="text">
    </div>
    <div class="row">
        <span>对谁: </span>
        <input id="to" class="edit" type="text">
    </div>
    <div class="row">
        <span>说什么: </span>
        <input id="message" class="edit" type="text">
    </div>
    <div class="row">
        <input type="button" value="提交" class="submit" onclick="mySubmit()">
    </div>
    <div id="allMsg">
    </div>
</div>
<script>
    //添加表白信息
    function mySubmit() {
        var from = jQuery("#from");
        var to = jQuery("#to");
        var msg = jQuery("#message");

        //1.非空效验
        if(from.val().trim() == "") {
            alert("请先输入from！");
            from.focus(); //聚焦光标
            return false; //不走下面的代码了
        }
        if(to.val().trim() == "") {
            alert("请先输入to！");
            to.focus();
            return false;
        }
        if(msg.val().trim() == "") {
            alert("请先输入msg！");
            msg.focus();
            return false;
        }

        //2.ajax提交数据给后端
        jQuery.ajax({
            url:"message/add2", //提交到后端的地址
            type:"POST", //提交类型
            data:{
                from:from.val(),
                to:to.val(),
                msg:msg.val()
            }, //data是前端给后端提交的key值/参数
            success:function(result) { //回调函数，匿名函数，result是后端给前端返回的数据，result是一个int类型的值
                if(result != null && result > 0) {
                    alert("恭喜：添加成功！");
                    //刷新表白列表
                    getAllMsg();
                } else {
                    alert("抱歉：添加失败，请重试！");
                }
            }
        });
    }

    //查询表白列表
    function getAllMsg() {
        jQuery.ajax({
            url:"message/list2", //最前面没有'/'，若最前面要有'/'，则还需要在'/'后面加上网站的名字，再加上message/list2
            type:"GET",
            data:{},
            //如果要设置传递的ContentType，还要传一个dataType属性
            success:function(result) { //result是一个json对象
                if(result != null && result.length > 0) {
                    //有表白数据
                    var msgHtml = "";
                    for(var i = 0; i < result.length; i++) {
                        msgHtml += 
                        '<div class = "row">'
                            + result[i].from +'对'
                            + result[i].to +'说'
                            + result[i].message 
                            + '</div>';
                    }
                    jQuery("#allMsg").html(msgHtml);
                } else if(result != null && result.length == 0) {
                    //没有表白数据
                    console.log("没有表白信息");
                } else {
                    alert("访问出错！");
                }
            }
        });
    }
    //要在页面加载时就执行，那么直接在下面调用即可
    getAllMsg();
</script>
</body>
</html>

⑥在java包下创建MessageListServletV2后端类

import com.fasterxml.jackson.databind.ObjectMapper;
import com.mysql.jdbc.Connection;
import lombok.SneakyThrows;
import utils.DBUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

/**
 * 查询表白列表
 */
@WebServlet("/message/list2")
public class MessageListServletV2 extends HttpServlet {
    @SneakyThrows
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //查询数据库中的表白列表
        List<Message> list = new ArrayList<>();
        //1.得到connection
        Connection connection = DBUtils.getConnection();
        //2.拼接sql，创建执行器
        String sql = "select * from messages";
        PreparedStatement statement = connection.prepareStatement(sql);
        //3.执行sql，返回resultSet，并循环将数据添加到list中
        ResultSet resultSet = statement.executeQuery();
        while(resultSet.next()) {
            String from = resultSet.getString("from");
            String to = resultSet.getString("to");
            String message = resultSet.getString("message");
            list.add(new Message(from,to,message));
        }
        //4.关闭资源
        DBUtils.close(resultSet, statement, connection);

        resp.setContentType("application/json; charset=utf-8");
        ObjectMapper objectMapper = new ObjectMapper();
        resp.getWriter().println(objectMapper.writeValueAsString(list));
    }
}

PS：HashMap的遍历写法：

X-musk
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
实现服务器版本的表白墙
kim的博客
04-17 428
让服务器来存储用户提交的数据. 由服务器保存当有新的浏览器打开页面的时候,从服务器获取数据。约定好，为了实现这个效果，客户端发送一个什么样的 HTTP 请求，服务器返回一个什么样的 HTTP 响应。至于 Context Path，配置 Smart Tomcat 的时候，不是有默认的路径吗？在实际工作中，一个项目，前端和后端是“两个人 / 两个小组”分别负责的。至于 第一行的名字，这个你可以随便去个名字，它不影响代码的执行！此时两个人就是在并行的开发，前端的负责前端，后端的负责后端。
实现服务器版本---表白墙（Servlet）
AwwzJ_0821的博客
05-05 539
结合Servlet API ，实现一个服务器版本表白墙。实现的这个表白墙，就通过服务器来保存这里的消息数据，进而做到 “持久化” 存储。创建 MessageServlet类，继承自 HttpServlet，重写 doPost方法 以及 doGet方法。（因为在约定接口时，接口一规定传来的请求时 POST请求，接口儿规定传来的请求时 GET请求）
项目实战_表白墙（升级版）
2303_79064370的博客
07-31 5526
如果我们想将数据存起来首先要有一个数据库吧，所以首先就是要创建一个数据库 ，由于直接在Mysql 小黑框里写有点麻烦，我们可以借助一些软件来更加简单的创建数据库，我使用的是Navicat Premium17，挺好用的，虽然它收费，但是搜搜教程，免费的就来了，懂我的意思吧。我们可以看到数据库里有很多属性，如果只靠我们之前定义的类中的属性肯定是不够的，所以我们要重新定义一个实体类和数据库里的属性对应。这是创建一个message_info表的代码，有兴趣的可以跟着敲一下，就当复习了，没兴趣的直接复制就行。
而立之年——三线城市程序员的年终告白
热门推荐
铭毅天下Elasticsearch
12-23 8万+
30岁（2017-1987），曾经对我来说曾是个多么遥远的数字，但它正悄然的离我越来越近。古人云，三十而立，而立的意思是自立于世，多指学有所成。 在《于丹的〈论语心得〉》里，“立”是内心的的立，是内在心灵的独立，而不是十岁的无知，二十岁的愤青，三十真正追求的是心灵的自信和坚定，在你的生命里树立清楚的自省，从容不迫的生活态度，忠于自己的心灵。当我敲下于丹的解释，我的内心是颤抖的、思虑万千，久久不能释怀
表白墙网站手把手搭建（网站搭建的详细教程+保姆级解答）
ximu147的博客
12-28 2870
大部分人可能都想拥有一个属于自己的网站，却不知道如何进行搭建，还花了大量资金得不到满意的结果，本文章就以使用。
python给女朋友_【转】python实战——教你用微信每天给女朋友说晚安
weixin_39778400的博客
12-10 209
但凡一件事，稍微有些重复。我就考虑怎么样用程序来实现它。这里给各位程序员朋友分享如何每天给朋友定时微信发送”晚安“，故事，新闻，等等··· ···最好运行在服务器上，这样后台挂起来更方便。#!/usr/bin/env python# -*- coding: utf-8 -*-# @Time : 2018/5/8 11:28# @Author : baoshan# @Site :# @...
最新版本Anaconda 2024.06-1安装设置
逆境清醒的博客
07-05 2125
最新版本Anaconda 2024.06-1安装设置
开发知识点-uniapp微信小程序
aming小老弟
11-19 2030
限制手段及绕过方法：1、未做限制使用其他浏览器可直接打开页面进行浏览2、通过 UserAgent 来限制现象：使用其他浏览器打开后会跳转到其他页面 或者 有弹窗提示，但是不会跳到open.weixin.qq.com域名去。处理方法：直接模拟UA访问，chrome内置了这个功能。如下为微信UA（一般情况下这两个作用一样，实际上哪怕UA里只填一个MicroMessenger都是可以绕过去的）：U;zh-cn;3、利用了微信oauth做限制。
[置顶] 而立之年——三线城市程序员的年终告白
qq_37586590的博客
03-03 391
30岁（2017-1987），曾经对我来说曾是个多么遥远的数字，但它正悄然的离我越来越近。古人云，三十而立，而立的意思是自立于世，多指学有所成。 在《于丹的〈论语心得〉》里，“立”是内心的的立，是内在心灵的独立，而不是十岁的无知，二十岁的愤青，三十真正追求的是心灵的自信和坚定，在你的生命里树立清楚的自省，从容不迫的生活态度，忠于自己的心灵。 当我敲下于丹的解释，我的内心是颤抖的、思虑万千，久久不
校园小情书小程序表白墙后端 v2.0.0.zip
04-05
"校园小情书小程序表白墙后端 v2.0.0.zip" 是一个包含源代码的压缩包，主要用于实现一款校园社交小程序的核心功能——表白墙。这个后端系统是版本2.0.0，通常意味着它经过了一定程度的升级和优化，提供了更稳定和...
【Web前端大作业实例网页代码】html+css新闻资讯网页带dw模板和登陆注册（9页）
HTML网页设计
08-09 865
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
HTML5期末考核大作业 基于HTML+CSS+JavaScript仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
专注于dreamweaver网页设计制作
08-14 485
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保......
Web大学生网页作业成品 ：黑色主题个人博客网站设计与实现(HTML+CSS+JavaScript)
HTML网页设计
08-20 959
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构...
AI 大模型时代，对前端工程师有哪些机遇和挑战？
最新发布
Z4400840的博客
08-28 330
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
谷歌、火狐及Edge等浏览器如何使用allWebPlugin中间件响应ActiveX插件事件
云开软件工作室
08-25 612
如何通过allWebPlugin中间件技术，在谷歌、火狐、Edge及360等浏览器中响应ActiveX控件的事件。JavaScript调用PluginHostCnt类RegisterEvent方法，注册需要响应的控件事件，如果需要响应多个事件，事件与事件之间通过分号（;）隔开；使用JavaScript编写事件响应函数，响应函数参数需要与ActiveX控件事件函数参数一致。
前端宝典十六：深入浅出8大设计模式
franktaoge的博客
08-24 1377
本文主要探讨前端开发中的各种设计模式，主要分类有： - 单例模式 - 建造者模式 - 代理模式 - 装饰器模式 - 适配器模式 - 策略模式 - 观察者模式 - 发布订阅模式 通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：
浏览器精度问题
m0_46281382的博客
08-25 525
浏览器如何解析后端返回的long类型的数据
前端：篮球投掷动画
懒羊羊大王的博客
08-23 1080
使用 H5 和 CSS3 实现的一个篮球投掷动画。 玩法：通过点击篮球所在的绿色(紫色)容器，实现篮球的投掷和回收。
uCOS-ARM移植实战指南——北航版
"uCOS_ARM移植要点详解—pdf北航版" 该资料详细介绍了将嵌入式实时操作系统（RTOS）uCOS移植到ARM架构的过程和关键点。作者黄燕平通过北京航空航天出版社出版的这本书，旨在帮助读者理解如何在ARM平台上有效地进行...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值