Vue智慧商城项目

创建项目

vue组件库 — vant-ui(常用于移动端)

Vant 2 - 轻量、可靠的移动端组件库

安装vant

npm i vant@latest-v2 -S

引入组件

按需导入和全部导入

全部导入

整个组件库的所有组件都导进来,缺点是增加了代码包体积

main.js

import Vue from 'vue'import Vant from 'vant'
import 'vant/lib/index.css'//插件安装初始化:内部会将vant所有组件进行导入注册
Vue.use(Vant)

自动按需导入

安装插件:npm i babel-plugin-import -D  

-D:仅在开发过程中使用

--force 会无视冲突,并强制下载npm库资源,当有资源冲突时覆盖掉原先的版本

--legacy-peer-deps-告诉npm忽略项目中引入的 各个modules之间的相同modules 但不同版本的问题 并继续安装,保证各个引入的依赖之间对自身所使用的不同版本modules共存

babel.config.js中配置

main.js

测试使用

效果展示:

问题:按需导入的配置会很长

解决:抽离,专门封装到utils文件夹下的js文件里


项目中的vw适配

postcss 插件实现px到vw的自动转换

  • 安装插件

yarn add postcss-px-to-viewport@1.1.1 -D

  • 根目录新建postcss.config.js文件,填入配置
module.exports = {plugins: {'postcss-px-to-viewport': {//vw 适配的标准屏的宽度viewportWidth: 375}}
}

比如设计图拿的是750;2倍图调成1倍图375 => 适配375标准屏幕

                             640                             320 => 适配320标准屏幕;viewportWidth就要改成320


路由设计配置

怎么区分一级路由和二级路由:单个页面独立展示的是一级路由;带导航的,里面嵌的是二级路由

配置所有的一级路由

配置二级路由 

先实现底部的tabber
  • 在vant-ui.js中按需引入

  • layout.vue粘贴官方代码

  • 改文字
  • 改图标

  • 改颜色

 效果展示:

基于底部导航,完成二级路由的配置
  • 配置二级路由规则

  • 配置导航链接

  • 配置路由出口

一个小问题:网页默认访问 / ;我们给 / 添加一个重定向,重定向到home

效果展示:


登录页静态布局

头部的样式定制

按需导入

使用

通用样式覆盖 —— 所有页面左箭头变成灰黑色

上面那种写法等价于

或者改成

选择器权重问题

在 CSS 里面,如果有多个选择器作用在同一元素上面,那么会按照优先级顺序进行样式的选取;优先级越高,浏览器最终就显示哪种样式

举例说明:

下方静态结构

login/index.vue

<template><div class="login"><!-- 头部 - vant当中的NavBar导航栏组件 --><!-- left-arrow 左箭头  @click-left="$router.go(-1)" 返回上一页 --><van-nav-bar title="会员登录" left-arrow @click-left="$router.go(-1)" /><!-- 主体 --><div class="container"><div class="title"><h3>手机号登录</h3><p>未注册的手机号登录后将自动注册</p></div><div class="form"><div class="form-item"><input class="inp" maxlength="11" placeholder="请输入手机号码" type="text"></div><div class="form-item"><input class="inp" maxlength="5" placeholder="请输入图形验证码" type="text"><img src="@/assets/code.png" alt=""></div><div class="form-item"><input class="inp" placeholder="请输入短信验证码" type="text"><button>获取验证码</button></div></div><div class="login-btn">登录</div></div></div>
</template><script>
export default {name: 'LoginPage'
}
</script><style lang="less" scoped>
.container {padding: 49px 29px;.title {margin-bottom: 20px;h3 {font-size: 26px;font-weight: normal;}p {// 网页中每行文字之间的距离line-height: 40px;font-size: 14px;color: #b8b8b8;}}.form-item {border-bottom: 1px solid #f3f1f2;padding: 8px;margin-bottom: 14px;display: flex;align-items: center;.inp {display: block;border: none;outline: none;height: 32px;font-size: 14px;flex: 1;}img {width: 94px;height: 31px;}button {height: 31px;border: none;font-size: 13px;color: #cea26a;background-color: transparent;padding-right: 9px;}}.login-btn {width: 100%;height: 42px;margin-top: 39px;background: linear-gradient(90deg,#ecb53c,#ff9211);color: #fff;border-radius: 39px;box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);letter-spacing: 2px;display: flex;justify-content: center;align-items: center;}
}
</style>

效果展示:

request模块 — axios封装

目标:将axios请求方法,封装到request模块

接口文档:wiki - 智慧商城-实战项目

以获取图形验证码为例

  • 安装axios

yarn add axios

  • 新建request模块

utils/request.js

  • 创建axios实例

Axios 实例 | Axios中文文档 | Axios中文网

  • 配置导出实例

配置

什么是拦截器

在发请求和获取服务器响应数据的过程中,可以设置拦截器将请求或响应的数据流拦截下来,做相关操作以后再放行,有请求拦截器和响应拦截器两种

导出

  • 测试 

图片验证码功能

目标:基于请求回来的base64图片,实现图形验证码功能

将来在获取短信验证码的时候会用到 用户输入的图形验证码 和 请求响应回来的图形验证码key

需求:

  • 动态将请求回来(响应返回的)的base64图片,解析渲染出来

存在一个问题:每次刷新有一瞬间的图片损坏

图形验证码

 

因为一上来并没有默认给图片;改进:当picUrl有的时候才去加载图片

图形验证码改进

  • 点击验证码图片盒子,要刷新验证码 

封装图片验证码接口

目标:将请求封装成函数,统一放到API模块

好处:与页面逻辑分离;相同的请求在不同页面可以直接复用;请求进行了统一管理

步骤:

  • 在api文件中新建一个与登录相关的js请求模块

  • 封装请求函数

  • 页面中导入调用

Toast 轻提示

Vant 2 - 轻量、可靠的移动端组件库

使用场景:

在短信验证之前要输入手机号,那我们就要在短信验证之前加个校验,校验通过才发请求 —— 请输入正确的手机号

将来发送成功也要有个提示 —— 发送成功,请注意查收

步骤:

  • 注册安装

  • 两种使用方式:

导入调用(组件内index.vue 或 非组件内main.js都可使用)

效果展示:

通过this直接调用(必须在组件内)

本质是将方法注册挂载到了Vue原型上 Vue.prototype.$toast

扩展:

效果展示:

短信验证倒计时

步骤:

点击“获取验证码”,实现倒计时效果

  • 准备data数据

  • 给按钮注册点击事件

  • 开启倒计时

  • 离开页面 销毁定时器

倒计时之前进行校验处理(手机号校验、验证码校验)

封装短信验证请求接口,发送请求添加提示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/486178.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

特朗普画像

任务内容 Description 特朗普当选了&#xff0c;网上流传着很多段子&#xff0c;也出了特朗普的头像。有人说&#xff0c;特朗普 的头像像一团云。所以今年马云去了美国和特朗普谈中美企业的发展。那么你能帮 忙打印出特朗普的头像吗&#xff1f; 抽象派认为&#xff0c;特朗普…

【NIPS2024】Unique3D:从单张图像高效生成高质量的3D网格

背景&#xff08;现有方法的不足&#xff09;&#xff1a; 基于Score Distillation Sampling &#xff08;SDS&#xff09;的方法&#xff1a;从大型二维扩散模型中提取3D知识&#xff0c;生成多样化的3D结果&#xff0c;但存在每个案例长时间优化问题/不一致问题。 目前通过微…

cocotb value cocotb—基础语法对照篇

cocotb—基础语法对照篇 import cocotb from cocotb.triggers import Timer from adder_model import adder_model from cocotb.clock import Clock from cocotb.triggers import RisingEdge import randomcocotb.test() async def adder_basic_test(dut):"""Te…

万物可爬(以爬取浏览器井盖图片和豆瓣电影名字为例)

我们以爬取 井盖图片 这个链接中的图片为例&#xff1a; 点击F12 并选中其中一张图片 &#xff0c;得到它的信息。具体如下&#xff1a;我们可以编写对应的正则表达式&#xff1a; <img[^>]*src"(.*?)"[^>]*alt"井盖图片 的图像结果"[^>]*&g…

MySQL-DDL之数据库操作

文章目录 一. 创建数据库1. 直接创建数据库&#xff0c;如果存在则报错2. 如果数据库不存在则创建3. 创建数据库时设置字符集4. 栗子 二. 查看数据库1. 查看数据库 三. 删除数据库1. 删除数据库 四. 使用数据库1. 使用数据库2. 查看正在使用的数据库 数据定义语言&#xff1a;简…

3D 生成重建020-Gaussian Grouping在场景中分割并编辑一切

3D 生成重建020-Gaussian Grouping在场景中分割并编辑一切 文章目录 0 论文工作1 方法2 实验结果 0 论文工作 最近提出的高斯Splatting方法实现了高质量的实时三维场景新视角合成。然而&#xff0c;它仅仅关注外观和几何建模&#xff0c;缺乏细粒度的物体级场景理解。为了解决…

Unity 使用LineRenderer制作模拟2d绳子

效果展示&#xff1a; 实现如下&#xff1a; 首先&#xff0c;直接上代码&#xff1a; using System.Collections; using System.Collections.Generic; using UnityEngine;public class LineFourRender : MonoBehaviour {public Transform StartNode;public Transform MidNod…

Linux-ADC驱动实验

上一章我们讲解了如何给 ICM20608 编写 IIO 驱动&#xff0c;ICM20608 本质就是 ADC&#xff0c;因此纯粹的 ADC 驱动也是 IIO 驱动框架的。本章我们就来学习一下如何使用 I.MX6ULL 内部的 ADC&#xff0c;并且在学习巩固一下 IIO 驱动。 ADC 驱动源码简析 设备树下的 ADC 节点…

Rigol DP711自动控制--SCPI命令

通过串口的SCPI命令来控制通道输入输出 也可以用UltraSigma UI来发送SCPI 物理连接&#xff1a; Pin2_2, Pin3_3, Pin5_5 串口命令控制&#xff1a; 命令&#xff1a;9600&#xff0c; 8bit, None SCPI CMD(Standard Commands for Programmable Instruments) OUTPut CH1, On…

Unity类银河战士恶魔城学习总结(P167 Blackhole additional vfx 黑洞技能额外特效)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 为黑洞技能增加了额外的特效 BlackHole_Skill_Controller.cs 功能概要&#xff1a; 1. 黑洞技能的初始化与配置 SetupBlackhole: 设置黑…

小红薯x-s算法最新补环境教程12-06更新(下)

在上一篇文章中已经讲了如何去定位x-s生成的位置&#xff0c;本篇文章就直接开始撸代码吧 如果没看过的话可以看&#xff1a;小红薯最新x-s算法分析12-06&#xff08;x-s 56&#xff09;&#xff08;上&#xff09;-CSDN博客 1、获取加密块代码 首先来到参数生成的位置&…

【银河麒麟操作系统真实案例分享】内存黑洞导致服务器卡死分析全过程

了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer.kylinos.cn 文档中心&#xff1a;https://documentkylinos.cn 现象描述 机房显示器连接服务器后黑屏&#xff…

“为您的家电穿上防震铠甲:优质电器缓冲器

在地震频发地区或日常生活中&#xff0c;确保家电的安全和稳定至关重要。为了防止地震、意外碰撞或其他外力对家电造成损害&#xff0c;采用优质的电器缓冲器就像是为家电穿上了一层坚固的“防震铠甲”。这不仅能够有效减少因震动导致的损坏风险&#xff0c;还能显著延长家电的…

Cherno C++学习笔记 P32 字符串

这篇文章我们来讲字符串。字符串可以说是最重要的变量类型了&#xff0c;因为对字符串的读写极大地影响到我们的程序和用户之间的交互。甚至很多很庞大的程序就只是在处理字符串。 对于字符串&#xff0c;我们同时需要有关于数组和指针的关系&#xff0c;字符串的实现与数组是…

Visual Studio 2022 项目配置常用选项

作为一名C++开发者,经常需要配置第三方库,今天来跟大家截图一下,方便大家快速配置: 头文件包含目录: 或者: 库文件包含目录:

leetcode每日一题(20241207)(20241204补)

leetcode每日一题&#xff08;20241206&#xff09;和补一下 &#xff08;20241204&#xff09;的这天的 &#xff08;20241204): 2056. 棋盘上有效移动组合的数目:题目描述&#xff1a; 有一个 8 x 8 的棋盘&#xff0c;它包含 n 个棋子&#xff08;棋子包括车&#xff0c;后…

AJAX和XHR、fetch、axios的关系

AJAX中有两套原生的API&#xff0c;一个是XHR(XMLHttpRequest)&#xff0c;一个是Fetch API axios是第三方库&#xff0c;在浏览器环境中使用的是XHR umi-request也是第三方库&#xff0c;在浏览器环境中使用的是Fetch 在 AJAX&#xff08;Asynchronous JavaScript and XML&am…

Sarcomere仿人灵巧手ARTUS,20个自由度拓宽机器人作业边界

Sarcomere Dynamics 是一家深度技术先驱&#xff0c;通过开发和商业化仿人机械来改变机器人行业。专注于为科研人员&#xff0c;系统集成商和制造商提供更实惠、更轻便且更灵活的末端执行器替代品。凭借创新的致动器技术&#xff0c;创造了一款紧凑、轻便且非常坚固的机械手Art…

【Python库安装】Python环境安装hdf4处理库pyhdf

目录 pyhdf库简介功能简介 pyhdf库安装1. 使用 pip 安装&#xff08;推荐方法&#xff09;2. 从源码安装3. conda安装 参考 pyhdf库简介 pyhdf 是一个 Python 库&#xff0c;用于读取和处理 HDF4 格式的文件&#xff08;注意&#xff1a;HDF5 格式文件需要用 h5py 库&#xff…

34.1 uber开源的m3db简介

本节重点介绍 : m3db自己的定位m3db自己的架构m3db自己的组件 两句话简介 M3最初是在优步开发的&#xff0c;目的是提供对优步业务运营&#xff0c;微服务和基础架构的可视性由于M3具有轻松进行水平扩展的能力&#xff0c;因此它为所有监视用例提供了一个集中式存储解决方案…