使用 BootStrap快速开发jsp页面

最新推荐文章于 2024-04-19 10:45:59 发布
最新推荐文章于 2024-04-19 10:45:59 发布
阅读量9.4k 收藏 9
点赞数 1
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Satisfy_555/article/details/81159089
版权

1.新建一个Maven项目

 

================================

2.从bootstrap官网下载相关开发包https://v3.bootcss.com/getting-started/

==========================================

3.在项目中添加bootstrap，以及jquery

==============================================

4.新建测试页面index.jsp，以下引用的是bootstrap中按钮的样式，更多使用请参考官方文档https://v3.bootcss.com/css/

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>测试使用bootstrap框架</title>
	<!-- 引入jQuery -->
	<script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
	<!-- 引入样式 -->
 	<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
 	<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<button type="button" class="btn btn-warning">（警告）Warning</button>
</body>
</html>

==============================================================

===============================================================

最后，对于那些不太熟悉前端知识的后端人员，就在需要时查看官方文档就可以快速的写出较为好看的页面了。。。

Satisfy_555
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
eclipse下web工程里导入Bootstrap jQuery echarts库及数据库、json等jar包
hyp5323的博客
10-13 2748
1、在WebContent文件夹下新建lib--->bootstrap，然后将官网下载的bootstrap库粘贴进来。注意千万不放到了WEB-INF文件夹下。 2、在需要使用bootstrap的jsp文件中增加导入bootstrap库的语句。 然后就可以在下面愉快的写代码了。
Bootstrap实现网页快速开发
06-16
在本例中，我们看到了如何在实际项目中设置和使用Bootstrap，以及如何配合Servlet配置以处理JSP页面的访问。这样的实践可以帮助开发者提高开发效率，同时确保网站在各种设备上都能呈现出良好的用户体验。
在JSP页面中使用Bootstrap
ysmdelog的博客
03-20 2530
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。官网：https://v3.bootcss.com/。 在官网下载相应版本后，导入资源【css、js、fonts】，然后在<head></head>中写 <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me
IDEA+Java+Servlet+JSP+Bootstrap+Mysql实现Web学生成绩管理系统
最新发布
2401_84097510的博客
04-19 574
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
基于BootStrap+JSP的学生管理系统（毕业设计项目）
weixin_52307218的博客
12-06 2919
基于BootStrap+JSP的学生管理系统1、前言2、概述3、项目运行截图4、部分代码5、数据库结构6、总结 1、前言 自己做的毕业设计项目，只是做了比较基础的东西，没有什么比较突出的功能，后台几个模块样式相同都是几个表。 2、概述 前端使用了BootStrap框架后端代码主要使用了JSP来实现，主要功能有用户登录、首页、管理员登录、学生管理、学生成绩、上课信息、课程管理、开课信息、详细信息、角色管理、退出登录，十一个大模块，当以管理员身份登录时可以实现对数据库中的数据进行增删改查的基础操作。
JSP+MySql+Bootstrap校友信息管理系统的开发与设计【源代码+文档+调试+讲解】
q程序设计386321101
11-04 683
本文旨在设计并实现一个基于Java、MySQL和JSP技术的校友信息管理系统。该系统将满足用户和管理员两种不同角色的功能需求，通过数据库设计和界面设计来实现系统的各项功能，并进行测试和优化。本文将详细介绍系统的开发流程、关键技术和实现方法，以期为相关领域的研究和实践提供参考和借鉴。通过以上的设计、开发和测试过程，我们成功地开发出了一个基于Java、MySQL和JSP技术的校友信息管理系统。
在jsp引入bootstrap
时倾的博客
12-19 1万+
第一步：在https://v3.bootcss.com/getting-started/#top该网站下载Bootstrap，有可以看到有三种,如下图所示（本人下载的是源码） 第二步：解压下载的解压包 第三步：新建Maven工程然后将它转为一个动态web工程（如果不会，可以参考本人上一篇博客《将一个Maven工程转为一个标准的Web动态工程》） 第四步：在src下面新建一个文件夹（static...
Bootstrap框架安装使用详解
08-31
- **CDN引用**: 在JSP页面中直接引用CDN服务提供的jQuery和Bootstrap文件。 例如，在MyEclipse中，你可以看到Bootstrap文件夹被放置在项目结构中。 ### 5. 开始使用Bootstrap Bootstrap提供了丰富的组件，如导航条...
JEECG快速开发平台-其他
06-12
UI快速开发库，针对WEBUI进行标准封装，页面统一采用UI标签实现功能：数据datagrid，表单校验，Popup，Tab等，实现JSP页面零JS，开发维护非常高效技术点八：在线流程定义，采用开源Activiti流程引擎，实现在线画流程...
使用Bootstrap Tabs选项卡Ajax加载数据实现
08-31
Bootstrap是流行的前端开发框架，它的Tabs组件允许我们创建可切换的选项卡式界面，而Ajax则可以实现在不刷新整个页面的情况下获取和更新内容，这两者的结合能够提供更流畅的用户体验。 首先，让我们来看一下HTML...
医院挂号系统,前端 html + css+ bootstrap + jsp + mysql
06-26
前端 html + css+ bootstrap + jsp 后端 servlet+ java + mysql + tomcat8.5 开发架构 servlet层， service层， dao层，model层 模块说明： 登陆注册模块 医生模块 医生注册模块（选择部门） 医生个人信息模块...
BootStrap在jsp中的使用
10-20
本文分步骤给大家介绍bootstrap在jsp中的应用，本文分步骤给大家介绍的非常详细，具有参考借鉴价值，需要的朋友参考下
简洁大气的Bootstrap前台框架（Jsp版）
08-31
纯手工原创 良心制作
一个实用的bootstrap模板（html版本和jsp版本都有）
04-29
一个实用的bootstrap模板（html版本和jsp版本都有）
jsp页面bootstrap表格设置页面跳转一直在底部
weixin_43735471的博客
12-25 138
jsp页面的bootStrap表格，设置页面跳转和页码一直在底部显示
Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页
weixin_30779691的博客
05-30 751
前言 Bootstrap是流行的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。源自于twiteer内部的开发框架。 当前（2019-05）最新版本是v3.3.7。 官网：https://v3.bootcss.com/ 学习初衷：不能每来一个项目都重头开始吧，希望积累框架，节省时间，快速上手，尽快出效果。不用太花哨，但也不能太难看。 选一...
jsp引入bootstrap失效的原因
huangruixin520的博客
05-30 7890
在html中使用bootstrap时引入bootstrap文件均可以在网页中正常显示，但是在jsp中使用bootstrap的时候，F12控制台总是报错net::ERR_ABORTED。最后通过百度发现，是因为在springmvc的xml文件中没有设置加载静态资源。解决方法：在springmvc-config.xml中加入“使用默认的Servlet来响应静态文件”code为：&lt;mvc:defa...
在使用bootstrap，若用到jsp上需要注意的地方
热门推荐
Seven_cm
09-13 1万+
需要更改为：
我想使用JSPJSP 和 Bootstrap 开发的注册失败页面，当用户名与数据库中已有的内容重复时时会自动跳转回登录页面，
05-24
好的，你需要在注册页面中添加一个表单，表单中包含用户名、密码和确认密码等字段，当用户点击注册按钮时，将表单数据通过 AJAX 提交到后端进行处理。后端需要检查用户名是否已经存在于数据库中，如果存在，则返回错误信息，前端需要接收这个错误信息，然后使用 Bootstrap 的弹窗提示用户注册失败，并自动跳转回登录页面。 以下是一个简单的示例代码： 1. 前端代码（register.jsp）： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Register</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>Register</h1> <form id="register-form"> <div class="mb-3"> <label for="username" class="form-label">Username</label> <input type="text" class="form-control" id="username" name="username" required> </div> <div class="mb-3"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password" name="password" required> </div> <div class="mb-3"> <label for="confirm-password" class="form-label">Confirm Password</label> <input type="password" class="form-control" id="confirm-password" name="confirmPassword" required> </div> <button type="submit" class="btn btn-primary">Register</button> </form> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script> $(function() { $('#register-form').submit(function(e) { e.preventDefault(); var formData = $(this).serialize(); $.ajax({ type: 'POST', url: 'register.do', data: formData, success: function(data) { if (data.success) { // 注册成功，跳转到登录页面 window.location.href = 'login.jsp'; } else { // 注册失败，弹出错误信息 $('#register-form').addClass('was-validated'); $('#username').addClass('is-invalid'); $('#username-feedback').text(data.message); } }, error: function() { // 提交失败，弹出错误信息 alert('Failed to submit the form'); } }); }); }); </script> </body> </html> ``` 2. 后端代码（RegisterServlet.java）： ```java package com.example; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import com.google.gson.JsonObject; public class RegisterServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver"; private static final String DB_URL = "jdbc:mysql://localhost:3306/test"; private static final String USER = "root"; private static final String PASS = "root"; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("application/json;charset=UTF-8"); String username = request.getParameter("username"); String password = request.getParameter("password"); String confirmPassword = request.getParameter("confirmPassword"); if (!password.equals(confirmPassword)) { JsonObject jsonObject = new JsonObject(); jsonObject.addProperty("success", false); jsonObject.addProperty("message", "The passwords don't match"); PrintWriter out = response.getWriter(); out.write(new Gson().toJson(jsonObject)); return; } Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { Class.forName(JDBC_DRIVER); conn = DriverManager.getConnection(DB_URL, USER, PASS); String sql = "SELECT COUNT(*) FROM users WHERE username = ?"; stmt = conn.prepareStatement(sql); stmt.setString(1, username); rs = stmt.executeQuery(); if (rs.next() && rs.getInt(1) > 0) { // 用户名已存在 JsonObject jsonObject = new JsonObject(); jsonObject.addProperty("success", false); jsonObject.addProperty("message", "The username already exists"); PrintWriter out = response.getWriter(); out.write(new Gson().toJson(jsonObject)); return; } sql = "INSERT INTO users (username, password) VALUES (?, ?)"; stmt = conn.prepareStatement(sql); stmt.setString(1, username); stmt.setString(2, password); stmt.executeUpdate(); JsonObject jsonObject = new JsonObject(); jsonObject.addProperty("success", true); PrintWriter out = response.getWriter(); out.write(new Gson().toJson(jsonObject)); } catch (ClassNotFoundException | SQLException e) { e.printStackTrace(); // 注册失败 JsonObject jsonObject = new JsonObject(); jsonObject.addProperty("success", false); jsonObject.addProperty("message", "Failed to register"); PrintWriter out = response.getWriter(); out.write(new Gson().toJson(jsonObject)); } finally { try { if (rs != null) rs.close(); if (stmt != null) stmt.close(); if (conn != null) conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } } ``` 在数据库中，需要创建一个名为 `users` 的表，表结构如下： ```sql CREATE TABLE `users` ( `id` int NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ``` 这样，当用户在注册页面输入用户名、密码和确认密码，并点击注册按钮时，就会将表单数据通过 AJAX 提交到后端进行处理。后端会检查用户名是否已经存在于数据库中，如果存在，则返回错误信息；如果不存在，则将用户名和密码插入到数据库中，并返回成功信息。前端接收到后端返回的信息后，根据成功或失败的情况进行相应的处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值