1. 程式人生 > 資料庫 >解決高併發-springboot-redis-mysql醫院預約系統專案超詳細講解--半個小時教你如何使用sp--第二章ringboot完成預約專案---:頁面顯示所有醫生加分類查詢功能

解決高併發-springboot-redis-mysql醫院預約系統專案超詳細講解--半個小時教你如何使用sp--第二章ringboot完成預約專案---:頁面顯示所有醫生加分類查詢功能

頁面顯示所有醫生(科室,頭銜)

第一步
mysql取出所有資料,由於需要分類查直接加入引數
mapper包下在這裡插入圖片描述
介面
加@Mapper註解

    public List<Doctor> selectALlDoctors(@Param("officeId") Integer officeId,
                                         @Param("titleId") Integer titleId);//多個引數使用@Param繫結引數

xml檔案中

 <resultMap id="doctorMap" type="Doctor">
    
        <id property="doctorId" column="doctorId"/>  
          //  通過officeId返回一個office物件
        <association property="office" column="officeId"
    select="cn.kgc.mapper.OfficeMapper.selectOfficeById"/>
      //  通過titleId返回一個title物件
        <association property="title" column="titleId"                   select="cn.kgc.mapper.TitleMapper.selectTitleById"/>
    </resultMap>
    <select id="selectALlDoctors" resultMap="doctorMap" >
        select * from doctor
        <where>
            <if test="officeId!=null and officeId!=0">
                officeId=#{officeId}
            </if>
            <if test="titleId!=null and titleId!=0">
                and titleId=#{titleId}
            </if>
        </where>
    </select>

officeMapper和TitleMapper

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.kgc.mapper.OfficeMapper">
    <select id="selectOfficeById" parameterType="Integer" resultType="Office">
        select * from office where officeId = #{officeId}
    </select>
    <select id="selectAllOffices" resultType="Office">
        select * from office
    </select>
</mapper>




<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.kgc.mapper.TitleMapper">
    <select id="selectTitleById" resultType="Title"  parameterType="Integer">
        select * from title where titleId = #{titleId}
    </select>
    <select id="selectAllTitles" resultType="Title">
        select * from title
    </select>
</mapper>

第二步
重點 主函式一定要加@EnableCaching註解 @EnableCaching 開啟快取

dao層緩衝區
因為醫生,科室,頭銜屬於不常變化的,所以放入快取區,頁面取值直接從redis裡取
加@Cacheable註解 可以吧資料放入快取區
CacheDaoImpl 加註解@Repository

CacheDaoIMpl

@Repository
public class CacheDaoIMpl implements CacheDao{
    @Autowired
    private DoctorMapper doctorMapper;
    @Autowired
    private OfficeMapper officeMapper;
    @Autowired
    private TitleMapper titleMapper;

    //Cacheable:執行此函式前先在快取中到資料,若快取中不存在則執行此函式,並將此函式的執行結果快取起來。
    //key為一個表示式,#p0表示第0個引數。redis中的鍵名為value::key
    //string型別
    @Override
    @Cacheable(value = "doctor-page", key = "#p0+':'+#p1+':'+#p2") //資料庫裡的鍵名為 doctor-page::0:0:1   0:0代表所有屬於科室(頭銜)的醫生 ,  1 第一頁  
    //需要分頁 0:0:1 代表 所有的醫生的第一頁的資料
    //0:0:2就是第二頁的資料,1:1:1 就是officeid為1,titleid為1,的所有醫生第一頁!!!懂了吧
    public DataPage<Doctor> getAllDoctor(Integer officeId, Integer titleId, Integer pageNum, Integer pageSize) {
        //分頁
        PageHelper.startPage(pageNum,pageSize);
        List<Doctor> doctors = doctorMapper.selectALlDoctors(officeId, titleId);
        PageInfo<Doctor> pageInfo = new PageInfo<>(doctors);

        //返回資料
        DataPage<Doctor> dataPage = new DataPage<>();
        dataPage.setDataList(pageInfo.getList());
        dataPage.setRowCount((int)pageInfo.getTotal()); //總條數
        dataPage.setPageCount(pageInfo.getPages()); //總頁數
        dataPage.setPageNum(pageNum);//第幾頁當前頁
        dataPage.setPageSize(pageSize);
        return dataPage;
    }
    //redis裡鍵名為office::list
    @Override
    @Cacheable(value = "offices", key = "'list'")
    public List<Office> getAllOffice() {
        return officeMapper.selectAllOffices();
    }
  //redis裡鍵名為titles::list
    @Override
    @Cacheable(value = "titles", key = "'list'")
    public List<Title> getAllTitle() {
        return titleMapper.selectAllTitles();
    }
}

service層
四個方法
1.獲取所有醫生
2.獲取所有科室
3.獲取所有頭銜
4.獲取下一週的日期~
DOctorServiceImpl 加@Service註解

    @Autowired //自動裝配
    private CacheDao cacheDao;
    @Override
    public DataPage<Doctor> getAllDoctors(Integer officeId, Integer titleId, Date bookingDate, Integer pageNum, Integer pageSize) {
        //快取中取出醫生
        DataPage<Doctor> doctorPage = cacheDao.getAllDoctor(officeId, titleId, pageNum, pageSize);
        return doctorPage;
    }

    @Override
    public List<Office> getAllOffice() {
        return cacheDao.getAllOffice();
    }

    @Override
    public List<Title> getAllTitle() {
        return cacheDao.getAllTitle();
    }

    @Override
    public List<Date> getNextWeek() {
        Calendar instance = Calendar.getInstance();  //獲取當前時間
        List<Date> list = new ArrayList<>(); 
        for (int o = 0; o < 7; o++) {
            instance.add(Calendar.DATE,1); //加一天
            list.add(instance.getTime()); //getTime 轉換成Date
        }
        return list;
    }

最後一步Controller
獲取所有醫生~
因為剛進頁面,引數是沒有的,防止空指標異常,需要給預設值,pagesize預設值是在application.properties配置中寫的,需要用 @Value引用

   @Autowired
    private DoctorService doctorService;

    //@value:引用配置檔案中的配置變數
    @Value("${doctor.page.size}")
    private Integer pageSize;
    @RequestMapping("all_doctors")
    public String getAllDoctors(Integer officeId, Integer titleId, Integer pageNum,
                                @DateTimeFormat(pattern = "yyyy-MM-dd") Date bookingDate,Model model){
        Integer page = pageNum==null? 1 : pageNum;
        Integer fid = officeId==null? 0 : officeId;
        Integer tid = titleId==null? 0 : titleId;

        Date date = bookingDate;
        if (date == null) {
            //計算明天的日期
            Calendar instance = Calendar.getInstance();
            instance.add(Calendar.DATE,1); //加一天
            date = instance.getTime();
        }
        //獲取所有醫生
        DataPage<Doctor> doctorPage = doctorService.getAllDoctors(fid, tid, date, page, pageSize);//pae
        //獲取所有科室,頭銜
        List<Office> offices = doctorService.getAllOffice();
        List<Title> titles = doctorService.getAllTitle();
        //獲取下一週
        List<Date> weekday = doctorService.getNextWeek();

        model.addAttribute("doctorPage",doctorPage);
        model.addAttribute("offices",offices);
        model.addAttribute("titles",titles);
        model.addAttribute("weekday",weekday);
        //把 值傳回頁面,方便做回顯 ~
        model.addAttribute("officeId",fid); 
        model.addAttribute("titleId",tid);
        return "all_doctors";
    }

最後再說一下回顯的問題
判斷一下如果後臺傳過來的id等於迴圈的id加selected字串 新增選中狀態就可以了
${(officeId==o.officeId)?string(“selected”,"")}

okok第一步完成啦 現在只有一個功能 就是查詢~

最後發一下頁面
all_doctors.ftl

<!doctype html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Bootstrap CSS -->
	<#--引用路徑無需寫static-->
	<link rel="stylesheet" href="/css/bootstrap.min.css">
	<script src="/js/jquery.min.js"></script>
	<script src="/js/popper.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>
		<title>醫大附院預約系統</title>
		<script type="text/javascript">
			<#--function getPage(page) {-->
			<#--	location.href="/all_doctors?pageNum="+page+"&officeId=${officeId}&titleId=${titleId}&bookingDate="+$("#booking-date").val();-->
			<#--}-->
		</script>
	</head>
  
	<body>
		<div id="login-button" class="text-right pt-3 pr-5">
			<#if user??>
			<h4>歡迎您:${user.name}</h4>
			<#else>
			<button type="button" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#loginModal">登入系統</button>
			</#if>
		</div>
	
		<h1 class="text-center pt-1 pb-5">醫大附院預約系統</h1>
		
		<div class="container">
            <div class="row">
                <div class="col-md-9">
                    <form action="/all_doctors" method="post" class="form-inline">
                        <div class="form-group">
                            <label>科室查詢:</label>
                            <select class="form-control" name="officeId">
                                <option value="0">全部科室</option>
								<#list offices as o>
									<option value="${o.officeId}" ${(officeId==o.officeId)?string("selected","")}>${o.officeName}</option>
								</#list>

                            </select>
                            &nbsp;&nbsp;
                            <label>職稱查詢:</label>
                            <select class="form-control" name="titleId">
                                <option value="0">全部職稱</option>
								<#list titles as t>
                                    <option value="${t.titleId}"  ${(titleId==t.titleId)?string("selected","")}>${t.titleName}</option>
								</#list>
                            </select>
                            &nbsp;&nbsp;
                            <button type="submit" class="btn btn-outline-secondary">查詢</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-3">
                    <form class="form-inline">
                        <div class="form-group">
							<label>預約日期:</label>
							<select class="form-control"  id="booking-date" name="bookingDate"  onchange="getTotal(this)">
								<#list weekday as d>&ndash;&gt;
								<option value="${d?string("yyyy-MM-dd")}">
									${d?string("yyyy-MM-dd")}
								</option>
								</#list>&ndash;&gt;
							</select>
                        </div>
                    </form>
                </div>
            </div>
			<hr/>
			
			<ul class="list-unstyled">
				<#list doctorPage.dataList as d>
					<li class="media my-4">
                        <img src="\images\ico.jpg" width="120px" class="align-self-center mr-3" alt="...">
                        <div class="media-body">
                            <h3 class="mt-0 mb-2">${d.name}(${d.title.titleName})</h3>
                            <div class="row">
                                <div class="col-md-9">簡介:${d.summary}</div>
                                <div class="col-md-2 text-center">
									<h4>餘號:<span id="total-${d.doctorId}" style="color:red">${d.total}</span></h4>
                                    <button type="button" onclick="addBooking(${d.doctorId})" class="btn btn-outline-primary">預約掛號</button>
                                </div>
                            </div>
                        </div>
                    </li>
				</#list>
			</ul>
			
			<nav class="pb-5 pt-3">
				<ul class="pagination justify-content-center">
					<#if doctorPage.pageNum == 1>
						<li class="page-item disabled">
                            <a class="page-link" href="javascript:void(0);" tabindex="-1">首頁</a>
                        </li>
					<#else>
						<li class="page-item">
                            <a class="page-link" onclick="getPage(1)"  href="javascript:void(0)" tabindex="-1">首頁</a>
                        </li>
					</#if>

					<#--c:foreach begin="1" end="${doctorPage.pageCount}" var="i" -->
					<#list 1..doctorPage.pageCount as i>
						<#if doctorPage.pageNum == i>
							<li class="page-item active">
                                <a class="page-link" href="javascript:void(0);">${i}</a>
                            </li>
						<#else>
							<li class="page-item">
                                <a class="page-link" onclick="getPage(${i})"  href="javascript:void(0)">${i}</a>
                            </li>
						</#if>
					</#list>

					<#if doctorPage.pageNum == doctorPage.pageCount>
						<li class="page-item disabled">
                            <a class="page-link" href="javascript:void(0);" tabindex="-1">末頁</a>
                        </li>
					<#else>
						<li class="page-item">
                            <a class="page-link" onclick="getPage(${doctorPage.pageCount})"  href="javascript:void(0)" tabindex="-1">末頁</a>
                        </li>
					</#if>
				</ul>
			</nav>
		</div>

		<!-- 模態框 -->
		<div class="modal fade" id="loginModal">
			<div class="modal-dialog">
				<form id="login-form">
					<div class="modal-content">
						<!-- 模態框頭部 -->
						<div class="modal-header">
							<h4 class="modal-title">使用者登入</h4>
							<button type="button" class="close" data-dismiss="modal">&times;</button>
						</div>

						<!-- 模態框主體 -->
						<div class="modal-body">

							<div class="form-group">
								<input type="text" class="form-control" name="username" placeholder="請輸入使用者名稱">
							</div>
							<div class="form-group">
								<input type="password" class="form-control" name="password" placeholder="請輸入密碼">
							</div>

						</div>

						<!-- 模態框底部 -->
						<div class="modal-footer">
							<button type="submit" onclick="userLogin()"  class="btn btn-primary">登入</button>
							<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
						</div>

					</div>
				</form>
			</div>
		</div>
	</body>
</html>

就這麼多,很基礎很菜,自己做一下總結,有問題隨便問看到第一時間回覆