指导组--alpha冲刺Day2

指导组

已于 2023-11-08 19:57:02 修改

阅读量46

点赞数

文章标签： java

于 2023-11-08 19:52:33 首次发布

本文链接：https://blog.csdn.net/zx722/article/details/134290605

版权

这个作业属于哪个课程	课程
这个作业要求在哪里	作业要求
这个作业的目标	记录alpha冲刺Day2
团队名称	指导组
团队置顶集合随笔链接	指导组–alpha冲刺随笔置顶
其他参考文献

会议照片

项目燃尽图

项目运行图片

改良版登录界面运行

团队成员站立式会议总结

成员

项目进展

存在/遇到的问题

从今天到明天会议的安排

心得体会

072103402-卢成熙

对用户端后端的雏形进行设计改善

某些功能实现较繁琐，编写代码困难

对项目中细化的功能进行完善

对细节的处理以及代码能力得到提升

102101117-刘建鑫

对用户端前端界面子界面一进行完善

后端还未完善，登录界面的接口还未完成编写

与后端进行接口交互

前端代码的编写能力得到了提升

102101427-陈永裕

完善了管理员端前端界面子界面一的编写

在排列数据的界面美观问题上难以改善

借鉴其他风格界面来完善问题

对前后端数据交互更加熟练

102101413-王润富

在管理员端前端界面子界面三的编写基础上进行界面改善

部分按键跳转后的界面难以设计

学习如何部署按键与界面之间的关系

前端功能设计能力得到了提升

102101128-陈林旭

持续对管理员端前端界面子界面二进行编写

在代码编写上熟练度低，编写速度较慢

勤加练习并继续编写管理员端前端页面

在不断进步中更加熟练地编写代码

102101133-纳世荣

调整管理员端前端界面子界面五的代码规范并查缺补漏

整体页面设计、布局等比较困难

继续完善UI设计，并完成管理员端前端页面

对UI设计的认知更加透彻

291800137-赵鑫

开始收集项目所需数据集

所需数据集繁多种类复杂

从相关领域收集可利用的数据集

锻炼了收集信息能力

102101134-范智强

持续编写用户端前端界面子界面三代码

未能与后端进行完整的数据传递，页面仍有空缺

与后端进行交互，完善空缺的界面

经过不断的敲击代码，对自己的技术有很大提升

102101137-林鹏

修改完善用户端前端界面子界面五代码

用户端页面按钮众多，设计困难

搞懂按钮间的逻辑关系，完善按钮与页面的设计

对前端编写有了更深刻的理解

031802441-张志敏

对管理员端前端界面子界面四的代码进行查缺补漏，并准备下一个界面的编写

在页面折叠层进行设计时遇到困难

进一步学习并解决折叠页面设计问题

通过不断解决问题感受到了自己编程技术的提升

代码迁入：

登录界面1：

<div id="app">
  <div class="login-container">
    <div class="header">
      <div class="header-back-btn" @click="goBack"><i class="el-icon-arrow-left"></i></div>
      <div class="ht1"><strong>福大点评</strong></div>
      <div class="ht2"><strong>发现福大好店铺！</strong></div>
      <div class="header-title" style="position: absolute;top: 330px;left:65px ;">密码登录</div>
    </div>
    <div class="content">
      <div class="login-form" style="text-align: left;">
        <div style="height: 1px"></div>
        <br>
        <el-input id="phonenum" placeholder="请输入手机号" v-model="form.phone">
        </el-input>
        <div style="height: 30px"></div>
        <el-input id="inputcode" type="password" placeholder="请输入密码" v-model="form.password">
        </el-input>
        <div style="position: absolute;top: 455px;left: 70px;color: black;margin: 5px 0"><a class="mmyzmclj" href="javascript:void(0)" style="color: chocolate;">忘记密码?</a></div>
        <div><el-button id="logining" @click="login" style="border-radius: 30px;height:45px; width: 250px; position:absolute;top: 480px;left: 60px;background-color:transparent; color:black;border-color: red;">登录</el-button></div>
        <div style="color:#333333; margin: 5px 0;position: absolute;left: 70px;top: 515px;"><a class="mmyzmclj"  href="/login.html" style="color: red;">验证码登录</a></div>
      </div>
    </div>
  </div>
</div>

登录界面2：

<div id="app">
  <div class="login-container">
    <div class="header">
      <div class="header-back-btn" @click="goBack" ><i class="el-icon-arrow-left"></i></div>
      <div class="ht1"><strong>福大点评</strong></div>
      <div class="ht2"><strong>发现福大好店铺！</strong></div>
      <div class="header-title" style="position: absolute;top: 315px;left:55px ;">手机号登录/注册</div>
    </div>
    <div class="content">
      <div class="login-form">
        <div>
          <el-input id="input1" style="width: 60%" placeholder="请输入手机号" v-model="form.phone" >
          </el-input>
          <el-button style="border-radius: 30px;color: black;border-color: dodgerblue; background-color: transparent; height: 40px;width: 120px;position: absolute;top: 402px;left:185px;" @click="sendCode" type="success" :disabled="disabled">{{codeBtnMsg}}</el-button>
        </div>
        <div style="height: 5px"></div>
        <el-input id="input2" placeholder="请输入验证码" v-model="form.code">
        </el-input>
        <div style="position: absolute;top: 438px;left: 60px;color:chocolate;margin: 5px 0">未注册的手机号码验证后自动创建账户</div>
        <el-button @click="login" style="border-radius: 30px;width:250px;height: 45px; position:absolute;top: 460px;left: 50px;background-color:transparent; color:black;border-color: red;">登录</el-button>
        <div style="position: absolute;top: 505px;text-align: left; color:#333333; margin: 5px 0"><a id="mmdl" href="/login2.html">密码登录</a></div>
      </div>
    </div>
  </div>
</div>

首页:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>福大点评</title>
  <link rel="stylesheet" href="./css/element.css">

  <link href="./css/index.css" rel="stylesheet">
  <link href="./css/main.css" rel="stylesheet">

  <style type="text/css">
      .el-input__inner {
          border-radius: 20px;
      }
  </style>
</head>
<body>
<div id="app">
  <div class="search-bar">
    <div class="city-btn">福州大学<i class="el-icon-arrow-down"></i></div>
    <div class="search-input">
      <el-input size="mini" placeholder="请输入商户名、地点">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <div class="header-icon" @click="toPage(4)"><i class="el-icon-user"></i></div>
  </div>
  <div class="type-list">
    <div class="type-box" v-for="t in types" :key="t.id" @click="toShopList(t.id, t.name)">
      <div class="type-view"><img :src="'/imgs/' + t.icon" alt=""></div>
      <div class="type-text">{{t.name}}</div>
    </div>
  </div>
  <div class="blog-list" @scroll="onScroll">
    <div class="blog-box" v-for="b in blogs" :key="b.id">
      <div class="blog-img" @click="toBlogDetail(b)"><img :src="b.img" alt=""></div>
      <div class="blog-title">{{b.title}}</div>
      <div class="blog-foot">
        <div class="blog-user-icon"><img :src="b.icon || '/imgs/icons/default-icon.png'" alt=""></div>
        <div class="blog-user-name">{{b.name}}</div>
        <div class="blog-liked" @click="addLike(b)">
          <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2187" width="14" height="14">
          </svg>
          {{b.liked}}
        </div>
      </div>
    </div>
  </div>
  <foot-bar :active-btn="1"></foot-bar>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="./js/element.js"></script>
<script src="./js/common.js"></script>
<script src="./js/footer.js"></script>
<script>

  const app = new Vue({
    el: "#app",
    data: {
      isReachBottom: false,
      types: [], // 类型列表
      blogs: [], // 播客列表
      current: 1,// blog的页码
    },
    created() {
      // 查询类型
      this.queryTypes();
      this.queryHotBlogsScroll();
    },
    methods: {
      queryTypes() {
        axios.get("/shop-type/list")
          .then(({data}) => {
            this.types = data;
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      queryHotBlogsScroll() {
        axios.get("/blog/hot?current=" + this.current)
          .then(({data}) => {
            data.forEach(b => b.img = b.images.split(",")[0]);
            this.blogs = this.blogs.concat(data);
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      addLike(b) {
        axios.put("/blog/like/" +b.id)
          .then(({data}) => {
            this.queryBlogById(b)
          })
          .catch(err => {
            this.$message.error(err)
          })
      },
      queryBlogById(b) {
        axios.get("/blog/" + b.id)
          .then(({data}) => {
            b.liked = data.liked;
            b.isLike = data.isLike;
          })
          .catch(() => {
            this.$message.error
            b.liked ++;
          })
      },
      onScroll(e) {
        let scrollTop = e.target.scrollTop;
        let offsetHeight = e.target.offsetHeight;
        let scrollHeight = e.target.scrollHeight;
        if (scrollTop + offsetHeight > scrollHeight && !this.isReachBottom) {
          this.isReachBottom = true
          this.current++;
          this.queryHotBlogsScroll();
        } else {
          this.isReachBottom = false
        }
      },
      toShopList(id, name) {
        location.href = "/shop-list.html?type=" + id + "&name=" + name
      },
      toBlogDetail(b) {
        location.href = "/blog-detail.html?id=" + b.id
      }
    }
  })
</script>
</body>
</html>

测试

登陆界面测试结果

指导组

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
指导组--alpha冲刺Day2

成员项目进展存在/遇到的问题从今天到明天会议的安排心得体会072103402-卢成熙对用户端后端的雏形进行设计改善某些功能实现较繁琐，编写代码困难对项目中细化的功能进行完善对细节的处理以及代码能力得到提升102101117-刘建鑫对用户端前端界面子界面一进行完善后端还未完善，登录界面的接口还未完成编写与后端进行接口交互前端代码的编写能力得到了提升102101427-陈永裕完善了管理员端前端界面子界面一的编写在排列数据的界面美观问题上难以改善借鉴其他风格界面来完善问题。
复制链接

扫一扫