一.项目需求分析:

二.数据库设计 :

 三.个人分工之办卡业务具体实现:

  • 页面效果:
    • 分析:

      • 办卡业务,首先也在数据库当中查看新办的卡是否已经存在,存在的话需要给用户提示,然后就是必要的信息都不能空提交,在前端就要做好非空校验并给出友好的提示,再者就是支付功能,默认是办理普通卡,如要办理vip卡,需要先付款,付款后确认办卡,即可办理vip卡
      • 难点:主要在于前端的校验及提示,因为后端处理起来只有两条SQL语句,就是提交前的卡号校验以及提交时的非空校验,
      • 总结:这里遇到问题后,卡在jQuery里面挺久,但是后来发现有些校验其实可以放到控制层去做,比如卡号的重名校验,因为这里的卡号重名校验与非空校验都需要用到,所以在前端不太好做(我也是试了很多种方法都不太行)
    • 收获的新知识点:
      • 取表单数据,尤其注意单选框
        •              //取值
                      var confirmTj = true;
                      var cardNum = $('#cardNum').val();
                      var name = $('#name').val();
                      // alert(name);
                      var sex = $("input[name='sex']:checked").val();
                      // alert(sex);
                      var tel = $('#tel').val();
                      var address = $('#address').val();

      •  当表单数据不为空时,取消提示,主要注意单选框的消除
        •         //非空提示的消除
                  $("input:radio[name='sex']").change(function () {
                      $('#sexWarning').text("");
                  });
                  $('#cardNum').change(function () {
                      $('#cardNumWarning').text("");
                  })
                  $('#name').change(function () {
                      $('#nameWarning').text("");
                  })
                  $('#tel').change(function () {
                      $('#telWarning').text("");
                  })
                  $('#address').change(function () {
                      $('#addressWarning').text("");
                  })
          

  •  所有代码:
  • AddCardMapper.xml
    • <?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文件相当于DAO接口的“实现类”,namespace属性要指定“实现”DAO接口的全限定名 -->
      <mapper namespace="com.pro.Dao.AddCardDao">
      <!--查询卡号是否已经存在-->
          <select id="selectCardNum" parameterType="Card" resultType="Card">
              select * from card where cardNum=#{cardNum}
          </select>
      <!--办理新卡,往数据库中新增-->
          <insert id="insertCard" parameterType="Card">
              insert into card set cardNum=#{cardNum},name=#{name},tel=#{tel},sex=#{sex},address=#{address},vip=#{vip}
          </insert>
      </mapper>
  • AddCardDao
    • package com.pro.Dao;
      
      import com.pro.domain.Card;
      
      public interface AddCardDao {
          Card selectCardNum(Card card);
      
          void insertCard(Card card);
      }
  •  AddCardServiceImpl,接口就不写了
    • package com.pro.service;
      
      import com.pro.Dao.AddCardDao;
      import com.pro.domain.Card;
      import org.springframework.beans.factory.annotation.Autowired;
      import org.springframework.stereotype.Service;
      
      @Service
      public class AddCardServiceImpl implements AddCardService {
          @Autowired
          private AddCardDao addCardDao;
      
          @Override
          public String checkCardNum(Card card) {
              Card card1 = addCardDao.selectCardNum(card);
              String mes = "该卡号已存在!";
              if(card1 == null){
                  mes = "";
              }
              System.out.println(mes);
              return mes;
          }
      
          @Override
          public String saveCard(Card card) {
              addCardDao.insertCard(card);
              String mes = "恭喜您,办理成功!";
              return mes;
          }
      }
      
  • AddCardController--控制层
    • package com.pro.Controller;
      
      import com.pro.domain.Card;
      import com.pro.service.AddCardService;
      import org.springframework.beans.factory.annotation.Autowired;
      import org.springframework.stereotype.Controller;
      import org.springframework.web.bind.annotation.RequestMapping;
      import org.springframework.web.bind.annotation.ResponseBody;
      
      @Controller
      public class AddCardController {
      
          @Autowired
          private AddCardService addCardService;
      
          //点击办卡,跳转到办卡界面(李俊)
          @RequestMapping("/ljAddCard")
          public String ljAddCard(){
              return "addCard";
          }
      
          //查询卡号是否已经存在(李俊)
          @RequestMapping("/ljCheckCardNum")
          @ResponseBody
          public String ljCheckCardNum(Card card){
              System.out.println(card);
              String mes = addCardService.checkCardNum(card);
              System.out.println(mes);
              return mes;
          }
      
          //办卡(李俊)
          @RequestMapping("/ljToAddCard")
          @ResponseBody
          public String ljToAddCard(Card card){
              String mes = addCardService.checkCardNum(card);
              if(mes.length() > 0){
                  return "卡号已被占用,请重新输入!";
              }else{
                  String mes1 = addCardService.saveCard(card);
                  return mes1;
              }
          }
      }
      
  •  addCard.jsp
    • <%--
        Created by IntelliJ IDEA.
        User: Administrator
        Date: 2022/8/27 0027
        Time: 10:46
        To change this template use File | Settings | File Templates.
      --%>
      <%@ page contentType="text/html;charset=UTF-8" language="java" %>
      <link href="css/bootstrap.css" rel="stylesheet">
      <script src="js/jquery-3.6.0.js"></script>
      <script src="js/proper.mini.js"></script>
      <script src="js/bootstrap.js"></script>
      <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
      <html>
      <head>
          <title>Title</title>
          <style>
      
              #father {
                  position: absolute;
                  left: 5%;
                  top: 5%;
                  height: 200px;
                  /*background-color: black;*/
                  /*scale 缩放*/
                  transform: scale(1);
                  /*播放,绑定动画  */
                  animation: beat 0.5s linear infinite alternate;
              }
      
              #father1 {
                  position: absolute;
                  right: 5%;
                  top: 5%;
                  height: 200px;
                  /*background-color: black;*/
                  /*scale 缩放*/
                  transform: scale(1);
                  /*播放,绑定动画  */
                  animation: beat 0.5s linear infinite alternate;
              }
      
              /*css3动画 只需要关键的画面
              keyframes:关键帧(画面) 动画名称
              */
              @keyframes beat {
                  /* 动画开始的画面 */
                  0% {
                      /*缩放*/
                      transform: scale(1);
                  }
                  /*动画结束的画面*/
                  100% {
                      /*结束*/
                      transform: scale(1.1);
                  }
              }
      
              .left, .right {
                  float: left;
                  width: 100px;
                  height: 160px;
                  background-color: pink;
                  border-radius: 50px 50px 0px 0px;
              }
      
              .left {
                  transform: translateX(29px) rotate(-45deg);
                  /*盒子-阴影 横向,纵向,模糊半径 影子扩展  */
                  box-shadow: 0px 0px 30px 0px pink;
              }
      
              .right {
                  /*translateX横向位移  rotate:旋转*/
                  transform: translateX(-29px) rotate(45deg);
                  /*盒子-阴影 横向,纵向,模糊半径 影子扩展  */
                  box-shadow: 0px 0px 30px 0px pink;
      
              }
      
      
              #content {
                  width: 500px;
                  position: absolute;
                  left: 50%;
                  transform: translateX(-50%);
              }
      
              .pay {
                  float: left;
                  text-align: center;
                  background-color: chartreuse;
                  /*background-color: whitesmoke;*/
              }
      
              #Vip {
                  display: none;
                  width: 400px;
                  position: absolute;
                  left: 50%;
                  transform: translateX(-50%);
                  background-color: darkgray;
              }
      
              #vipStatusTr {
                  display: none;
              }
      
              #paySuccess {
                  position: relative;
                  /* left: 50%;
                   top: 50%;*/
                  /*transform: translate(20%,180%);*/
              }
              #frm span{
                  color: firebrick;
              }
          </style>
      </head>
      <script>
          $(function () {
              $('#buyVip').click(function () {
                  $('#Vip').show();
                  // alert("hhhhhh");
                  // document.getElementById('Vip').style.display='block';
              })
      
              //付款成功后修改
              $('#paySuccess').click(function () {
                  $('#Vip').hide();
                  //支付成功后修改vip卡状态
                  $('#vipStatus').val("1");
                  //支
                  $('#afterPay').html("您已购买Vip")
      
              })
      
              //确定提交
              $('#tj').click(function () {
                  $('#checkCardNumResult').text("");
                  //点击提交后提示置为空
                  //取值
                  var confirmTj = true;
                  var cardNum = $('#cardNum').val();
                  var name = $('#name').val();
                  // alert(name);
                  var sex = $("input[name='sex']:checked").val();
                  // alert(sex);
                  var tel = $('#tel').val();
                  var address = $('#address').val();
      
                  if (cardNum.length < 1) {
                      confirmTj = false;
                      $('#cardNumWarning').text("请输入新卡卡号!")
                  }
                  if (name.length < 1) {
                      confirmTj = false;
                      $('#nameWarning').text("请输入名字!")
                  }
                  if (sex != "男" && sex != "女") {
                      confirmTj = false;
                      $('#sexWarning').text("请选择性别")
                  }
                  if (tel.length < 1) {
                      confirmTj = false;
                      $('#telWarning').text("请输入手机号!")
                  }
                  if (address.length < 1) {
                      confirmTj = false;
                      $('#addressWarning').text("请输入地址!")
                  }
      
                  if (confirmTj == true) {
                      $.ajax({
                          url: 'ljToAddCard',
                          type: 'post',
                          // data: {},
                          //另一种方式,序列化,就能拿到表单里面的数据,但是这样写需要注意传的数据要和User类能对上
                          data: $('#frm').serialize(),
                          //如果不需要返回数据,就不用写
                          dataType: 'text',
                          success: function (res) {
                              //没写过滤器会乱码
                              alert(res);
                          }
                      })
                      $('#cardNum').val("");
                  }
              })
      
              //非空提示的消除
              $("input:radio[name='sex']").change(function () {
                  $('#sexWarning').text("");
              });
              $('#cardNum').change(function () {
                  $('#cardNumWarning').text("");
              })
              $('#name').change(function () {
                  $('#nameWarning').text("");
              })
              $('#tel').change(function () {
                  $('#telWarning').text("");
              })
              $('#address').change(function () {
                  $('#addressWarning').text("");
              })
      
      
              //查询新注册的卡号是否已经存在
              $('#cardNum').change(function () {
                  var cardNum = $(this).val();
                  checkCardNum(cardNum);
              })
              //关闭vip充值页面
              $('#closeVip').click(function () {
                  $('#Vip').hide();
              })
      
          })
          function checkCardNum(v) {
              $.ajax({
                  url: 'ljCheckCardNum',
                  type: 'post',
                  data: {cardNum: v},
                  //另一种方式,序列化,就能拿到表单里面的数据,但是这样写需要注意传的数据要和User类能对上
                  // data:$('#frm').serialize(),
                  //如果不需要返回数据,就不用写
                  dataType: 'text',
                  success: function (res) {
                      //没写过滤器会乱码
                      $('#checkCardNumResult').text(res);
                  }
              })
          }
      </script>
      <body>
      <div id="father">
          <div class="left">
              <button type="button" class="btn btn-info" style="border-radius: 50px 50px 0px 0px">vip卡更多优惠哦!</button>
          </div>
          <div class="right"></div>
      </div>
      <div id="content">
          <form id="frm">
              <table class="table table-striped">
                  <thead>
                  <tr>
                      <th scope="col" colspan="2" style="text-align: center"><b style="font-size: 20px">新卡办理</b></th>
                  </tr>
                  </thead>
                  <tbody style="margin-top: 5px">
                  <tr>
                      <th scope="row">卡号</th>
                      <td><input type="text" placeholder="请输入新卡卡号:" name="cardNum" id="cardNum">
                          &nbsp;&nbsp;<span id="checkCardNumResult" style="color: darkblue"></span>
                          <span id="cardNumWarning"></span>
                      </td>
                  </tr>
                  <tr>
                      <th scope="row">姓名</th>
                      <td>
                          <input type="text" placeholder="请输入办卡人姓名:" name="name" id="name">
                          &nbsp;&nbsp;<span id="nameWarning"></span></td>
                      </td>
                  </tr>
                  <tr>
                      <th scope="row">手机号</th>
                      <td>
                          <input type="text" placeholder="请输入手机号" name="tel" id="tel">
                          &nbsp;&nbsp;<span id="telWarning"></span></td>
                      </td>
                  </tr>
                  <tr>
                      <th scope="row">性别</th>
                      <td>
                          <input type="radio" name="sex" id="payVip" value="男">男
                          <input type="radio" name="sex" value="女">女
                          &nbsp;&nbsp;<span id="sexWarning"></span></td>
                      </td>
                  </tr>
                  <tr>
                      <th scope="row">地址</th>
                      <td>
                          <input type="text" placeholder="请输入地址" name="address" id="address">
                          &nbsp;&nbsp;<span id="addressWarning"></span></td>
                      </td>
      
                  </tr>
                  <tr id="vipStatusTr">
                      <th scope="row">Vip状态</th>
                      <td>
                          <input type="text" name="vip" value="0" id="vipStatus">
                      </td>
                  </tr>
      
                  <tr>
                      <th scope="row">是否购买Vip</th>
                      <td id="afterPay">
                          <a id="buyVip" style="border-radius: 10px">88元购买<b>Vip</b></a>
                          <%--                    <button>測試</button>--%>
                      </td>
                  </tr>
                  </tbody>
              </table>
          </form>
          <table>
              <tr>
                  <td colspan="2" style="text-align: center;width: 500px" align="center">
                      <button class="btn btn-success" id="tj">提交</button>
                      <button class="btn btn-info">返回</button>
                  </td>
              </tr>
          </table>
      
      
      </div>
      
      <div id="father1">
          <div class="left"></div>
          <div class="right">
              <button type="button" class="btn btn-info" style="border-radius: 50px 50px 0px 0px">vip卡好礼不断!</button>
          </div>
      </div>
      
      <div id="Vip">
          <div style="width: 100%" class="pay">
              <span>
                  <b>微信支付</b>
                  <a href="#" style="float: right" id="closeVip">X</a>
              </span>
      
              <div style="width: 80%;background-color: #17a2b8;height: 300px;margin-left: 10%">
                  <img src="image/pay2.jpg" alt="" style="width: 100%">
              </div>
          </div>
          <div style="width: 100%" class="pay">
              <span><b>支付宝</b></span>
              <div style="width: 80%;background-color: #17a2b8;height: 300px;margin-left: 10%">
                  <img src="image/pay1.png" alt="" style="width: 100%">
              </div>
          </div>
      
          <div style="width: 100%;float: right" class="pay">
              <button id="paySuccess" style="border-radius: 10px">支付成功</button>
          </div>
          </td>
          </tr>
      </div>
      
      </body>
      </html>
      

  •  以上就是在这个小组项目当中我完成的业务,当自己的业务写完以后,提交到本地仓库,push上传到git远程仓库当中,当小组其他成员也上传以后,就可以切换到主分支,逐个新建各分支的本地分支,然后合并到主分支当中,在本地运行无误以后,就可以上传到远程仓库了。
  • 还有就是自己在合并的时候遇到的一些问题,像诸如:找不到xxxcontroller,这种有可能是控制层当中存在相同的路由,因此会模糊不清
  • 还有可能小组成员在写各自分支的时候,使用的都是自己的数据库,然后提交到远程时们也没有改过来
  • 第三个也会存在小组成员之间目录名称大小写不一样
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐