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、用户登录页面

<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>

/* 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天，是，项目汇报~~~】

Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】

1、用户个人中心页面

user.vue

user.css

2、用户登录页面

3、用户登录判断

index.js

4、将项目打包部署到服务器上

5、项目汇报（项目功能描述）

6、实训心得

猜你喜欢

Vue.js-Day09【项目实战(附带 完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】

1、用户个人中心页面

user.vue

user.css

2、用户登录页面

login.vue

login.css

3、用户登录判断

index.js

4、将项目打包部署到服务器上

5、项目汇报（项目功能描述）

6、实训心得

猜你喜欢

Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】