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}},

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

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

相关文章

Codeforces Round 925 (Div. 3) E. Anna and the Valentine‘s Day Gift (Java)

Codeforces Round 925 (Div. 3) E. Anna and the Valentine‘s Day Gift (Java)

Codeforces Round 925 (Div. 3) E. Anna and the Valentine’s Day Gift (Java) 比赛链接&#xff1a;Codeforces Round 925 (Div. 3) E题传送门&#xff1a;E. Anna and the Valentine’s Day Gift 题目&#xff1a;E. Anna and the Valentine’s Day Gift 样例 #1 样例输…
阅读更多...
git stash 正确用法

git stash 正确用法

目录 一、背景 二、使用 2.1 使用之前&#xff0c;先简单了解下 git stash 干了什么&#xff1a; 2.2 git stash 相关命令 2.3 使用流程 1. 执行 git stash 2. 查看刚才保存的工作进度 git stash list 3. 这时候在看分支已经是干净无修改的(改动都有暂存到 stash) 4. 现在…
阅读更多...
NetMizer 日志管理系统 多处前台RCE漏洞复现

NetMizer 日志管理系统 多处前台RCE漏洞复现

0x01 产品简介 NetMizer是提供集成应用交付和应用安全解决方案以实现业务智能网络的优秀全球供应商,为全球企业和运营商提供确保关键业务应用的全面可用性、高性能和完善的安全性的解决方案。 0x02 漏洞概述 NetMizer 日志管理系统position.php、hostdelay.php、等接口处存在…
阅读更多...
二叉树基础总结

二叉树基础总结

目录 树的定义&#xff1a; 深度和高度&#xff1a; 二叉树 由来 二叉树种类&#xff1a; 满二叉树&#xff1a; 完全二叉树&#xff1a; 严格二叉树&#xff08;Strict Binary Tree&#xff09;&#xff1a; 平衡二叉树&#xff08;Balanced Binary Tree&#xff09;&…
阅读更多...
Pandas数据库大揭秘：read_sql、to_sql 参数详解与实战篇【第81篇—Pandas数据库】

Pandas数据库大揭秘：read_sql、to_sql 参数详解与实战篇【第81篇—Pandas数据库】

Pandas数据库大揭秘&#xff1a;read_sql、to_sql 参数详解与实战篇 Pandas是Python中一流的数据处理库&#xff0c;而数据库则是数据存储和管理的核心。将两者结合使用&#xff0c;可以方便地实现数据的导入、导出和分析。本文将深入探讨Pandas中用于与数据库交互的两个关键方…
阅读更多...
【ArcGIS Pro二次开发】(79)：符号系统_CIMUniqueValueRenderer

【ArcGIS Pro二次开发】(79)：符号系统_CIMUniqueValueRenderer

CIMUniqueValueRenderer是ArcGIS Pro SDK中的一个类&#xff0c;用于创建唯一值渲染器&#xff08;Unique Value Renderer&#xff09;。 在ArcGIS Pro中长这样&#xff1a; 通过对CIMUniqueValueRenderer的操作&#xff0c;可以对符号系统进行更改&#xff0c;实现很多功能。…
阅读更多...
【机器学习案例4】为机器学习算法编码分类数据【含源码】

【机器学习案例4】为机器学习算法编码分类数据【含源码】

目录 编码分类数据 序数编码 标签编码 一次性编码 目标编码 目标编码的优点 目标编码的缺点 在现实生活中，收集的原始数据很少采用我们可以直接用于机器学习模型的格式，即数值型数据。因此，需要进行一些预处理，以便以正确的格式呈现数据、选择信息丰富的数据或降低其…
阅读更多...
计算机服务器中了360后缀勒索病毒怎么办？360后缀勒索病毒处理流程

计算机服务器中了360后缀勒索病毒怎么办？360后缀勒索病毒处理流程

网络技术的不断应用与发展&#xff0c;为企业的生产运营提供了有利保障&#xff0c;越来越多的企业走向数字化办公模式&#xff0c;并且企业的发展离不开数据支撑&#xff0c;重视数据安全成为了众多企业关心的主要话题。春节前后&#xff0c;云天数据恢复中心接到很多企业的求…
阅读更多...
Python环境下基于最大离散重叠小波变换和支持向量回归的金融时间序列预测

Python环境下基于最大离散重叠小波变换和支持向量回归的金融时间序列预测

金融时间序列具有非线性、高频性、随机性等特点&#xff0c;其波动情况不仅与当前股票市场、房地产市场、贸易市场等有强联动性&#xff0c;而且大幅度起伏对于其他市场有较大的影响和冲击。由于金融市场受多种因素影响且各影响因素间也存在一定复杂动态交互关系&#xff0c;导…
阅读更多...
代码随想录刷题笔记 DAY 26 | 组合总和 No.39 | 组合求和 II No.40 | 分割回文串 No.131

代码随想录刷题笔记 DAY 26 | 组合总和 No.39 | 组合求和 II No.40 | 分割回文串 No.131

文章目录 Day 2501. 组合总和&#xff08;No. 39&#xff09;1.1 题目1.2 笔记1.3 代码 02. 组合求和 II&#xff08;No. 40&#xff09;2.1 题目2.2 笔记2.3 代码 03. 分割回文串&#xff08;No. 131&#xff09;3.1 题目3.2 笔记3.3 代码 Day 25 01. 组合总和&#xff08;No…
阅读更多...
Stable Diffusion主流UI详细介绍

Stable Diffusion主流UI详细介绍

Stable Diffusion目前主流的操作界面有WebUI、ComfyUI以及Fooocus 这里webui和fooocus在人机交互上的逻辑是一样的&#xff0c;fooocus界面更加简洁。 comfyui是在人机交互上是采用流程节点的交互逻辑&#xff0c;和上面略有区别。 界面分别如下&#xff1a; WebUI界面如下 we…
阅读更多...
C# winfrom中NPOI操作EXCEL

C# winfrom中NPOI操作EXCEL

前言 1.整个Excel表格叫做工作表&#xff1a;WorkBook&#xff08;工作薄&#xff09;&#xff0c;包含的叫页&#xff08;工作表&#xff09;&#xff1a;Sheet&#xff1b;行&#xff1a;Row&#xff1b;单元格Cell。 2.忘了告诉大家npoi是做什么的了&#xff0c;npoi 能够读…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023