Vue.js-Day09【项目实战(附带 完整项目源码)-day04:用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
1、用户个人中心页面2、用户登录页面3、将项目打包部署到服务器上
·
Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】
实战项目源码【链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提取码:n6ol】
目 录
1、用户个人中心页面
user.vue
<template>
<div class="user">
<!-- 头部 -->
<div class="header">
<div class="lt" @click="$router.go(-1)">
<i class="iconfont icon-fanhui"></i>
</div>
<h3>我的美团</h3>
<div class="rt">
<router-link to="/">
<i class="iconfont icon-shouye1"></i>
</router-link>
<router-link to="/">
<i class="iconfont icon-fangdajing"></i>
</router-link>
</div>
</div>
<!-- 个人信息 -->
<div class="userinfo">
<img src="../../static/imgs/avatar.png" alt />
<div class="txt">
<h3>
<span>用户名、昵称</span>
<img src alt />
</h3>
<p>
账户余额:
<span>0</span>元
</p>
</div>
<router-link to="/">
<i class="iconfont icon-xiangyou"></i>
</router-link>
</div>
<!-- 下面的信息 -->
<router-link to class="item">
<i class="iconfont icon-caidan- c1 img"></i>
<h4>全部订单</h4>
<span>
<i class="iconfont icon-xiangyou"></i>
</span>
</router-link>
<ul class="order-info">
<li>
<router-link to>
<i class="num">1</i>
<i class="iconfont icon-daifukuan"></i>
<p>待付款</p>
</router-link>
</li>
<li>
<router-link to>
<i class="iconfont icon-daishiyong"></i>
<p>待使用</p>
</router-link>
</li>
<li>
<router-link to>
<i class="num">5</i>
<i class="iconfont icon-daipingjia"></i>
<p>待评价</p>
</router-link>
</li>
<li>
<router-link to>
<i class="iconfont icon-tuikuanshouhou"></i>
<p>退款/售后</p>
</router-link>
</li>
</ul>
<router-link to class="item">
<i class="iconfont icon-wujiaoxingxingxing c2 img"></i>
<h4>我的收藏</h4>
<span>
<i class="iconfont icon-xiangyou"></i>
</span>
</router-link>
<router-link to class="item">
<i class="iconfont icon-quan c3 img"></i>
<h4>我的抵用券</h4>
<span>
41
<i class="iconfont icon-xiangyou"></i>
</span>
</router-link>
<router-link to class="item">
<i class="iconfont icon-lipin c4 img"></i>
<h4>我的抽奖单</h4>
<span>
<i class="iconfont icon-xiangyou"></i>
</span>
</router-link>
<router-link to class="item">
<i class="iconfont icon-tubiaozhizuo- c5 img"></i>
<h4>积分换礼品</h4>
<span>
<i class="iconfont icon-xiangyou"></i>
</span>
</router-link>
<a class="item" @click="quit">
<i class="iconfont icon-fanhui c5 img"></i>
<h4>退出登录</h4>
<span></span>
</a>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
quit() {
// 移除state
localStorage.removeItem("state");
// 跳转到首页去
this.$router.push("/");
}
}
};
</script>
<style scoped>
@import url("../assets/css/user.css");
</style>
user.css
.user{
background-color: #eee;
padding-top: 1rem;
}
.user .header{
background-color: orange;
display: flex;
}
.header .lt,
.header .rt{
width: 1rem;
height: 1rem;
color:#fff;
text-align: center;
}
.header h3{
text-align: center;
color:#fff;
font-weight: normal;
flex: 1;
}
.header .rt a{
width: 1rem;
height:1rem;
display:inline-block;
}
.header .rt a:first-child{
margin-left: -1.1rem;
}
.header .rt i{
font-size:.4rem;
color:#fff;
}
.header .lt i{
font-size:.5rem;
}
.userinfo{
display: flex;
background-color: red;
padding:.3rem .2rem;
align-items: center;
justify-content: space-between;
background-image: url(../../../static/imgs/banner.png);
background-size: 100% 100%;
}
.userinfo img{
width:1.2rem;
height:1.2rem;
margin-right: .2rem;
}
.userinfo .txt{
flex: 1;
}
.userinfo .txt h3{
color:#fff;
font-weight: normal;
}
.userinfo p{
font-size:.24rem;
color:#fff;
}
.userinfo i{
font-size:.6rem;
color:#fff;
}
.item{
display: flex;
justify-content: space-between;
background-color: #fff;
line-height:.8rem;
border-bottom:1px solid #eee;
color:#999;
align-items: center;
padding:0 .2rem;
}
.item .img{
width:.6rem;
height:.6rem;
text-align: center;
line-height: .6rem;
font-size: .36rem;
color:#fff;
}
.item .c1{
background-color: orange;
}
.item .c2{
background-color: blue;
}
.item .c3{
background-color: green;
}
.item .c4{
background-color: hotpink;
}
.item .c5{
background-color: indianred;
}
.item h4{
font-weight:normal;
flex:1;
margin-left: .2rem;
}
.item span i{
font-size:.4rem;
}
.order-info{
display: flex;
padding:.4rem .2rem;
background-color: #fff;
margin-bottom: .2rem;
}
.order-info li{
width:25%;
text-align:center;
position: relative;
}
.order-info li .iconfont{
font-size:.6rem;
color:#999
}
.order-info li p{
color:#999;
line-height:.4rem;
text-align:center;
}
.order-info li i.num{
position: absolute;
right: .26rem;
top: -.2rem;
width: 0.4rem;
height: 0.4rem;
background-color: red;
color: #FFF;
text-align: center;
line-height: .4rem;
border-radius: 50%;
font-style: normal;
}
2、用户登录页面
login.vue
<template>
<div class="login">
<!-- 头部 -->
<div class="header">
<div class="lt" @click="$router.go(-1)">
<i class="iconfont icon-fanhui"></i>
</div>
<h3>登录页面</h3>
<div class="rt"></div>
</div>
<!-- 输入框 -->
<div class="box">
<input type="text" class="ipt" placeholder="请输入账号" />
<input type="text" class="ipt" placeholder="请输入密码" />
</div>
<button class="submit" @click="tijiao">立即登录</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
tijiao() {
alert("登录成功了");
// 将登录成功的标记存储在本地环境中
localStorage.setItem("state", true);
this.$router.back();
}
}
};
</script>
<style scoped>
@import url("../assets/css/login.css");
</style>
login.css
/* 7.5rem 5.5rem */
.index{
padding-top: 1rem;
background-color: #eee;
}
.header .location{
text-align:center;
color:#000;
font-size:.28rem;
width:1.3rem;
}
.header .location img{
height:.10rem;
}
.header .search{
width:5rem;
display: block;
margin:.15rem 0 .15rem 1.4rem;
background:#fff;
height:.7rem;
border-radius:.1rem;
line-height:.7rem;
color:#aaa;
}
.header .search img{
height:.4rem;
margin:0 .1rem;
vertical-align:middle;
}
.header .right img{
height:.5rem;
margin-top:.25rem;
}
.list{
margin-top:.3rem;
background-color: #fff;
}
.list .tit{
line-height: .8rem;
margin:0 .2rem;
border-bottom: 1px solid #eee;
font-size:.32rem;
font-weight: normal;
}
.list li{
margin:0 .2rem;
border-bottom: 1px solid #eee;
padding:.2rem 0;
}
.list li a{
display: block;
overflow: hidden;
color:inherit;
}
.list li img{
width:1.8rem;
height:1.8rem;
float:left;
margin-right:.3rem;
}
.list li h4{
font-size: .32rem;
line-height: .6rem;
color:#333;
font-weight: normal;
}
.list li h5{
font-size:.28rem;
color:#999;
font-weight: normal;
}
.list li p{
font-size:.24rem;
color:#aaa;
overflow: hidden;
}
.list li p .l{
float:left;
}
.list li p .r{
float: right;
}
.list li p span b{
color:orange;
font-size:.3rem;
font-weight:normal;
margin-right:.1rem;
}
.list li p span i{
font-size: .24rem;
font-style:normal;
}
.banner{
background-color: #fff;
padding-bottom: .6rem;
}
.banner .menus-list{
overflow: hidden;
}
.banner .menus-list li{
width:20%;
float:left;
text-align: center;
}
.banner .menus-list li img{
width:60%;
margin:.3rem auto 0;
}
.banner .menus-list li p{
color:#aaa;
}
.box{
background-color: rgba(255,165,0,.1);
}
.box .more{
line-height: .3rem;
padding: 0 .2rem;
color: #c500bb;
font-size: .3rem;
}
.box .more i{
float: right;
font-size: .6rem;
}
3、用户登录判断
index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 导入页面组件
import index from "../pages/index"
import user from "../pages/user"
import tuangou from "../pages/tuangou"
import pay from "../pages/pay"
import order from "../pages/order"
import notfound from "../pages/notfound"
import login from "../pages/login"
var router = new Router({
routes: [
{
path: '/',
meta: { title: "美团首页", needLogin: false },
component: index
},
{
path: '/user',
meta: { title: "用户中心", needLogin: true },
component: user
},
{
path: '/tuangou/:id', // 动态路由!
meta: { title: "团购详情", needLogin: false },
component: tuangou
},
{
path: '/order',
meta: { title: "订单页面", needLogin: true },
component: order
},
{
path: '/login',
meta: { title: "登录页面", needLogin: false },
component: login
},
{
path: '/pay',
meta: { title: "支付页面", needLogin: true },
component: pay
},
{
path: '*',
meta: { title: "404页面", needLogin: false },
component: notfound
}
]
})
// 路由拦截
router.beforeEach(function (to, from, next) {
// 设计标题
document.title = to.meta.title;
// 滚动条回到顶部
window.scrollTo(0, 0)
// 登录判断
if (to.meta.needLogin) { // 需要登录了的页面!
// 判断是否登陆了?
if (localStorage.getItem("state")) { // 已经登录
next();
} else { // 没登录
router.push("/login")
}
} else { // 不需要判断登录
next();
}
})
// 暴露路由!
export default router;
4、将项目打包部署到服务器上
// 项目开发结束之后,执行 “ npm run build ” 命令!
// 生成 dist目录,交给后台去部署!
5、项目汇报(项目功能描述)
6、实训心得
本项目模仿美团网站进行搭建,实现了首页、团购页面、订单页面等。
运用了很多前端开发中常用的技术,如:编程式导航、动态路由、flex弹性盒子布局等。
在为期9天的项目实训过程中,我学到了很多的知识。从最基础的指令(v-html、v-text、v-if、v-for等)、事件绑定、tab切换、组件化开发,到 vue.js环境搭建、项目初始化、父子组件通信、axios的安装与使用、路由的使用、编程式导航、导航拦截,再到最后的项目实战。我真的学到了很多很多知识;在学习过程中,记了很多笔记。但是,还有很多知识掌握的并不熟练,课下需要多练习,多总结。【第10天,是,项目汇报~~~】
更多推荐
已为社区贡献2条内容
所有评论(0)