（源码可下载）Web入门项目---旅游网（Servlet,mysql,jquery+java后端)，javaweb项目入门级案例详解

目录

前期准备：

项目需求：

项目结构：

 项目主要实现功能：

数据库结构：

实现代码：(其他源码可在顶部下载)

---

---

前期准备：

项目名：旅游网（travel）

数据库：mysql

数据库可视化工具：SQLyog     【非必需】

IDE：IntelliJ IDEA

浏览器： FireFox

其他：Maven，redis,Tomcat 7，其他相关jar（如JdbcTemplate等）

others：

          sql：https://wws.lanzous.com/b01bh39re 密码:4fas

         maven仓库的基本jar文件：点击下载(待添加为蓝奏云链接，，，)

         初始项目（只有项目大致框架及html页面 ）：https://wws.lanzous.com/b01bh36kj 密码:65ny【适合练习】

         完整项目：https://wws.lanzous.com/b01bh36rg 密码:g22i

                   

        项目部署错误解决方案：点击查看:https://blog.csdn.net/qq_43220949/article/details/106439223

项目需求：

项目结构：

 项目主要实现功能：

• 注册
• 登陆
• 退出
• 我的收藏
• 搜索框
• 分类数据

---

此部分为自写BaseServlet解释：BaseServlet继承HttpServlet，重写service方法，进行方法转发，即为servlet中转站，其他servlet继承BaseServlet。前台访问后台时，Baseservlet识别后进行分析转发到其他Servlet的方法中

（例：访问  user/login  ，BaseServlet获得后将调用UserServlet的login方法）。

BaseServlet 代码见文末，完整项目代码见网页顶部。

---

 

 

图 登陆

• jquery异步提交 校验账户，密码及sessiom中的验证码

实现：校验码存入session；

          用户输入账户密码，校验码，点击登陆；

          login.html页面使用jquery设置提交事件访问 user/login  ；（user/login 是UserServlet中的login方法，UserServlet配置为@WebServlet("/user/*") ；为什么可以是user/login，见上页BaseServlet解释）；

          Servlet中的login方法先获取校验码，将session中标准校验码与输入的校验码大小写忽略比对；

          校验码错误，则返回错误ResultInfo  /   校验码正确，进行数据库查询账户密码；

         账户密码错误或账户未激活 则返回错误ResultInfo     /    正确则返回正确ResultInfo；

         login.html获取到ResultInfo，进行判断，flag属性为false，进行打印错误信息     /    flag为true，则进入index.html或者原来页面（原来页面是指，未登录进行收藏或未登录进入收藏时会跳转到登陆页面，登陆成功后则返回原来页面）。

---

          user/login获得到

图 注册

• 异步提交表单，校验用户名是否存在，校验验证码

实现：校验码存入session；

          用户输入表单信息，点击注册；

          register.html页面使用jquery设置提交事件访问 user/regist  ；（user/regist 是UserServlet中的regist方法，UserServlet配置为@WebServlet("/user/*") ）；

          Servlet中的regist方法先获取校验码，将session中标准校验码与输入的校验码大小写忽略比对；

          校验码错误，则返回错误ResultInfo  /   校验码正确，进行数据库查询账户是否存在；

         账户存在返回错误ResultInfo     /    正确则生成用户唯一标识符uuid并保存用户至数据库，然后调用MailUtils.sendMail（）发送邮件（sendMail方法可传参数---接收人邮箱，文本）【MailUtils.java可设置发送人邮箱及密码】，返回正确ResultInfo；

          register.html获取到ResultInfo，进行判断，flag属性为false，进行打印错误信息     /    flag为true，则进入register_ok.html；

         register_ok.html为邮件发送成功页面，【MailUtils.java可配置发送邮箱及密码】；

        进入接收方邮箱，可点击链接进行“激活”，点击链接后，访问  user/active ,设置uesr的status为“Y”。  

      跳转到登陆页面。

---

图 收藏页面

•  异步获取信息：路线信息，页码

 实现：

          点击“我的收藏”；myfavorite.html

          Ajax  访问 user/find  ,查询用户是否登陆，未登录，带着本页面地址跳转到登陆页面     /   查询到用户（session查询）则   

favorite/getMyFavorites   获取<List>route

favorite/getMyFavPage     获取页码

将获取到的数据进行分析插入即可页面中即可。

---

图 国内游页面（首页多个页面，数据库只存储了该页面的数据）

 

 实现：

•           点击“国内游”（例：href=“http://localhost/travel/route_list.html?cid=5“），传递cid，  ；；
•           点击“国内游”的页码（例：href=“http://localhost/travel/route_list.html?cid=5&pid=1“），传递cid，pid       ；
•          页面头部搜索框输入文本，点击首页“搜索”（例：href=“http://localhost/travel/route_list.html?cid=5&pid=1&rname='西安'  “），传递cid，pid,rname          ；

         jquery异步访问“route/findRoute”（route/findRoute是RouteServlet中的findRoute方法）；

         findRoute（）方法获取传递的参数，根据参数查询数据库，返回 List<Route> ；

        jquery接受数据，将其分析，插入html中，显示路线信息；

        jquery异步查询页码信息，同理，返回页码数，进行遍历插入。

首页多个页面，数据库只存储了“国内游”页面的数据，多个页面使用访问相同的servlet，因传递rid（页面id）不同，获取的信息不同。

---

图 路线详细界面

 实现：

          ajax请求：route/route_detail

 

                                    

收藏按钮，未收藏红色，收藏后灰色，可点击灰色已收藏按钮，进行取消收藏，并且会更新“点击收藏”后的“已收藏次数”

 实现：ajax请求：   favorite/findFavorite     查询是否收藏

                               findShoucangCount       查询被所有人收藏总次数

---

图 页面条

 实现：

          在head.html中发送ajax请求，去请求category/findAll；

         （这是唯一一处使用redis的地方）进行redis查询，redis服务端未开启或没有该信息，进入数据库查询，将其保存入redis     /  redis存在该数据，直接返回数据，进行输出。

---

 

图 退出登陆

 实现：发送ajax请求user/exit_user

---

 

图 欢迎回来

实现：发送ajax请求user/find，获取用户信息

---

数据库结构：

 

图 数据库架构图

实现代码：(其他源码可在顶部下载)

 BaseServlet方法：

//无需配置@WebServlet
public class BaseServlet extends HttpServlet {
    /**
     * 进行方法转发
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    @Override
    public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //获取请求路径
        String requestURI = req.getRequestURI();    //    /travel/user/add
//        System.out.println("service方法中请求路径："+requestURI);
        //方法名称
        String methodName = requestURI.substring(requestURI.lastIndexOf("/")+1);//    add
        System.out.println("service调用方法名称：---"+methodName+"---");

        try {
            //(this是谁调用代表谁）

            Method method = this.getClass().getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            //执行方法
            method.invoke(this,req,resp);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }
}