【无标题】通信软件开发及应用

辣子鸡味的橘子

于 2022-07-09 23:27:17 发布

阅读量240

点赞数

文章标签： angular.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52548731/article/details/125700532

版权

《通信软件开发及应用》

一、做的什么

1.1任务要求

任务一：构建一个静态或动态网站。以下要求中任选A或B，要求如下：
A. 静态网站
采用纯 CSS 或你喜欢的任何 CSS 框架如 Bootstrap、MDB、Tailwind 等构建一个主题自选且不少于5个页面（Web Page）的网站
B. 动态网站
使用任何一个前端框架如 Angular 等进行某应用（如英雄之旅、代办事项、图书管理等）的开发，需要有 CRUD 即增删改查功能并有一定的样式。
无论你选择静态还是动态网站，该网站都需部署到你喜欢的网站托管服务器上如 Gitpage 等（Angular项目可参阅 https://angular.cn/guide/deployment）。
该网站需放置你的结业报告（要求见任务二）。
任务二：撰写结业报告，要求如下：
（1）题目为《通信软件开发与应用》课程结业报告；
（2）报告需阐述：做的什么、开发过程、遇到的问题、如何解决、哪些未解决、总结；
（3）该报告以 Web 页面的形式呈现，从你上面开发的网站中可访问到。

1.2设计主题

本次的网页主题是一个书城的简单网页

二、效果演示

登录页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TDmlFR7F-1657380311071)(C:\Users\HP\AppData\Local\Temp\1657377617527.png)]

书城首页：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JqqxUHuM-1657380311077)(C:\Users\HP\AppData\Local\Temp\1657378258532.png)]

![1657378284293](C:\Users\HP\AppData\Local\Temp\1657378284293.png

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M5lInHh3-1657380311079)(C:\Users\HP\AppData\Local\Temp\1657378374904.png)]

购物车页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-euAHPeGr-1657380311080)(C:\Users\HP\AppData\Local\Temp\1657378478570.png)]

订单结账页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DhloxPTx-1657380311081)(C:\Users\HP\AppData\Local\Temp\1657378512977.png)]

三、实现过程

3.1、主页设计

登录页面：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>登录页面</title>
    <link type="text/css" rel="stylesheet" th:href="@{/static/css/style.css}" />
  </head>
  <body>
    <div id="login_header">
      <a href="../index.html">
        <img class="logo_img" alt="" th:href="@{/static/img/logo.gif}" />
      </a>
    </div>

    <div class="login_banner">
      <div id="l_content">
        <span class="login_word">欢迎登录</span>
      </div>

      <div id="content">
        <div class="login_form">
          <div class="login_box">
            <div class="tit">
              <h1>书城会员</h1>
            </div>
            <div class="msg_cont">
              <b></b>
              <span class="errorMsg">请输入用户名和密码</span>
            </div>
            <div class="form">
              <form th:action="@{/user.do}" method="post">
                <input type="hidden" name="operate" value="login"/>
                <label>用户名称：</label>
                <input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1"
                  name="uname" id="username" value="lina" />
                <br />
                <br />
                <label>用户密码：</label>
                <input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1"
                  name="pwd" id="password" value="ok"/>
                <br />
                <br />
                <input type="submit" value="登录" id="sub_btn" />
              </form>
              <div class="tit">
                <a th:href="@{/pages/user/regist.html}">立即注册</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
    </div>
  </body>
</html>

首页页面：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>书城首页</title>
    <link rel="stylesheet" th:href="@{/static/css/minireset.css}" />
    <link rel="stylesheet" th:href="@{/static/css/common.css}" />
    <link rel="stylesheet" th:href="@{/static/css/iconfont.css}" />
    <link rel="stylesheet" th:href="@{/static/css/index.css}" />
    <link rel="stylesheet" th:href="@{/static/css/swiper.min.css}" />
    <script language="JavaScript" th:src="@{/static/script/index.js}"></script>
  </head>
  <body>
    <div id="app">
      <div class="topbar">
        <div class="w">
          <div class="topbar-left">
            <i>送至:</i>
            <i>北京</i>
            <i class="iconfont icon-ai-arrow-down"></i>
          </div>
          <div class="topbar-right" th:if="${session.currentUser==null}">
            <a href="user/login.html" class="login">登录</a>
            <a href="user/regist.html" class="register">注册</a>
            <a href="cart/index.html" class="cart iconfont icon-gouwuche">
              购物车
              <div class="cart-num">3</div>
            </a>
            <a href="manager/book_manager.html" class="admin">后台管理</a>
          </div>
          <div class="topbar-right" th:unless="${session.currentUser==null}">
            <!--登录后风格-->
            <span>欢迎你<b th:text="${session.currentUser.uname}">张总</b></span>
            <a th:href="@{/user.do}" class="register">注销</a>
            <a th:href="@{/page.do(operate='page',page='cart/index')}" class="cart iconfont icon-gouwuche">
              购物车
              <div class="cart-num" th:text="${session.currentUser.cart.totalCount}">3</div>
            </a>
            <a href="./pages/manager/book_manager.html" class="admin">后台管理</a>
          </div>
        </div>
      </div>
      <div class="header w">
<!--        <a href="#" class="header-logo"></a>-->
        <div class="header-nav">
          <ul>
            <li><a href="#">java</a></li>
            <li><a href="#">前端</a></li>
            <li><a href="#">小说</a></li>
            <li><a href="#">文学</a></li>
            <li><a href="#">青春文学</a></li>
            <li><a href="#">艺术</a></li>
            <li><a href="#">管理</a></li>
          </ul>
        </div>
        <div class="header-search">
          <input type="text" placeholder="十万个为什么" />
          <button class="iconfont icon-search"></button>
        </div>
      </div>
      <div class="banner w clearfix">
        <div class="banner-left">
          <ul>
            <li>
              <a href="">
                <span>文学 鉴赏</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>社科 研究</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>少儿 培训</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>艺术 赏析</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>生活 周边</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>文教 科技</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
            <li>
              <a href="">
                <span>热销 畅读</span>
                <i class="iconfont icon-jiantou"></i
              ></a>
            </li>
          </ul>
        </div>
        <div class="banner-right">
          <div class="swiper-container">
            <ul class="swiper-wrapper">
              <li class="swiper-slide">
                <img src="./static/uploads/banner4.jpg" alt="">
                <!-- <div class="banner-img"></div> -->
              </li>
              <li class="swiper-slide">
                <img src="./static/uploads/banner5.jpg" alt="">
                <!-- <div class="banner-img"></div> -->
              </li>
              <li class="swiper-slide">
                <img src="./static/uploads/banner6.jpg" alt="">
                <!-- <div class="banner-img"></div> -->
              </li>
            </ul>
            <div class="swiper-button-prev"></div>

            <div class="swiper-button-next"></div>

            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
      <div class="books-list ">
        <div class="w">
          <div class="list">
            <div class="list-header">
              <div class="title">图书列表</div>
              <div class="price-search">
                <span>价格:</span>
                <input type="text">
                <span>-元</span>
                <input type="text">
                <span>元</span>
                <button>查询</button>
              </div>
            </div>
            <div class="list-content">
              <div class="list-item" th:each="book : ${session.bookList}" th:object="${book}">
                <img th:src="@{|/static/uploads/*{bookImg}|}" alt="">
                <p th:text="|书名:*{bookName}|">书名:活着</p>
                <p th:text="|作者:*{author}|">作者:余华</p>
                <p th:text="|价格:*{price}|">价格:￥66.6</p>
                <p th:text="|销量:*{saleCount}|">销量:230</p>
                <p th:text="|库存:*{bookCount}|">库存:1000</p>
                <button th:onclick="|addCart(*{id})|">加入购物车</button>
              </div>

            </div>
            <div class="list-footer">
                <div>首页</div>
                <div>上一页</div>
                <ul><li class="active">1</li><li>2</li><li>3</li></ul>
                <div>下一页</div>
                <div>末页</div>
                <span>共10页</span>
                <span>30条记录</span>
                <span>到第</span>
                <input type="text">
                <span>页</span>
                <button>确定</button>
            </div>
          </div>
        </div>
       
      </div>
      <div class="cate w">
        <div class="list">
          <a href="" class="list-item">
            <i class="iconfont icon-java"></i>
            <span>java</span>
          </a>
          <a href="" class="list-item"
            ><i class="iconfont icon-h5"></i>h5</a
          >
          <a href="" class="list-item">
            <i class="iconfont icon-python"></i>python
          </a>
          <a href="" class="list-item"
            ><i class="iconfont icon-tianchongxing-"></i>pm</a
          >
          <a href="" class="list-item"
            ><i class="iconfont icon-php_elephant"></i>php</a
          >
          <a href="" class="list-item"
            ><i class="iconfont icon-go"></i>go</a
          >
        </div>
        <a href="" class="img">
          <img src="./static/uploads/cate4.jpg" alt="" />
        </a>
        <a href="" class="img">
          <img src="./static/uploads/cate5.jpg" alt="" />
        </a>
        <a href="" class="img">
          <img src="./static/uploads/cate6.jpg" alt="" />
        </a>
      </div>
      <div class="books">
        <div class="w">
          <div class="seckill">
            <div class="seckill-header">
              <div class="title">
                图书秒杀
              </div>
              <!-- <i class="iconfont icon-huanyipi"></i> -->
            </div>
            <div class="seckill-content">
             
                  <a href="" class="tip"> 
                     <h5>距离结束还有</h5>
                     <i class="iconfont icon-shandian"></i>
                     <div class="downcount">
                      <span class="time">00</span>
                      <span class="token">:</span>
                      <span class="time">00</span>
                      <span class="token">:</span>
                      <span class="time">00</span>
                     </div>
                  </a>
              
              
                  <a href="" class="books-sec">
                    <img src="./static/uploads/congwanqingdaominguo.jpg" alt="">
                    <p>从晚晴到民国</p>
                    <div>
                      <span class="cur-price">￥28.9</span>
                      <span class="pre-price">￥36.5</span>
                    </div>
                    <button>立即购买</button>
                  </a>
                  <a href="" class="books-sec">
                    <img src="./static/uploads/cyuyanrumenjingdian.jpg" alt="">
                    <p>c语言入门经典</p>
                    <div>
                      <span class="cur-price">￥55.9</span>
                      <span class="pre-price">￥68.5</span>
                    </div>
                    <button>立即购买</button>
                  </a>
                  <a href="" class="books-sec">
                    <img src="./static/uploads/fusang.jpg" alt="">
                    <p>扶桑</p>
                    <div>
                      <span class="cur-price">￥30.9</span>
                      <span class="pre-price">￥47.5</span>
                    </div>
                    <button>立即购买</button>
                  </a>
                  <a href="" class="books-sec">
                    <img src="./static/uploads/geihaizideshi.jpg" alt="">
                    <p>给孩子的诗</p>
                    <div>
                      <span class="cur-price">￥18.9</span>
                      <span class="pre-price">￥25.5</span>
                    </div>
                    <button>立即购买</button>
                  </a>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="w">
          <div class="top">
            <ul>
              <li>
                <a href="">
                  <img src="./static/img/bottom1.png" alt="">
                  <span>大师在线亲笔签名</span>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="./static/img/bottom.png" alt="">
                  <span>书籍销量持续上升</span>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="./static/img/bottom2.png" alt="">
                  <span>书籍榜单在线公开</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="content">
            <dl>
              <dt>关于网站</dt>
              <dd>网站理念</dd>
            </dl>
            <dl>
              <dt>资源下载</dt>
              <dd>工具下载</dd>
            </dl>
            <dl>
              <dt>加入我们</dt>
              <dd>招聘岗位</dd>
            </dl>
            <dl>
              <dt>联系我们</dt>
              <dd>http://www.cqitu.com<dd>
            </dl>
          </div>
        </div>
        <div class="down">
          交通书城.Copyright ©2018
        </div>
      </div>
    </div>
    <script src="./static/script/swiper.min.js"></script>
    <script>
      var swiper = new Swiper('.swiper-container', {
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    </script>
  </body>
</html>

购物车模块：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" th:href="@{/static/css/minireset.css}" />
    <link rel="stylesheet" th:href="@{/static/css/common.css}" />
    <link rel="stylesheet" th:href="@{/static/css/cart.css}" />
    <script language="JavaScript" th:src="@{/static/script/vue.js}"></script>
    <script language="JavaScript" th:src="@{/static/script/axios.min.js}"></script>
    <script language="JavaScript" th:src="@{/static/script/cart.js}"></script>
  </head>
  <body>
    <div class="header">
      <div class="w">
        <div class="header-left">
          <h1>我的购物车</h1>
        </div>
        <div class="header-right">
          <h3>欢迎<span th:text="${session.currentUser.uname}">张总</span>光临尚硅谷书城</h3>
          <div class="order"><a th:href="@{/order.do(operate='getOrderList')}">我的订单</a></div>
          <div class="destory"><a th:href="@{/book.do(operate='edit')}">注销</a></div>
          <div class="gohome">
            <a th:href="@{/book.do}">返回</a>
          </div>
        </div>
      </div>
    </div>
    <div class="list" id="cart_div">
      <div class="w">
        <table>
          <thead>
          <tr>
            <th>图片</th>
            <th>商品名称</th>

            <th>数量</th>
            <th>单价</th>
            <th>金额</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="cartItem in cart.cartItemMap">
            <td>
              <img v-bind:src="'static/uploads/'+cartItem.book.bookImg" alt="" />
            </td>
            <td>{{cartItem.book.bookName}}</td>

            <td>
              <span class="count" @click="editCart(cartItem.id,cartItem.buyCount-1)">-</span>
              <input class="count-num" type="text" value="1" v-bind:value="cartItem.buyCount"/>
              <span class="count" @click="editCart(cartItem.id,cartItem.buyCount+1)">+</span>
            </td>
            <td>{{cartItem.book.price}}</td>
            <td>{{cartItem.xj}}</td>
            <td><a href="">删除</a></td>
          </tr>
          </tbody>
        </table>
        <div class="footer">
          <div class="footer-left">
            <a href="#" class="clear-cart">清空购物车</a>
            <a href="#">继续购物</a>
          </div>
          <div class="footer-right">
            <div>共<span>{{cart.totalBookCount}}</span>件商品</div>
            <div class="total-price">总金额<span>{{cart.totalMoney}}</span>元</div>
            <a class="pay" th:href="@{/order.do(operate='checkout')}">去结账</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="w">
        <div class="top">
          <ul>
            <li>
              <a href="">
                <img src="../../static/img/bottom1.png" alt="" />
                <span>大师在线亲笔签名</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="../../static/img/bottom.png" alt="" />
                <span>书籍销量持续上升</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="../../static/img/bottom2.png" alt="" />
                <span>书籍榜单在线公开</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="content">
          <dl>
            <dt>关于书城</dt>
            <dd>网站理念</dd>
          </dl>
          <dl>
            <dt>资源下载</dt>
            <dd>工具下载</dd>
          </dl>
          <dl>
            <dt>加入我们</dt>
            <dd>招聘岗位</dd>
          </dl>
          <dl>
            <dt>联系我们</dt>
            <dd>http://www.cqjtu.com</dd>
            <dd></dd>
          </dl>
        </div>
      </div>
      <div class="down">
        交通书城.Copyright ©2015
      </div>
    </div>
  </body>
</html>

订单模块：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的订单</title>
    <link rel="stylesheet" th:href="@{/static/css/minireset.css}" />
    <link rel="stylesheet" th:href="@{/static/css/common.css}" />
    <link rel="stylesheet" th:href="@{/static/css/cart.css}" />
    <link rel="stylesheet" th:href="@{/static/css/bookManger.css}" />
    <link rel="stylesheet" th:href="@{/static/css/orderManger.css}" />
  </head>
  <body>
    <div class="header">
      <div class="w">
        <div class="header-left">
          <h1>我的订单</h1>
        </div>
        <div class="header-right">
          <h3>欢迎<span th:text="${session.currentUser.uname}">张总</span>光临尚硅谷书城</h3>
          <div class="order"><a th:href="@{/order.do(operate='getOrderList')}">我的订单</a></div>
          <div class="destory"><a href="../index.html">注销</a></div>
          <div class="gohome">
            <a href="../index.html">返回</a>
          </div>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="w">
        <table>
          <thead>
            <tr>
              <th>订单号</th>
              <th>订单日期</th>
              <th>订单金额</th>
              <th>订单数量</th>
              <th>订单状态</th>
              <th>订单详情</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="orderBean : ${session.currentUser.getOrderBeanList()}" th:object="${orderBean}">
              <td th:text="*{orderNo}">12354456895</td>
              <td th:text="*{orderDate}">
                2015.04.23
              </td>
              <td th:text="*{orderMoney}">90.00</td>
              <td th:text="*{totalBookCount}">88</td>
              <td><a href="" class="send">等待发货</a></td>
              <td><a href="">查看详情</a></td>
            </tr>
          </tbody>
        </table>
        <div class="footer">
          <div class="footer-right">
            <div>首页</div>
            <div>上一页</div>
            <ul>
              <li class="active">1</li>
              <li>2</li>
              <li>3</li>
            </ul>
            <div>下一页</div>
            <div>末页</div>
            <span>共10页</span>
            <span>30条记录</span>
            <span>到第</span>
            <input type="text" />
            <span>页</span>
            <button>确定</button>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="w">
        <div class="top">
          <ul>
            <li>
              <a href="">
                <img src="../../static/img/bottom1.png" alt="" />
                <span>大师在线亲笔签名</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="../../static/img/bottom.png" alt="" />
                <span>书籍销量持续上升</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="../../static/img/bottom2.png" alt="" />
                <span>书籍榜单在线公开</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="content">
          <dl>
            <dt>关于书城</dt>
            <dd>网站理念</dd>
          </dl>
          <dl>
            <dt>资源下载</dt>
            <dd>工具下载</dd>
          </dl>
          <dl>
            <dt>加入我们</dt>
            <dd>招聘岗位</dd>
          </dl>
          <dl>
            <dt>联系我们</dt>
            <dd>http://www.cqjtu.com</dd>
            <dd></dd>
          </dl>
        </div>
      </div>
      <div class="down">
        交通书城.Copyright ©2015
      </div>
    </div>
  </body>
</html>

4、遇到的问题及如何进行解决

4.1thymeleaf视图渲染失败

本项目是依靠thymeleaf进行页面和视图的渲染来达到目的，然而在运行项目的过程当中，会出现页面渲染失败的问题，导致数据的更新失败，导致了许多的问题。

解决问题的办法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0oJ6hRad-1657380311085)(C:\Users\HP\AppData\Local\Temp\1657379621067.png)]

在服务端设置了一个pagecontroller页面，这个页面的作用主要是让所有thymeleaf有关的链接等都接受了服务端的渲染，此时就没有发生错误了

五、总结

经过一个学期的学习，在老师的讲解下对网页的设计有了一定的认识和了解。再加上对教程有一个实践操作，基本上熟悉了html、css、JavaScript、以及javaweb的操作，还熟悉了解到了SpringMvc框架的结构和作用。其唯一让我觉得有点遗憾的是，自己的前端设计能力仍然存在着很大的缺陷，自身审美水平较低，加上练的很少写的页面并不好看。我会在接下来的时间里继续学习对网页的设计包括自己还没学习到的知识，通过这中途径来加强自己的前端设计能力。