Javaweb学习笔记day09---项目三阶段

项目三阶段准备

• 项目搭建
  • v2 -> v3
  • 将pages目录和index.html转译到WEB-INF目录

03-书城首页功能

• 开发步骤
  • ①引入thymeleaf相关jar包
  • ②引入ViewBaseServlet、ModelBaseServlet
  • ③定义IndexServlet，访问路径为"/index.html"
    • 获取所有图书列表
    • 请求转发到页面index.html
  • ④编写index.html页面，展示图书列表
• ①引入thymeleaf相关jar包
• ②引入ViewBaseServlet、ModelBaseServlet
• ③定义IndexServlet，访问路径为"/index.html"

@WebServlet("/index.html")
public class IndexServlet extends ViewBaseServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取所有图书列表
        BookService bookService = new BookServiceImpl();
        List<Book> bookList = null;
        try {
            bookList = bookService.selectBookList();
            req.setAttribute("bookList", bookList);
            //转发到index.html
            processTemplate("index", req, resp);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

④编写index.html页面，展示图书列表

<div class="list-content">

    <div class="list-item" th:each="book:${bookList}">
        <img th:src="${book.imgPath}" alt="">
        <p>书名:<span th:text="${book.bookName}">活着</span></p>
        <p>作者:<span th:text="${book.author}">余华</span></p>
        <p>价格:￥<span th:text="${book.price}">66.6</span></p>
        <p>销量:<span th:text="${book.sales}">230</span></p>
        <p>库存:<span th:text="${book.stock}">1000</span></p>
        <button>加入购物车</button>
    </div>


</div>

优化登录功能

• 需求
  • 使用ModelBaseServlet，添加"账户或密码错误!"提示
• 开发步骤
  • ①定义UserServlet，继承于ModelBaseSerlvet
    • 转发到login.html
    • 转发到login_success.html
    • 用户登录功能
  • ②编写login.html
    • 使用thymeleaf
• ①定义UserServlet，继承于ModelBaseSerlvet

@WebServlet("/user")
public class UserServlet extends ModelBaseServlet {


    /**
     * 转发到login.html
     *
     * @param request
     * @param response
     */
    public void toLoginPage(HttpServletRequest request, HttpServletResponse response) {
        try {
            processTemplate("pages/user/login", request, response);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 转发到login_success.html
     *
     * @param request
     * @param response
     */
    public void toLoginSuccessPage(HttpServletRequest request, HttpServletResponse response) {
        try {
            processTemplate("pages/user/login_success", request, response);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 用户登录
     *
     * @param request
     * @param response
     */
    public void login(HttpServletRequest request, HttpServletResponse response) {
        //处理请求
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        UserService userService = new UserServiceImpl();
        try {
            User user = userService.login(username, password);
            //调度页面
            if (null != user) {
                //登录成功 , 跳转到login_success.html (重定向)
                response.sendRedirect(request.getContextPath() + "/user?method=toLoginSuccessPage");
            } else {
                //登录失败 , 跳转回login.html (请求转发)
                String errorMsg = "账户或密码错误!";
                request.setAttribute("errorMsg", errorMsg);
                toLoginPage(request, response);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


}

②编写login.html

<form action="user" @submit="checkLogin()">
    <input type="hidden" name="method" value="login">
    <label>用户名称：</label>
    <input
            class="itxt"
            type="text"
            placeholder="请输入用户名"
            autocomplete="off"
            tabindex="1"
            name="username"
            id="username"
            @change="checkUsername()"
            v-model="username"
    />
    <br/>
    <br/>
    <label>用户密码：</label>
    <input
            class="itxt"
            type="password"
            placeholder="请输入密码"
            autocomplete="off"
            tabindex="1"
            name="password"
            id="password"
            @change="checkPassword()"