JavaWeb-Vue-Axios-ElementUI

实现效果实现

接口编写与调用

实现总结

先进行页面构思,实现基本布局(熟悉掌握 css,html)
- 掌握定位
- 掌握浮动

css3 基础属性的使用

使用Vue 脚手架进行SPA 页面开发
- 路由的基本使用(声明式 | 编程式)
- axios 的get | post 与参数传递的掌握
熟悉了解Servlet 的使用·
- Cookie
- Session
- Filter
- 注解的基本掌握
  - @WebServlet 继承 HttpServlet
  - @WebFilter 实现接口 javax.servlet.Filter
- 重定向resp.sendRedirect("");
- 数据转发req.getRequestDispatcher("url").forward(req,resp);
掌握MYSQL 数据库的增删改查

源文件

dao

package com.example.book.dao.impl;

import com.example.book.dao.BookInfoDao;
import com.example.book.entity.BookInfo;
import com.example.book.utils.DbUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import java.sql.SQLException;
import java.util.List;

public class BookInfoDaoImpl implements BookInfoDao {
    private QueryRunner queryRunner = new QueryRunner(DbUtils.getDataSource());

    @Override
    public List<BookInfo> selectBookByName(String bookName) {
        try {
            // select * from bookinfo where bookName like '%计算机%'
            List<BookInfo> liseBookInfo = queryRunner.query("select * from bookinfo where bookName like concat('%',?,'%')", new BeanListHandler<BookInfo>(BookInfo.class), bookName);
            return liseBookInfo;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    @Override
    public List<BookInfo> selectAllBook() {
        try {
            List<BookInfo> listBookInfo = queryRunner.query("select * from bookinfo", new BeanListHandler<BookInfo>(BookInfo.class));
            return listBookInfo;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 购物车添加
     *
     * @param bookId 根据书的id更新
     */
    @Override
    public int addInCartCount(String bookId, Integer count) {
        try {
            int updateCount = queryRunner.update("update bookinfo set shoppingCart=? where bookId=?", count, bookId);
            return updateCount;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return 0;
    }

    /**
     * 购物车减少
     *
     * @param bookId 根据书籍 id
     * @param count  减少的数量
     * @return 受影响行数
     */
    @Override
    public int reduceCardCount(String bookId, Integer count) {
        try {
            int reduceCount = queryRunner.update("update bookinfo set shoppingCart='?' where bookId='?'", count, bookId);
            System.out.println("daoReduceBookInfo:" + reduceCount);
            return reduceCount;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return 0;
    }

    /**
     * 获取购物车数量不为 0 的书籍信息
     *
     * @return
     */
    @Override
    public List<BookInfo> getBuyBookInfo() {
        try {
            List<BookInfo> buyBookInfo = queryRunner.query("select * from bookinfo where shoppingCart>0", new BeanListHandler<BookInfo>(BookInfo.class));
            return buyBookInfo;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 根据删除的 id 将书籍的数量更新为 0
     *
     * @param bookId
     * @return
     */
    @Override
    public int setShoppingCartCountAsZero(String bookId) {
        try {
            int updateShoppingCart = queryRunner.update("update bookinfo set shoppingCart='0' where bookId=?", bookId);
            if (updateShoppingCart > 0) {
                return updateShoppingCart;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return 0;
    }
}

service

package com.example.book.service.impl;

import com.example.book.dao.BookInfoDao;
import com.example.book.dao.impl.BookInfoDaoImpl;
import com.example.book.entity.BookInfo;
import com.example.book.service.BookInfoService;

import java.util.List;

public class BookInfoServiceImpl implements BookInfoService {
    private BookInfoDao bookInfoDao = new BookInfoDaoImpl();

    @Override
    public List<BookInfo> lookUpBookByName(String bookName) {
        // 参数检验
        if (bookName.trim().length() > 0) {
            // service 处理什么
            bookName = bookName.trim();
            System.out.println(bookName);
            List<BookInfo> bookInfos = bookInfoDao.selectBookByName(bookName);
            if (bookInfos != null) {
                return bookInfos;
            }
        }
        return null;
    }

    @Override
    public List<BookInfo> organizingBooks() {
        List<BookInfo> bookInfos = bookInfoDao.selectAllBook();
        if (bookInfos != null) {
            return bookInfos;
        }
        return null;
    }

    @Override
    public int editAddBookInShoppingCart(String bookId, Integer count) {
        // 参数校验
        if (bookId != null) {
            if (count > 0) {
                int infAddCol = bookInfoDao.addInCartCount(bookId, count);
                return infAddCol;
            }
        }

        return 0;
    }

    @Override
    public int editReduceBookInShoppingCart(String bookId, Integer count) {
        // 参数校验
        if (bookId != null) {
            if (count >= 0) {
                int infRedCol = bookInfoDao.addInCartCount(bookId, count);
                System.out.println("进入此处...");
                return infRedCol;
            }
        }
        return 0;
    }

    /**
     * 书籍预购买书籍信息
     *
     * @return
     */
    @Override
    public List<BookInfo> showBuyBookInfo() {
        List<BookInfo> buyBookInfos = bookInfoDao.getBuyBookInfo();
        if (buyBookInfos != null) {
            return buyBookInfos;
        }
        return null;
    }

    /**
     * 根据bookId 从购物车删除书籍
     *
     * @param bookId
     * @return
     */
    @Override
    public int deleteBookByBookId(String bookId) {
        if (bookId.trim().length() > 0) {
            int deleteBookOnCart = bookInfoDao.setShoppingCartCountAsZero(bookId);
            if (deleteBookOnCart > 0) {
                return deleteBookOnCart;
            }
        }
        return 0;
    }
}

BaseServlet 封装

package com.example.book.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

/**
 * 替换 HttpServlet 根据请求的最后一段路径来进行方法分发
 */
public class BaseServlet extends HttpServlet {
    /* 根据请求的最后一段路径来进行方法分发 */
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        /* 1. 获取请求路径(段路径,url获取长路径) */
        String requestURI = req.getRequestURI();

        /* 2. 获取最后一段路径 => 请求的方法名 uri: /book/selectAllBook  selectAllBook方法名 */
        int index = requestURI.lastIndexOf('/');
        /* 最后切割的名称即为请求的方法名 */
        String methodName = requestURI.substring(index + 1);

        /* 执行文件 */
        Class<? extends BaseServlet> aClass = this.getClass();
        // 获取方法 Method 对象
        try {
            Method method = aClass.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            // 执行方法
            method.invoke(this, req, resp);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }
}

controller

package com.example.book.controller.book;

import com.alibaba.fastjson.JSON;
import com.example.book.entity.BookInfo;
import com.example.book.entity.ErrorMessage;
import com.example.book.service.BookInfoService;
import com.example.book.service.impl.BookInfoServiceImpl;
import com.example.book.servlet.BaseServlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/book/*")
public class BookServlet extends BaseServlet {
    private BookInfoService bookInfoService = new BookInfoServiceImpl();

    /**
     * 查询指定书籍信息
     *
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    public void showBookController(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取输入框的书名
        String bookName = req.getParameter("bookName");
        // 参数校验: 输入的内容去除空格后长度大于 0 为输入有效
        bookName = bookName.trim();
        if (bookName.length() > 0) {
            System.out.println("请求成功!");
            // 调用查询方法
            List<BookInfo> bookInfos = bookInfoService.lookUpBookByName(bookName);
            System.out.println(bookInfos.toString());
            //  响应数据给前台 前台展示 BookInfo => 映射
            String jsonString = JSON.toJSONString(bookInfos);
            resp.setContentType("application/json;charset=utf-8");
            resp.getWriter().write(jsonString);
        } else {
            // 将实体类转换为 JSON 字符串相应给客户端
            ErrorMessage errorMessage = new ErrorMessage(404, "请求失败!");
            String errorJSonString = JSON.toJSONString(errorMessage);
            resp.getWriter().write(errorJSonString);
        }
    }

    /**
     * 显示所有书籍信息
     *
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    public void showAllBookInfo(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<BookInfo> bookInfos = bookInfoService.organizingBooks();
        String jsonString = JSON.toJSONString(bookInfos);
        System.out.println(jsonString);
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().write(jsonString);
    }

    /**
     * 购物车添加功能
     *
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    public void addInCartController(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取请求参数
        String bookId = req.getParameter("bookId");
        String bookCount = req.getParameter("count");
        // 调用添加
        int addBookInfo = bookInfoService.editAddBookInShoppingCart(bookId, Integer.parseInt(bookCount));
        // 受影响行数
        if (addBookInfo > 0) {
            resp.getWriter().write(addBookInfo);
        } else {
            return;
        }
    }

    public void reduceInCartController(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取请求参数
        String bookId = req.getParameter("bookId");
        String bookCount = req.getParameter("count");
        // 调用减少 为受影响行数 SHOW VARIABLES LIKE 'autocommit';  SET autocommit = 0; 关闭数据库内部自动提交事务
        int reduceBookInfo = bookInfoService.editReduceBookInShoppingCart(bookId, Integer.parseInt(bookCount));
        System.out.println("reduceBookInfo: " + reduceBookInfo);
        if (reduceBookInfo > 0) {
            resp.getWriter().write(reduceBookInfo);
        } else {
            return;
        }
    }
}

购物车controller

package com.example.book.controller.book;

import com.alibaba.fastjson.JSON;
import com.example.book.entity.BookInfo;
import com.example.book.service.BookInfoService;
import com.example.book.service.impl.BookInfoServiceImpl;
import com.example.book.servlet.BaseServlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;

@WebServlet("/cart/*")
public class PurchaseServlet extends BaseServlet {
    private BookInfoService bookInfoService = new BookInfoServiceImpl();

    /**
     * 存储购买的书籍到 session 作用域中
     *
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    public void saveBookSession(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<BookInfo> bookInfos = bookInfoService.showBuyBookInfo();
        HttpSession session = req.getSession();
        // 将预购买的书籍存储 session 作用域
        session.setAttribute("bookInfos", bookInfos);
        String jsonString = JSON.toJSONString(bookInfos);
        // 响应数据
        resp.getWriter().write(jsonString);
    }


    public void deleteBookByBookId(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String bookId = req.getParameter("bookId");
        int deleteBook = bookInfoService.deleteBookByBookId(bookId);
        if (deleteBook > 0) {
            resp.getWriter().write("书籍成功删除,欢迎下次选购");
        }
    }
}

axios 的get 与参数

// 购物车减少按钮
handleReduceCount(index, value) {
    // console.log("- 触发")
    // 调用购物车添加按钮
    let count = this.countReduce(index)
        let bookId = value.bookId
        console.log("hand count reduce: " + count)
        console.log("bookId: " + value.bookId)
        axios.get('http://localhost:8080/book/reduceInCartController', {
            params: {
                bookId,
                count
            }
        }).then(res => {
        // 成功后调用 刷新页面
        this.showAllBook();
    })

},

跨域处理

Vue-CLI 配置devServer，只能用于开发阶段

Java 跨域处理

添加如下依赖

<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.5</version>
</dependency>

在web.xml 配置如下

<!--跨域-->
<filter>
    <filter-name>corsFilter</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>corsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

JSON 处理

浏览器JSON.stringfy() | JSON.parse()
Java
- FastJson
- Jackson
- Gson
- ...