实训项目----客户管理系统

客户管理系统----实训报告

客户管理系统,对客户登记信息的查询,修改,添加,删除操作
开发工具:idea,mysql
主要使用技术:jsp,servlet,el表达式,jstl,ajax,jdbc,druid连接池

1. 项目创建及添加静态资源

1.1 创建基于maven骨架的web项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
项目中出现src文件夹表示创建成功

1.2 给定需要的配置信息和文件夹

在main 目录下创建java和resource 文件夹,分别右键设置Mark Directory as,对java文件夹为 Sources Root,resource文件夹为Resources Root
① 在pom.xml下面转贴一下坐标,引用jar包生效:

  <dependencies>
    <!--jstl标签库-->
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <!--junit单元测试-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <!--mysql驱动-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.32</version>
    </dependency>
    <!--单元测试驱动-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
    </dependency>
    <!--druid连接池:德鲁伊,阿里巴巴公司-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.0.9</version>
    </dependency>
    <!--jdbcTemplate-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>4.1.2.RELEASE</version>
      <scope>compile</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>4.1.2.RELEASE</version>
      <scope>compile</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>4.1.2.RELEASE</version>
      <scope>compile</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</artifactId>
      <version>4.1.2.RELEASE</version>
      <scope>compile</scope>
    </dependency>
    <dependency>
      <groupId>commons-logging</groupId>
      <artifactId>commons-logging</artifactId>
      <version>1.1.1</version>
      <scope>compile</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>1.2.12</version>
    </dependency>
    <!--jeson格式包-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.10.3</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.10.3</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.10.3</version>
    </dependency>
  </dependencies>

② 在WEB-INF-----web.xml中粘贴以下配置信息,保证el表达式可用

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
          http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">
  <display-name>Archetype Created Web Application</display-name>
  <welcome-file-list>
    <welcome-file>login.jsp</welcome-file>
  </welcome-file-list>
</web-app>

在resources目录下粘贴druid.properties(阿里巴巴的德鲁伊连接池)和log4j.properties(日志),创建好之后结构:
在这里插入图片描述

1.3 配置tomcat并测试运行

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
配置好之后点击运行按钮出现上图表示tomcat配置完成。
至此:项目整体创建配置完成

1.4 在项目中加入静态资源文件,并在webapp中创建 login.jsp和customer.jsp文件,将 静态页面html中的代码粘贴到相应的jsp文件中

在这里插入图片描述

2. 登录功能实现

2.1 在entity包中创建 User 实体类,并创建对一个的,每个变量对应于数据库的sys_user表中的各个字段,建立get/set方法

在这里插入图片描述

2.2 在dao(接口包)和daoimpl(接口实现包)中建立对应的接口和接口实现类, dao接口中建立 findUser接口对实现进行约束,通过userCode和password判断表中的数据是否对应。

在这里插入图片描述

2.3 UserServlet,在servlet包中创建UserServlet类,jsp页面的返回的数据和userdao接口的响应回复。通过getParameter接收jsp页面中输入框中的值,然后调用findUser接口进行数据的判断,如果实现类返回是空表示表中没有该用户密码错误或者没有该账户,返回前端错误信息,如果不为空表示登录信息输入的正确,然后跳转到页面输出表中的数据。

在这里插入图片描述

2.4 jsp编写验证及出错提示代码

  • 验证:如果账号和密码为空,给出提示信息

在这里插入图片描述
编写下列jsp代码,点击提交按钮后通过action跳转到userServlet进行输入用户号和密码的正确,如果正确直接跳转的显示所有的信息的列表,如果信息错误,通过el 表达式显示servlet返回的错误信息。
在这里插入图片描述

3. 全部查询功能实现

3.1 在entity包中创建 Customer 实体类,并创建对一个的,每个变量对应于数据库的customer表中的各个字段,建立get/set方法

在这里插入图片描述

3.2 在dao(接口包)和daoimpl(接口实现包)中建立对应的接口和接口实现类,dao接口中建立 findAll接口对实现进行约束,实现类中写对应的sql语句通过JdbcTemplate的query对数据库进行数据的查询。

在这里插入图片描述

3.3 CustomerServlet,通过servlet调用实现类的接口,将数据传送至jsp页面进行显示。

在这里插入图片描述

3.4 修改customer.jsp页面,修改原始的界面,替换称jstl中的c:forEach和el表达式接收servlet的数据。

在这里插入图片描述
启动并访问 /customerServlet?opt=findAll,显示成功
在这里插入图片描述

4. 查询条件的实现

4.1 在entity包中创建 Basedict 实体类,并创建对一个的,每个变量对应于数据库的base_dict表中的各个字段,建立get/set方法

在这里插入图片描述

4.2 在dao(接口包)和daoimpl(接口实现包)中建立对应的接口和接口实现类,base_dict表中是数据字典,通过customer给定的数值得到数据字典中的相应的汉字描述进行显示。

在这里插入图片描述

4.3 CustomerServlet

在这里插入图片描述

4.4 修改customer.jsp页面,修改原始的界面,替换select标签中原有的静态数据,换为jstl的c:forEach获得数据字典中相对应的数据。

原有的:
在这里插入图片描述
替换为:
在这里插入图片描述
在这里插入图片描述

下面是实现数据按条件查询:

4.5 customer.jsp页面的修改,使用form表单进行数据交互,采用post方式比较安全,跳转到customerServlet的condition分支中。

在这里插入图片描述

4.6 修改customerDao和customerDaoImpl,实现带参数的查询

在这里插入图片描述

4.7 修改customerServlet

在这里插入图片描述

4.8 修改customer.jsp,保持参数

在这里插入图片描述
运行结果:
在这里插入图片描述

5. 添加功能实现

5.1 编写customerDao和customerDaoImpl

在这里插入图片描述

5.2 编写customerServlet,如果opt是add表示前端调用的是添加,进入该分支,用getParameter得到页面中输入的值,通过impl调用实现类的add方法进行数据的填充,并对前端进行相应,弹窗表示是否添加成功。

在这里插入图片描述

5.3 修改customer.jsp页面使跳转到相应的分支执行,在创建客户模态框部分设置跳转并携带参数opt=add给servlet

在这里插入图片描述

5.4 由于添加窗口是以弹窗的形式出现,单击新建按钮弹窗前,需要将添加对话框中的数据情况,所以编写clearCustomer方法实现,一段JavaScript代码。

在这里插入图片描述
在这里插入图片描述
编写验证,如果添加的输入的信息不正确给出提示信息。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. 修改功能实现

6.1 编写dao的indById方法,因为要修改数据,所以需要先根据id获取需要修改的一条数据的其他内容。

在这里插入图片描述

6.2 customerServlet,因为要保证页面在进行交互的时候不刷新页面,所以需要用到ajax技术,返回为json格式的数据(字符串).

在这里插入图片描述

6.3 修改customer.jsp,将之前下拉框中的值换成数据字典中相应的值

在这里插入图片描述
在查询修改修改按钮的onclick时间调用函数,编写ajax代码,实现修改数据的填充
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.4 修改dao接口和实现类,实现对数据库中数据的更新

在这里插入图片描述

6.5 customerServlet

在这里插入图片描述

7. 删除、登录验证和退出登录

7.1 在dao(接口包)和daoimpl(接口实现包)中建立对应的接口和接口实现类

在这里插入图片描述

7.2 customerServlet中opt=delete分支

在这里插入图片描述

7.3 修改customer.jsp代码

在这里插入图片描述

7.4 为了安全使用是需要登录才能使用的,所以需要设置session,通过判断如果session为空就跳转到login.jsp页面,如果不为空正常使用

在这里插入图片描述

7.5 页面右上角显示当前登录的用户,单击退出系统后,退出系统并跳转到登录页面

在这里插入图片描述

Customer.jsp页面修改代码:

在这里插入图片描述

编写exitServlet代码进行session的清空

在这里插入图片描述

至此,整个项目已经全部罗列出来,可能有一些纰漏,后续发现会进行修改

完整代码文档点击我

idea项目源码下载,包含静态页面资源,提取码2020

数据库源码下载,提取码2020

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值