这个作业属于哪个课程 | 课程 |
---|---|
这个作业要求在哪里 | 作业要求 |
这个作业的目标 | 记录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>