vue学习106-120

news2024/11/27 2:24:57

创建项目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, // 定时器id
      mobile: '', // 手机号
      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// 重置定时器id
            this.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.data
  if (res.status !== 200) {
    // 给提示
    Toast(res.message)
    // 抛出一个错误的promise
    return 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的第一个参数，都是state
    setUserInfo (state, obj) {
      state.userInfo = obj
      setInfo(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 false
  if (!authUrls.includes(to.path)) {
    // 非权限页面，直接放行
    next()
    return
  }
  // 是权限页面，需要判断token
  const token = store.getters.token
  if (token) {
    next()
  } else {
    next('/login')
  }
})

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

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

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

相关文章

第四篇:数据库安装(命令行)

第四篇:数据库安装(命令行)

数据库命令行界面安装 mysql官网&#xff0c;下载解压 https://dev.mysql.com/downloads/mysql/ 在安装之前先去检查一下,本地计算机的用户合组 winr(输入lusrmgr.msc) -点击组-双击administrator 如果只有这两个,那么就添加一下,提高网络服务的权限(避免出现mysql启动失败) …
阅读更多...
MATLAB知识点：randperm函数（★★★★★）将一个数字序列进行随机打乱

MATLAB知识点：randperm函数（★★★★★）将一个数字序列进行随机打乱

​讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 节选自第3章&#xff1a;课后习题讲解中拓展的函数 在讲解第…
阅读更多...
十四、java 异常

十四、java 异常

文章目录 异常5.1 初识异常5.1.1 NullPointerException5.1.2 NumberFormatException 5.2 异常类5.2.1 Throwable5.2.2 异常类体系5.2.3 自定义异常 5.3 异常处理5.3.1 try/catch匹配5.3.2 重新抛出异常5.3.3 finally5.3.4 try-with-resources5.3.5 throws5.3.6 对比受检和未受检…
阅读更多...
五、Mybatis复杂映射开发

五、Mybatis复杂映射开发

1.一对一查询 1.1 一对一查询的模型 用户表和订单表的关系为&#xff0c;一个用户有多个订单&#xff0c;一个订单只从属于一个用户一对一查询的需求&#xff1a;查询一个订单&#xff0c;与此同时查询出该订单所属的用户SQL: DROP TABLE IF EXISTS user; CREATE TABLE user …
阅读更多...
free pascal：fpwebview 组件通过JSBridge调用本机TTS

free pascal：fpwebview 组件通过JSBridge调用本机TTS

从 https://github.com/PierceNg/fpwebview 下载 fpwebview-master.zip 简单易用。 先请看 \fpwebview-master\README.md cd \lazarus\projects\fpwebview-master\demo\js_bidir 学习 js_bidir.lpr &#xff0c;编写 js_bind_speak.lpr 如下&#xff0c;通过JSBridge调用本机…
阅读更多...
Java入门高频考查基础知识9（银盛15问万字参考答案）

Java入门高频考查基础知识9（银盛15问万字参考答案）

JAVA刷题专栏&#xff1a;http://t.csdnimg.cn/9qscL 目录 一、Springcloud的工作原理 三、注册中心心跳是几秒 四、消费者是如何发现服务提供者的 五、多个消费者调⽤用同⼀接口&#xff0c;eruka默认的分配⽅式是什么 六、springboot常用注解&#xff0c;及其实现 七、…
阅读更多...
pytorch常用激活函数笔记

pytorch常用激活函数笔记

1. relu函数&#xff1a; 公式&#xff1a; 深层网络内部激活函数常用这个 import matplotlib.pyplot as pltdef relu_fun(x):if x>0:return xelse:return 0x np.random.randn(10) y np.arange(10)plt.plot(y,x)for i ,t in enumerate(x):x[i] relu_fun(t) plt.p…
阅读更多...
移动机器人激光SLAM导航（五）：Cartographer SLAM 篇

移动机器人激光SLAM导航（五）：Cartographer SLAM 篇

参考 Cartographer 官方文档Cartographer 从入门到精通 1. Cartographer 安装 1.1 前置条件 推荐在刚装好的 Ubuntu 16.04 或 Ubuntu 18.04 上进行编译ROS 安装&#xff1a;ROS学习1&#xff1a;ROS概述与环境搭建 1.2 依赖库安装 资源下载完解压并执行以下指令 https://pa…
阅读更多...
Python 读取pdf文件

Python 读取pdf文件

Python 实现读取pdf文件简单示例。 安装命令 需要安装操作pdf的三方类库&#xff0c;命令如下&#xff1a; pip install pdfminer3K 安装过程如下&#xff1a; 引入类库 需要引入很多的类库。 示例如下&#xff1a; import sys import importlib importlib.reload(sys)fr…
阅读更多...
鸿蒙开发系列教程（十八）--页面内动画（1）

鸿蒙开发系列教程（十八）--页面内动画（1）

页面内的动画 显示动画 语法&#xff1a;animateTo(value: AnimateParam, event: () > void): void 第一个参数指定动画参数 第二个参数为动画的闭包函数。 如&#xff1a;animateTo({ duration: 1000, curve: Curve.EaseInOut }, () > {动画代码}&#xff09; dura…
阅读更多...
Golang快速入门到实践学习笔记

Golang快速入门到实践学习笔记

Go学习笔记 1.基础 Go程序设计的一些规则 Go之所以会那么简洁&#xff0c;是因为它有一些默认的行为&#xff1a; 大写字母开头的变量是可导出的&#xff0c;也就是其它包可以读取 的&#xff0c;是公用变量&#xff1b;小写字母开头的就是不可导出的&#xff0c;是私有变量…
阅读更多...
cool-node.js 框架 创建数据表的步骤

cool-node.js 框架 创建数据表的步骤

1.文件目录 business 这个模块的数据库对应的就是 entity文件夹 这一个文件.ts 就是代表了一个表 2.user.ts 表的介绍 这个 相当于 时 固定格式的数据表 &#xff0c;只需要按照这个 格式和创建表的方式来创建就可以 BusinessUserEntity 相当于时这个数据表类的名字 Entity(b…
阅读更多...
FPGA_简单工程_拨码开关

FPGA_简单工程_拨码开关

一 框图 二 波形图 三 代码 3.1 工程代码 module bomakiaguan (input [15:0] switch, // 输入16路拨码开关output reg [15:0] led // 输出16个LED灯 );always (switch) beginled < switch; // 将拨码开关的值直接赋给LED灯 end // 将拨码开关的值直接赋给LED灯 endmodu…
阅读更多...
五.实战软件部署 4-5MYSQL 5.7版本在ubuntu(WSL环境)安装MYSQL 8.0版本在ubuntu(WSL环境)安装

五.实战软件部署 4-5MYSQL 5.7版本在ubuntu(WSL环境)安装MYSQL 8.0版本在ubuntu(WSL环境)安装

目录 五.实战软件部署 4-MYSQL 5.7版本在ubuntu(WSL环境)安装 安装 1-下载apt仓库文件 2-配置apt仓库 3-更新apt仓库的信息 4-检查是否成功配置mysql5.7的仓库 5-安装mysql5.7 6-启动mysql 7-对mysql进行初始化 1-输入密码 2-是否开启密码验证插件&#xff0c;如果需…
阅读更多...
二叉树的顺序结构及堆的实现

二叉树的顺序结构及堆的实现

创作不易&#xff0c;兄弟们给个三连&#xff01;&#xff01; 一、二叉树的顺序存储 顺序结构指的是利用数组来存储&#xff0c;一般只适用于表示完全二叉树&#xff0c;原因如上图&#xff0c;存储不完全二叉树会造成空间上的浪费&#xff0c;有的人又会问&#xff0c;为什么…
阅读更多...
ELAdmin 部署

ELAdmin 部署

后端部署 按需修改 application-prod.yml 例如验证码方式、登录状态到期时间等等。 修改完成后打好 Jar 包 执行完成后会生成最终可执行的 jar。JPA版本是 2.6&#xff0c;MyBatis 版本是 1.1。 启动命令 nohup java -jar eladmin-system-2.6.jar --spring.profiles.active…
阅读更多...
探索微信小程序的奇妙世界：从入门到进阶

探索微信小程序的奇妙世界：从入门到进阶

文章目录 一、什么是微信小程序1.1 简要介绍微信小程序的定义和特点1.2 解释小程序与传统应用程序的区别 二、小程序的基础知识2.1 微信小程序的架构2.2 微信小程序生命周期的理解2.3 探索小程序的目录结构和文件类型 三、小程序框架和组件3.1 深入了解小程序框架的核心概念和原…
阅读更多...
【JavaEE】_JavaScript（Web API）

【JavaEE】_JavaScript（Web API）

目录 1. DOM 1.1 DOM基本概念 1.2 DOM树 2. 选中页面元素 2.1 querySelector 2.2 querySelectorAll 3. 事件 3.1 基本概念 3.2 事件的三要素 3.3 示例 4.操作元素 4.1 获取/修改元素内容 4.2 获取/修改元素属性 4.3 获取/修改表单元素属性 4.3.1 value&#xf…
阅读更多...
nba2k24 灌篮高手樱木花道面补

nba2k24 灌篮高手樱木花道面补

nba2k24 灌篮高手樱木花道面补 nba2k23-nba2k24通用 灌篮高手樱木花道面补 下载地址&#xff1a; https://www.changyouzuhao.cn/9539.html
阅读更多...
linux系统配置zabbix监控agent端

linux系统配置zabbix监控agent端

目录 客户端配置 启动服务 浏览器工具设置 创建主机群组 创建主机 创建监控项 ​编辑 ​编辑 创建触发器 查看监控 客户端配置 rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.noarch.rpm # yum clean allyum install -y zab…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023