devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端Vue小兔鲜儿电商项目实战Day05_vue小兔鲜儿项目

作者：2023面试高手 | 2024-06-04 00:15:12

赞

踩

vue小兔鲜儿项目

一、登录 - 整体认识和路由配置

1. 整体认识

登录页面的主要功能就是表单校验和登录退出业务

①src/views/Login/index.vue

  1. <script setup></script>
  2.  
  3. <template>
  4.   <div>
  5.     <header class="login-header">
  6.       <div class="container m-top-20">
  7.         <h1 class="logo">
  8.           <RouterLink to="/">小兔鲜</RouterLink>
  9.         </h1>
  10.         <RouterLink class="entry" to="/">
  11.           进入网站首页
  12.           <i class="iconfont icon-angle-right"></i>
  13.           <i class="iconfont icon-angle-right"></i>
  14.         </RouterLink>
  15.       </div>
  16.     </header>
  17.     <section class="login-section">
  18.       <div class="wrapper">
  19.         <nav>
  20.           <a href="javascript:;">账户登录</a>
  21.         </nav>
  22.         <div class="account-box">
  23.           <div class="form">
  24.             <el-form label-position="right" label-width="60px" status-icon>
  25.               <el-form-item label="账户">
  26.                 <el-input />
  27.               </el-form-item>
  28.               <el-form-item label="密码">
  29.                 <el-input />
  30.               </el-form-item>
  31.               <el-form-item label-width="22px">
  32.                 <el-checkbox size="large">
  33.                   我已同意隐私条款和服务条款
  34.                 </el-checkbox>
  35.               </el-form-item>
  36.               <el-button size="large" class="subBtn">点击登录</el-button>
  37.             </el-form>
  38.           </div>
  39.         </div>
  40.       </div>
  41.     </section>
  42.  
  43.     <footer class="login-footer">
  44.       <div class="container">
  45.         <p>
  46.           <a href="javascript:;">关于我们</a>
  47.           <a href="javascript:;">帮助中心</a>
  48.           <a href="javascript:;">售后服务</a>
  49.           <a href="javascript:;">配送与验收</a>
  50.           <a href="javascript:;">商务合作</a>
  51.           <a href="javascript:;">搜索推荐</a>
  52.           <a href="javascript:;">友情链接</a>
  53.         </p>
  54.         <p>CopyRight &copy; 小兔鲜儿</p>
  55.       </div>
  56.     </footer>
  57.   </div>
  58. </template>
  59.  
  60. <style scoped lang="scss">
  61. .login-header {
  62.   background: #fff;
  63.   border-bottom: 1px solid #e4e4e4;
  64.  
  65.   .container {
  66.     display: flex;
  67.     align-items: flex-end;
  68.     justify-content: space-between;
  69.   }
  70.  
  71.   .logo {
  72.     width: 200px;
  73.  
  74.     a {
  75.       display: block;
  76.       height: 132px;
  77.       width: 100%;
  78.       text-indent: -9999px;
  79.       background: url('@/assets/images/logo.png') no-repeat center 18px /
  80.         contain;
  81.     }
  82.   }
  83.  
  84.   .sub {
  85.     flex: 1;
  86.     font-size: 24px;
  87.     font-weight: normal;
  88.     margin-bottom: 38px;
  89.     margin-left: 20px;
  90.     color: #666;
  91.   }
  92.  
  93.   .entry {
  94.     width: 120px;
  95.     margin-bottom: 38px;
  96.     font-size: 16px;
  97.  
  98.     i {
  99.       font-size: 14px;
  100.       color: $xtxColor;
  101.       letter-spacing: -5px;
  102.     }
  103.   }
  104. }
  105.  
  106. .login-section {
  107.   background: url('@/assets/images/login-bg.png') no-repeat center / cover;
  108.   height: 488px;
  109.   position: relative;
  110.  
  111.   .wrapper {
  112.     width: 380px;
  113.     background: #fff;
  114.     position: absolute;
  115.     left: 50%;
  116.     top: 54px;
  117.     transform: translate3d(100px, 0, 0);
  118.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  119.  
  120.     nav {
  121.       font-size: 14px;
  122.       height: 55px;
  123.       margin-bottom: 20px;
  124.       border-bottom: 1px solid #f5f5f5;
  125.       display: flex;
  126.       padding: 0 40px;
  127.       text-align: right;
  128.       align-items: center;
  129.  
  130.       a {
  131.         flex: 1;
  132.         line-height: 1;
  133.         display: inline-block;
  134.         font-size: 18px;
  135.         position: relative;
  136.         text-align: center;
  137.       }
  138.     }
  139.   }
  140. }
  141.  
  142. .login-footer {
  143.   padding: 30px 0 50px;
  144.   background: #fff;
  145.  
  146.   p {
  147.     text-align: center;
  148.     color: #999;
  149.     padding-top: 20px;
  150.  
  151.     a {
  152.       line-height: 1;
  153.       padding: 0 10px;
  154.       color: #999;
  155.       display: inline-block;
  156.  
  157.       ~ a {
  158.         border-left: 1px solid #ccc;
  159.       }
  160.     }
  161.   }
  162. }
  163.  
  164. .account-box {
  165.   .toggle {
  166.     padding: 15px 40px;
  167.     text-align: right;
  168.  
  169.     a {
  170.       color: $xtxColor;
  171.  
  172.       i {
  173.         font-size: 14px;
  174.       }
  175.     }
  176.   }
  177.  
  178.   .form {
  179.     padding: 0 20px 20px 20px;
  180.  
  181.     &-item {
  182.       margin-bottom: 28px;
  183.  
  184.       .input {
  185.         position: relative;
  186.         height: 36px;
  187.  
  188.         > i {
  189.           width: 34px;
  190.           height: 34px;
  191.           background: #cfcdcd;
  192.           color: #fff;
  193.           position: absolute;
  194.           left: 1px;
  195.           top: 1px;
  196.           text-align: center;
  197.           line-height: 34px;
  198.           font-size: 18px;
  199.         }
  200.  
  201.         input {
  202.           padding-left: 44px;
  203.           border: 1px solid #cfcdcd;
  204.           height: 36px;
  205.           line-height: 36px;
  206.           width: 100%;
  207.  
  208.           &.error {
  209.             border-color: $priceColor;
  210.           }
  211.  
  212.           &.active,
  213.           &:focus {
  214.             border-color: $xtxColor;
  215.           }
  216.         }
  217.  
  218.         .code {
  219.           position: absolute;
  220.           right: 1px;
  221.           top: 1px;
  222.           text-align: center;
  223.           line-height: 34px;
  224.           font-size: 14px;
  225.           background: #f5f5f5;
  226.           color: #666;
  227.           width: 90px;
  228.           height: 34px;
  229.           cursor: pointer;
  230.         }
  231.       }
  232.  
  233.       > .error {
  234.         position: absolute;
  235.         font-size: 12px;
  236.         line-height: 28px;
  237.         color: $priceColor;
  238.  
  239.         i {
  240.           font-size: 14px;
  241.           margin-right: 2px;
  242.         }
  243.       }
  244.     }
  245.  
  246.     .agree {
  247.       a {
  248.         color: #069;
  249.       }
  250.     }
  251.  
  252.     .btn {
  253.       display: block;
  254.       width: 100%;
  255.       height: 40px;
  256.       color: #fff;
  257.       text-align: center;
  258.       line-height: 40px;
  259.       background: $xtxColor;
  260.  
  261.       &.disabled {
  262.         background: #cfcdcd;
  263.       }
  264.     }
  265.   }
  266.  
  267.   .action {
  268.     padding: 20px 40px;
  269.     display: flex;
  270.     justify-content: space-between;
  271.     align-items: center;
  272.  
  273.     .url {
  274.       a {
  275.         color: #999;
  276.         margin-left: 10px;
  277.       }
  278.     }
  279.   }
  280. }
  281.  
  282. .subBtn {
  283.   background: $xtxColor;
  284.   width: 100%;
  285.   color: #fff;
  286. }
  287. </style>

②src/views/Layout/components/LayoutNav.vue

  1. <script setup></script>
  2.  
  3. <template>
  4.   <nav class="app-topnav">
  5.     <div class="container">
  6.       <ul>
  7.         <!-- 多模板渲染 区分登录状态和非登录状态 -->
  8.         <template v-if="false">
  9.           <li>
  10.             <a href="javascript:;"><i class="iconfont icon-user"></i>周杰伦</a>
  11.           </li>
  12.           <li>
  13.             <el-popconfirm
  14.               title="确认退出吗?"
  15.               confirm-button-text="确认"
  16.               cancel-button-text="取消"
  17.             >
  18.               <template #reference>
  19.                 <a href="javascript:;">退出登录</a>
  20.               </template>
  21.             </el-popconfirm>
  22.           </li>
  23.           <li><a href="javascript:;">我的订单</a></li>
  24.           <li><a href="javascript:;">会员中心</a></li>
  25.         </template>
  26.         <template v-else>
  27.           <li>
  28.             <a href="javascript:;" @click="$router.push('/login')">请先登录</a>
  29.           </li>
  30.           <li><a href="javascript:;">帮助中心</a></li>
  31.           <li><a href="javascript:;">关于我们</a></li>
  32.         </template>
  33.       </ul>
  34.     </div>
  35.   </nav>
  36. </template>
  37.  
  38. <style scoped lang="scss">
  39. <!-- ... ... -->
  40. </style>

二、登录 - 表单校验实现

1. 为什么需要校验

作用：前端提前校验可以省去一些错误的请求提交，为后端节省接口压力

2. 表单如何进行校验

Form 表单 | Element Plus

ElementPlus表单组件内置了表单校验功能，只需要按照组件要求配置必要参数即可。

思想：当功能很复杂时，通过多个组件各自负责某个功能，再组合成一个大功能是组件设计中的常用方法。

表单校验步骤

  • 1. 按照接口字段准备表单对象并绑定
  • 2. 按照产品要求准备规则对象并绑定
  • 3. 指定表单域的校验字段名
  • 4. 把表单对象进行双向绑定

自定义校验规则

ElementPlus表单组件内置了初始的校验配置，应付简单的校验只需要通过配置即可，如果想要定制一些特殊的校验需求，可以使用自定义校验规则，格式如下：

校验逻辑：如果勾选了协议框，通过校验，如果没有勾选，不通过校验

src/views/Login/index.vue

  1. <script setup>
  2. // 表单校验
  3. // 整个表单的校验规则
  4. // 1. 非空校验 required: true   message消息提示，trigger触发校验的时机：blur change
  5. // 2. 长度校验 min:xxx, max:xxx
  6. // 3. 正则校验 pattern: 正则规则  \S：非空字符
  7. // 4. 自定义校验 => 自己写逻辑校验（校验函数）
  8. //    validator: (rule, value, callback)
  9. //    (1)rule: 当前校验规则的相关信息
  10. //    (2)value: 所校验的表单元素目前的表单值
  11. //    (3)callback 无论成功还是失败，都需要callback回调
  12. //        - callback()校验成功
  13.  
  14. import { ref } from 'vue'
  15. const form = ref()
  16. // 1. 准备表单对象
  17. const formModel = ref({
  18.   account: '',
  19.   password: '',
  20.   agree: false
  21. })
  22.  
  23. // 2. 准备校验规则对象
  24. const rules = {
  25.   account: [
  26.     { required: true, message: '用户名不能为空', trigger: 'blur' },
  27.     {
  28.       pattern: /^\S{5,15}$/,
  29.       message: '账户名必须是5-15位的非空字符',
  30.       trigger: 'blur'
  31.     }
  32.   ],
  33.   password: [
  34.     { required: true, message: '密码不能为空', trigger: 'blur' },
  35.     {
  36.       pattern: /^\S{6,15}$/,
  37.       message: '密码必须是5-16位的非空字符',
  38.       trigger: 'blur'
  39.     }
  40.   ],
  41.   agree: [
  42.     {
  43.       // 自定义校验规则
  44.       validator: (rule, value, callback) => {
  45.         console.log(value)
  46.         // 判断是否勾选协议
  47.         if (!value) {
  48.           callback(new Error('请先勾选同意协议'))
  49.         } else {
  50.           callback()
  51.         }
  52.       }
  53.     }
  54.   ]
  55. }
  56. </script>
  57.  
  58. <template>
  59.   <div>
  60.     <header class="login-header">
  61.       <div class="container m-top-20">
  62.         <h1 class="logo">
  63.           <RouterLink to="/">小兔鲜</RouterLink>
  64.         </h1>
  65.         <RouterLink class="entry" to="/">
  66.           进入网站首页
  67.           <i class="iconfont icon-angle-right"></i>
  68.           <i class="iconfont icon-angle-right"></i>
  69.         </RouterLink>
  70.       </div>
  71.     </header>
  72.     <section class="login-section">
  73.       <div class="wrapper">
  74.         <nav>
  75.           <a href="javascript:;">账户登录</a>
  76.         </nav>
  77.         <div class="account-box">
  78.           <div class="form">
  79.             <el-form
  80.               :model="formModel"
  81.               :rules="rules"
  82.               ref="form"
  83.               label-position="right"
  84.               label-width="60px"
  85.               status-icon
  86.             >
  87.               <el-form-item label="账户" prop="account">
  88.                 <el-input
  89.                   v-model="formModel.account"
  90.                   placeholder="请输入账户名"
  91.                 />
  92.               </el-form-item>
  93.               <el-form-item label="密码" prop="password">
  94.                 <el-input
  95.                   v-model="formModel.password"
  96.                   placeholder="请输入密码"
  97.                 />
  98.               </el-form-item>
  99.               <el-form-item label-width="22px" prop="agree">
  100.                 <el-checkbox size="large" v-model="formModel.agree">
  101.                   我已同意隐私条款和服务条款
  102.                 </el-checkbox>
  103.               </el-form-item>
  104.               <el-button size="large" class="subBtn">点击登录</el-button>
  105.             </el-form>
  106.           </div>
  107.         </div>
  108.       </div>
  109.     </section>
  110.  
  111.     <footer class="login-footer">
  112.       <div class="container">
  113.         <p>
  114.           <a href="javascript:;">关于我们</a>
  115.           <a href="javascript:;">帮助中心</a>
  116.           <a href="javascript:;">售后服务</a>
  117.           <a href="javascript:;">配送与验收</a>
  118.           <a href="javascript:;">商务合作</a>
  119.           <a href="javascript:;">搜索推荐</a>
  120.           <a href="javascript:;">友情链接</a>
  121.         </p>
  122.         <p>CopyRight &copy; 小兔鲜儿</p>
  123.       </div>
  124.     </footer>
  125.   </div>
  126. </template>
  127.  
  128. <style scoped lang="scss">
  129. .login-header {
  130.   background: #fff;
  131.   border-bottom: 1px solid #e4e4e4;
  132.  
  133.   .container {
  134.     display: flex;
  135.     align-items: flex-end;
  136.     justify-content: space-between;
  137.   }
  138.  
  139.   .logo {
  140.     width: 200px;
  141.  
  142.     a {
  143.       display: block;
  144.       height: 132px;
  145.       width: 100%;
  146.       text-indent: -9999px;
  147.       background: url('@/assets/images/logo.png') no-repeat center 18px /
  148.         contain;
  149.     }
  150.   }
  151.  
  152.   .sub {
  153.     flex: 1;
  154.     font-size: 24px;
  155.     font-weight: normal;
  156.     margin-bottom: 38px;
  157.     margin-left: 20px;
  158.     color: #666;
  159.   }
  160.  
  161.   .entry {
  162.     width: 120px;
  163.     margin-bottom: 38px;
  164.     font-size: 16px;
  165.  
  166.     i {
  167.       font-size: 14px;
  168.       color: $xtxColor;
  169.       letter-spacing: -5px;
  170.     }
  171.   }
  172. }
  173.  
  174. .login-section {
  175.   background: url('@/assets/images/login-bg.png') no-repeat center / cover;
  176.   height: 488px;
  177.   position: relative;
  178.  
  179.   .wrapper {
  180.     width: 380px;
  181.     background: #fff;
  182.     position: absolute;
  183.     left: 50%;
  184.     top: 54px;
  185.     transform: translate3d(100px, 0, 0);
  186.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  187.  
  188.     nav {
  189.       font-size: 14px;
  190.       height: 55px;
  191.       margin-bottom: 20px;
  192.       border-bottom: 1px solid #f5f5f5;
  193.       display: flex;
  194.       padding: 0 40px;
  195.       text-align: right;
  196.       align-items: center;
  197.  
  198.       a {
  199.         flex: 1;
  200.         line-height: 1;
  201.         display: inline-block;
  202.         font-size: 18px;
  203.         position: relative;
  204.         text-align: center;
  205.       }
  206.     }
  207.   }
  208. }
  209.  
  210. .login-footer {
  211.   padding: 30px 0 50px;
  212.   background: #fff;
  213.  
  214.   p {
  215.     text-align: center;
  216.     color: #999;
  217.     padding-top: 20px;
  218.  
  219.     a {
  220.       line-height: 1;
  221.       padding: 0 10px;
  222.       color: #999;
  223.       display: inline-block;
  224.  
  225.       ~ a {
  226.         border-left: 1px solid #ccc;
  227.       }
  228.     }
  229.   }
  230. }
  231.  
  232. .account-box {
  233.   .toggle {
  234.     padding: 15px 40px;
  235.     text-align: right;
  236.  
  237.     a {
  238.       color: $xtxColor;
  239.  
  240.       i {
  241.         font-size: 14px;
  242.       }
  243.     }
  244.   }
  245.  
  246.   .form {
  247.     padding: 0 20px 20px 20px;
  248.  
  249.     &-item {
  250.       margin-bottom: 28px;
  251.  
  252.       .input {
  253.         position: relative;
  254.         height: 36px;
  255.  
  256.         > i {
  257.           width: 34px;
  258.           height: 34px;
  259.           background: #cfcdcd;
  260.           color: #fff;
  261.           position: absolute;
  262.           left: 1px;
  263.           top: 1px;
  264.           text-align: center;
  265.           line-height: 34px;
  266.           font-size: 18px;
  267.         }
  268.  
  269.         input {
  270.           padding-left: 44px;
  271.           border: 1px solid #cfcdcd;
  272.           height: 36px;
  273.           line-height: 36px;
  274.           width: 100%;
  275.  
  276.           &.error {
  277.             border-color: $priceColor;
  278.           }
  279.  
  280.           &.active,
  281.           &:focus {
  282.             border-color: $xtxColor;
  283.           }
  284.         }
  285.  
  286.         .code {
  287.           position: absolute;
  288.           right: 1px;
  289.           top: 1px;
  290.           text-align: center;
  291.           line-height: 34px;
  292.           font-size: 14px;
  293.           background: #f5f5f5;
  294.           color: #666;
  295.           width: 90px;
  296.           height: 34px;
  297.           cursor: pointer;
  298.         }
  299.       }
  300.  
  301.       > .error {
  302.         position: absolute;
  303.         font-size: 12px;
  304.         line-height: 28px;
  305.         color: $priceColor;
  306.  
  307.         i {
  308.           font-size: 14px;
  309.           margin-right: 2px;
  310.         }
  311.       }
  312.     }
  313.  
  314.     .agree {
  315.       a {
  316.         color: #069;
  317.       }
  318.     }
  319.  
  320.     .btn {
  321.       display: block;
  322.       width: 100%;
  323.       height: 40px;
  324.       color: #fff;
  325.       text-align: center;
  326.       line-height: 40px;
  327.       background: $xtxColor;
  328.  
  329.       &.disabled {
  330.         background: #cfcdcd;
  331.       }
  332.     }
  333.   }
  334.  
  335.   .action {
  336.     padding: 20px 40px;
  337.     display: flex;
  338.     justify-content: space-between;
  339.     align-items: center;
  340.  
  341.     .url {
  342.       a {
  343.         color: #999;
  344.         margin-left: 10px;
  345.       }
  346.     }
  347.   }
  348. }
  349.  
  350. .subBtn {
  351.   background: $xtxColor;
  352.   width: 100%;
  353.   color: #fff;
  354. }
  355. </style>

3. 整个表单的内容验证

思考：每个表单域都有自己的校验触发事件，如果用户一上来就点击登录怎么办呢？

答：在点击登录时需要对所有需要校验的表单进行统一校验

三、登录 - 基础登录业务实现

1. 封装登录接口 - src/apis/user.js

  1. import instance from '@/utils/http.js'
  2.  
  3. // 登录接口
  4. // export const loginAPI = ({ account, password }) => {
  5. //   instance.post('/login', { account, password })
  6. // }
  7. export const loginAPI = ({ account, password }) => {
  8.   return instance({
  9.     url: '/login',
  10.     method: 'POST',
  11.     data: {
  12.       account,
  13.       password
  14.     }
  15.   })
  16. }

2. 登录成功后续逻辑处理 - src/views/Login/index.vue

  1. <script setup>
  2. // 表单校验
  3. // 整个表单的校验规则
  4. // 1. 非空校验 required: true   message消息提示，trigger触发校验的时机：blur change
  5. // 2. 长度校验 min:xxx, max:xxx
  6. // 3. 正则校验 pattern: 正则规则  \S：非空字符
  7. // 4. 自定义校验 => 自己写逻辑校验（校验函数）
  8. //    validator: (rule, value, callback)
  9. //    (1)rule: 当前校验规则的相关信息
  10. //    (2)value: 所校验的表单元素目前的表单值
  11. //    (3)callback 无论成功还是失败，都需要callback回调
  12. //        - callback()校验成功
  13.  
  14. import { loginAPI } from '@/apis/user.js'
  15. import { ref } from 'vue'
  16. import { useRouter } from 'vue-router'
  17.  
  18. const form = ref(null)
  19. // 1. 准备表单对象
  20. const formModel = ref({
  21.   account: '',
  22.   password: '',
  23.   agree: false
  24. })
  25.  
  26. // 2. 准备校验规则对象
  27. const rules = {
  28.   account: [
  29.     { required: true, message: '用户名不能为空', trigger: 'blur' },
  30.     {
  31.       pattern: /^\S{5,15}$/,
  32.       message: '账户名必须是5-15位的非空字符',
  33.       trigger: 'blur'
  34.     }
  35.   ],
  36.   password: [
  37.     { required: true, message: '密码不能为空', trigger: 'blur' },
  38.     {
  39.       pattern: /^\S{6,15}$/,
  40.       message: '密码必须是5-16位的非空字符',
  41.       trigger: 'blur'
  42.     }
  43.   ],
  44.   agree: [
  45.     {
  46.       // 自定义校验规则
  47.       validator: (rule, value, callback) => {
  48.         console.log(value)
  49.         // 判断是否勾选协议
  50.         if (!value) {
  51.           callback(new Error('请先勾选同意协议'))
  52.         } else {
  53.           callback()
  54.         }
  55.       }
  56.     }
  57.   ]
  58. }
  59.  
  60. // 带r，调用方法；不带r，获取参数
  61. const router = useRouter()
  62. const doLogin = async () => {
  63.   // 登录之前，先进行校验。校验成功，发请求；校验失败，自动提示
  64.   await form.value.validate()
  65.   const { account, password } = formModel.value
  66.   await loginAPI({ account, password })
  67.   ElMessage.success('登录成功')
  68.   // 跳转首页
  69.   router.replace({ path: '/' })
  70. }
  71. </script>
  72.  
  73. <template>
  74.   <div>
  75.     <header class="login-header">
  76.       <div class="container m-top-20">
  77.         <h1 class="logo">
  78.           <RouterLink to="/">小兔鲜</RouterLink>
  79.         </h1>
  80.         <RouterLink class="entry" to="/">
  81.           进入网站首页
  82.           <i class="iconfont icon-angle-right"></i>
  83.           <i class="iconfont icon-angle-right"></i>
  84.         </RouterLink>
  85.       </div>
  86.     </header>
  87.     <section class="login-section">
  88.       <div class="wrapper">
  89.         <nav>
  90.           <a href="javascript:;">账户登录</a>
  91.         </nav>
  92.         <div class="account-box">
  93.           <!-- 
  94.               (1) el-form => :model="ruleForm"      绑定的整个form的数据对象 { xxx, xxx, xxx }
  95.               (2) el-form => :rules="rules"         绑定的整个rules规则对象  { xxx, xxx, xxx }
  96.               (3) 表单元素 => v-model="ruleForm.xxx" 给表单元素，绑定form的子属性
  97.               (4) el-form-item => prop配置生效的是哪个校验规则 (和rules中的字段要对应)
  98.            -->
  99.           <div class="form">
  100.             <el-form
  101.               :model="formModel"
  102.               :rules="rules"
  103.               ref="form"
  104.               label-position="right"
  105.               label-width="60px"
  106.               status-icon
  107.             >
  108.               <el-form-item label="账户" prop="account">
  109.                 <el-input
  110.                   v-model="formModel.account"
  111.                   placeholder="请输入账户名"
  112.                 />
  113.               </el-form-item>
  114.               <el-form-item label="密码" prop="password">
  115.                 <el-input
  116.                   v-model="formModel.password"
  117.                   placeholder="请输入密码"
  118.                 />
  119.               </el-form-item>
  120.               <el-form-item label-width="22px" prop="agree">
  121.                 <el-checkbox size="large" v-model="formModel.agree">
  122.                   我已同意隐私条款和服务条款
  123.                 </el-checkbox>
  124.               </el-form-item>
  125.               <el-button @click="doLogin" size="large" class="subBtn"
  126.                 >点击登录</el-button
  127.               >
  128.             </el-form>
  129.           </div>
  130.         </div>
  131.       </div>
  132.     </section>
  133.  
  134.     <footer class="login-footer">
  135.       <div class="container">
  136.         <p>
  137.           <a href="javascript:;">关于我们</a>
  138.           <a href="javascript:;">帮助中心</a>
  139.           <a href="javascript:;">售后服务</a>
  140.           <a href="javascript:;">配送与验收</a>
  141.           <a href="javascript:;">商务合作</a>
  142.           <a href="javascript:;">搜索推荐</a>
  143.           <a href="javascript:;">友情链接</a>
  144.         </p>
  145.         <p>CopyRight &copy; 小兔鲜儿</p>
  146.       </div>
  147.     </footer>
  148.   </div>
  149. </template>

3. .eslintrc.cjs - 配置全局变量

  1. /* eslint-env node */
  2. require('@rushstack/eslint-patch/modern-module-resolution')
  3.  
  4. module.exports = {
  5.   root: true,
  6.   extends: [
  7.     'plugin:vue/vue3-essential',
  8.     'eslint:recommended',
  9.     '@vue/eslint-config-prettier/skip-formatting'
  10.   ],
  11.   parserOptions: {
  12.     ecmaVersion: 'latest'
  13.   },
  14.   rules: {
  15.     // prettier专注于代码的美观度 (格式化工具)
  16.     // 前置：
  17.     // 1. 禁用格式化插件 prettier  format on save 关闭
  18.     // 2. 安装Eslint插件, 并配置保存时自动修复
  19.     'prettier/prettier': [
  20.       'warn',
  21.       {
  22.         singleQuote: true, // 单引号
  23.         semi: false, // 无分号
  24.         printWidth: 80, // 每行宽度至多80字符
  25.         trailingComma: 'none', // 不加对象|数组最后逗号
  26.         endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
  27.       }
  28.     ],
  29.     // ESLint关注于规范, 如果不符合规范，报错
  30.     'vue/multi-word-component-names': [
  31.       'warn',
  32.       {
  33.         ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
  34.       }
  35.     ],
  36.     'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验 (props解构丢失响应式)
  37.     // 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
  38.     'no-undef': 'error'
  39.   },
  40.   // 全局变量
  41.   globals: {
  42.     ElMessage: 'readonly',
  43.     ElMessageBox: 'readonly',
  44.     ElLoading: 'readonly'
  45.   }
  46. }

4. 登录失败的逻辑处理 - src/utils/http.js

  1. import axios from 'axios'
  2.  
  3. // 创建axios实例
  4. const instance = axios.create({
  5.   baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  6.   timeout: 5000
  7. })
  8.  
  9. // axios请求拦截器
  10. instance.interceptors.request.use(
  11.   (config) => {
  12.     return config
  13.   },
  14.   (e) => Promise.reject(e)
  15. )
  16.  
  17. // axios响应式拦截器
  18. instance.interceptors.response.use(
  19.   (res) => res.data,
  20.   (e) => {
  21.     console.log(e)
  22.     // 统一错误提示
  23.     ElMessage({
  24.       type: 'warning',
  25.       message: e.response.data.message
  26.     })
  27.     return Promise.reject(e)
  28.   }
  29. )
  30.  
  31. export default instance

四、登录 - Pinia管理用户数据

1. 为什么要用Pinia管理数据

由于用户数据的特殊性，在很多组件中都有可能进行共享，共享的数据使用Pinia管理会更加方便

2. 如何使用Pinia管理数据

遵循理念：和数据相关的所有操作（state + action）都放到Pinia中，组件只负责触发action函数

①src/stores/user.js

  1. import { defineStore } from 'pinia'
  2. import { loginAPI } from '@/apis/user'
  3. import { ref } from 'vue'
  4.  
  5. export const useUserStore = defineStore(
  6.   'user',
  7.   () => {
  8.     // 1. 定义管理用户数据的state
  9.     const userInfo = ref({})
  10.  
  11.     // 2. 定义获取数据的action函数
  12.     const getUserInfo = async ({ account, password }) => {
  13.       const res = await loginAPI({ account, password })
  14.       userInfo.value = res.result
  15.     }
  16.     // 3. 以对象的形式把state和action return
  17.     return {
  18.       userInfo,
  19.       getUserInfo
  20.     }
  21.   },
  22.   {
  23.     persist: true
  24.   }
  25. )

②src/views/Login/index.vue

  1. <script setup>
  2. import { useUserStore } from '@/stores/user.js'
  3.  
  4. const userStore = useUserStore()
  5.  
  6. // ... ...
  7.  
  8. // 带r，调用方法；不带r，获取参数
  9. const router = useRouter()
  10. const doLogin = async () => {
  11.   // 登录之前，先进行校验。校验成功，发请求；校验失败，自动提示
  12.   await form.value.validate()
  13.   const { account, password } = formModel.value
  14.   await userStore.getUserInfo({ account, password })
  15.   ElMessage.success('登录成功')
  16.   // 跳转首页
  17.   router.replace({ path: '/' })
  18. }
  19. </script>
  20.

3. Pinia用户数据持久化

持久化用户数据说明

1. 用户数据中有一个关键的数据叫做Token(用来标识当前用户是否登录)，而Token持续一段时间才会过期

2. Pinia的存储是基于内存的，刷新就丢失，为了保持登录状态就要做到刷新不丢失，需要配合持久化进行存储。

目的：保持token不丢失，保持登录状态

最终效果：操作state时会自动把用户数据在本地的localStorage也存一份，刷新的时候会从localStorage中先取

快速开始 | pinia-plugin-persistedstate

运行机制：在设置state的时候会自动把数据同步给localstorage，在获取state数据的时候会优先从localstorage中获取。

①安装插件

pnpm i pinia-plugin-persistedstate

②将插件添加到pinia实例上 - main.js

  1. import { createApp } from 'vue'
  2. import { createPinia } from 'pinia'
  3. import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
  4.  
  5. import App from './App.vue'
  6. import router from './router'
  7. // 引入初始化样式文件
  8. import '@/styles/common.scss'
  9. // 引入懒加载指令插件并注册
  10. import { lazyPlugin } from '@/direactives'
  11. // 引入全局组件插件
  12. import { componentPlugin } from '@/components/index.js'
  13.  
  14. const app = createApp(App)
  15. const pinia = createPinia()
  16.  
  17. pinia.use(piniaPluginPersistedstate)
  18. app.use(pinia)
  19. app.use(router)
  20. app.use(lazyPlugin)
  21. app.use(componentPlugin)
  22.  
  23. app.mount('#app')

③创建Store时，将persist选项设置为true

  1. import { defineStore } from 'pinia'
  2. import { loginAPI } from '@/apis/user'
  3. import { ref } from 'vue'
  4.  
  5. export const useUserStore = defineStore(
  6.   'user',
  7.   () => {
  8.     // 1. 定义管理用户数据的state
  9.     const userInfo = ref({})
  10.  
  11.     // 2. 定义获取数据的action函数
  12.     const getUserInfo = async ({ account, password }) => {
  13.       const res = await loginAPI({ account, password })
  14.       userInfo.value = res.result
  15.     }
  16.     // 3. 以对象的形式把state和action return
  17.     return {
  18.       userInfo,
  19.       getUserInfo
  20.     }
  21.   },
  22.   {
  23.     persist: true
  24.   }
  25. )

五、登录 - 登录和非登录状态的模板适配

1. 需求理解

src/views/Layout/components/LayoutNav.vue

  1. <script setup>
  2. import { useUserStore } from '@/stores/user.js'
  3. const userStore = useUserStore()
  4. </script>
  5.  
  6. <template>
  7.   <nav class="app-topnav">
  8.     <div class="container">
  9.       <ul>
  10.         <!-- 多模板渲染 区分登录状态和非登录状态 -->
  11.         <!-- 判断是否有token -->
  12.         <template v-if="userStore.userInfo.token">
  13.           <li>
  14.             <a href="javascript:;">
  15.               <i class="iconfont icon-user"></i>
  16.               {{ userStore.userInfo.nickname || userStore.userInfo.account }}
  17.             </a>
  18.           </li>
  19.           <li>
  20.             <el-popconfirm
  21.               title="确认退出吗?"
  22.               confirm-button-text="确认"
  23.               cancel-button-text="取消"
  24.             >
  25.               <template #reference>
  26.                 <a href="javascript:;">退出登录</a>
  27.               </template>
  28.             </el-popconfirm>
  29.           </li>
  30.           <li><a href="javascript:;">我的订单</a></li>
  31.           <li><a href="javascript:;">会员中心</a></li>
  32.         </template>
  33.         <template v-else>
  34.           <li>
  35.             <a href="javascript:;" @click="$router.push('/login')">请先登录</a>
  36.           </li>
  37.           <li><a href="javascript:;">帮助中心</a></li>
  38.           <li><a href="javascript:;">关于我们</a></li>
  39.         </template>
  40.       </ul>
  41.     </div>
  42.   </nav>
  43. </template>

六、登录 - 请求拦截器携带Token

1. 为什么要在请求拦截器携带Token

Token作为用户标识，在很多个接口中都需要携带Token才可以正确获取数据，所以需要在接口调用时携带Token。另外，为了统一控制采取请求拦截器携带的方案。

2. 如何配置

Axios请求拦截器可以在接口正式发起之前对请求参数做一些事情，通常Token数据会被注入到请求header中，格式按照后端要求的格式进行拼接处理

  1. instance.interceptors.request.use(config => {
  2.   const userStore = useUserStore()
  3.   const token = userStore.userInfo.token
  4.   if( token ) {
  5.     config.headers.Authorization = `Bearer ${token}`
  6.   }
  7.   return config
  8. }, e=> Promise.reject(e))

七、登录 - 退出登录功能实现

1. 退出登录业务实现

Popconfirm 气泡确认框 | Element Plus

①新增清除用户信息action - src/stores/user.js

  1. import { defineStore } from 'pinia'
  2. import { loginAPI } from '@/apis/user'
  3. import { ref } from 'vue'
  4.  
  5. export const useUserStore = defineStore(
  6.   'user',
  7.   () => {
  8.     // 1. 定义管理用户数据的state
  9.     const userInfo = ref({})
  10.  
  11.     // 2. 定义获取数据的action函数
  12.     const getUserInfo = async ({ account, password }) => {
  13.       const res = await loginAPI({ account, password })
  14.       userInfo.value = res.result
  15.     }
  16.     // 退出登录时清除用户信息
  17.     const clearUserInfo = () => {
  18.       userInfo.value = {}
  19.     }
  20.  
  21.     // 3. 以对象的形式把state和action return
  22.     return {
  23.       userInfo,
  24.       getUserInfo,
  25.       clearUserInfo
  26.     }
  27.   },
  28.   {
  29.     persist: true
  30.   }
  31. )

②组件中执行业务逻辑 - src/views/Layout/components/LayoutNav.vue

  1. <script setup>
  2. import { useUserStore } from '@/stores/user.js'
  3. import { useRouter } from 'vue-router'
  4. const userStore = useUserStore()
  5. const router = useRouter()
  6.  
  7. const confirm = () => {
  8.   // 清除登录信息
  9.   userStore.clearUserInfo()
  10.   // 跳转到登录页
  11.   router.push('/login')
  12. }
  13. </script>
  14.  
  15. <template>
  16.   <nav class="app-topnav">
  17.     <div class="container">
  18.       <ul>
  19.         <!-- 多模板渲染 区分登录状态和非登录状态 -->
  20.         <!-- 判断是否有token -->
  21.         <template v-if="userStore.userInfo.token">
  22.           <li>
  23.             <a href="javascript:;">
  24.               <i class="iconfont icon-user"></i>
  25.               {{ userStore.userInfo.nickname || userStore.userInfo.account }}
  26.             </a>
  27.           </li>
  28.           <li>
  29.             <el-popconfirm
  30.               title="确认退出吗?"
  31.               confirm-button-text="确认"
  32.               cancel-button-text="取消"
  33.               @confirm="confirm"
  34.             >
  35.               <template #reference>
  36.                 <a href="javascript:;">退出登录</a>
  37.               </template>
  38.             </el-popconfirm>
  39.           </li>
  40.           <li><a href="javascript:;">我的订单</a></li>
  41.           <li><a href="javascript:;">会员中心</a></li>
  42.         </template>
  43.         <template v-else>
  44.           <li>
  45.             <a href="javascript:;" @click="$router.push('/login')">请先登录</a>
  46.           </li>
  47.           <li><a href="javascript:;">帮助中心</a></li>
  48.           <li><a href="javascript:;">关于我们</a></li>
  49.         </template>
  50.       </ul>
  51.     </div>
  52.   </nav>
  53. </template>
  54.  
  55.

八、登录 - Token失效401拦截

1. 业务背景

Token的有效性可以保持一定时间，如果用户一段时间不做任何操作，Token就会失效，使用失效的Token再去请求一些接口，接口就会报401状态码错误，需要我们做额外处理

两个需要思考的问题：

1. 我们能确定用户到底是在访问哪个接口时出现的401错误吗？在什么位置去拦截这个401？

答：响应拦截器

2. 检测到401之后又该干什么呢？

答：清除掉过期的用户信息，跳转到登录页

解决方案：在axios响应拦截器做统一处理

src/utils/http.js

  1. import axios from 'axios'
  2. import { useUserStore } from '@/stores/user.js'
  3. import router from '@/router'
  4.  
  5. // 创建axios实例
  6. const instance = axios.create({
  7.   baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  8.   timeout: 5000
  9. })
  10.  
  11. // axios请求拦截器
  12. instance.interceptors.request.use(
  13.   (config) => {
  14.     // 1. 从pinia获取token数据
  15.     const userStore = useUserStore()
  16.     // 2. 按照后端的要求拼接token数据
  17.     const token = userStore.userInfo.token
  18.     if (token) {
  19.       config.headers.Authorization = `Bearer ${token}`
  20.     }
  21.     return config
  22.   },
  23.   (e) => Promise.reject(e)
  24. )
  25.  
  26. // axios响应式拦截器
  27. instance.interceptors.response.use(
  28.   (res) => res.data,
  29.   (e) => {
  30.     const userStore = useUserStore()
  31.     // 统一错误提示
  32.     ElMessage({
  33.       type: 'warning',
  34.       message: e.response.data.message
  35.     })
  36.  
  37.     // 401 token失效处理
  38.     if (e.response.status === 401) {
  39.       // 1. 清除本地用户信息
  40.       userStore.clearUserInfo()
  41.       // 2. 跳转到登录页（进入到详情页才会）
  42.       router.push('/login')
  43.     }
  44.     return Promise.reject(e)
  45.   }
  46. )
  47.  
  48. export default instance

九、购物车功能实现

1. 购物车业务逻辑梳理拆解

1. 整个购物车的实现分为两个大分支，本地购物车操作和接口购物车操作

2. 由于购物车数据的特殊性，采取pinia管理购物车列表数据并添加持久化缓存

2. 本地购物车 - 加入购物车实现

Input Number 数字输入框 | Element Plus

①封装购物车模块 - src/stores/cart.js

  1. // 封装购物车模块
  2. import { ref } from 'vue'
  3. import { defineStore } from 'pinia'
  4.  
  5. export const useCartStore = defineStore(
  6.   'cart',
  7.   () => {
  8.     // 1. 定义state - cartList
  9.     const cartList = ref([])
  10.     // 2. 定义action - addCart
  11.     const addCart = (goods) => {
  12.       // 添加购物车操作
  13.       // 思路：通过匹配传递过来的商品对象中是skuId能不能在cartList中找到，找到了就是添加过
  14.       const item = cartList.value.find((item) => goods.skuId === item.skuId)
  15.       if (item) {
  16.         // 已添加过，count + 1
  17.         item.count++
  18.       } else {
  19.         // 没有添加过，直接push
  20.         cartList.value.push(goods)
  21.       }
  22.     }
  23.  
  24.     return {
  25.       cartList,
  26.       addCart
  27.     }
  28.   },
  29.   {
  30.     persist: true
  31.   }
  32. )

②src/views/Detail/index.vue

  1. <script setup>
  2. // ... ... 
  3. import { useCartStore } from '@/stores/cart.js'
  4.  
  5. const cartStore = useCartStore()
  6.  
  7. // sku规格被操作时
  8. let skuObj = {}
  9. const skuChange = (sku) => {
  10.   console.log(sku)
  11.   skuObj = sku
  12. }
  13.  
  14. const count = ref(1)
  15. const handleChange = (count) => {
  16.   console.log(count)
  17. }
  18.  
  19. // 添加购物车
  20. const addCart = () => {
  21.   if (skuObj.skuId) {
  22.     // 规格已选择
  23.     cartStore.addCart({
  24.       id: goods.value.id,
  25.       name: goods.value.name,
  26.       picture: goods.value.mainPictures[0],
  27.       price: goods.value.price,
  28.       count: count.value,
  29.       skuId: skuObj.skuId,
  30.       attrsText: skuObj.specsText,
  31.       selected: true
  32.     })
  33.     ElMessage.success('加入购物车成功')
  34.   } else {
  35.     // 规格没有选择，提示用户
  36.     ElMessage.warning('请选择规格')
  37.   }
  38. }
  39. </script>
  40.  
  41. <template>
  42.   <!-- ... ... -->
  43.   <!-- sku组件 -->
  44.   <XtxSku :goods="goods" @change="skuChange"></XtxSku>
  45.   <!-- 数据组件 -->
  46.   <el-input-number
  47.      v-model="count"
  48.      @change="handleChange"
  49.      :min="1"
  50.   />
  51.   <!-- 按钮组件 -->
  52.   <div>
  53.     <el-button @click="addCart" size="large" class="btn">
  54.       加入购物车
  55.     </el-button>
  56.   </div>
  57. <!-- ... ... -->
  58. </template>
  59.

3. 本地购物车 - 头部购物车列表渲染

①头部购物车组件 - src/views/Layout/components/HeaderCart.vue

  1. <script setup>
  2. import { useCartStore } from '@/stores/cart.js'
  3. const cartStore = useCartStore()
  4. </script>
  5.  
  6. <template>
  7.   <div class="cart">
  8.     <a class="curr" href="javascript:;">
  9.       <i class="iconfont icon-cart"></i><em>{{ cartStore.cartList.length }}</em>
  10.     </a>
  11.     <div class="layer">
  12.       <div class="list">
  13.         <div class="item" v-for="i in cartStore.cartList" :key="i">
  14.           <RouterLink to="">
  15.             <img :src="i.picture" alt="" />
  16.             <div class="center">
  17.               <p class="name ellipsis-2">
  18.                 {{ i.name }}
  19.               </p>
  20.               <p class="attr ellipsis">{{ i.attrsText }}</p>
  21.             </div>
  22.             <div class="right">
  23.               <p class="price">&yen;{{ i.price }}</p>
  24.               <p class="count">x{{ i.count }}</p>
  25.             </div>
  26.           </RouterLink>
  27.           <i
  28.             class="iconfont icon-close-new"
  29.             @click="store.delCart(i.skuId)"
  30.           ></i>
  31.         </div>
  32.       </div>
  33.       <div class="foot">
  34.         <div class="total">
  35.           <p>共 10 件商品</p>
  36.           <p>&yen; 100.00</p>
  37.         </div>
  38.         <el-button size="large" type="primary">去购物车结算</el-button>
  39.       </div>
  40.     </div>
  41.   </div>
  42. </template>
  43.  
  44. <style scoped lang="scss">
  45. .cart {
  46.   width: 50px;
  47.   position: relative;
  48.   z-index: 600;
  49.  
  50.   .curr {
  51.     height: 32px;
  52.     line-height: 32px;
  53.     text-align: center;
  54.     position: relative;
  55.     display: block;
  56.  
  57.     .icon-cart {
  58.       font-size: 22px;
  59.     }
  60.  
  61.     em {
  62.       font-style: normal;
  63.       position: absolute;
  64.       right: 0;
  65.       top: 0;
  66.       padding: 1px 6px;
  67.       line-height: 1;
  68.       background: $helpColor;
  69.       color: #fff;
  70.       font-size: 12px;
  71.       border-radius: 10px;
  72.       font-family: Arial;
  73.     }
  74.   }
  75.  
  76.   &:hover {
  77.     .layer {
  78.       opacity: 1;
  79.       transform: none;
  80.     }
  81.   }
  82.  
  83.   .layer {
  84.     opacity: 0;
  85.     transition: all 0.4s 0.2s;
  86.     transform: translateY(-200px) scale(1, 0);
  87.     width: 400px;
  88.     height: 400px;
  89.     position: absolute;
  90.     top: 50px;
  91.     right: 0;
  92.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  93.     background: #fff;
  94.     border-radius: 4px;
  95.     padding-top: 10px;
  96.  
  97.     &::before {
  98.       content: '';
  99.       position: absolute;
  100.       right: 14px;
  101.       top: -10px;
  102.       width: 20px;
  103.       height: 20px;
  104.       background: #fff;
  105.       transform: scale(0.6, 1) rotate(45deg);
  106.       box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
  107.     }
  108.  
  109.     .foot {
  110.       position: absolute;
  111.       left: 0;
  112.       bottom: 0;
  113.       height: 70px;
  114.       width: 100%;
  115.       padding: 10px;
  116.       display: flex;
  117.       justify-content: space-between;
  118.       background: #f8f8f8;
  119.       align-items: center;
  120.  
  121.       .total {
  122.         padding-left: 10px;
  123.         color: #999;
  124.  
  125.         p {
  126.           &:last-child {
  127.             font-size: 18px;
  128.             color: $priceColor;
  129.           }
  130.         }
  131.       }
  132.     }
  133.   }
  134.  
  135.   .list {
  136.     height: 310px;
  137.     overflow: auto;
  138.     padding: 0 10px;
  139.  
  140.     &::-webkit-scrollbar {
  141.       width: 10px;
  142.       height: 10px;
  143.     }
  144.  
  145.     &::-webkit-scrollbar-track {
  146.       background: #f8f8f8;
  147.       border-radius: 2px;
  148.     }
  149.  
  150.     &::-webkit-scrollbar-thumb {
  151.       background: #eee;
  152.       border-radius: 10px;
  153.     }
  154.  
  155.     &::-webkit-scrollbar-thumb:hover {
  156.       background: #ccc;
  157.     }
  158.  
  159.     .item {
  160.       border-bottom: 1px solid #f5f5f5;
  161.       padding: 10px 0;
  162.       position: relative;
  163.  
  164.       i {
  165.         position: absolute;
  166.         bottom: 38px;
  167.         right: 0;
  168.         opacity: 0;
  169.         color: #666;
  170.         transition: all 0.5s;
  171.       }
  172.  
  173.       &:hover {
  174.         i {
  175.           opacity: 1;
  176.           cursor: pointer;
  177.         }
  178.       }
  179.  
  180.       a {
  181.         display: flex;
  182.         align-items: center;
  183.  
  184.         img {
  185.           height: 80px;
  186.           width: 80px;
  187.         }
  188.  
  189.         .center {
  190.           padding: 0 10px;
  191.           width: 200px;
  192.  
  193.           .name {
  194.             font-size: 16px;
  195.           }
  196.  
  197.           .attr {
  198.             color: #999;
  199.             padding-top: 5px;
  200.           }
  201.         }
  202.  
  203.         .right {
  204.           width: 100px;
  205.           padding-right: 20px;
  206.           text-align: center;
  207.  
  208.           .price {
  209.             font-size: 16px;
  210.             color: $priceColor;
  211.           }
  212.  
  213.           .count {
  214.             color: #999;
  215.             margin-top: 5px;
  216.             font-size: 16px;
  217.           }
  218.         }
  219.       }
  220.     }
  221.   }
  222. }
  223. </style>

②导入渲染 - src/views/Layout/components/LayoutHeader.vue

  1. <script setup>
  2. import { useCategoryStore } from '@/stores/category.js'
  3. import HeaderCart from './HeaderCart.vue'
  4.  
  5. // 使用pinia中的数据
  6. const categoryStore = useCategoryStore()
  7. </script>
  8.  
  9. <template>
  10.   <header class="app-header">
  11.     <div class="container">
  12.       <h1 class="logo">
  13.         <RouterLink to="/">小兔鲜</RouterLink>
  14.       </h1>
  15.       <ul class="app-header-nav">
  16.         <li
  17.           class="home"
  18.           v-for="item in categoryStore.categoryList"
  19.           :key="item.id"
  20.         >
  21.           <RouterLink active-class="active" :to="`/category/${item.id}`">{{
  22.             item.name
  23.           }}</RouterLink>
  24.         </li>
  25.       </ul>
  26.       <div class="search">
  27.         <i class="iconfont icon-search"></i>
  28.         <input type="text" placeholder="搜一搜" />
  29.       </div>
  30.       <!-- 头部购物车 -->
  31.       <HeaderCart></HeaderCart>
  32.     </div>
  33.   </header>
  34. </template>

4. 本地购物车 - 头部购物车删除实现

①src/stores/cart.js

  1. // 封装购物车模块
  2. import { ref } from 'vue'
  3. import { defineStore } from 'pinia'
  4.  
  5. export const useCartStore = defineStore(
  6.   'cart',
  7.   () => {
  8.     // 1. 定义state - cartList
  9.     const cartList = ref([])
  10.     // 2. 定义action - addCart
  11.     // 添加购物车
  12.     const addCart = (goods) => {
  13.       // 添加购物车操作
  14.       // 思路：通过匹配传递过来的商品对象中是skuId能不能在cartList中找到，找到了就是添加过
  15.       const item = cartList.value.find((item) => goods.skuId === item.skuId)
  16.       if (item) {
  17.         // 已添加过，count + 1
  18.         item.count++
  19.       } else {
  20.         // 没有添加过，直接push
  21.         cartList.value.push(goods)
  22.       }
  23.     }
  24.  
  25.     // 删除购物车
  26.     const delCart = (skuId) => {
  27.       // 思路：1. 找到要删除的下标值 - splice
  28.       //       2. 使用组件的过滤方法 - filter
  29.       const idx = cartList.value.findIndex((item) => skuId === item.skuId)
  30.       cartList.value.splice(idx, 1)
  31.     }
  32.  
  33.     return {
  34.       cartList,
  35.       addCart,
  36.       delCart
  37.     }
  38.   },
  39.   {
  40.     persist: true
  41.   }
  42. )

②src/views/Layout/components/HeaderCart.vue

  1. <script setup>
  2. import { useCartStore } from '@/stores/cart.js'
  3. const cartStore = useCartStore()
  4. </script>
  5.  
  6. <template>
  7.   <div class="cart">
  8.     <a class="curr" href="javascript:;">
  9.       <i class="iconfont icon-cart"></i>
  10.       <em v-if="cartStore.cartList.length">{{ cartStore.cartList.length }}</em>
  11.     </a>
  12.     <div class="layer">
  13.       <div class="list">
  14.         <div class="item" v-for="i in cartStore.cartList" :key="i">
  15.           <RouterLink to="">
  16.             <img :src="i.picture" alt="" />
  17.             <div class="center">
  18.               <p class="name ellipsis-2">
  19.                 {{ i.name }}
  20.               </p>
  21.               <p class="attr ellipsis">{{ i.attrsText }}</p>
  22.             </div>
  23.             <div class="right">
  24.               <p class="price">&yen;{{ i.price }}</p>
  25.               <p class="count">x{{ i.count }}</p>
  26.             </div>
  27.           </RouterLink>
  28.           <i
  29.             class="iconfont icon-close-new"
  30.             @click="cartStore.delCart(i.skuId)"
  31.           ></i>
  32.         </div>
  33.       </div>
  34.       <div class="foot">
  35.         <div class="total">
  36.           <p>共 10 件商品</p>
  37.           <p>&yen; 100.00</p>
  38.         </div>
  39.         <el-button
  40.           @click="$router.push('/cartlist')"
  41.           size="large"
  42.           type="primary"
  43.           >去购物车结算</el-button
  44.         >
  45.       </div>
  46.     </div>
  47.   </div>
  48. </template>

5. 本地购物车 - 头部购物车统计计算

实现思路：计算属性

计算逻辑是什么：

  • 1. 商品总数计算逻辑：商品列表中的所有商品count累加之和
  • 2. 商品总价钱计算逻辑：商品列表中的所有商品的count * price累加之和

①src/stores/cart.js

  1. // 封装购物车模块
  2. import { ref, computed } from 'vue'
  3. import { defineStore } from 'pinia'
  4.  
  5. export const useCartStore = defineStore(
  6.   'cart',
  7.   () => {
  8.     // ... ...
  9.  
  10.     // 计算属性
  11.     // 1. 总的数量 所有项的count之和
  12.     const allCount = computed(() =>
  13.       cartList.value.reduce((sum, item) => sum + item.count, 0)
  14.     )
  15.     // 2. 总价 所有项的count * price之和
  16.     const allPrice = computed(() =>
  17.       cartList.value.reduce((sum, item) => sum + item.count * item.price, 0)
  18.     )
  19.     return {
  20.       cartList,
  21.       addCart,
  22.       delCart,
  23.       allCount,
  24.       allPrice
  25.     }
  26.   },
  27.   {
  28.     persist: true
  29.   }
  30. )

②src/views/Layout/components/HeaderCart.vue

  1.       <div class="foot">
  2.         <div class="total">
  3.           <p>共 {{ cartStore.allCount }} 件商品</p>
  4.           <p>&yen; {{ cartStore.allPrice.toFixed(2) }}</p>
  5.         </div>
  6.         <el-button
  7.           @click="$router.push('/cartlist')"
  8.           size="large"
  9.           type="primary"
  10.           >去购物车结算</el-button
  11.         >
  12.       </div>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/669548
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号