菜单 搜索
首页 前端知识 【新手级】JavaWeb用户管理系统—使用JSP, Servlet, JDBC, MySQL

【新手级】JavaWeb用户管理系统—使用JSP, Servlet, JDBC, MySQL

2024-06-14 23:06:36 前端知识 前端哥 364 877 我要收藏

 前言

这是我学完JavaWeb后做的期末大作业，是一个用户管理系统，包括登录注册功能，对于列表的增、删、改、查功能，由于我也是参考的网上大佬的的代码，之后进行了一些修改，完成的这个新手项目，于是我也把这个项目源码放在这里供大家参考，同时也对这次学习做一个记录。

首先感谢大佬们的文章帮助，我把所参考的文章原文链接放在下面：

【Java学习】JSP + Servlet + JDBC + Mysql 实现增删改查_Tellsea的博客-CSDN博客_java jsp 实现增删改查

使用JSP+Servlet+MySQL实现登录注册功能【详细代码】_邵奈一的博客-CSDN博客

 正题

项目运行截图

 

 

 

 

 

 

1.环境信息：

Eclipse IDE for Enterprise Java Developers Version: 2020-12 (4.18.0)

MySQL workbench: 8.0.29

Tomcat: 9.0

2.所使用到的导入包下载地址以及线上仓库引用：

JDBC jar包:在Eclipse中使用JDBC连接MySQL（mysql-connector-java-8.0.28版本）_鸭巴子嘎嘎嘎的博客-CSDN博客_eclipse配置jdbc连接mysql

JSTL jar包以及引用语句：JSP 标准标签库（JSTL） | 菜鸟教程

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  <!-- 引用JSTL核心标签 -->
复制

jQuery引用以及下载网站：https://www.jq22.com/jquery-info122#google_vignette

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
复制

Bootstrap v3 引用以及网站：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
复制

3.项目目录结构：

 

4.新建一个web项目

 5.新建jsp文件

 6.导入要使用的包

这里以mysql连接包举例，其他的类似，目录结构中其他两个包都是JSTL所用到的，我就导入了这三个包，都在上面的目录文件结构中列出了。

 

7.数据库表结构

 

 8.源代码

（1）首页以及接口

index1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%String path=request.getContextPath(); %>
<html>
<head>
<meta charset="UTF-8">
<title>用户管理系统</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
 
<body>
<div class="container">
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a class="navbar-brand" href="#">用户管理系统</a>
	    </div>
	
	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      <ul class="nav navbar-nav">
	        <li class="active"><a href="<%=path%>/index1">首页 <span class="sr-only">(current)</span></a></li>
	        <li><a href="https://blog.csdn.net/weixin_54464792?type=blog">联系我们</a></li>
	      </ul>
	      <form class="navbar-form navbar-left">
	        <div class="form-group">
	          <input type="text" class="form-control" placeholder="Search">
	        </div>
	        <button type="submit" class="btn btn-default">搜索</button>
	      </form>
	      <ul class="nav navbar-nav navbar-right">
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户 <span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">个人中心</a></li>
	            <li><a href="#">设置</a></li>
	            <li><a href="#">帮助</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="<%=path%>/login">注销</a></li>
	          </ul>
	        </li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>
	
	<div class="row">
	
	  <div class="col-md-3">
	  	<div class="list-group">
		  <a class="list-group-item active" href="<%=path%>/index1">首页</a>      
		  <a class="list-group-item" href="<%=path%>/userInfoSave">添加用户</a>
		  <a class="list-group-item" href="<%=path%>/userInfoList">用户列表</a>
		</div>
	  </div>
	  
	  <div class="col-md-9">
	  	<div class="jumbotron">
		  <h1>欢迎!</h1>
		  <p style="margin-top:20px">这是Tang的用户管理系统，使用了 JSP, JavaServlet, JDBC, MySQL, jQuery以及Bootstrap框架，基于MVC模式开发。</p>
		  <p style="margin-top:20px"><a class="btn btn-primary btn-lg" href="#" role="button">更多</a></p>
		</div>
	  </div>
	  
	</div>
	
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
 
</body>
</html>
复制

IndexServlet.java

package Tang.servlet;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * 首页控制器
 * @author TZQ
 *
 */
@WebServlet("/index1")
@SuppressWarnings("serial")
public class IndexServlet extends HttpServlet {
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		req.getRequestDispatcher("/Index1.jsp").forward(req,resp);
		
	}
	
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		//req.getRequestDispatcher(req.getContextPath()+"index.jsp");
		this.doGet(req, resp);
	}
 
}
复制

MysqlUtils.java

package Tang.utils;
 
import java.sql.Connection;
 
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.List;
 
import Tang.service.LoginInfoService;
import Tang.service.UserInfoService;
import Tang.service.impl.LoginInfoServiceImpl;
import Tang.service.impl.UserInfoServiceImpl;
import Tang.entity.LoginInfo;
import Tang.entity.UserInfo;
 
/**
 * MySQL连接工具类
 * @author TZQ
 *
 */
 
public class MysqlUtils {
	private static String url="jdbc:mysql://localhost:3306/javaweb";  //连接地址
	private static String userName="root";  //连接用户名
	private static String password="tzq";  //连接密码
	private static Connection conn=null;  //连接驱动
	
	public static Connection getConnection() {
		if(conn==null) {
			try {
              //com.mysql.jdbc.Driver是 mysql-connector-java 5版本中的
              //com.mysql.cj.jdbc.Driver是 mysql-connector-java 6版本及以上中的
				Class.forName("com.mysql.cj.jdbc.Driver"); 
				conn=DriverManager.getConnection(url,userName,password);
			} catch(ClassNotFoundException e) {
				e.printStackTrace();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		return conn;
	}
	
	
	//测试
	public static void main(String[] args) {
		System.out.println(getConnection());
		LoginInfoService loginInfoService=new LoginInfoServiceImpl();
		LoginInfo user=new LoginInfo();
		user.setAccount("1");
		user.setPassword("2");
		loginInfoService.register(user);
		
		String account="1";
		String password="2";
		LoginInfo user1=loginInfoService.login(account, password);
		System.out.println(user1.toString());
		
		
		
//		UserInfoService userInfoService=new UserInfoServiceImpl();
//		UserInfo entity1=new UserInfo();
//		entity1.setName("芳华");
//		entity1.setPassword("rr36988");
//		entity1.setEmail("fh3236@123.com");
//		entity1.setAddress("天津");
//		userInfoService.saveUserInfo(entity1);
//		
//		
//		List<UserInfo> list=userInfoService.userInfoList();
//		list.forEach(entity ->{
//			System.out.println(entity);
//		});
		
	}
}
复制

UserInfo.java

package Tang.entity;
 
 
/**
 * 用户实体类，也可以叫做bean
 * @author TZQ
 *
 */
 
public class UserInfo {
	private int id;
	private String name;
	private String password;
	private String email;
	private String address;
	
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
	
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	
	
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	
	
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	
	
	@Override
	public String toString() {
		return "UserInfo [id=" + id + ", name=" + name + ", password=" + password + ", email=" + email + ", address="
				+ address + "]";
	}
 
}
复制

UserInfoService.java

package Tang.service;
 
import java.util.List;
 
import Tang.entity.UserInfo;
 
/**
 * 用户接口
 * @author TZQ
 *
 */
 
public interface UserInfoService {
	//接口只写方法特征，而不实现，方法记得加括号否则会成为变量并报错"not have been initialized"，未被初始化
	
	//查询所有用户
	List<UserInfo> userInfoList();
 
	//新增用户
	void saveUserInfo(UserInfo entity);
	
	//根据id查询用户
	UserInfo getUserInfoById(int id);
 
	//根据id更新用户
	void updateUserInfoById(UserInfo entity);
	
	//根据id删除用户
    void deleteUserInfoById(int id);
 
}
复制

UserInfoServiceImpl.java

package Tang.service.impl;
 
import Tang.service.UserInfoService;
 
import java.util.List;
 
import Tang.dao.UserInfoDao;
import Tang.entity.UserInfo;
 
/**
 * 用户接口实现类
 * @author TZQ
 *
 */
 
public class UserInfoServiceImpl implements UserInfoService {
	
	public List<UserInfo> userInfoList(){
		return UserInfoDao.userInfoList();
	}
 
	@Override
	public void saveUserInfo(UserInfo entity) {
		UserInfoDao.saveUserInfo(entity);  //调用dao层的相关方法
		
	}
 
	@Override
	public UserInfo getUserInfoById(int id) {
		return UserInfoDao.getUserInfoById(id);
		
	}
 
	@Override
	public void updateUserInfoById(UserInfo entity) {
		UserInfoDao.updateUserInfoById(entity);
		
	}
 
	@Override
	public void deleteUserInfoById(int id) {
		UserInfoDao.deleteUserInfoById(id);
		
	}
 
}
复制

UserInfoDao.java

package Tang.dao;
 
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
 
import Tang.entity.UserInfo;
import Tang.utils.MysqlUtils;
 
/**
 * 用户数据交互层
 * @author TZQ
 *
 */
 
public class UserInfoDao {
 
	public static List<UserInfo> userInfoList() {
		List<UserInfo> list=new ArrayList<>();
		Connection conn=MysqlUtils.getConnection();
		String sql="select * from user_info;";
		try {
			PreparedStatement pStatement=conn.prepareStatement(sql);
			ResultSet resultSet=pStatement.executeQuery();
			UserInfo entity=null;
			while(resultSet.next()) {
				entity=new UserInfo();
				entity.setId(resultSet.getInt("id"));
				entity.setName(resultSet.getString("name"));
				entity.setPassword(resultSet.getString("password"));
				entity.setEmail(resultSet.getString("email"));
				entity.setAddress(resultSet.getString("address"));
				list.add(entity);
			}
			resultSet.close(); //避免造成性能浪费
			pStatement.close();
		} catch (SQLException e) {
			
			e.printStackTrace();
		}
		
		return list;
	}
 
	public static void saveUserInfo(UserInfo entity) {
		//添加用户的sql语句
		String sql="insert into user_info(name,password,email,address) values(?,?,?,?);";
		Connection conn=MysqlUtils.getConnection();  //得到数据库连接
		
		try {
			PreparedStatement pStatement=conn.prepareStatement(sql);  //使用预处理方法执行sql语句
			//从实体类实例中得到相关数据并设置到sql语句的相关位置
			pStatement.setString(1, entity.getName());  
			pStatement.setString(2, entity.getPassword());
			pStatement.setString(3, entity.getEmail());
			pStatement.setString(4, entity.getAddress());
			int count=pStatement.executeUpdate();  //执行sql语句
			pStatement.close();  //执行完成后执行该close方法，避免资源浪费
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
	}
 
	public static UserInfo getUserInfoById(int id) {
		String sql="select U.id, U.name, U.password, U.email, U.address from user_info U where U.id= "+id+";";
		Connection conn=MysqlUtils.getConnection();
		UserInfo entity=null;
		
		try {
			PreparedStatement pStatement=conn.prepareStatement(sql);
			ResultSet resultSet=pStatement.executeQuery();
			while(resultSet.next()) {
				entity=new UserInfo();
				entity.setId(resultSet.getInt("id"));
				entity.setName(resultSet.getString("name"));
				entity.setPassword(resultSet.getString("password"));
				entity.setEmail(resultSet.getString("email"));
				entity.setAddress(resultSet.getString("address"));
			}
			resultSet.close(); //避免造成性能浪费
			pStatement.close();
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return entity;
		
	}
 
	public static void updateUserInfoById(UserInfo entity) {
		String sql="update user_info set name=?,password=?,email=?,address=? where id=?;";
		Connection conn=MysqlUtils.getConnection();
		try {
			PreparedStatement pStatement=conn.prepareStatement(sql);
			pStatement.setString(1, entity.getName());
			pStatement.setString(2, entity.getPassword());
			pStatement.setString(3, entity.getEmail());
			pStatement.setString(4, entity.getAddress());
			pStatement.setInt(5, entity.getId());
			pStatement.executeUpdate();
			pStatement.close();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		
	}
 
	public static void deleteUserInfoById(int id) {
		String sql="delete from user_info where id="+id+";";
		Connection conn=MysqlUtils.getConnection();
		try {
			PreparedStatement pStatement=conn.prepareStatement(sql);
			pStatement.executeUpdate();
			pStatement.close();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
	}
 
}
复制

（2）查看列表

UserInfoListServlet.java

package Tang.servlet;
 
import java.io.IOException;
import java.util.List;
 
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 Tang.entity.UserInfo;
import Tang.service.UserInfoService;
import Tang.service.impl.UserInfoServiceImpl;
 
/**
 * 用户列表控制器
 * @author TZQ
 * MVC(视图层View，服务层Service，持久层Dao)
 *控制层(Servlet)->接口层(Service)->接口层实现类(ServiceImpL)->数据交互层(Dao)
 */
@WebServlet("/userInfoList")
@SuppressWarnings("serial")
public class UserInfoListServlet extends HttpServlet {
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		this.doPost(req, resp);
		
	}
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		//查询出所有用户
		UserInfoService userInfoService=new UserInfoServiceImpl();
		List<UserInfo> list=userInfoService.userInfoList();
		req.setAttribute("userInfoList", list);
		req.getRequestDispatcher("/user_info_list.jsp").forward(req, resp);
		
		
	}
	
 
}
复制

user_info_list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  <!-- 引用JSTL核心标签 -->
<%String path=request.getContextPath(); %>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
 
<body>
<div class="container">
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a class="navbar-brand" href="#">用户管理系统</a>
	    </div>
	
	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      <ul class="nav navbar-nav">
	        <li class="active"><a href="<%=path%>/index1">首页 <span class="sr-only">(current)</span></a></li>
	        <li><a href="https://blog.csdn.net/weixin_54464792?type=blog">联系我们</a></li>
	      </ul>
	      <form class="navbar-form navbar-left">
	        <div class="form-group">
	          <input type="text" class="form-control" placeholder="Search">
	        </div>
	        <button type="submit" class="btn btn-default">搜索</button>
	      </form>
	      <ul class="nav navbar-nav navbar-right">
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户 <span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">个人中心</a></li>
	            <li><a href="#">设置</a></li>
	            <li><a href="#">帮助</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="<%=path%>/login">注销</a></li>
	          </ul>
	        </li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>
	
	<div class="row">
	
	  <div class="col-md-3">
	  	<div class="list-group">
		  <a class="list-group-item" href="<%=path%>/index1">首页</a>      
		  <a class="list-group-item" href="<%=path%>/userInfoSave">添加用户</a>
		  <a class="list-group-item active" href="<%=path%>/userInfoList">用户列表</a>
		</div>
	  </div>
	  
	  <div class="col-md-9">
	  	<table class="table table-hover">
		  	<thead>
		  	 <tr>
		  	  <th>序号</th>
		  	  <th>姓名</th>
		  	  <th>密码</th>
		  	  <th>邮箱</th>
		  	  <th>地址</th>
		  	 </tr>
		  	</thead>
		  	
		  	<tbody>
		  	<!-- 使用JSTL -->
			  	<c:forEach items="${userInfoList}" var="entity" varStatus="status">      
				  	 <tr>
				  	  <td>${status.index+1}</td>
				  	  <td>${entity.name }</td>
				  	  <td>${entity.password }</td>
				  	  <td>${entity.email }</td>
				  	  <td>${entity.address }</td>
				  	  <td>
				  	    <a href="<%=path%>/userInfoUpdate?id=${entity.id}">修改</a>
				  	    <a style="margin-left: 15px ; color:red " href="<%=path%>/userInfoDelete?id=${entity.id}">删除</a> 	    
				  	  </td>
				  	 </tr>
			  	 </c:forEach>
		  	</tbody>
	          
	        </table>
		
	  </div>
	  
	</div>
	
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
 
</body>
</html>
复制

（3）添加用户

UserInfoSaveServlet.java

package Tang.servlet;
 
import java.io.IOException;
import java.util.List;
 
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 Tang.entity.UserInfo;
import Tang.service.UserInfoService;
import Tang.service.impl.UserInfoServiceImpl;
 
/**
 *新增用户控制器
 * @author TZQ
 *
 */
@WebServlet("/userInfoSave")
@SuppressWarnings("serial")
public class UserInfoSaveServlet extends HttpServlet {
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		req.getRequestDispatcher("/user_info_save.jsp").forward(req, resp);
		
	}
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		//新增用户
		//req.getParameter方法从前端页面的name标签中拿到用户输入的数据，getBytes("ISO-8859-1"),"UTF-8"解决乱码问题
		String name=new String(req.getParameter("name").getBytes("ISO-8859-1"),"UTF-8");  
		String password=req.getParameter("password");
		String email=req.getParameter("email");
		String address=new String(req.getParameter("address").getBytes("ISO-8859-1"),"UTF-8");
		
		//实例化一个用户对象，使用set方法将输入的数据设置给这个对象
		UserInfo entity=new UserInfo();  
		entity.setName(name);
		entity.setPassword(password);
		entity.setEmail(email);
		entity.setAddress(address);
		
		UserInfoService userInfoService=new UserInfoServiceImpl();
		userInfoService.saveUserInfo(entity);  //调用接口中的方法
		req.getRequestDispatcher("/userInfoList").forward(req, resp);  //转发跳转
		//resp.sendRedirect("/userInfoList");  //转发重定向
		
		
	}
 
}
复制

user_info_save.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%String path=request.getContextPath(); %>
<html>
<head>
<meta charset="UTF-8">
<title>添加用户</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
 
<body>
<div class="container">
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a class="navbar-brand" href="#">用户管理系统</a>
	    </div>
	
	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      <ul class="nav navbar-nav">
	        <li class="active"><a href="<%=path%>/index1">首页 <span class="sr-only">(current)</span></a></li>
	        <li><a href="https://blog.csdn.net/weixin_54464792?type=blog">联系我们</a></li>
	      </ul>
	      <form class="navbar-form navbar-left">
	        <div class="form-group">
	          <input type="text" class="form-control" placeholder="Search">
	        </div>
	        <button type="submit" class="btn btn-default">搜索</button>
	      </form>
	      <ul class="nav navbar-nav navbar-right">
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户 <span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">个人中心</a></li>
	            <li><a href="#">设置</a></li>
	            <li><a href="#">帮助</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="<%=path%>/login">注销</a></li>
	          </ul>
	        </li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>
	
	<div class="row">
	
	  <div class="col-md-3">
	  	<div class="list-group">
		  <a class="list-group-item" href="<%=path%>/index1">首页</a>      
		  <a class="list-group-item active" href="<%=path%>/userInfoSave">添加用户</a>
		  <a class="list-group-item" href="<%=path%>/userInfoList">用户列表</a>
		</div>
	  </div>
	  
	  <div class="col-md-9">
	  	<form action="<%=path%>/userInfoSave" method="post">
		  <div class="form-group">
		    <label>姓名</label>
		    <input type="text" name="name" class="form-control" placeholder="Please input your name here">
		  </div>
		  
		  <div class="form-group">
		    <label>密码</label>
		    <input type="password" name="password" class="form-control" placeholder="Please input your password here">
		  </div>
		  
		  <div class="form-group">
		    <label>邮箱</label>
		    <input type="email" name="email" class="form-control" placeholder="Please input your E-mail here">
		  </div>
		  
		  <div class="form-group">
		    <label>地址</label>
		    <input type="text" name="address" class="form-control" placeholder="Please input your address here">
		  </div>
		  
		  <button type="submit" class="btn btn-primary">保存(Submit)</button>
		  <button type="reset" class="btn btn-warning">重置(Reset)</button>
		</form>
	  </div>
	  
	</div>
	
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
 
</body>
</html>
复制

（4）修改用户

UserInfoUpdateServlet.java

package Tang.servlet;
 
import java.io.IOException;
import java.util.List;
 
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 Tang.entity.UserInfo;
import Tang.service.UserInfoService;
import Tang.service.impl.UserInfoServiceImpl;
 
/**
 * 修改用户控制器
 * @author TZQ
 *
 */
@WebServlet("/userInfoUpdate")
@SuppressWarnings("serial")
public class UserInfoUpdateServlet extends HttpServlet {
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		//查询需要编辑的信息
		UserInfoService userInfoService=new UserInfoServiceImpl();
		UserInfo entity=userInfoService.getUserInfoById(Integer.parseInt(req.getParameter("id")));
		req.setAttribute("entity", entity);
		req.getRequestDispatcher("/user_info_update.jsp").forward(req, resp);
		
	}
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		int id=Integer.parseInt(req.getParameter("id"));
		String name=new String(req.getParameter("name").getBytes("ISO-8859-1"),"UTF-8");  //解决乱码问题
		String password=req.getParameter("password");
		String email=req.getParameter("email");
		String address=new String(req.getParameter("address").getBytes("ISO-8859-1"),"UTF-8");
		
		UserInfo entity=new UserInfo();
		entity.setId(id);
		entity.setName(name);
		entity.setPassword(password);
		entity.setEmail(email);
		entity.setAddress(address);
		
		UserInfoService userInfoService=new UserInfoServiceImpl();
		userInfoService.updateUserInfoById(entity);
		req.getRequestDispatcher("/userInfoList").forward(req, resp);
		//resp.sendRedirect("/UserManagementTang/WebContent/user_info_update.jsp");  //转发重定向
		
		
	}
 
}
复制

user_info_update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%String path=request.getContextPath(); %>
<html>
<head>
<meta charset="UTF-8">
<title>更新用户</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
 
<body>
<div class="container">
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a class="navbar-brand" href="#">用户管理系统</a>
	    </div>
	
	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      <ul class="nav navbar-nav">
	        <li class="active"><a href="<%=path%>/index1">首页 <span class="sr-only">(current)</span></a></li>
	        <li><a href="https://blog.csdn.net/weixin_54464792?type=blog">联系我们</a></li>
	      </ul>
	      <form class="navbar-form navbar-left">
	        <div class="form-group">
	          <input type="text" class="form-control" placeholder="Search">
	        </div>
	        <button type="submit" class="btn btn-default">搜索</button>
	      </form>
	      <ul class="nav navbar-nav navbar-right">
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户 <span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">个人中心</a></li>
	            <li><a href="#">设置</a></li>
	            <li><a href="#">帮助</a></li>
	            <li role="separator" class="divider"></li>
	            <li><a href="<%=path%>/login">注销</a></li>
	          </ul>
	        </li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>
	
	<div class="row">
	
	  <div class="col-md-3">
	  	<div class="list-group">
		  <a class="list-group-item" href="<%=path%>/index1">首页</a>      
		  <a class="list-group-item" href="<%=path%>/userInfoSave">添加用户</a>
		  <a class="list-group-item" href="<%=path%>/userInfoList">用户列表</a>
		</div>
	  </div>
	  
	  <div class="col-md-9">
	  	<form action="<%=path%>/userInfoUpdate" method="post">
	  		<input type="hidden" name="id" value="${entity.id}">
		  <div class="form-group">
		    <label>姓名</label>
		    <input type="text" name="name" value="${entity.name}" class="form-control" placeholder="Please input your name here">
		  </div>
		  
		  <div class="form-group">
		    <label>密码</label>
		    <input type="password" name="password" value="${entity.password}" class="form-control" placeholder="Please input your password here">
		  </div>
		  
		  <div class="form-group">
		    <label>邮箱</label>
		    <input type="email" name="email" value="${entity.email}" class="form-control" placeholder="Please input your E-mail here">
		  </div>
		  
		  <div class="form-group">
		    <label>地址</label>
		    <input type="text" name="address" value="${entity.address}" class="form-control" placeholder="Please input your address here">
		  </div>
		  
		  <button type="submit" class="btn btn-primary center-block">修改(Update)</button>
		</form>
	  </div>
	  
	</div>
	
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
 
</body>
</html>
复制

（5）删除用户

UserInfoDeleteServlet.java

package Tang.servlet;
 
import java.io.IOException;
import java.util.List;
 
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 Tang.entity.UserInfo;
import Tang.service.UserInfoService;
import Tang.service.impl.UserInfoServiceImpl;
 
/**
 * 用户删除控制器
 * @author TZQ
 *
 */
 
@WebServlet("/userInfoDelete")
@SuppressWarnings("serial")
public class UserInfoDeleteServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		this.doPost(req, resp);
		
	}
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		//根据id删除
		UserInfoService userInfoService=new UserInfoServiceImpl();
		userInfoService.deleteUserInfoById(Integer.parseInt(req.getParameter("id")));
		req.getRequestDispatcher("/userInfoList").forward(req, resp);
		//resp.sendRedirect("/userInfoList");  //转发重定向
		
		
	}
}
复制

（6）登录

LoginInfo.java

package Tang.entity;
 
 
/**
 * 注册登录实体类
 * @author TZQ
 *
 */
public class LoginInfo {
	private String account;
	private String password;
	
	public String getAccount() {
		return account;
	}
	public void setAccount(String account) {
		this.account = account;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	@Override
	public String toString() {
		return "LoginInfo [account=" + account + ", password=" + password + "]";
	}
	
	
	
 
}
复制

LoginInfoService.java

package Tang.service;
 
import Tang.entity.LoginInfo;
 
/**
 * 登录接口
 * @author TZQ
 *
 */
 
public interface LoginInfoService {
	
	LoginInfo login(String account, String password);
 
	void register(LoginInfo user);
 
}
复制

LoginInfoServiceImpl.java

package Tang.service.impl;
 
import Tang.dao.LoginInfoDao;
import Tang.entity.LoginInfo;
import Tang.service.LoginInfoService;
 
/**
 * 登录接口实现类
 * @author TZQ
 *
 */
 
public class LoginInfoServiceImpl implements LoginInfoService {
 
	@Override
	public LoginInfo login(String account, String password) {
		return LoginInfoDao.login(account,password);
	}
 
	@Override
	public void register(LoginInfo user) {
		LoginInfoDao.register(user);
		
	}
 
}
复制

LoginInfoDao.java

package Tang.dao;
 
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
 
import Tang.entity.LoginInfo;
import Tang.utils.MysqlUtils;
 
/**
 * 登录功能类
 * @author TZQ
 *
 */
 
public class LoginInfoDao {
 
	public static LoginInfo login(String account, String password) {
		String sql="select * from login_info where account="+"'"+account+"'"+" and password="+"'"+password+"'"+";";
		Connection conn=MysqlUtils.getConnection();
		LoginInfo user=new LoginInfo();
		try {
			PreparedStatement pStatement=conn.prepareStatement(sql);
			ResultSet resultSet=pStatement.executeQuery();
			if(resultSet.next()) {
				user.setAccount(resultSet.getString("account"));
				user.setPassword(resultSet.getString("password"));
				System.out.println(user+"登录成功！");
			}
			else {
				System.out.println("用户名或密码错误！");
			}
			resultSet.close();
			pStatement.close();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
				
		return user;
	}
 
	public static void register(LoginInfo user) {
		String sql="insert into login_info(account,password) values(?,?);";
		Connection conn=MysqlUtils.getConnection();
		
		try {
			PreparedStatement pStatement=conn.prepareStatement(sql);
			pStatement.setString(1, user.getAccount());
			pStatement.setString(2, user.getPassword());
			pStatement.executeUpdate();
			pStatement.close();
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
	}
 
 
 
}
复制

LoginServlet.java

package Tang.servlet;
 
import java.io.IOException;
import java.io.PrintWriter;
 
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 Tang.entity.LoginInfo;
import Tang.service.LoginInfoService;
import Tang.service.impl.LoginInfoServiceImpl;
 
/**
 * 登录控制器
 * @author TZQ
 *
 */
@WebServlet("/login")
@SuppressWarnings("serial")
public class LoginServlet extends HttpServlet {
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		req.getRequestDispatcher("/login.jsp").forward(req,resp);
		
	}
	
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		String account= req.getParameter("account");
		String password= req.getParameter("password");
		LoginInfoService loginInfoService=new LoginInfoServiceImpl();
		LoginInfo user=loginInfoService.login(account, password);
		
		if(user.getAccount()!=null) {
			req.getRequestDispatcher("/index1").forward(req,resp);
		}
		else {
			//这句话的意思，是让浏览器用utf8来解析返回的数据  
			resp.setHeader("Content-type", "text/html;charset=UTF-8");
			//这句话的意思，是告诉servlet用UTF-8转码
			resp.setCharacterEncoding("UTF-8");
			//实现弹窗功能
			PrintWriter out=resp.getWriter();
			out.print("<script>alert('用户名或密码错误，请重新输入!'); window.location='login.jsp';</script>");
			out.flush();
			out.close();
		}
		
	}
 
 
}
复制

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%String path=request.getContextPath(); %>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
 
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            width:100%;
            background-color:#fbfbfb;
        }
        .login-wrapper {
            background-color:#cececf;
            opacity:0.9;
            width: 358px;
            height: 500px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 46%;
            transform: translate(-50%, -50%);
            box-shadow:8px 8px 8px rgba(0,0,0,0.6);
        }
        .header {
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 15px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
            border-radius: 4px;
        }
        .input-item:placeholder {
            text-transform: uppercase;
        }
 
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">用户管理系统</div>
            <form class="form-wrapper" action="<%=path%>/login" method="post">
                <input type="text" name="account" placeholder="账号" class="input-item">
                <input type="password" name="password" placeholder="密码" class="input-item">
                <button type="submit" class="btn btn-primary" style="width:100%; margin-top:12px">登录</button>
            </form>
            <div class="msg">
                还没有账号？
                <a href="<%=path%>/register">注册</a>
            </div>
        </div>
    </div>
</body>
</html>
 
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
 
</body>
</html>
复制

（7）注册

 RegisterServlet.java

package Tang.servlet;
 
import java.io.IOException;
 
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 Tang.entity.LoginInfo;
import Tang.service.LoginInfoService;
import Tang.service.impl.LoginInfoServiceImpl;
 
/**
 * 注册控制器
 * @author TZQ
 *
 */
 
@WebServlet("/register")
@SuppressWarnings("serial")
public class RegisterServlet extends HttpServlet {
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		req.getRequestDispatcher("/register.jsp").forward(req,resp);
		
	}
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException{
		String account= req.getParameter("account");
		String password= req.getParameter("password");
		LoginInfoService loginInfoService=new LoginInfoServiceImpl();
		LoginInfo user=new LoginInfo();
		user.setAccount(account);
		user.setPassword(password);
		loginInfoService.register(user);
		req.getRequestDispatcher("/login.jsp").forward(req,resp);
		
	}
 
}
复制

register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%String path=request.getContextPath(); %>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
 
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            width:100%;
            background-color:#fbfbfb;
            
        }
        .login-wrapper {
            background-color:#cececf;
            opacity:0.9;
            width: 358px;
            height: 530px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 46%;
            transform: translate(-50%, -50%);
            box-shadow:8px 8px 8px rgba(0,0,0,0.6);
        }
        .header {
            font-size: 25px;
            font-weight: bold;
            text-align: center;
            line-height: 170px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
            border-radius: 4px;
        }
        .input-item:placeholder {
            text-transform: uppercase;
        }
 
        .msg {
            text-align: center;
            line-height: 88px;
        }
        a {
            text-decoration-line: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">用户管理系统注册</div>
            <form class="form-wrapper" action="<%=path%>/register" method="post">
                <input type="text" placeholder="手机号" class="input-item">
                <input type="text" name="account" placeholder="账号" class="input-item">
                <input type="password" name="password" placeholder="密码" class="input-item">
                <button type="submit" class="btn btn-warning" style="width:100%; margin-top:25px">注册账号</button>
            </form>
        </div>
    </div>
</body>
</html>
 
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
 
</body>
</html>
复制

结束

每个人的配置环境不一样遇到的问题也不一样，不是说代码原封不动的复制过去就能运行，遇到问题先百度。上面的代码还是建议跟着Tellsea大佬的教学视频敲一遍，原文链接已经在开头给出。

 

 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12198.html
标签
servlet
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！