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

目录

解释各个模块

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, // 定时器 id
      mobile: '', // 手机号
      picCode: '', // 用户输入的图形验证码
      msgCode: '' // 短信验证码
    }
  },
  async created () {
    this.getPicCode()
  },
  methods: {
    //获取图形验证码
    async getPicCode () {
    const { data: { base64, key } } = await request.get('/captcha/image')
    this.picUrl = base64 //存储地址
    this.picKey = key //存储唯一标识
    }
  }
  
  
}