当前位置: 首页 > news >正文

(Vue2)智慧商城项目

新增两个目录api、utils

api接口模块:发送ajax请求的接口模块

utils工具模块:自己封装的一些工具方法模块

 第三方组件库vant-ui

PC端:element-ui(element-plus) ant-design-vue

移动端:vant-ui Mint UI(饿了么) Cube UI(滴滴)

按需引入:vant网站中有

1安装npm i vant@latest-v2 -S --legacy-peer-deps

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

3babel.config.js配置

module.exports={presets:['@vue/cli-plugin-babel/preset'],plugins:[['import',{libraryName:'vant',libraryDirectory:'es',style:true},'vant']]
}

4main.js按需导入注册

import { Button } from 'vant'
Vue.use(Button)

5测试使用

全部引入:(Vue2项目安装Vant2)npm i vant@latest-v2 -S --legacy-peer-deps

--legacy-peer-deps可以解决下载时候产生的依赖冲突。并没有真的解决冲突,而是忽略了冲突,以“过时”的方式进行下载操作。

基于postcss插件 实现项目vw适配

要求大屏小屏展示效果一样。100vw就是整个屏幕的宽。

设计图中单位是px,如何转换:postcss插件

npm add postcss-px-to-viewport@1.1.1 -D --legacy-peer-deps

// src目录下新建文件postcss.config.js
module.exports = {plugins: {'postcss-px-to-viewport': {//vw适配的标准屏的宽度,iphoneX//设计图750,调成1倍=>适配375标准屏幕//设计图640,调成1倍=>适配320标准屏幕viewportWidth: 375,},},
};

 路由设计配置

先把文件目录建好,views下建各个页面文件夹,里面放页面

注:name键的值由单引号引

实现底部导航tabbar

vant->Tabbar标签栏->自定义颜色

标签栏支持路由属性,属性里加to='/path'

登录页

@click-left="$router.go(-1)"  后退+刷新

头部导航条默认样式本来是蓝色,自定义通用样式比如说灰色。在浏览器中审查元素,发现其类名,在common.less中为该类设定样式

request模块-axios封装

1新建utils/request.js文件,引入axios

2创建axios实例(axios官网axios实例),将来对创建出来的实例,进行自定义配置

好处:不会污染原始的axios实例

换基地址

return response.data

3自定义配置-请求/响应 拦截器

改axios为instance(axios官网拦截器)

4导出配置好的实例export default instance

5login/index.js中导入,当作普通axios用

async created(){const res = await request.get('/path')
}

图形验证码

 login/index中添加数据装返回的图片和验证码,将其绑定显示

图片验证码加入v-if="picUrl"图片加载出来才显示,就不会有还未加载出来的破碎图片显示

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

目标:将请求封装成方法,统一存放到api模块,与页面分离

把请求的代码放入api/login.js的函数中封装起来,在页面中按需导入后再调用函数

Toast轻提示

注册安装(vant官网Toast轻提示)

短信验证倒计时

本质上是节流控制

1点击按钮,实现倒计时

main.js中数据添加变量总秒数60,当前秒数60,定时器

绑定点击事件

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

手机号正则表达式?

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

4离开页面时销毁定时器

获取短信验证码

1封装接口:api/login.js中导出发送请求函数

 2调用接口,添加提示

登录功能

ERROR

1浏览器报错:Unchecked runtime.lastError 

解:逐个关闭扩展看是哪一个引起的错误

相关文章:

(Vue2)智慧商城项目

新增两个目录api、utils api接口模块:发送ajax请求的接口模块 utils工具模块:自己封装的一些工具方法模块 第三方组件库vant-ui PC端:element-ui(element-plus) ant-design-vue 移动端:vant-ui Mint UI…...

Nginx实战

虚拟主机 虚拟主机指的就是⼀个独⽴的站点,具有独⽴的域名,有完整的www服务,例如⽹站、FTP、邮件等 。Nginx⽀持多虚拟主机,在⼀台机器上可以运⾏完全独⽴的多个站点。⼀些草根流量站⻓,常会搭建个⼈站点进⾏资源分享交…...

day-57 代码随想录算法训练营(19)动态规划 part 17

647.回文子串 思路&#xff1a;动态规划 1.dp存储&#xff1a;判断以i开始&#xff0c;j结尾的字符串是否是回文串2.动态转移方程&#xff1a;当s[i]s[j]时&#xff0c;如果j-i<1,d[i][j]true; 如果 dp[i1][j-1]true&#xff0c;那么dp[i][j…...

在项目中,关于前端实现数据可视化的技术选择

前言 在项目中&#xff0c;数据可视化以图表、报表类型为主。 需求背景 技术框架是Vue2.x版本&#xff0c;组件库是Ant Design of Vue能够支撑足够多的图表类型开发图表大小/位置能够随意变动图表样式需要支持丰富多样的用户配置强大、开放的图表语法支持复杂的数据可视化场景…...

DT 卡通材质学习 一

渐变着色器 相交线 笔刷和卡通结合使用 修改器...

【游戏引擎架构】6.2 资源管理器

资源管理器可以分为离线部分系统和运行时系统 文章目录 离线资源管理数据库资产管道 运行时资源管理文件结构内存管理文件间引用 离线资源管理 数据库 UE的数据库可以直接浏览、编辑资产&#xff0c;看到运行时的状态&#xff1b;但也存在两个较大的缺点&#xff1a; 版本管…...

spring的ThreadPoolTaskExecutor装饰器传递调用线程信息给线程池中的线程

概述 需求是想在线程池执行任务的时候&#xff0c;在开始前将调用线程的信息传到子线程中&#xff0c;在子线程完成后&#xff0c;再清除传入的数据。 下面使用了spring的ThreadPoolTaskExecutor来实现这个需求. ThreadPoolTaskExecutor 在jdk中使用的是ThreadPoolExecutor…...

转载 - 洞察问题本质,解决工作难题

作者&#xff1a;关苏哲 高效管理者的三大技能 问题界定的6个问题 1.你所需要解决的问题是什么&#xff1f; 2.你为什么需要解决这个问题&#xff1f; 3.你期待的理想结果是什么&#xff1f; 4.这个问题包括哪些子问题&#xff1f; 5.你曾经尝试过哪些解决方式&#xff1f…...

关于计算机找不到d3dx9_43.dll,无法继续执行代码修复方法

d3dx9_43.dll是一个动态链接库文件&#xff0c;它是DirectX的一个组件&#xff0c;主要用于处理游戏中的图形、声音等多媒体元素。当这个文件丢失时&#xff0c;可能会导致以下问题&#xff1a; 1. 游戏无法正常运行&#xff1a;由于d3dx9_43.dll负责处理游戏中的多媒体元素&a…...

《从零开始的Java世界》01基本程序设计

《从零开始的Java世界》系列主要讲解Javase部分&#xff0c;从最简单的程序设计到面向对象编程&#xff0c;再到异常处理、常用API的使用&#xff0c;最后到注解、反射&#xff0c;涵盖Java基础所需的所有知识点。学习者应该从学会如何使用&#xff0c;到知道其实现原理全方位式…...

【数据开发】数据全栈知识架构,数据(平台、开发、管理、分析)

文章目录 一、数据全栈知识架构1、数据方法&#xff08;思维&#xff0c;统计学&#xff0c;实践&#xff0c;北极星&#xff09;2、数据工具&#xff1a;数据仓库3、数据规范 二、数据分析工具1、大数据平台2、数据开发&#xff1a;入库计算&#xff08;重点&#xff09;3、数…...

基于STM32的宠物托运智能控制系统的设计(第十七届研电赛)

一、功能介绍 使用STM32作为主控设备&#xff0c;通过DHT11温湿度传感器、多合一空气质量检测传感器以及压力传感器对宠物的托运环境中的温湿度、二氧化碳浓度和食物与水的重量进行采集&#xff0c;将采集到的信息在本地LCD显示屏上显示&#xff0c;同时&#xff0c;使用4G模块…...

数据结构的奇妙世界:实用算法与实际应用

文章目录 数据结构和算法的基本概念数据结构数组链表栈队列树图 算法 常见的数据结构和算法排序算法快速排序示例 数据结构的应用数据库管理系统图像处理网络路由 数据结构和算法的性能分析时间复杂度空间复杂度 如何更好地编写代码避免常见错误结论 &#x1f389;欢迎来到数据…...

uniapp实现表格冻结

效果图如下&#xff1a; 思路&#xff1a; 1.由于APP项目需要&#xff0c;起初想去插件市场直接找现成的&#xff0c;结果找了很久没找到合适的&#xff08;有的不支持vue2有的不能都支持APP和小程序&#xff09; 2.后来&#xff0c;就只能去改uni-table源码了&#xff0c;因…...

Spring面试题11:什么是Spring的依赖注入

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:说一说Spring的依赖注入 依赖注入(Dependency Injection)是Spring框架的一个核心特性,它是指通过外部容器将对象的依赖关系注入到对象中,从而…...

用于设计 CNN 的 7 种不同卷积

一 说明 最近对CNN架构的研究包括许多不同的卷积变体&#xff0c;这让我在阅读这些论文时感到困惑。我认为通过一些更流行的卷积变体的精确定义&#xff0c;效果和用例&#xff08;在计算机视觉和深度学习中&#xff09;是值得的。这些变体旨在保存参数计数、增强推理并利用目标…...

备受以太坊基金会青睐的 Hexlink,构建亿级用户涌入 Web3的入口

早在2021年9月&#xff0c;以太坊创始人Vitalik Buterin就曾提出了EIP-4337&#xff08;账户抽象&#xff09;提案&#xff0c;并在去年10月对该提案进一步更新&#xff0c;引发行业的进一步关注。在今年3月&#xff0c;EIP-4337提案正式通过审计&#xff0c;并成为了ERC-4337标…...

合约升级标准 ERC2535 的设计解析和不足

合约升级标准 ERC2535 的设计解析和不足 Safful最近审计了钻石标准的一份实现代码&#xff0c;这一标准是一种新的可升级合约模式。撰写标准是一项值得赞许的事业&#xff0c;但钻石标准及其实现有许多引人担忧的地方。这份代码是过度工程的产物&#xff0c;附带了许多不必要的…...

【Vue】ElementUI实现登录注册

一、搭建项目 二、后台交互 三、CORS跨域 好啦今天到这了&#xff0c;希望能帮到你&#xff01;&#xff01;&#xff01;...

linux 安装 wordpress

文章目录 linux 安装 wordpress1. wordpress 简介2. wordpress功能和特点3. 部署要求4. 环境搭建4.1 部署 nginx4.1.1 新增配置文件 4.2 部署 PHP74.2.1 查看当前版本4.2.2 YUM 安装 PHP74.2.3 查看 PHP 版本4.2.4 启动PHP-FPM4.2.5 修改配置文件4.2.6 重启服务 4.3 部署 mysql…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

echarts使用graphic强行给图增加一个边框(边框根据自己的图形大小设置)- 适用于无法使用dom的样式

pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图&#xff0c;如果边框加在dom上面&#xff0c;pdf-lib导出svg的时候并不会导出边框&#xff0c;所以只能在echarts图上面加边框 grid的边框是在图里…...

基于谷歌ADK的 智能产品推荐系统(2): 模块功能详解

在我的上一篇博客&#xff1a;基于谷歌ADK的 智能产品推荐系统(1): 功能简介-CSDN博客 中我们介绍了个性化购物 Agent 项目&#xff0c;该项目展示了一个强大的框架&#xff0c;旨在模拟和实现在线购物环境中的智能导购。它不仅仅是一个简单的聊天机器人&#xff0c;更是一个集…...

SpringSecurity+vue通用权限系统

SpringSecurityvue通用权限系统 采用主流的技术栈实现&#xff0c;Mysql数据库&#xff0c;SpringBoot2Mybatis Plus后端&#xff0c;redis缓存&#xff0c;安全框架 SpringSecurity &#xff0c;Vue3.2Element Plus实现后台管理。基于JWT技术实现前后端分离。项目开发同时采 …...