Maven-项目管理工具软件-基础篇

技术2023-04-13 124

一、Maven的引入

[1] 传统方式中项目jar包资源的问题

传统方式中项目jar包资源的问题：问题一：项目中的jar包资源需要我们自己从网上下载后，手动导入到项目中使用，一旦jar包资源过多，容易造成遗漏并且不好管理。问题二: 假如我们有两个项目，项目A和项目B，如果项目A中需要使用项目B 中的某些资源，需要我们自己手动的将项目B中的资源导出为jar包，然后手动导入到A项目中，比较麻烦。

总结: 在项目中使用第三方的资源来完成自己的功能开发时，第三方资源的查找下载以及管理都是手动的，我们自己来做，极大的影响了开发效率。

解决: 我们是干什么的，我们是搞程序开发的，那么能不能开发一款软件，专门来管理项目中的第三方的jar包资源呢？我们可以通过该软件来导入我们自己项目开发需要的jar包资源，同时还可以通过这款软件将自己的项目中的资源导出为jar包对外提供服务呢？答案是可以的核心功能: ① 帮助我们找资源 ② 将我们自己的项目中的某些代码打包，供别人使用注意：只有通过这款软件打的包才能被该软件识别。

实现: Maven项目资源管理工具注意： Maven只是个管理工具，不参与到项目功能的开发的。

[2] Maven的介绍和作用

本质：其实就是一款管理软件。作用： (1) 通过maven来导入第三方的jar包资源到项目中 (2) 通过maven将自己项目导出为jar包资源对外提供服务

[3] Maven的基本原理图

资源消费者: 通过Maven工具来获取第三方的资源到自己的项目中使用需要在pom.xml文件中提供资源的坐标. 资源提供者: 通过Maven将自己项目中的代码功能打包，然后提供给其他人使用。注意：项目必须是通过Maven工具来创建的。总结: 我们一个项目既可以是资源的消费者，同时也可以是资源的提供者。所以，以后我们创建的项目都通过Maven来创建。

[4] Maven的专业术语:

本地仓库:maven软件在本地电脑中存储第三方资源的位置云仓库:maven在本地仓库中没有对应的资源后会自动的去云仓库中下载，云仓库就是所有的程序员开发好的jar包资源的在线存储仓库(百度云，阿里云)资源坐标:maven查找需要的资源的定位地址，类似URL。资源坐标必须是唯一的。包括三部分：（1）资源的路径（2）资源的名称（3）资源的版本号

Maven的项目类型

[1] 传统项目类型

JAVASE项目：用来开发java项目的目录结构体系，是IDE工具帮助我们创建的主要是便于代码资源的管理，最终编译后的结果和我们手动是相同的。JAVAEE项目:是一个web项目，该项目的运行不仅仅需要JDK的支持还需要服务器容器的支持。IDE工具帮助我们快速购建的项目结构，便于管理和查看项目的代码资源。不同的IDE工具虽然在项目的结构上略有不同，但是最终运行的代码结构体系是相同的。

总结：开发阶段：不同的IDE工具在开发阶段创建的项目体系结构是不同的上线阶段：不同的IDE工具在项目开发完成后最终运行的代码的项目结构体系是相同的。

[2] Maven项目类型问题: 我们希望使用maven工具将我们自己的项目打包，打包后将资源存储到maven的本地仓库中给其他人使用，这样就意为着，maven需要能够识别我们创建的项目结构体系，这样才能进行资源的打包。但是maven是第三方的工具，maven本身是无法识别我们目前通过IDE工具创建的JAVASE和JAVAEE的项目体系的，怎么办？解决: 我们创建的项目需要是Maven能够识别的项目，我们需要通过maven来创建项目不就可以了。实现: POM类型:讲到再说WAR类型:相当于JAVAEE项目JAR类型：想当于JAVASE项目

三、Maven项目类型和JAVASE项目和JAVAEE项目的关系

问题: 既然我们现在创建项目是通过maven工具来进行创建的，但是项目开发完成后运行项目的不是maven。比如web项目，以前我们直接使用IDE工具创建一个tomcat服务器能够直接识别的web项目结构，完成功能开发，等开发完成后，我们可以直接将项目放到tomcat服务器中运行，但是使用maven创建的项目结构和原有的web项目结构完全不同，那么我们开发完成后项目怎么放到tomcat 中运行呢?解决: maven是个项目资源管理工具，只做资源的管理，不参与项目的运行的。那么是不是在项目开发阶段使用maven管理的时候是maven能够识别的结构体系，在运行阶段是jdk或者tomcat能够识别的结构体系，岂不是很爽美滋滋。实现: 因为项目运行的是编译后的内容，不是源码文件。这样虽然maven项目源码的结构体系和JAVASE，JAVAEE的都不同，但是它们编译后的项目结构体系就是相同的不就可以了。

四、Maven的安装和配置

在本地安装并配置maven

① 将maven的压缩包解压到指定的文件夹中

②maven的目录介绍

③ 配置maven的本地仓库地址在conf文件夹下编辑setting.xml文件在第54行声明本地仓库地址

④配置maven的云仓库地址在conf文件夹下编辑setting.xml文件在第159行声明云仓库地址

<mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.aliyun.com/nexus/content/groups/public/</url> <mirrorOf>central</mirrorOf> </mirror>

⑤ 配置maven的jdk版本因为maven project是由maven地址调用JDK来完成编译，需要配置jdk 的版本，maven会自动的从网上下载对用的jdk来使用。

<profile> <id>jdk-1.8</id> <activation> <activeByDefault>true</activeByDefault> <jdk>1.8</jdk> </activation> <properties> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> <maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion> </properties> </profile> 在idea中集成maven

五、Maven Project的创建和使用

【1】Maven的jar类型的项目

创建jar类型的项目 ①点击file–>new–>moudle–>maven,然后点击下一步即可 ②填写当前创建的maven项目的资源坐标，便于其他项目来调用我们的项目资源。

③设置项目在本地中的存储路径，一般就是在当前的工作空间中。

④点击finish完成创建，然后在右下角的提示中点击import Changes

jar类型项目的结构和特点 ①jar类型项目的结构

② jar类型项目的特点 i. jar类型的项目，相当于我们以前的JAVASE项目。 ii. jar项目编译后的项目结构体系和原有的JAVASE项目编译后的结构体系相同

iii. 默认在test目录下的测试代码是不会编译到项目中的。

【2】Maven的war类型项目

maven的war类型项目的创建 ① 点击file–>new–>moudle–>maven，然后选择项目的模版

② 声明当前项目自己的资源坐标，方便其他项目调用

③直接点击下一步

④声明项目在本地的存储路径，一般是工作空间

⑤ 点击finish，完成创建，在窗口中点击import changes

war类型项目的结构配置 ① 在war项目下的src下的main目录下手动创建java和resources目录。 java目录作为java源码存方法目录 resources目录作为配置文件目录

③ 将resources目录设置为配置文件存储目录

war类型项目结构的作用

war类项目项目的特点 i. 相当于我们以前的JAVAEE项目，完成web项目的开发。 ii. 项目编译后的结构体系和原有的JAVAEE项目编译后的结构体系是相同的，也就说我们maven的war类型项目编译后的资源也可以直接在tomcat中使用

六、 Maven项目中pom配置文件的使用

【1】pom文件的作用

在maven项目中，通过maven来获取和管理第三方的资源。每个maven 项目默认是有一个pom文件的。该文件是用来告诉maven当前项目中需要使用的资源的，该文件会被maven自动加载识别。我们需要在pom配置文件中声明需要使用的资源的坐标即可。

注意：当pom文件被修改的时候，maven会自动的重新加载pom文件，并根据文件的最新内容加载最新的资源。可以理解为maven给pom文件增加了一个onchange的事件。

【2】pom文件的配置内容

modelverson：声明模块的版本当前项目的资源坐标:给maven查看，并便于maven查找到该项目给其他项目使用配置第三方的资源坐标：让maven根据坐标从本地仓库中引入第三方的资源到项目中使用，如果本地仓库中没有，则会自动从云仓库中下载。注意: 我们可以在https://mvnrepository.com/下来搜索需要的资源坐标，然后当我们将资源坐标变更后，需要点击import changes让maven重新加载pom文件，根据最新的资源坐标获取资源到项目中。

注意2: maven将资源引入到项目中后，在idea的项目视图中是看不到第三方资源的，需要点击idea右侧栏上的maven，进入maven的资源管理视图中，查看当前项目中引入的第三方的资源。

properties自定义资源版本号管理一个第三方资源会有很多的版本，比如mybatis，spring等,如果我们需要引入的第三方资源过多，当我们对某一个资源的版本号进行修改时，不好修改。这时就可以使用properties标签将资源的版本号单独的声明在外部，便于我们的修改。引入第三方的插件资源

【3】 jar类型和war类型配置示例

① jar类型的配置示例

② war类型的配置示例问题：在以前的JAVAEE项目中，IDE工具会自动的将JDK以及tomcat的资源依赖到项目中，我们在web-inf下的lib文件夹下声明的是自定义的第三方资源，而maven中的war类型项目中默认是没有给我们引入任何第三方资源的，造成我们在war类型项目中无法直接创建jsp和声明Servlet完成最基本的web开发。解决: 在war类型的项目的pom文件中配置最基础的web开发相关的第三方的资源坐标: i. servlet的资源坐标 ii. jsp的资源坐标 iii. jstl的资源坐标

配置示例：

七、Maven的war类型项目的本地启动运行

问题: 以前我们使用idea工具直接创建javaEE项目，而idea在帮我们创建javaEE项目的时候就已经指定了项目运行所需要的tomcat，我们直接启动tomcat访问项目即可。但是使用maven创建的war类型的项目，在创建的时候并没有指明项目运行所需要的tomcat，那么maven的war类型项目，在功能开发完成后如何启动运行呢?解决: maven的项目中涉及到的资源需要maven来进行管理。war类型的项目在开发完成后，需要告诉maven去调用一个tomcat来运行我们当前的war项目，而maven的资源都是从本地仓库中加载或者从云仓库中下载，那么能不能我们自己在war类型项目中告诉maven去下载一个tomcat，来运行我们的war项目呢？答案是可以的。实现: ① 在war类型项目的pom文件中配置tomcat插件的资源坐标，并配置 tomcat的端口号以及项目的访问路径 <build> <plugins> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> <configuration> <port>6060</port> <path>/my</path> </configuration> </plugin> </plugins> </build>

②通过maven启动当前war项目的tomcat容器，运行项目

八、使用Maven完成对用户信息的增删改查功能

1. 功能需求:

用户访问用户信息管理页面，在管理页面中显示所有的用户信息，并可以对用户信息进行增加，删除，修改操作。

2. 功能分析:

① 用户管理页面创建 ② 用户信息的查询 ③ 用户信息的删除 ④ 用户信息的增加 ⑤ 用户信息的修改

3.功能实现：

1. 数据库设计

用户信息表: - 用户Id - 用户名 - 用户 - 性别 - 手机号 ##创建用户信息表 create table t_user( uid int(10) not null auto_increment, uname varchar(100) not null, sex char(4) not null, phone char(11) not null, primary key(uid)); ##添加测试数据 insert into t_user values(default,'张三','男','15566332211'); insert into t_user values(default,'李四','男','15566332212');

2. 项目开发基板的搭建

开发基板: 创建的web项目中，提前将非业务功能的代码以及资源全部声明。此项目成为开发基板。 Maven的war项目: i. 使用Maven创建war项目 ii. 配置项目的java和resources目录

iii. 配置项目的pom.xml文件声明资源依赖(导包)

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.bjsxt</groupId> <artifactId>04_maven_user</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging>  <properties> <servlet-version>3.1.0</servlet-version> <jsp-version>2.2</jsp-version> <jstl-version>1.2</jstl-version> <mybatis.version>3.5.2</mybatis.version> </properties>  <dependencies>  <dependency>  <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>${mybatis.version}</version> </dependency>  <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.23</version> </dependency>  <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>${servlet-version}</version> <scope>provided</scope> </dependency>  <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>${jsp-version}</version> <scope>provided</scope> </dependency>  <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>${jstl-version}</version> </dependency>  <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.8.2</version> </dependency> </dependencies>  <build> <plugins> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> <configuration> <port>8080</port> <path>/project</path> </configuration> </plugin> </plugins> </build> </project>

iv. 在java源码目录下创建MVC的包结构（创建js文件夹，放入js文件）

v. 配置mybatis.xml文件

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration>  <typeAliases> <package name="com.bjsxt.pojo"/> </typeAliases>  <environments default="mysql">  <environment id="mysql"> <transactionManager type="JDBC"></transactionManager> <dataSource type="POOLED"> <property name="driver" value="com.mysql.cj.jdbc.Driver"/> <property name="url" value="jdbc:mysql://localhost:3306/maven"/> <property name="username" value="root"/> <property name="password" value="root"/> </dataSource> </environment> </environments>  <mappers> <package name="com.bjsxt.mapper"/> </mappers> </configuration>

用户信息管理案例的各层代码示例（完整）： mapper层：

package com.bjsxt.mapper; import com.bjsxt.pojo.User; import org.apache.ibatis.annotations.*; import java.util.List; public interface UserMapper { //声明方法：增加用户信息 @Insert("insert into t_user values(default,#{uname},#{sex},#{phone}") int insUserInfoMapper(User user); //声明方法：根据Id删除用户信息 @Delete("delete from t_user where uid=#{uid}") int delUserInfoMapper(@Param("uid") int uid); //声明方法：根据Id修改用户信息 @Update("update t_user set uname=#{uname},sex=#{sex},phone=#{phone} where uid=#{uid}") int upUserInfoMapper(User user); //声明方法：查询所有用户信息 @Select("select * from t_user") List<User> selUserInfoMapper(); @Select("select * from t_user where uid=#{uid}") User selUserInfoByIdMapper(@Param("uid") String uid); }

pojo层：

package com.bjsxt.pojo; import java.util.Objects; public class User { private Integer uid; private String uname; private String sex; private String phone; public User() { } @Override public String toString() { return "User{" + "uid=" + uid + ", uname='" + uname + '\'' + ", sex='" + sex + '\'' + ", phone='" + phone + '\'' + '}'; } @Override public boolean equals(Object o) { if (this == o) return true; if (o == null || getClass() != o.getClass()) return false; User user = (User) o; return Objects.equals(uid, user.uid) && Objects.equals(uname, user.uname) && Objects.equals(sex, user.sex) && Objects.equals(phone, user.phone); } @Override public int hashCode() { return Objects.hash(uid, uname, sex, phone); } public Integer getUid() { return uid; } public void setUid(Integer uid) { this.uid = uid; } public String getUname() { return uname; } public void setUname(String uname) { this.uname = uname; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } public User(Integer uid, String uname, String sex, String phone) { this.uid = uid; this.uname = uname; this.sex = sex; this.phone = phone; } }

controller层：

package com.bjsxt.controller; import com.bjsxt.pojo.User; import com.bjsxt.service.UserService; import com.bjsxt.service.impl.UserServiceImpl; import com.google.gson.Gson; 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("/user") public class UserServlet extends HttpServlet { //根据请求，调用对用的逻辑处理请求 @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //设置请求编码格式 req.setCharacterEncoding("utf-8"); //设置响应编码格式 resp.setContentType("text/html;charset=utf-8"); resp.setCharacterEncoding("utf-8"); //获取请求信息 String oper=req.getParameter("oper"); //处理请求 if("select".equals(oper)){ selectUserInfo(req,resp); }else if("delete".equals(oper)){ delUserInfo(req,resp); }else if("selectUserById".equals(oper)){ selectUserInfoById(req,resp); } else if("update".equals(oper)){ updateUserInfo(req,resp); } else if("add".equals(oper)){ addUserInfo(req,resp); } } //新增用户信息 private void addUserInfo(HttpServletRequest req, HttpServletResponse resp) throws IOException { //获取请求数据 String uname=req.getParameter("uname"); String sex=req.getParameter("sex"); String phone=req.getParameter("phone"); //将数据存储到User对象中 User user=new User(null,uname,sex,phone); //处理请求 //声明业务层对象 UserService userService=new UserServiceImpl(); //调用方法完成处理 int i=userService.addUserInfoService(user); //响应结果 resp.getWriter().write(i>0?"true":"false"); } //更新用户信息 private void updateUserInfo(HttpServletRequest req, HttpServletResponse resp) throws IOException { //获取请求数据 String uid=req.getParameter("uid"); String uname=req.getParameter("uname"); String sex=req.getParameter("sex"); String phone=req.getParameter("phone"); //将数据存储到User对象中 User user=new User(Integer.parseInt(uid),uname,sex,phone); //处理请求 //声明业务层对象 UserService userService=new UserServiceImpl(); //调用方法完成处理 int i=userService.updateUserInfoService(user); //响应结果 resp.getWriter().write(i>0?"true":"false"); } //根据Id获取用户信息 private void selectUserInfoById(HttpServletRequest req, HttpServletResponse resp) throws IOException { //获取请求数据 String uid=req.getParameter("uid"); //处理请求 UserService userService=new UserServiceImpl(); User user=userService.selUserInfoByIdService(uid); //响应结果 resp.getWriter().write(new Gson().toJson(user)); } //删除用户信息 private void delUserInfo(HttpServletRequest req, HttpServletResponse resp) throws IOException { //获取请求数据 String uid=req.getParameter("uid"); //创建业务层对象完成请求处理 UserService userService=new UserServiceImpl(); int i=userService.delUserInfoService(uid); //响应结果 resp.getWriter().write(i>0?"true":"false"); } //查询所有的用户信息 private void selectUserInfo(HttpServletRequest req, HttpServletResponse resp) throws IOException { //获取业务层对象 UserService userService=new UserServiceImpl(); //调用业务层方法完成处理 List<User> list=userService.selUserInfoService(); //响应数据 resp.getWriter().write(new Gson().toJson(list)); } }

service层：

package com.bjsxt.service; import com.bjsxt.pojo.User; import java.io.IOException; import java.util.List; public interface UserService { //查询所有用户信息 List<User> selUserInfoService() throws IOException; //声明方法:删除用户信息 int delUserInfoService(String uid) throws IOException; //声明方法:根据用户Id获取用户信息 User selUserInfoByIdService(String uid) throws IOException; //声明方法:更新用户信息 int updateUserInfoService(User user) throws IOException; //声明方法:新增用户信息 int addUserInfoService(User user) throws IOException; }

serviceImpl层：

package com.bjsxt.service.impl; import com.bjsxt.mapper.UserMapper; import com.bjsxt.pojo.User; import com.bjsxt.service.UserService; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; import java.io.IOException; import java.io.InputStream; import java.util.List; public class UserServiceImpl implements UserService { //声明方法:新增用户信息 @Override public int addUserInfoService(User user) throws IOException { //1.获取Mapper层接口的实例化对象 //获取SqlSession对象 InputStream resourceAsStream = Resources.getResourceAsStream("mybatis.xml"); SqlSessionFactory factory=new SqlSessionFactoryBuilder().build(resourceAsStream); SqlSession session=factory.openSession(); //获取Mapper接口对象 UserMapper userMapper=session.getMapper(UserMapper.class); //2.调用Mapper层完成新增 int i = userMapper.insUserInfoMapper(user); session.commit(); return i; } //更新用户信息 @Override public int updateUserInfoService(User user) throws IOException { //1.获取Mapper层接口的实例化对象 //获取SqlSession对象 InputStream resourceAsStream = Resources.getResourceAsStream("mybatis.xml"); SqlSessionFactory factory=new SqlSessionFactoryBuilder().build(resourceAsStream); SqlSession session=factory.openSession(); //获取Mapper接口对象 UserMapper userMapper=session.getMapper(UserMapper.class); //2.调用mapper方法完成更新 int i = userMapper.upUserInfoMapper(user); session.commit(); return i; } //根据用户Id获取用户信息 @Override public User selUserInfoByIdService(String uid) throws IOException { //1.获取Mapper层接口的实例化对象 //获取SqlSession对象 InputStream resourceAsStream = Resources.getResourceAsStream("mybatis.xml"); SqlSessionFactory factory=new SqlSessionFactoryBuilder().build(resourceAsStream); SqlSession session=factory.openSession(); //获取Mapper接口对象 UserMapper userMapper=session.getMapper(UserMapper.class); //2.调用mapper方法完成查询 User user=userMapper.selUserInfoByIdMapper(uid); return user; } //声明方法删除用户信息 @Override public int delUserInfoService(String uid) throws IOException { //1.获取Mapper层接口的实例化对象 //获取SqlSession对象 InputStream resourceAsStream = Resources.getResourceAsStream("mybatis.xml"); SqlSessionFactory factory=new SqlSessionFactoryBuilder().build(resourceAsStream); SqlSession session=factory.openSession(); //获取Mapper接口对象 UserMapper userMapper=session.getMapper(UserMapper.class); //2.调用Mapper对象完成数据库删除 int i = userMapper.delUserInfoMapper(Integer.parseInt(uid)); session.commit(); return i; } @Override public List<User> selUserInfoService() throws IOException { //1.获取Mapper层接口的实例化对象 //获取SqlSession对象 InputStream resourceAsStream = Resources.getResourceAsStream("mybatis.xml"); SqlSessionFactory factory=new SqlSessionFactoryBuilder().build(resourceAsStream); SqlSession session=factory.openSession(); //获取Mapper接口对象 UserMapper userMapper=session.getMapper(UserMapper.class); //2.调用Mapper对象完成数据库查询 return userMapper.selUserInfoMapper(); } }

加载和删除页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; %> <html> <head> <base href="<%=basePath%>"> <title>Title</title> <%--引入jquery文件--%> <script type="text/javascript" src="js/j.js"></script> <%--声明js代码域--%> <script type="text/javascript"> //声明页面加载事件：发起ajax请求，加载用户信息 $(function () { $.get("user",{oper:"select"},function (data) {//data应该是所有的用户信息的List集合的Json字符串 //使用eval函数将json字符串转换为js对象 eval("var users="+data); //获取tbody对象 var tb=$("#tb"); //遍历将数据填充到表格中 for(var i=0;i<users.length;i++){ tb.append("<tr>\n" + " <td>"+users[i].uid+"</td>\n" + " <td>"+users[i].uname+"</td>\n" + " <td>"+users[i].sex+"</td>\n" + " <td>"+users[i].phone+"</td>\n" + " <td><a οnclick='delUser("+users[i].uid+")' href='javascript:void(0)'>删除</a>    " + " <a href='javascript:void(0)' οnclick='updateUser("+users[i].uid+")'>修改</a></td>\n" + " </tr>") } }) }) //声明更新方法 function updateUser(uid) { console.log(uid) //弹出子窗口 window.open("updateUser.jsp?uid="+uid,'newwindow','height=300,width=400,top=300,left=300,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') } //声明删除方法 function delUser(uid) { //发起ajax请求，删除用户信息 $.get("user",{uid:uid,oper:"delete"},function (data) { if(eval(data)){ alert("删除成功"); //刷新页面资源，重新加载表格中的资源 window.location.reload(); }else{ alert("删除失败"); } }) } //声明页面加载事件:给新增按钮增加单击事件，完成用户信息的新增 $(function () { $("#add").click(function () { //弹出子窗口，并在子窗口中显示用户新增的页面 window.open("addUser.jsp",'newwindow','height=300,width=400,top=300,left=300,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') }) }) </script> </head> <body> <h3>用户信息管理页面</h3> <hr> <%--声明表格标签用来显示用户信息--%> <br> <input type="button" value="新增" id="add"> <br> <br> <table border="1px" cellspacing="0px" cellpadding="10px"> <thead> <tr> <td>用户编号</td> <td>用户名</td> <td>性别</td> <td>手机号</td> <td>操作</td> </tr> </thead> <tbody id="tb"></tbody> </table> </body> </html>

增加用户信息：

修改用户信息页面：

<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <html> <head> <base href="<%=basePath %>"/> <title>Title</title> <%--引入jquery文件--%> <script type="text/javascript" src="js/j.js"></script> <%--声明js代码域--%> <script type="text/javascript"> //声明页面加载事件:当页面加载成功发起ajax请求，获取要修改的用户信息，回显到表单中 $(function () { var uid='${param.uid}'; $.get("user",{uid:uid,oper:"selectUserById"},function (data) { //1. 使用eval将字符串数据转换为js对象 eval("var u="+data); //2.将数据填充到表单中 //用户的ID $("#uid").val(u.uid) //显示用户名 $("#uname").val(u.uname); //显示性别 $("input[name=sex]").each(function () { if(u.sex==$(this).val()){ $(this).prop('checked',true) } }) //显示手机号 $("#phone").val(u.phone); }) }) //声明页面加载事件:给确认修改按钮增加单击事件完成用户信息的修改 $(function () { $("#btn").click(function () { //获取请求数据 var reqData=$("#fm").serialize()+"&oper=update"; //发起ajax请求完成用户信息的更新 $.post("user",reqData,function (data) { if(eval(data)){ alert("更新成功"); //关闭子窗口，同时重新加载父页面中的资源 window.opener.location.reload(); window.close(); }else{ alert("更新失败") } }) }) }) </script> </head> <body> <form action="" id="fm"> <input type="hidden" name="uid" value="" id="uid"> 用户名: <input type="text" id="uname" name="uname" value=""> <br> 性别: <input type="radio" name="sex" value="男">男    <input type="radio" name="sex" value="女"><br> 手机号: <input type="text" id="phone" name="phone" value=""> <br> <input type="button" value="确认修改" id="btn"> </form> </body> </html>

Processed: 0.019, SQL: 9