本次项目主要有以下几个重点导入项目、优化servlet、前后台勾连等。
如图片所示，这是一个常见的网站首页，包括登录、注册、查看相关信息的功能。
但要怎么实现呢？
除了准备好相应的图片文字信息，我们要怎么做才能让它拥有以上功能并展示在页面上呢？
抱着这样的疑惑，我们慢慢来一探究竟吧？
首先是基本准备（也可以使用maven直接导入半成品项目）：
后端：
还有要提前建立存放图片和文字资源的数据库。
这里我使用的是Navicat软件。
这是一款可视化建库软件，使用起来非常方便。
前端及资源文件：
看到pom.xml文件了吗？这表示 我是从maven导入的半成品项目，接下来我们来了解一下如何使用maven导入项目。
maven导入项目：
maven：Maven是一个跨平台的项目管理工具，是Apache组织中的一个颇为成功的开源项目。Maven主要服务基于java的项目构建，项目信息管理和依赖管理。
作用：
1.Maven可以创建项目。
2.Maven可以引入依赖的jar包。
在Maven中有一个核心的概念--仓库，分为本地仓库和远程仓库。远程仓库又分为中央仓库，私服和其他仓库。
首先是确保自己下载了maven的资源文件，并且IDE安装并启动了maven插件：
打开设置：
以上准备操作没有问题就会在右侧导航栏出现以下内容：
点击maven，出现以下内容：
点击“+”号，导入项目。
选择pom.xml文件，点击OK完成项目导入，初始化微微等待一会即可。
以下是pom.xml文件的内容，我们可以看到里面包含了诸多插件的信息，这是依赖管理：对jar包统一管理的过程
<?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>cn.itcast</groupId>
<artifactId>travel</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<!--servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<!--mysql驱动-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.26</version>
<scope>compile</scope>
</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>
<!--beanUtils-->
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>1.9.2</version>
<scope>compile</scope>
</dependency>
<!--jackson-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.3.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.3.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.3.3</version>
</dependency>
<!--javaMail-->
<dependency>
<groupId>javax.mail</groupId>
<artifactId>javax.mail-api</artifactId>
<version>1.5.6</version>
</dependency>
<dependency>
<groupId>com.sun.mail</groupId>
<artifactId>javax.mail</artifactId>
<version>1.5.3</version>
</dependency>
<!--jedis-->
<dependency>
<groupId>redis.clients</groupId>
<artifactId>jedis</artifactId>
<version>2.7.0</version>
</dependency>
</dependencies>
<build>
<!--maven插件-->
<plugins>
<!--jdk编译插件-->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.8</source>
<target>1.8</target>
<encoding>utf-8</encoding>
</configuration>
</plugin>
<!--tomcat插件-->
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<!-- tomcat7的插件， 不同tomcat版本这个也不一样 -->
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.1</version>
<configuration>
<!-- 通过maven tomcat7:run运行项目时，访问项目的端口号 -->
<port>80</port>
<!-- 项目访问路径 本例：localhost:9090, 如果配置的aa， 则访问路径为localhost:9090/aa-->
<path>/</path>
</configuration>
</plugin>
</plugins>
</build>
</project>项目导入成功之后我们便要启动项目：
项目启动:
方式一：
启动Tomcat7：run；的命令
方式二：配置maven快捷启动
启动项目之后来分析一下每一层我们要做的事情：
技术选型：
-
- Web层
-
- Servlet：前端控制器
- html：视图
- Filter：过滤器
- BeanUtils：数据封装
- Jackson：json序列化工具
-
- Service层
-
- Javamail：java发送邮件工具
- Redis：nosql内存数据库
- Jedis：java的redis客户端
-
- Dao层
-
- Mysql：数据库
- Druid：数据库连接池
- JdbcTemplate：jdbc的工具
现在我们手里已经有了一个前端页面后端实体类已经写好的网页，接下来要让它具备登录注册的功能。
注册功能:
页面效果：
前台代码设计：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/register.css">
<!--导入jquery-->
<script src="js/jquery-3.3.1.js"></script>
<script>
/*
表单校验：
1.用户名：单词字符，长度8到20位
2.密码：单词字符，长度8到20位
3.email：邮件格式
4.姓名：非空
5.手机号：手机号格式
6.出生日期：非空
7.验证码：非空
*/
//校验用户名
//单词字符，长度4到20位
function checkUsername() {
//1.获取用户名值
var username = $("#username").val();
//2.定义正则
var reg_username = /^\w{4,20}$/;
//3.判断，给出提示信息
var flag = reg_username.test(username);
if(flag){
//用户名合法
$("#username").css("border","");
}else{
//用户名非法,加一个红色边框
$("#username").css("border","1px solid red");
}
return flag;
}
//校验密码
function checkPassword() {
//1.获取密码值
var password = $("#password").val();
//2.定义正则
var reg_password = /^\w{6,20}$/;
//3.判断，给出提示信息
var flag = reg_password.test(password);
if(flag){
//密码合法
$("#password").css("border","");
}else{
//密码非法,加一个红色边框
$("#password").css("border","1px solid red");
}
return flag;
}
//校验邮箱
function checkEmail(){
//1.获取邮箱
var email = $("#email").val();
//2.定义正则 itcast@163.com
var reg_email = /^\w+@\w+\.\w+$/;
//3.判断
var flag = reg_email.test(email);
if(flag){
$("#email").css("border","");
}else{
$("#email").css("border","1px solid red");
}
return flag;
}
//校验姓名
//非空单词字符，长度1到10位
function checkName() {
//1.获取姓名
var name = $("#name").val();
//2.定义姓名正则
var reg_name = /^\w{1,10}$/;
//3.判断，给出提示信息
var flag = reg_name.test(name);
if (name!=null){
if(flag){
//姓名合法
$("#name").css("border","");
}
}else{
//姓名非法,加一个红色边框
$("#name").css("border","1px solid red");
}
return flag;
}
//校验手机号
//非空单词字符，长度11位
function checkPhoneNumber() {
//1.获取用号码
var number = $("#number").val();
//2.定义11位手机号码正则
var reg_number = /^[1][3,4,5,7,8][0-9]{9}$/;
//3.判断，给出提示信息
var flag = reg_number.test(number);
if(flag){
//号码合法
$("#number").css("border","");
}else{
//号码非法,加一个红色边框
$("#number").css("border","1px solid red");
}
return flag;
}
//校验生日
function checkBirthday() {
//1.获取生日
var birthday = $("#birthday").val();
//2.定义日期正则
var reg_birthday =/^((?:19[2-9]\d{1})|(?:20(?:(?:0[0-9])|(?:1[0-8]))))\-((?:0?[1-9])|(?:1[0-2]))\-((?:0?[1-9])|(?:[1-2][0-9])|30|31)$/;
//3.判断，给出提示信息
var flag = reg_birthday.test(birthday);
if(flag){
//生日合法
$("#birthday").css("border","");
}else{
//生日非法,加一个红色边框
$("#birthday").css("border","1px solid red");
}
return flag;
}
//校验4位验证码authCode
function checkAuthCode() {
//1.获取密码值
var authCode = $("#authCode").val();
//2.定义正则
var reg_authCode = /^\w{4}$/;
//3.判断，给出提示信息
var flag = reg_authCode.test(authCode);
if(flag){
//密码合法
$("#authCode").css("border","");
}else{
//密码非法,加一个红色边框
$("#authCode").css("border","1px solid red");
}
return flag;
}
$(function () {
//当表单提交时，调用所有的校验方法
$("#registerForm").submit(function(){
//1.发送数据到服务器
if(checkUsername() && checkPassword() && checkEmail()){
//校验通过,发送ajax请求，提交表单的数据 username=zhangsan&password=123
$.post("user/regist",$(this).serialize(),function(data){
//处理服务器响应的数据 data {flag:true,errorMsg:"注册失败"}
if(data.flag){
//注册成功，跳转成功页面
location.href="register_ok.html";
}else{
//注册失败,给errorMsg添加提示信息
$("#errorMsg").html(data.errorMsg);
}
});
}
//2.不让页面跳转
return false;
//如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
});
//当某一个组件失去焦点是，调用对应的校验方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
$("#name").blur(checkName);
$("#number").blur(checkPhoneNumber);
$("#birthday").blur(checkBirthday);
$("#authCode").blur(changeCheckCode);
});
</script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout">
<div class="rg_form clearfix">
<div class="rg_form_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_form_center">
<div id="errorMsg" style="color:red;text-align: center"></div>
<!--注册表单-->
<form id="registerForm" action="user">
<!--提交处理请求的标识符-->
<input type="hidden" name="action" value="register">
<table style="margin-top: 25px;">
<tr>
<td class="td_left">
<label for="username">用户名</label>
</td>
<td class="td_right">
<input type="text" id="username" name="username" placeholder="请输入4-20位账号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="password">密码</label>
</td>
<td class="td_right">
<input type="text" id="password" name="password" placeholder="请输入6-10位密码">
</td>
</tr>
<tr>
<td class="td_left">
<label for="email">Email</label>
</td>
<td class="td_right">
<input type="text" id="email" name="email" placeholder="请输入Email">
</td>
</tr>
<tr>
<td class="td_left">
<label for="name">姓名</label>
</td>
<td class="td_right">
<input type="text" id="name" name="name" placeholder="请输入真实姓名">
</td>
</tr>
<tr>
<td class="td_left">
<label for="telephone">手机号</label>
</td>
<td class="td_right">
<input type="text" id="telephone" name="telephone" placeholder="请输入您的11位手机号">
</td>
</tr>
<tr>
<td class="td_left">
<label for="sex">性别</label>
</td>
<td class="td_right gender">
<input type="radio" id="sex" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
</td>
</tr>
<tr>
最低0.47元/天 解锁文章
4163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
