客户管理系统----实训报告
客户管理系统,对客户登记信息的查询,修改,添加,删除操作
开发工具: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代码,实现修改数据的填充