【项目源码】

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

目   录

1、用户个人中心页面

user.vue

user.css

2、用户登录页面

login.vue

login.css

3、用户登录判断

index.js

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

 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目录，交给后台去部署！