• 使用GIt小组分工完成积分商城系统-SSM

    一.项目需求分析：

    二.数据库设计 ：

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

    • 页面效果：

      • 分析：

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

        •  当表单数据不为空时，取消提示，主要注意单选框的消除 
            1.         //非空提示的消除
            2.         $("input:radio[name='sex']").change(function () {
            3.             $('#sexWarning').text("");
            4.         });
            5.         $('#cardNum').change(function () {
            6.             $('#cardNumWarning').text("");
            7.         })
            8.         $('#name').change(function () {
            9.             $('#nameWarning').text("");
            10.         })
            11.         $('#tel').change(function () {
            12.             $('#telWarning').text("");
            13.         })
            14.         $('#address').change(function () {
            15.             $('#addressWarning').text("");
            16.         })

    •  所有代码：
    • AddCardMapper.xml 
        1. "1.0" encoding="UTF-8" ?>
        2. mapper
        3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        4.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
        6. <mapper namespace="com.pro.Dao.AddCardDao">
        8.     <select id="selectCardNum" parameterType="Card" resultType="Card">
        9.         select * from card where cardNum=#{cardNum}
        10.     select>
        12.     <insert id="insertCard" parameterType="Card">
        13.         insert into card set cardNum=#{cardNum},name=#{name},tel=#{tel},sex=#{sex},address=#{address},vip=#{vip}
        14.     insert>
        15. mapper>
    • AddCardDao 
        1. package com.pro.Dao;
        2.  
        3. import com.pro.domain.Card;
        4.  
        5. public interface AddCardDao {
        6.     Card selectCardNum(Card card);
        7.  
        8.     void insertCard(Card card);
        9. }
    •  AddCardServiceImpl,接口就不写了 
        1. package com.pro.service;
        2.  
        3. import com.pro.Dao.AddCardDao;
        4. import com.pro.domain.Card;
        5. import org.springframework.beans.factory.annotation.Autowired;
        6. import org.springframework.stereotype.Service;
        7.  
        8. @Service
        9. public class AddCardServiceImpl implements AddCardService {
        10.     @Autowired
        11.     private AddCardDao addCardDao;
        12.  
        13.     @Override
        14.     public String checkCardNum(Card card) {
        15.         Card card1 = addCardDao.selectCardNum(card);
        16.         String mes = "该卡号已存在！";
        17.         if(card1 == null){
        18.             mes = "";
        19.         }
        20.         System.out.println(mes);
        21.         return mes;
        22.     }
        23.  
        24.     @Override
        25.     public String saveCard(Card card) {
        26.         addCardDao.insertCard(card);
        27.         String mes = "恭喜您，办理成功！";
        28.         return mes;
        29.     }
        30. }
    • AddCardController--控制层 
        1. package com.pro.Controller;
        2.  
        3. import com.pro.domain.Card;
        4. import com.pro.service.AddCardService;
        5. import org.springframework.beans.factory.annotation.Autowired;
        6. import org.springframework.stereotype.Controller;
        7. import org.springframework.web.bind.annotation.RequestMapping;
        8. import org.springframework.web.bind.annotation.ResponseBody;
        9.  
        10. @Controller
        11. public class AddCardController {
        12.  
        13.     @Autowired
        14.     private AddCardService addCardService;
        15.  
        16.     //点击办卡，跳转到办卡界面（李俊）
        17.     @RequestMapping("/ljAddCard")
        18.     public String ljAddCard(){
        19.         return "addCard";
        20.     }
        21.  
        22.     //查询卡号是否已经存在（李俊）
        23.     @RequestMapping("/ljCheckCardNum")
        24.     @ResponseBody
        25.     public String ljCheckCardNum(Card card){
        26.         System.out.println(card);
        27.         String mes = addCardService.checkCardNum(card);
        28.         System.out.println(mes);
        29.         return mes;
        30.     }
        31.  
        32.     //办卡（李俊）
        33.     @RequestMapping("/ljToAddCard")
        34.     @ResponseBody
        35.     public String ljToAddCard(Card card){
        36.         String mes = addCardService.checkCardNum(card);
        37.         if(mes.length() > 0){
        38.             return "卡号已被占用，请重新输入！";
        39.         }else{
        40.             String mes1 = addCardService.saveCard(card);
        41.             return mes1;
        42.         }
        43.     }
        44. }
    •  addCard.jsp 
        1. <%--
        2.   Created by IntelliJ IDEA.
        3.   User: Administrator
        4.   Date: 2022/8/27 0027
        5.   Time: 10:46
        6.   To change this template use File | Settings | File Templates.
        7. --%>
        8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
        9. <link href="css/bootstrap.css" rel="stylesheet">
        10. <script src="js/jquery-3.6.0.js">script>
        11. <script src="js/proper.mini.js">script>
        12. <script src="js/bootstrap.js">script>
        13. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        14. <html>
        15. <head>
        16.     <title>Titletitle>
        17.     <style>
        18.  
        19.         #father {
        20.             position: absolute;
        21.             left: 5%;
        22.             top: 5%;
        23.             height: 200px;
        24.             /*background-color: black;*/
        25.             /*scale 缩放*/
        26.             transform: scale(1);
        27.             /*播放,绑定动画  */
        28.             animation: beat 0.5s linear infinite alternate;
        29.         }
        30.  
        31.         #father1 {
        32.             position: absolute;
        33.             right: 5%;
        34.             top: 5%;
        35.             height: 200px;
        36.             /*background-color: black;*/
        37.             /*scale 缩放*/
        38.             transform: scale(1);
        39.             /*播放,绑定动画  */
        40.             animation: beat 0.5s linear infinite alternate;
        41.         }
        42.  
        43.         /*css3动画 只需要关键的画面
        44.         keyframes:关键帧(画面) 动画名称
        45.         */
        46.         @keyframes beat {
        47.             /* 动画开始的画面 */
        48.             0% {
        49.                 /*缩放*/
        50.                 transform: scale(1);
        51.             }
        52.             /*动画结束的画面*/
        53.             100% {
        54.                 /*结束*/
        55.                 transform: scale(1.1);
        56.             }
        57.         }
        58.  
        59.         .left, .right {
        60.             float: left;
        61.             width: 100px;
        62.             height: 160px;
        63.             background-color: pink;
        64.             border-radius: 50px 50px 0px 0px;
        65.         }
        66.  
        67.         .left {
        68.             transform: translateX(29px) rotate(-45deg);
        69.             /*盒子-阴影 横向，纵向，模糊半径 影子扩展  */
        70.             box-shadow: 0px 0px 30px 0px pink;
        71.         }
        72.  
        73.         .right {
        74.             /*translateX横向位移  rotate:旋转*/
        75.             transform: translateX(-29px) rotate(45deg);
        76.             /*盒子-阴影 横向，纵向，模糊半径 影子扩展  */
        77.             box-shadow: 0px 0px 30px 0px pink;
        78.  
        79.         }
        80.  
        81.  
        82.         #content {
        83.             width: 500px;
        84.             position: absolute;
        85.             left: 50%;
        86.             transform: translateX(-50%);
        87.         }
        88.  
        89.         .pay {
        90.             float: left;
        91.             text-align: center;
        92.             background-color: chartreuse;
        93.             /*background-color: whitesmoke;*/
        94.         }
        95.  
        96.         #Vip {
        97.             display: none;
        98.             width: 400px;
        99.             position: absolute;
        100.             left: 50%;
        101.             transform: translateX(-50%);
        102.             background-color: darkgray;
        103.         }
        104.  
        105.         #vipStatusTr {
        106.             display: none;
        107.         }
        108.  
        109.         #paySuccess {
        110.             position: relative;
        111.             /* left: 50%;
        112.              top: 50%;*/
        113.             /*transform: translate(20%,180%);*/
        114.         }
        115.         #frm span{
        116.             color: firebrick;
        117.         }
        118.     style>
        119. head>
        120. <script>
        121.     $(function () {
        122.         $('#buyVip').click(function () {
        123.             $('#Vip').show();
        124.             // alert("hhhhhh");
        125.             // document.getElementById('Vip').style.display='block';
        126.         })
        127.  
        128.         //付款成功后修改
        129.         $('#paySuccess').click(function () {
        130.             $('#Vip').hide();
        131.             //支付成功后修改vip卡状态
        132.             $('#vipStatus').val("1");
        133.             //支
        134.             $('#afterPay').html("您已购买Vip")
        135.  
        136.         })
        137.  
        138.         //确定提交
        139.         $('#tj').click(function () {
        140.             $('#checkCardNumResult').text("");
        141.             //点击提交后提示置为空
        142.             //取值
        143.             var confirmTj = true;
        144.             var cardNum = $('#cardNum').val();
        145.             var name = $('#name').val();
        146.             // alert(name);
        147.             var sex = $("input[name='sex']:checked").val();
        148.             // alert(sex);
        149.             var tel = $('#tel').val();
        150.             var address = $('#address').val();
        151.  
        152.             if (cardNum.length < 1) {
        153.                 confirmTj = false;
        154.                 $('#cardNumWarning').text("请输入新卡卡号！")
        155.             }
        156.             if (name.length < 1) {
        157.                 confirmTj = false;
        158.                 $('#nameWarning').text("请输入名字！")
        159.             }
        160.             if (sex != "男" && sex != "女") {
        161.                 confirmTj = false;
        162.                 $('#sexWarning').text("请选择性别")
        163.             }
        164.             if (tel.length < 1) {
        165.                 confirmTj = false;
        166.                 $('#telWarning').text("请输入手机号！")
        167.             }
        168.             if (address.length < 1) {
        169.                 confirmTj = false;
        170.                 $('#addressWarning').text("请输入地址！")
        171.             }
        172.  
        173.             if (confirmTj == true) {
        174.                 $.ajax({
        175.                     url: 'ljToAddCard',
        176.                     type: 'post',
        177.                     // data: {},
        178.                     //另一种方式，序列化，就能拿到表单里面的数据，但是这样写需要注意传的数据要和User类能对上
        179.                     data: $('#frm').serialize(),
        180.                     //如果不需要返回数据，就不用写
        181.                     dataType: 'text',
        182.                     success: function (res) {
        183.                         //没写过滤器会乱码
        184.                         alert(res);
        185.                     }
        186.                 })
        187.                 $('#cardNum').val("");
        188.             }
        189.         })
        190.  
        191.         //非空提示的消除
        192.         $("input:radio[name='sex']").change(function () {
        193.             $('#sexWarning').text("");
        194.         });
        195.         $('#cardNum').change(function () {
        196.             $('#cardNumWarning').text("");
        197.         })
        198.         $('#name').change(function () {
        199.             $('#nameWarning').text("");
        200.         })
        201.         $('#tel').change(function () {
        202.             $('#telWarning').text("");
        203.         })
        204.         $('#address').change(function () {
        205.             $('#addressWarning').text("");
        206.         })
        207.  
        208.  
        209.         //查询新注册的卡号是否已经存在
        210.         $('#cardNum').change(function () {
        211.             var cardNum = $(this).val();
        212.             checkCardNum(cardNum);
        213.         })
        214.         //关闭vip充值页面
        215.         $('#closeVip').click(function () {
        216.             $('#Vip').hide();
        217.         })
        218.  
        219.     })
        220.     function checkCardNum(v) {
        221.         $.ajax({
        222.             url: 'ljCheckCardNum',
        223.             type: 'post',
        224.             data: {cardNum: v},
        225.             //另一种方式，序列化，就能拿到表单里面的数据，但是这样写需要注意传的数据要和User类能对上
        226.             // data:$('#frm').serialize(),
        227.             //如果不需要返回数据，就不用写
        228.             dataType: 'text',
        229.             success: function (res) {
        230.                 //没写过滤器会乱码
        231.                 $('#checkCardNumResult').text(res);
        232.             }
        233.         })
        234.     }
        235. script>
        236. <body>
        237. <div id="father">
        238.     <div class="left">
        239.         <button type="button" class="btn btn-info" style="border-radius: 50px 50px 0px 0px">vip卡更多优惠哦！button>
        240.     div>
        241.     <div class="right">div>
        242. div>
        243. <div id="content">
        244.     <form id="frm">
        245.         <table class="table table-striped">
        246.             <thead>
        247.             <tr>
        248.                 <th scope="col" colspan="2" style="text-align: center"><b style="font-size: 20px">新卡办理b>th>
        249.             tr>
        250.             thead>
        251.             <tbody style="margin-top: 5px">
        252.             <tr>
        253.                 <th scope="row">卡号th>
        254.                 <td><input type="text" placeholder="请输入新卡卡号：" name="cardNum" id="cardNum">
        255.                       <span id="checkCardNumResult" style="color: darkblue">span>
        256.                     <span id="cardNumWarning">span>
        257.                 td>
        258.             tr>
        259.             <tr>
        260.                 <th scope="row">姓名th>
        261.                 <td>
        262.                     <input type="text" placeholder="请输入办卡人姓名：" name="name" id="name">
        263.                       <span id="nameWarning">span>td>
        264.                 td>
        265.             tr>
        266.             <tr>
        267.                 <th scope="row">手机号th>
        268.                 <td>
        269.                     <input type="text" placeholder="请输入手机号" name="tel" id="tel">
        270.                       <span id="telWarning">span>td>
        271.                 td>
        272.             tr>
        273.             <tr>
        274.                 <th scope="row">性别th>
        275.                 <td>
        276.                     <input type="radio" name="sex" id="payVip" value="男">男
        277.                     <input type="radio" name="sex" value="女">女
        278.                       <span id="sexWarning">span>td>
        279.                 td>
        280.             tr>
        281.             <tr>
        282.                 <th scope="row">地址th>
        283.                 <td>
        284.                     <input type="text" placeholder="请输入地址" name="address" id="address">
        285.                       <span id="addressWarning">span>td>
        286.                 td>
        287.  
        288.             tr>
        289.             <tr id="vipStatusTr">
        290.                 <th scope="row">Vip状态th>
        291.                 <td>
        292.                     <input type="text" name="vip" value="0" id="vipStatus">
        293.                 td>
        294.             tr>
        295.  
        296.             <tr>
        297.                 <th scope="row">是否购买Vipth>
        298.                 <td id="afterPay">
        299.                     <a id="buyVip" style="border-radius: 10px">88元购买<b>Vipb>a>
        300.                     <%--                    <button>測試button>--%>
        301.                 td>
        302.             tr>
        303.             tbody>
        304.         table>
        305.     form>
        306.     <table>
        307.         <tr>
        308.             <td colspan="2" style="text-align: center;width: 500px" align="center">
        309.                 <button class="btn btn-success" id="tj">提交button>
        310.                 <button class="btn btn-info">返回button>
        311.             td>
        312.         tr>
        313.     table>
        314.  
        315.  
        316. div>
        317.  
        318. <div id="father1">
        319.     <div class="left">div>
        320.     <div class="right">
        321.         <button type="button" class="btn btn-info" style="border-radius: 50px 50px 0px 0px">vip卡好礼不断！button>
        322.     div>
        323. div>
        324.  
        325. <div id="Vip">
        326.     <div style="width: 100%" class="pay">
        327.         <span>
        328.             <b>微信支付b>
        329.             <a href="#" style="float: right" id="closeVip">Xa>
        330.         span>
        331.  
        332.         <div style="width: 80%;background-color: #17a2b8;height: 300px;margin-left: 10%">
        333.             <img src="image/pay2.jpg" alt="" style="width: 100%">
        334.         div>
        335.     div>
        336.     <div style="width: 100%" class="pay">
        337.         <span><b>支付宝b>span>
        338.         <div style="width: 80%;background-color: #17a2b8;height: 300px;margin-left: 10%">
        339.             <img src="image/pay1.png" alt="" style="width: 100%">
        340.         div>
        341.     div>
        342.  
        343.     <div style="width: 100%;float: right" class="pay">
        344.         <button id="paySuccess" style="border-radius: 10px">支付成功button>
        345.     div>
        346.     td>
        347.     tr>
        348. div>
        349.  
        350. body>
        351. html>

    •  以上就是在这个小组项目当中我完成的业务，当自己的业务写完以后，提交到本地仓库，push上传到git远程仓库当中，当小组其他成员也上传以后，就可以切换到主分支，逐个新建各分支的本地分支，然后合并到主分支当中，在本地运行无误以后，就可以上传到远程仓库了。
    • 还有就是自己在合并的时候遇到的一些问题，像诸如：找不到xxxcontroller，这种有可能是控制层当中存在相同的路由，因此会模糊不清
    • 还有可能小组成员在写各自分支的时候，使用的都是自己的数据库，然后提交到远程时们也没有改过来
    • 第三个也会存在小组成员之间目录名称大小写不一样
  • 相关阅读:
    C++11多线程thread使用详解
    javascript--async和defer的区别
    FFmpeg+SDL实时解码和渲染H264视频流
    内网穿透工具之花生壳（二）
    c++day5
    ARM PWN
    解锁数据分析的神器：ChatGPT引领人工智能革命
    《最新出炉》系列初窥篇-Python+Playwright自动化测试-16-处理模态对话框弹窗
    第3章-9 字符串转换成十进制整数
    SpringBoot：第一章JavaConfig、@ImportResource、@PropertyResource等总结（动力）
  • 原文地址：https://blog.csdn.net/qq_60555957/article/details/126669103