Day8 智慧商城

news2024/11/16 10:43:41

项目演示

在这里插入图片描述



项目收获

在这里插入图片描述


创建项目

在这里插入图片描述




调整初始化目录

在这里插入图片描述在这里插入图片描述



1.删components里的所有文件
2.删views里的所有文件
3.router/index.js 删路由 删规则

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: []
})

export default router

4.App.vue 删css 内容，只留路由出口

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">

</style>



学习vant组件库

基本介绍

在这里插入图片描述vant2 支持vue2
vant3和4 支持vue3
vant4官网
vant2官网



在这里插入图片描述

安装方式和基本使用姿势

# Vue 3 项目，安装最新版 Vant：
npm i vant -S

# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S


全部导入和按需引入

在这里插入图片描述



全部导入

在这里插入图片描述main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <router-view/>
  </div>
</template>

<style lang="less">

</style>


按需引入

在这里插入图片描述修改了babel.config.js要重启服务器，才能看到效果

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import '@/utils/vant-ui.js'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')


utils/vant-ui.js 
import Vue from 'vue'
import { Button } from 'vant'
Vue.use(Button)


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


App.vue同上

# VM适配 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8f5f8b4fdabd4fbd96b5aca2fd3fe173.png)vant官网中【进阶用法】中的浏览器适配 1.cnpm i postcss-px-to-viewport@1.1.1 -D 2.根目录创建postcss.config.js 
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      // vw适配的标准屏宽度
    //  设计图750，调成一倍  适配375标准屏幕
      viewportWidth: 375
    }
  }
}

App.vue 
<template>
  <div id="app">
    <div class="box"></div>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <router-view/>
  </div>
</template>

<style lang="less">
.box{
    width: 300px;
    height: 300px;
    background-color: #ed8a8a;
}
</style>


# 路由设计配置 ![在这里插入图片描述](https://img-blog.csdnimg.cn/09fb7d176bb6444f9f51de65ec630259.png)
## 一级路由 这里和之前不同，是先在views建文件夹，再给每个建index.vue ![在这里插入图片描述](https://img-blog.csdnimg.cn/2d035e0b50d14595b5eb0d7aa780915d.png)例如：Layout/index.vue 
<template>
  <div>layout</div>
</template>

<script>
export default {
  name: 'LayoutIndex'
}
</script>

<style>

</style>


router/index.js 
import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '@/views/login'
import Layout from '@/views/layout'
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: '/myorder', component: Myorder },
    { path: '/pay', component: Pay },
    // 动态路由传参，路由参数携带id
    { path: '/prodetail/:id', component: Prodetail },
    { path: '/search', component: Search },
    { path: '/searchlist', component: SearchList }
  ]
})

export default router


二级路由

在这里插入图片描述



layout/index.vue

<template>
  <div>

  <van-tabbar active-color="blue" inactive-color="#000">
    <!-- 改标签内容，小图标icon也是从vant里找，直接填名字即可实现改变 -->
    <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="apps-o">分类页</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o">我的</van-tabbar-item>
 </van-tabbar>
</div>
</template>

<script>
export default {
  name: 'LayoutIndex'
}
</script>

<style>

</style>


在这里插入图片描述


建文件

在这里插入图片描述

配置路由页面

layout/cart.vue

<template>
  <div>cart</div>
</template>

<script>
export default {
  name: 'CartIndex'
}
</script>

<style>

</style>

配规则

router/index.js
在这里插入图片描述


在这里插入图片描述

layout/index.vue

<template>
  <div>
 <router-view></router-view>
  <van-tabbar router active-color="blue" inactive-color="#000">
    <!-- 改标签内容，小图标icon也是从vant里找，直接填名字即可实现改变 -->
    <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>
</div>
</template>


登陆页面

登陆页静态布局

在这里插入图片描述


在这里插入图片描述



通用样式覆盖

在这里插入图片描述


login/index.vue

<template>
  <div class="login">
    <van-nav-bar title="会员登录" left-arrow @click-left="$router.go(-1)" />
    <div class="container">
      <div class="title">
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>

      <div class="form">
        <div class="form-item">
          <input class="inp" maxlength="11" placeholder="请输入手机号码" type="text">
        </div>
        <div class="form-item">
          <input class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
          <img src="@/assets/code.png" alt="">
        </div>
        <div class="form-item">
          <input class="inp" placeholder="请输入短信验证码" type="text">
          <button>获取验证码</button>
        </div>
      </div>

      <div class="login-btn">登录</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginPage'
}
</script>

<style lang="less" scoped>
.container {
  padding: 49px 29px;

  .title {
    margin-bottom: 20px;
    h3 {
      font-size: 26px;
      font-weight: normal;
    }
    p {
      line-height: 40px;
      font-size: 14px;
      color: #b8b8b8;
    }
  }

  .form-item {
    border-bottom: 1px solid #f3f1f2;
    padding: 8px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    .inp {
      display: block;
      border: none;
      outline: none;
      height: 32px;
      font-size: 14px;
      flex: 1;
    }
    img {
      width: 94px;
      height: 31px;
    }
    button {
      height: 31px;
      border: none;
      font-size: 13px;
      color: #cea26a;
      background-color: transparent;
      padding-right: 9px;
    }
  }

  .login-btn {
    width: 100%;
    height: 42px;
    margin-top: 39px;
    background: linear-gradient(90deg,#ecb53c,#ff9211);
    color: #fff;
    border-radius: 39px;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.1);
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>



request模块 - axios封装

在这里插入图片描述

在这里插入图片描述axios官网文档
去里面直接复制就行



utils/requests.js 
import axios from 'axios'
// 创建axios实例，将来对创建出来的实例，进行自定义配置
// 好处 不会污染原始的axios实例
const instance = axios.create({
  baseURL: 'http://cba.itlike.com/public/index.php?s=/api/',
  timeout: 5000

})

// 自定义配置 请求/相应 拦截器
// 添加请求拦截器
// axios.xxxx更改为 instance.xxxx
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么(默认axios会多包装一层data，需要响应拦截器中处理一下)
  return response.data // 扒地一层
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})

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

测试使用
login/index.vue

import request from '@/utils/requests'
export default {
  name: 'LoginPage',
  async created () {
    // 就直接把request当做axios,就和之前一样地用
    const res = await request.get('/captcha/image')
    console.log(res)
  }
}


图形验证码功能

在这里插入图片描述

login/index.vue

  <div class="form-item">
            <input v-model="picCode"   class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">
            <!-- v-if防止默认Url没有值显示空渲染   点击刷新 -->
            <img v-if="picUrl"    :src="picUrl"  @click="getPicCode"          alt="">
          </div>


import request from '@/utils/requests'
export default {
  name: 'LoginPage',
  data () {
    return {
      picCode: '', // 用户输入的图形验证码
      picKey: '', // 将来请求传递的图形验证码唯一标识
      picUrl: '' // 存储图片地址
    }
  },
  async created () {
    this.getPicCode()
  },
  methods: {
    async getPicCode () {
      const { data: { base64, key } } = await request.get('/captcha/image')
      this.picUrl = base64
      this.picKey = key
    }
  }
}

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

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

相关文章

软件开发合同范本word文档，《某公司软件开发合同》，15页范本供参考

软件开发合同范本word文档，《某公司软件开发合同》，15页范本供参考

上一篇介绍了软件生命周期全过程&#xff0c;软件工程全周期全过程20项文档模板&#xff0c;附下载。从《合同》到《需求规格说明书》到软件设计、开发、实施、验收、维护等全过程相关文档模板。有朋友反馈附件内容没有补全&#xff0c;本次及后续会用实际案例补全附件内容&…
阅读更多...
Backblaze 2023 Q2 硬盘故障质量报告解读

Backblaze 2023 Q2 硬盘故障质量报告解读

Backblaze 在其博客上发布了 2023 年第二季度的存储设备统计数据。这些数据包括了 Backblaze 在该季度所拥有的存储设备的数量、故障率和更换率等信息&#xff0c;这些信息对于了解存储设备的可靠性和性能非常有用。 在最新的Backblaze硬盘使用统计报告中&#xff0c;我们看到了…
阅读更多...
OLED透明屏介绍：领先科技的革命性创新

OLED透明屏介绍：领先科技的革命性创新

OLED透明屏作为一项领先的科技创新&#xff0c;在产品设计和用户体验方面展现出了巨大的潜力。 在这篇文章中&#xff0c;尼伽将介绍OLED透明屏的定义、特点、应用领域以及未来发展趋势&#xff0c;以帮助您全面了解OLED透明屏。 一、OLED透明屏的定义与原理 1.1 定义&#x…
阅读更多...
概念解析 | 走进射线管积分：探索数学与现实世界的神秘桥梁

概念解析 | 走进射线管积分：探索数学与现实世界的神秘桥梁

注1&#xff1a;本文系“概念解析”系列之一&#xff0c;致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是&#xff1a;射线管积分。 走进射线管积分&#xff1a;探索数学与现实世界的神秘桥梁 射线管积分雷达成像 射线管积分&#xff08;Ray Tube Integration&a…
阅读更多...
leetcode 188. 买卖股票的最佳时机 IV

leetcode 188. 买卖股票的最佳时机 IV

2023.8.21 这道题是 买卖股票的最佳时机III 的升级版&#xff0c;即买卖次数限制为k次&#xff0c;做法和上一篇如法炮制&#xff0c;直接看代码&#xff1a; class Solution { public:int maxProfit(int k, vector<int>& prices) {vector<vector<int>>…
阅读更多...
Django模板语法，带你快速入门

Django模板语法，带你快速入门

目录 案例一&#xff1a;登录页面 案例二&#xff1a;for案例 if案例——单个字符串的传递&#xff0c;列表的传递&#xff0c;字典的传递 模板语法其本质&#xff1a;本质上&#xff0c;Django的模板语法就是在html中&#xff0c;写一些占位符&#xff0c;由数据对这些占位符…
阅读更多...
6.824 lab2 raft实现

6.824 lab2 raft实现

目录 1 难点及完成思路&#xff1a; 1.1 难点分析&#xff1a; 1.2 完成思路&#xff1a; 1.3 实验心得&#xff1a; 1.4 报告结构&#xff1a; 2 Leader选举模块 2.1 思路概括&#xff08;代码角度&#xff09; 2.2 注意问题&#xff1a; 2.3 代码细节&#…
阅读更多...
[WMCTF 2023] crypto

[WMCTF 2023] crypto

似乎退步不了&#xff0c;这个比赛基本不会了&#xff0c;就作了两个简单题。 SIGNIN 第1个是签到题 from Crypto.Util.number import * from random import randrange from secret import flagdef pr(msg):print(msg)pr(br"""........ …
阅读更多...
WMS仓库管理系统选择指南:如何确保您的仓库提高效率？

WMS仓库管理系统选择指南:如何确保您的仓库提高效率？

如何选择WMS仓库管理系统&#xff1f;仓库管理主要包括以下四个方面&#xff1a; 1.商品出入库管理 2.库存调拨 3.库存盘点 4.虚拟库存/实际库存管理 为了更好地管理仓库&#xff0c;我们需要确保基本的硬件设施得以满足&#xff0c;例如划分存储区域、使用货架以及进行员工培训…
阅读更多...
Vivado2018.3版本_编译下载打包固化程序

Vivado2018.3版本_编译下载打包固化程序

Vivado2018.3版本_编译下载打包固化程序 概述&#xff1a; 在Vivado中开发导出硬件平台&#xff0c;然后在SDK中进行C语言的开发工作&#xff0c;然后把SDK编译生成的.elf文件加入Vivado工程中&#xff0c;编译生成.bit文件&#xff0c;转换成.mas文件&#xff0c;就可以固化到…
阅读更多...
使用kubeadm工具升级kubernetes

使用kubeadm工具升级kubernetes

一、背景&#xff1a; kubeadm部署的kubernetes集群进行升级&#xff0c;通常先升级控制节点&#xff0c;控制节点升级完成后再升级工作节点&#xff0c;本博文只升级了控制节点&#xff0c;工作节点按照相同的流程进行升级即可 环境说明&#xff1a; 主机名节点11.0.1.200k8s…
阅读更多...
机器学习笔记之优化算法(十五)Baillon Haddad Theorem简单认识

机器学习笔记之优化算法(十五)Baillon Haddad Theorem简单认识

机器学习笔记之优化算法——Baillon Haddad Theorem简单认识 引言 Baillon Haddad Theorem \text{Baillon Haddad Theorem} Baillon Haddad Theorem简单认识证明过程证明&#xff1a;条件 1 ⇒ 1 \Rightarrow 1⇒ 条件 2 2 2证明&#xff1a;条件 3 ⇒ 3 \Rightarrow 3⇒条件 1…
阅读更多...
功率放大器的介绍和应用领域有哪些

功率放大器的介绍和应用领域有哪些

功率放大器是将输入信号的功率放大到输出端所需水平的一种电子设备。在实际应用中&#xff0c;功率放大器被广泛使用于音频、视频、通讯等领域。下面&#xff0c;安泰电子将详细介绍功率放大器的工作原理、类型以及应用领域。 功率放大器的工作原理是将输入信号的功率放大到输出…
阅读更多...
js 简单的页面导航

js 简单的页面导航

实现效果&#xff1a; 实现原理&#xff1a; 实现原理是通过创建数组里面包含对应页面的信息&#xff0c;当点击的时候为数组传递一个对象&#xff0c;里面包含要显示的信息。 跳转链接实现原理&#xff1a; 通过创建一个数组&#xff0c;里面包含所有可以跳转的页面链接名称&a…
阅读更多...
【3Ds Max】可编辑多边形“边界”层级的简单使用

【3Ds Max】可编辑多边形“边界”层级的简单使用

目录 示例 &#xff08;1&#xff09;挤出 &#xff08;2&#xff09;插入顶点 &#xff08;3&#xff09;切角 &#xff08;4&#xff09;利用所选内容创建图形 &#xff08;5&#xff09;封口 &#xff08;6&#xff09;桥 示例 这里我们首先创建一个长方体&#xff…
阅读更多...
3D角色展示

3D角色展示

先看效果&#xff1a; 再看代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>3D卡片悬停</title><style>font-face {font-family: "Exoct";src: url("htt…
阅读更多...
解决群晖视频信息插件无法同步的问题

解决群晖视频信息插件无法同步的问题

今天发现群晖下载的电影和电视剧没办法显示图片和相关信息&#xff0c;开始以为是升级了什么东西导致的&#xff0c;后来发现api.themoviedb.org 这个API接口ping都没法ping通&#xff0c;估计被墙了。好吧&#xff0c;重新登陆群晖修改hosts文件吧。下面一步一步来讲讲如何修改…
阅读更多...
Adobe联创去世，没他就没有PDF，乔布斯也因他逆风翻盘

Adobe联创去世，没他就没有PDF，乔布斯也因他逆风翻盘

量子位 | 公众号 QbitAI Adobe联合创始人John Warnock去世了&#xff0c;享年82岁。 他是PDF格式的发明人之一&#xff0c;贡献了PDF中的核心技术PostScript—— 如果没有它&#xff0c;打印机就无法打印复杂页面。可以说&#xff0c;Warnock的这项发明&#xff0c;在上世纪…
阅读更多...
【C++】STL——set的介绍和使用、set的构造函数、set的迭代器、set的容量和增删查改函数

【C++】STL——set的介绍和使用、set的构造函数、set的迭代器、set的容量和增删查改函数

文章目录 1.set的介绍2.set的使用2.1set的构造函数2.2set的迭代器2.3set的容量函数2.4set的增删查改函数 1.set的介绍 set的介绍 &#xff08;1&#xff09;set是按照一定次序存储元素的容器。 &#xff08;2&#xff09;在set中&#xff0c;元素的value也标识它(value就是key…
阅读更多...
LTDC之外部SDRAM

LTDC之外部SDRAM

1.配置外部SDRAM&#xff08;嵌入式基础知识&#xff0c;此处不做分析&#xff09; 2.编写SDRAM配置代码&#xff08;copy正点原子例程&#xff09; sdram.c#include "sdram.h" #include "fmc.h"uint8_t SDRAM_Send_Cmd(uint8_t bankx,uint8_t cmd,uint8_…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023