VUE 开发——Vue学习（三）—— 智慧商城项目

embedded/2024/10/18 20:39:53/

目录

解释各个模块

  1. api接口模块：发送ajax请求的接口模块
  2. utils工具模块：自己封装的一些工具方法模块
  3. components组件模块：全局通用的组件
  4. router路由模块：封装要所有路由
  5. views：各个页面
  6. assets：各种资源

vant组件库

组件库：适用vue2版本的vant2
一般会按照不同平台进行分类：

  1. PC端：element-ui、ant-design-vue
  2. 移动端：vant-ui、Mint UI、Cube UI

vant导入操作

全部导入

1.安装vant-ui

npm i vant@latest-v2 -S

2.main.js注册

import Vant from 'vant'
import 'vant/lib/index.css'
//把vant组件都导入了
Vue.use(vant)

3.组件使用

按需导入

1.安装插件
npm i babel-plugin-import -D
2.babel.config.js配置

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

3.main.js按需导入注册
官网查询用法

封装vant组件导入

在utils中新建一个vant-ui.js文件，将刚才main.js写入的导入代码写进去，并在main.js中导入该文件

postcss插件

实现项目中vw适配

1.安装插件

npm install postcss-px-to-viewport --save-dev

2.根目录新建postcss.config.js文件，填入配置

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

路由设计配置

路由页面建立

但凡单个页面独立展示，就是一级路由。
建立路由页面
新建文件内容填入：

<template></template><script >
export default {name: 'LayoutIndex'
}
</script><style lang="less" scoped>
</style>

路由引入

在router的文件引入路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout'
import Login from '@/views/login'
import MyOrder from '@/views/myorder'
import Pay from '@/views/pay'
import Prodetail from '@/views/prodetail'
import Search from '@/views/search'
import SearchList from '@/views/search/list.vue'Vue.use(VueRouter)const router = new VueRouter({routes: [{ path: '/login', component: Login },{ path: '/', component: Layout },{ path: '/search', component: Search },{ path: '/searchlist', component: SearchList },//动态路由传参，确认是哪一些商品，路由传参中携带id{ path: '/prodetail/:id', component: Prodetail },{ path: '/pay', component: Pay },{ path: '/myorder', component: MyOrder },]
})export default router

二级路由

1.vant-ui.js按需引入

import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';Vue.use(Tabbar);
Vue.use(TabbarItem);

2.layout.vue粘贴官方代码测试
3.修改文字、图标、颜色

二级路由配置

router中配置

{ path: '/',component: Layout,children: [{ path: '/home', component: Home},{ path: '/category', component: Category},{ path: '/cart', component: Cart},{ path: '/user', component: User}]}

tabbar里添加路由属性

 <!-- 二级路由出口，二级组件展示的位置 --><router-view></router-view><van-tabbar route  active-color="#ee0a24" inactive-color="#000"><van-tabbar-item to="/home" icon="wap-home-o">我的</van-tabbar-item><van-tabbar-item to="/category" icon="apps-o">分类页</van-tabbar-item><van-tabbar-item to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item><van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item></van-tabbar>

登录页静态布局

async的作用详解

async 是 JavaScript 中的一个关键字，用于声明异步函数。异步函数通常用于处理异步操作，如网络请求、文件读写等，这些操作不会立即完成，而是会在将来某个时刻完成。

什么是 async 函数？

async 函数允许你在函数内部使用 await 关键字，等待一个 Promise 结果。当一个函数被声明为 async 时，它会返回一个 Promise 对象，即使你没有显式地返回它。

async 函数的特点

  1. 自动返回 Promise：async 函数会自动返回一个 Promise 对象。
  2. 使用 await 关键字：在 async 函数内部，可以使用 await 关键字来等待一个异步操作的结果。
  3. 更简洁的错误处理：可以使用 try...catch 语句来捕获异步操作中的错误。

示例

下面是一个简单的示例，展示如何使用 async 和 await 来处理异步操作：

// 异步函数模拟获取数据
function getData() {return new Promise((resolve) => {setTimeout(() => resolve('Data loaded'), 2000);});
}// 使用 async 和 await 处理异步操作
async function fetchData() {try {const result = await getData();console.log(result); // 输出 "Data loaded"} catch (error) {console.error('Error fetching data:', error);}
}// 调用异步函数
fetchData();

async 和 await 的优势

  1. 提高可读性：使用 async 和 await 可以让你的代码更加接近同步代码的风格，使代码更容易理解和维护。
  2. 简化错误处理：使用 try...catch 可以更方便地处理异步操作中的错误。
  3. 链式调用：可以方便地链式调用多个异步操作，使得异步流程更加自然和直观。

使用场景

async 和 await 常用于以下场景：

  1. 网络请求：发送 HTTP 请求并处理响应。
  2. 文件操作：读取或写入文件。
  3. 数据库操作：执行数据库查询或事务。
  4. 定时任务：处理定时触发的操作。

注意事项

  1. 只能在 async 函数内部使用 await：await 只能在 async 函数内部使用。
  2. 错误处理：需要适当处理异步操作中的错误，通常使用 try...catch。
  3. 性能考虑：虽然 async 和 await 可以简化异步代码编写，但在大量并发请求时仍需注意性能优化。

示例：Vue 中的使用

在 Vue 中，你可以使用 async 函数来处理组件生命周期钩子中的异步操作，例如：

export default {async created() {try {const data = await getData();this.data = data;} catch (error) {console.error('Error fetching data:', error);}}
};

通过这种方式，你可以更清晰地管理组件中的异步逻辑。

总之，async 和 await 提供了一种更加优雅的方式来编写和处理异步代码，使得代码更加简洁易懂。

request模板——axios封装

使用axios来请求后端接口，一般都会对axios进行一些配置（例如：配置基础地址，请求响应拦截器等）
所以项目开发中，都会对axios进行基本的二次封装，单独封装到一个request模块中，便于维护。

步骤

1.安装axios

npm install axios --save

2.新建request模块 utils/request.js

3.创建实例，配置导出实例

import axios from "axios";const instance = axios.create({baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',timeout: 5000
});// 添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response.data;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});export default instance

4.图形验证码功能实现

export default {name: 'LoginPage',data () {return {picKey: '', // 将来请求传递的图形验证码唯一标识picUrl: '', // 存储请求渲染的图片地址totalSecond: 60, // 总秒数second: 60, // 当前秒数，开定时器对 second--timer: null, // 定时器 idmobile: '', // 手机号picCode: '', // 用户输入的图形验证码msgCode: '' // 短信验证码}},async created () {this.getPicCode()},methods: {//获取图形验证码async getPicCode () {const { data: { base64, key } } = await request.get('/captcha/image')this.picUrl = base64 //存储地址this.picKey = key //存储唯一标识}}}

http://www.ppmy.cn/embedded/127729.html

相关文章

Java SE vs Java EE 与 JVM vs JDK vs JRE

Java SE vs Java EE 与 JVM vs JDK vs JRE

Java SE&#xff08;Java Platform&#xff0c;Standard Edition&#xff09;: Java 平台标准版&#xff0c;Java 编程语言的基础&#xff0c;它包含了支持 Java 应用程序开发和运行的核心类库以及虚拟机等核心组件。Java SE 可以用于构建桌面应用程序或简单的服务器应用程序。…
阅读更多...
【Redis安全基线】- 在生产环境中需要注意的安全事项

【Redis安全基线】- 在生产环境中需要注意的安全事项

Redis是一个高性能的键值存储数据库&#xff0c;但在实际使用中&#xff0c;如果没有适当的安全措施&#xff0c;可能会面临严重的安全风险。本文将介绍几种加强Redis安全性的最佳实践&#xff0c;包括防止弱口令、限制危险命令、修改默认端口等。 1. Redis弱口令 场景说明&a…
阅读更多...
48 | 代理模式：代理在RPC、缓存、监控等场景中的应用

48 | 代理模式：代理在RPC、缓存、监控等场景中的应用

前面几篇文章&#xff0c;我们学习了设计模式中的创建型模式。创建型模式主要解决对象的创建问题&#xff0c;封装复杂的创建过程&#xff0c;解耦对象的创建代码和使用代码。 其中&#xff0c;单例模式用来创建全局唯一的对象。工厂模式用来创建不同但是相关类型的对象&#…
阅读更多...
Oracle 零宽空格问题处理

Oracle 零宽空格问题处理

在Oracle中&#xff0c;去除字符串两端的零宽空格&#xff08;Zero Width Space&#xff0c;Unicode编码为U200B&#xff09;可以使用TRIM函数结合REGEXP_REPLACE函数来实现。由于标准的TRIM函数只能去除ASCII字符&#xff0c;对于Unicode字符如零宽空格&#xff0c;需要使用正…
阅读更多...
【WebGIS】Cesium：GeoJSON加载

【WebGIS】Cesium：GeoJSON加载

GeoJSON 是一种常用的地理空间数据格式&#xff0c;它用于表示简单的地理要素及其属性&#xff0c;并且被广泛应用于 Web 地图和 GIS 系统中。在 Cesium 中&#xff0c;GeoJSON 文件可以很方便地加载到三维场景中展示&#xff0c;并且可以添加样式和事件处理。本文将为你提供详…
阅读更多...
算法笔记day04

算法笔记day04

目录 1. 在字符串中找出连续最长的数字串 2.岛屿数量 3.拼三角 1. 在字符串中找出连续最长的数字串 字符串中找出连续最长的数字串_牛客题霸_牛客网 (nowcoder.com) 算法思路&#xff1a; 这是一道简单的双指针题目&#xff0c;首先用i遍历数组&#xff0c;当遍历到数字的时…
阅读更多...
Pytorch——pip下载安装pytorch慢的解决办法

Pytorch——pip下载安装pytorch慢的解决办法

一、找到需要下载的pytorch链接 运行&#xff1a;pip install torch1.11.0cu113 torchvision0.12.0cu113 torchaudio0.11.0 --extra-index-url https://download.pytorch.org/whl/cu113。然后得到&#xff1a; 我这里为&#xff1a;https://download.pytorch.org/whl/cu113/t…
阅读更多...
JS开发es8266板子，搞着玩-MAX7219模块 远程显示led字符串

JS开发es8266板子，搞着玩-MAX7219模块 远程显示led字符串

JS开发es8266板子&#xff0c;搞着玩-MAX7219模块 板子为 esp8266 这里接了两个8x8 Led.Matrix espjs https://www.espruino.com/ 我是看了,这个文章 发现js可以开发esp板子的就尝试了下远程点灯&#xff0c;挺有意思就买了很多模块慢慢尝试 代码 这里我把wifi模块又包了一…
阅读更多...
最新文章

Copyright @ 2022~2023