vue学习106-120

创建项目p106


router，store和app.vue不用删
清一下router里的路由配置

vant组件库p107

目标：认识第三方vue组件库vant-ui（cv战士）
封装好了的组件整合在一起就是组件库
http://vant-contrib.gitee.io/vant/v2/#/zh-CN/
vue2用vant2，vue3用vant3和4
在这里插入图片描述
vant全部导入太慢了，按需导入推荐
安装npm i vant@latest-v2 -S
阿里云安装镜像 npm config set registry https://registry.npmmirror.com/

引入

vant网址http://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart
cv到main.js
方式一. 自动按需引入组件 (推荐)
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

###### 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{"plugins": [["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]]
}// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
};
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

Tips: 如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入。

方式二. 手动按需引入组件（要css，不推荐）
在不使用插件的情况下，可以手动引入需要的组件。

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

方式三. 导入所有组件
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

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

Tips: 配置按需引入后，将不允许直接导入所有组件。

按需导入


安装插件每次都要重新弄npm i babel-plugin-import -D

module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
};

在这里插入图片描述
放main.js里太多了，导入组件单独分一个vant-ui.js放在utils文件夹里
如果渲染不出来，重新打开编程软件和终端
在这里插入图片描述

postcss插件-实现vw适配p108

postcss写多少px直接转换为多少vw
在这里插入图片描述
npm下载插件：npm install postcss-px-to-viewport@1.1.1 -D --force//npm install postcss-px-to-viewport --legacy-peer-deps/
要在根目录上（和src同级的）创建postcss.config.js
然后官网cv：

// postcss.config.js
module.exports = {plugins: {'postcss-px-to-viewport': {viewportWidth: 375,},},
};

在这里插入图片描述

路由设计配置p109

一级路由配置

单个页面独立展示的是一级路由
在这里插入图片描述
每个一级路由要建成一个文件夹
在这里插入图片描述
文件夹里只有一个时直接简写文件夹
path中表示首页的是/

二级路由-底部导航tabbar

vant组件库有
在这里插入图片描述
vant2里有基础组件-icon图标
tabber标签栏-自定义颜色
在这里插入图片描述
点击切换用vant2的路由模式
在这里插入图片描述
默认首页在routes里加redirect
在这里插入图片描述
在这里插入图片描述

登录页静态布局+图形验证码功能p110

在这里插入图片描述

头部navbar

通用样式覆盖
在这里插入图片描述

request模块-axios封装-13min

使用axios请求后端接口，单独封装到一个request模块
request模块放在utils/request.js文件里
接口文档地址： https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080
基地址：http://cba.itlike.com/public/index.php?s=/api/
request文件里面放axios官方文档-axios实例（https://www.axios-http.cn/docs/instance）
在这里插入图片描述

  1. 创建axios实例
    创建axios实例不会污染原始的axios实例，如果触及就会改底层参数
  2. 自定义配置-请求/响应 拦截器
添加请求拦截器

给原本axios实例加配置，没加到创建的实例上，要想不污染原始，就改成instance（创建的axios实例上）
在这里插入图片描述
axios的接口文档要从智慧商城找（http://cba.itlike.com/public/index.php?s=/api/）

const instance = axios.create({baseURL: 'https://some-domain.com/api/',//接口文档地址timeout: 1000,//超时时间headers: {'X-Custom-Header': 'foobar'}//这个没用
});

在这里插入图片描述

添加响应拦截器

在这里插入图片描述

导出配置好的实例（instance）

获取图片验证码数据结构，要复制地址

  1. base64：图片
  2. key：唯一标识
  3. md5：验证
    在这里插入图片描述

图形验证码

在这里插入图片描述

获取短信验证码-39min

前两个缺一不可
4. captchacode 图形验证码值
5. captchakey验证码的唯一标识
6. mobile手机号
在这里插入图片描述

api接口模块-封装图片验证码接口p111

api模块（存放封装好的请求函数）
以前的模式

  1. 页面请求代码太多，可阅读性不高
  2. 相同请求没有复用
  3. 请求没有统一管理
    封装api模块的好处
  4. 请求与页面逻辑分离
  5. 相同的请求可以直接复用
  6. 请求进行了统一管理
    在这里插入图片描述

toast轻提示p112

在这里插入图片描述
点击出现轻提示
在这里插入图片描述
进入页面出现轻提示
在这里插入图片描述
this.$toast()只能用在实例组件里
在这里插入图片描述

短信验证倒计时p113

在这里插入图片描述
totalSecond和second要一致
封装短信验证请求接口智慧商城里
import { getMsgCode } from '@/api/login’别忘了导入

<template><div class="login" @click="getPicCode"><button>wds</button><input type="number"><button @click="getCode">{{ second===totalSecond? '获取验证码':second+'秒后重新发送'}}</button></div>
</template><script>
import { getMsgCode } from '@/api/login'export default {name: 'login-page',data () {return {picKey: '',picUrl: '',totalSecond: 6, // 总秒数second: 6, // 当前秒数timer: null, // 定时器idmobile: '', // 手机号picCode: ''// 用户输入的图形验证码}},methods: {// 获取图片验证码async getPicCode () {// Toast('获取图形验证码成功')this.$toast('wdf')},// 校验手机号和图形验证码是否合法validFn () {if (!/^1[3-9]\d{9}$/.test(this.mobile)) {this.$toast('请输入正确手机号')return false}if (!/^\w{4}$/.test(this.picCode)) {this.$toast('请输入正确手机号')return false}return true},// 获取验证码async getCode () {if (!this.validFn()) {return}// 当前没有定时器开着，且totalsecond和second一致（秒数归位）才可以倒计时if (!this.timer && this.totalSecond === this.second) {// 发送请求await getMsgCode(this.captchaCode, this.captchaKey, this.mobile)// 开启倒计时setInterval(() => {this.second--if (this.second <= 0) {clearInterval(this.timer)this.timer = null// 重置定时器idthis.second = this.totalSecond// 归位}}, 1000)}}},destroyed () {clearInterval(this.timer)// 离开页面清除定时器}
}
</script><style></style>

响应拦截处理器-统一处理错误p115

status

// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么(默认axios会多包装一层data，需要响应拦截器中处理一下)const res = response.dataif (res.status !== 200) {// 给提示Toast(res.message)// 抛出一个错误的promisereturn Promise.reject(res.message)}return response.data
}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error)
})

在这里插入图片描述

登录权证信息存储token和userld（user模块）/将token权证信息存入vuexP116

user模块放在store下面
在这里插入图片描述
在这里插入图片描述

export default {namespaced: true,// 提供数据state () {return {// 个人权证相关userInfo: {token: '',userId: ''}}},// 提供修改数据的方法的mutations: {},// 提供异步操作actions: {},// 提供基于state派生出来的属性getters: {}
}

storage存储模块-vuex持久化处理P117

vuex刷新会丢失，storage模块放utils里

// 约定一个通用的键名
const INFO_KEY = 'hm-shopping-info'// 获取个人信息
export const getInfo = () => {const defultObj = { token: '', userId: '' }const result = localStorage.getItem(INFO_KEY)return result ? JSON.parse(result) : defultObj
}// 设置个人信息
export const setInfo = (obj) => {localStorage.setItem(INFO_KEY, JSON.stringify(obj))
}// 移除个人信息
export const removeInfo = () => {localStorage.removeItemItem(INFO_KEY)
}
import { getInfo, setInfo } from '@/utils/storage'export default {namespaced: true,// 提供数据state () {return {// 个人权证相关userInfo: getInfo}},// 提供修改数据的方法的mutations: {// 所有mutations的第一个参数，都是statesetUserInfo (state, obj) {state.userInfo = objsetInfo(obj)}},// 提供异步操作actions: {},// 提供基于state派生出来的属性getters: {}
}

添加请求loading效果P118

toast轻提示中的加载提示
在这里插入图片描述

页面访问拦截p119

在这里插入图片描述

// 所有的路由在真正访问到之前，都会经过全局前置守卫
// 只有全局前置守卫放行了，才能到达对应的页面// 全局前置导航守卫
// to：到哪里去，到哪去的完整路由信息对象（路径，参数）
// from：到哪里来，从哪来的完整路由信息对象（路径，参数）
// next：是否放行
// （1）next()直接放行，放行到to要去的路径
// （2）next（路径）进行拦截，拦截到next里面配置的路径
router.beforeEach((to, from, next) => {// ...// 返回 false 以取消导航return false
})

在这里插入图片描述

// 定义一个数组，专门用户存放所有需要权限访问的页面
const authUrls= ['']
router.beforeEach((to, from, next) => {// ...// 返回 false 以取消导航// return falseif (!authUrls.includes(to.path)) {// 非权限页面，直接放行next()return}// 是权限页面，需要判断tokenconst token = store.getters.tokenif (token) {next()} else {next('/login')}
})

getters: {token (state) {return state.user.userInfo.token}},

首页-静态页面结构准备&动态渲染P120

  1. 静态结构准备（直接cv）
<template><div class="home"><!-- 导航条 --><van-nav-bar title="智慧商城" fixed /><!-- 搜索框 --><van-searchreadonlyshape="round"background="#f1f1f2"placeholder="请在此输入搜索关键词"@click="$router.push('/search')"/><!-- 轮播图 --><van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"><van-swipe-item><img src="@/assets/banner1.jpg" alt=""></van-swipe-item><van-swipe-item><img src="@/assets/banner2.jpg" alt=""></van-swipe-item><van-swipe-item><img src="@/assets/banner3.jpg" alt=""></van-swipe-item></van-swipe><!-- 导航 --><van-grid column-num="5" icon-size="40"><van-grid-itemv-for="item in 10" :key="item"icon="http://cba.itlike.com/public/uploads/10001/20230320/58a7c1f62df4cb1eb47fe83ff0e566e6.png"text="新品首发"@click="$router.push('/category')"/></van-grid><!-- 主会场 --><div class="main"><img src="@/assets/main.png" alt=""></div><!-- 猜你喜欢 --><div class="guess"><p class="guess-title">—— 猜你喜欢 ——</p><div class="goods-list"><GoodsItem v-for="item in 10" :key="item"></GoodsItem></div></div></div></template><script>
import GoodsItem from '@/components/GoodsItem.vue'
export default {name: 'HomePage',components: {GoodsItem}
}
</script><style lang="less" scoped>// 主题 padding.home {padding-top: 100px;padding-bottom: 50px;}// 导航条样式定制.van-nav-bar {z-index: 999;background-color: #c21401;::v-deep .van-nav-bar__title {color: #fff;}}// 搜索框样式定制.van-search {position: fixed;width: 100%;top: 46px;z-index: 999;}// 分类导航部分.my-swipe .van-swipe-item {height: 185px;color: #fff;font-size: 20px;text-align: center;background-color: #39a9ed;}.my-swipe .van-swipe-item img {width: 100%;height: 185px;}// 主会场.main img {display: block;width: 100%;}// 猜你喜欢.guess .guess-title {height: 40px;line-height: 40px;text-align: center;}// 商品样式.goods-list {background-color: #f6f6f6;}</style>

还要导入
在这里插入图片描述
2. 封装接口
导入api
在这里插入图片描述

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

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

相关文章

2024.02.13作业

2024.02.13作业

21. c 22. b 23. b 5先出栈意味着1234都在栈内&#xff0c;此时1不能比2&#xff0c;3先出栈 24. b, c, d: 10, 12, 120 25. 2, 5 26. 数组越界&#xff0c;可能出现段错误 27. 0, 41 28. 1, 320 29. *a *b; *b *a - *b; *a - *b; 30. 0x801005&#xff1b;0x8…
阅读更多...
计算机设计大赛 深度学习YOLOv5车辆颜色识别检测 - python opencv

计算机设计大赛 深度学习YOLOv5车辆颜色识别检测 - python opencv

文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0…
阅读更多...
Java实现贫困地区人口信息管理系统 JAVA+Vue+SpringBoot+MySQL

Java实现贫困地区人口信息管理系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 人口信息管理模块2.2 精准扶贫管理模块2.3 特殊群体管理模块2.4 案件信息管理模块2.5 物资补助模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 人口表3.2.2 扶贫表3.2.3 特殊群体表3.2.4 案件表3.2.5 物资补助表 四…
阅读更多...
NARF关键点检测及SAC-IA粗配准

NARF关键点检测及SAC-IA粗配准

一、生成对应深度图 C #include <iostream> #include <pcl/io/pcd_io.h> #include <pcl/point_types.h> #include <pcl/common/io.h> #include <pcl/range_image/range_image.h> #include <pcl/visualization/range_image_visualizer.h>…
阅读更多...
动态内存管理：new和delete的底层探索

动态内存管理：new和delete的底层探索

之前我们在C语言上是学过malloc和calloc还要realloc等函数来在堆上获取相应的内存&#xff0c;但是这些函数是存在缺陷的&#xff0c;今天引入对new和delete的学习&#xff0c;来了解new和delete的底层实现。 首先就是在C中我们为什么要对内存进行区域的分块&#xff1f; 答案…
阅读更多...
ChatGPT高效提问—prompt实践（漏洞风险分析-重构建议-识别内存泄漏）

ChatGPT高效提问—prompt实践（漏洞风险分析-重构建议-识别内存泄漏）

ChatGPT高效提问—prompt实践&#xff08;漏洞风险分析-重构建议-识别内存泄漏&#xff09; 1.1 漏洞和风险分析 ChatGPT还可以帮助开发人员预测代码的潜在风险&#xff0c;识别其中的安全漏洞&#xff0c;而不必先运行它&#xff0c;这可以让开发人员及早发现错误&#xff0…
阅读更多...
【vscode】在vscode中如何导入自定义包

【vscode】在vscode中如何导入自定义包

只需要额外添加这两条语句即可&#xff1a; import os,sys sys.path.append("../..") 需要注意的是&#xff0c;ipynb 文件打开的工作目录是文件本身的路径&#xff0c;而 py 文件打开的工作路径是 vscode 打开的路径。 相比较而言 pycharm 中创建好项目之后并不…
阅读更多...
FT2232调试记录（2）

FT2232调试记录（2）

FT2232调试记录 &#xff08;1&#xff09;获取当前连接的FTDI设备通道个数:&#xff08;2&#xff09;获取当前连接的设备通道的信息:&#xff08;3&#xff09;配置SPI的通道:&#xff08;4&#xff09;如何设置GPIO:&#xff08;5&#xff09;DEMO测试&#xff1a; FT2232调…
阅读更多...
【阅读笔记】空域保边降噪《Side Window Filtering》

【阅读笔记】空域保边降噪《Side Window Filtering》

1、保边滤波背景 保边滤波器的代表包括双边滤波、引导滤波&#xff0c;但是这类滤波器有一个问题&#xff0c;它们均将待处理的像素点放在了方形滤波窗口的中心。但如果待处理的像素位于图像纹理或者边缘&#xff0c;方形滤波核卷积的处理结果会导致这个边缘变模糊。 基于这个…
阅读更多...
揭秘 2024 春晚刘谦魔术——代码还原

揭秘 2024 春晚刘谦魔术——代码还原

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、魔术大概流程 二、代码实现各个步骤 2.1 partition&#xff08;对半撕牌&#xff09; 2.2 bottom&#xff08;将 n 张牌置底…
阅读更多...
基于微信小程序的智能社区服务小程序，附源码

基于微信小程序的智能社区服务小程序，附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
谈谈Lombok的坑

谈谈Lombok的坑

Lombok 是一个 Java 库&#xff0c;通过注解的方式在编译时自动为类生成 getter、setter、equals、hashCode 等方法&#xff0c;以简化代码和提高开发效率。本文主要谈谈代码简化背后的代价。 引入Lombok之前是怎么做的 IDE中添加getter/setter, toString等代码&#xff1a; …
阅读更多...
单链表的介绍

单链表的介绍

一.单链表的概念及结构 概念&#xff1a;链表是⼀种物理存储结构上⾮连续、⾮顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表 中的指针链接次序实现的 。 结构&#xff1a;根据个人理解&#xff0c;链表的结构就像火车厢一样&#xff0c;一节一节连在一起的&#x…
阅读更多...
实现安全性

实现安全性

实现安全性 问题陈述 Chris希望阅读位于服务器上的电子邮件消息。他将自己的登录信息发送到服务器已进行验证。因此，Chris决定用基于表单的验证来验证他的登录信息。但是，他首先决定只用基于表单的验证测试登录页面 。 解决方案 要解决上述问题，Chris需要执行以下任务： 用…
阅读更多...
从零开始做题：逆向 ret2shellcode jarvisoj level1

从零开始做题：逆向 ret2shellcode jarvisoj level1

1.题目信息 BUUCTF在线评测 2.原理 篡改栈帧上的返回地址为攻击者手动传入的shellcode所在缓冲区地址&#xff0c;并且该区域有执行权限。 rootpwn_test1604:/ctf/work/9# gdb ./level1 GNU gdb (Ubuntu 7.11.1-0ubuntu1~16.5) 7.11.1 Copyright (C) 2016 Free Software Fou…
阅读更多...
【C++航海王：追寻罗杰的编程之路】关于模板，你知道哪些？

【C++航海王：追寻罗杰的编程之路】关于模板，你知道哪些？

目录 1 -> 泛型编程 2 -> 函数模板 2.1 -> 函数模板概念 2.2 -> 函数模板格式 2.3 -> 函数模板的原理 2.4 -> 函数模板的实例化 2.5 -> 函数参数的匹配原则 3 -> 类模板 3.1 -> 类模板的定义格式 3.2 -> 类模板的实例化 1 -> 泛型编…
阅读更多...
分布式文件系统 SpringBoot+FastDFS+Vue.js【一】

分布式文件系统 SpringBoot+FastDFS+Vue.js【一】

分布式文件系统 SpringBootFastDFSVue.js【一】 一、分布式文件系统1.1.文件系统1.2.什么是分布式文件系统1.3.分布式文件系统的出现1.3.主流的分布式文件系统1.4.分布式文件服务提供商1.4.1.阿里OSS1.4.2.七牛云存储1.4.3.百度云存储 二、fastDFS2.1.fastDSF介绍2.2.为什么要使…
阅读更多...
tuple的使用例题（三元组）

tuple的使用例题（三元组）

题目大意&#xff1a;给一定关系&#xff0c;判断后面给的跟前面的有无矛盾 一开始还在想一些构造的操作&#xff0c;后面实在想不出来看题解&#xff0c;就是暴力啊...... 但是这种数据结构tuple&#xff08;元组&#xff09;确实是没见过&#xff0c;于是写篇总结 见这篇ht…
阅读更多...
【MySQL】外键约束的删除和更新总结

【MySQL】外键约束的删除和更新总结

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-7niJLSFaPo0wso60 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…
阅读更多...
六、Redis之数据持久化及高频面试题

六、Redis之数据持久化及高频面试题

6.1 数据持久化 官网文档地址&#xff1a;https://redis.io/docs/manual/persistence/ Redis提供了主要提供了 2 种不同形式的持久化方式&#xff1a; RDB&#xff08;Redis数据库&#xff09;&#xff1a;RDB 持久性以指定的时间间隔执行数据集的时间点快照。AOF&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023