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

【项目源码】

链接：https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA
提取码：n6ol

目   录

 1、用户个人中心页面

user.vue

user.css

2、用户登录页面

login.vue

login.css

3、用户登录判断

index.js

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

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

6、实训心得

---

 1、用户个人中心页面

user.vue

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

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