购物商城项目

最新推荐文章于 2024-07-12 16:55:56 发布
最新推荐文章于 2024-07-12 16:55:56 发布
阅读量1k 收藏 22
点赞数 26
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63298649/article/details/137051437
版权

一、功能模块

二、涉及技术

三、项目中的vw适配

项目根目录中， 新建postcss的配置文件`postcss.config.js`

四、路由配置

路由设计：

  • 登录页

  • 首页架子

    • 首页 - 二级

    • 分类页 - 二级

    • 购物车 - 二级

    • 我的 - 二级

  • 搜索页

  • 搜索列表页

  • 商品详情页

  • 结算支付页

  • 我的订单页

4.1 配置一级路由

router/index.js 配置一级路由，新建对应的页面文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout'
import Search from '@/views/search'
import SearchList from '@/views/search/list'
import ProDetail from '@/views/prodetail'
import Login from '@/views/login'
import Pay from '@/views/pay'
import MyOrder from '@/views/myorder'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/',
      component: Layout
    },
    {
      path: '/search',
      component: Search
    },
    {
      path: '/searchlist',
      component: SearchList
    },
    {
      path: '/prodetail/:id',
      component: ProDetail
    },
    {
      path: '/pay',
      component: Pay
    },
    {
      path: '/myorder',
      component: MyOrder
    }
  ]
})

export default router

4.2 路由配置-tabbar标签页

vant网站地址：Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)

4.2.1 vant-ui.js 引入组件

4.2.2 导航栏配置

  1. layout.vue 复制官方代码

  2. 修改显示文本及显示的图标

  3. 配置高亮颜色   

 4.2.3 router/index.js配置二级路由

4.2.3.1 新建vue页面

4.2.3.2 router/index.js配置二级路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login'
import Layout from '@/views/layout'
import Search from '@/views/search'
import SearchList from '@/views/search/list'
import ProDetail from '@/views/prodetail'
import Pay from '@/views/pay'
import MyOrder from '@/views/myorder'
import Home from '@/views/layout/home'
import Category from '@/views/layout/category'
import Cart from '@/views/layout/cart'
import User from '@/views/layout/user'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '/home', component: Home
        },
        {
          path: 'category',
          component: Category
        },
        {
          path: 'cart',
          component: Cart
        },
        {
          path: 'user',
          component: User
        }
      ]

    },
    { path: '/search', component: Search },
    {
      path: '/prodetail/:id',
      component: ProDetail
    },
    {
      path: '/pay',
      component: Pay
    },
    {
      path: '/myorder',
      component: MyOrder
    },
    {
      path: '/searchlist',
      component: SearchList
    }

  ]
})

export default router

4.2.3.3 layout.vue 配置路由出口, 配置 tabbar,点击导航栏的图标可以跳转页面，并且配置了二级路由出口

<template>
<div>
<!--二级路由出口，二级组件展示的位置-->
  <van-tabs 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-tabs>

</div>
</template>

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

<style>

</style>

五、登录页面布局

5.1组件导入，使用的是

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

5.2 login页面样式

<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 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址,请求响应拦截器等等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

6.1 根据起步 | Axios中文文档 | Axios中文网 (axios-http.cn)创建实例

// 创建axios实例，将来对创建出来的实例，进行自定义配置
// 好处：不会污染原始的axios实例
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
})

6.2 自定义配置

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

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)
})

6.3 导出配置好的axios实例：instance

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

七、图形验证码功能

7.1 准备数据，获取图形验证码后存储图片路径，存储图片唯一标识

async created () {
  this.getPicCode()
},
data () {
  return {
    picUrl: '',
    picKey: ''
  }
},
methods: {
  // 获取图形验证码
  async getPicCode () {
    const { data: { base64, key } } = await request.get('/captcha/image')
    this.picUrl = base64
    this.picKey = key
  }
}

7.2 动态渲染图形验证码，并且点击时要重新刷新验证码

<img v-if="picUrl" :src="picUrl" @click="getPicCode">

八、封装api接口 - 图片验证码接口

目的：

  • 请求与页面逻辑分离

  • 相同的请求可以直接复用请求

  • 进行了统一管理

8.1 新建 api/login.js 提供获取图形验证码 Api 函数（如果不加return，就接受不到返回回来的promise的结果）

// 此处用于存放所有登录相关的接口请求
// 1.获取图像验证码
import request from '@/utils/request'
export const getPicCode = () => {
  // 如果不加return，就接受不到返回回来的promise的结果
  return request.get('/captcha/image')
}

九、toast 轻提示（两种使用方式）

记不得看官方文档Vant 2 - 轻量、可靠的移动端组件库 (gitee.io)

十、短信验证倒计时功能

10.1倒计时效果

10.1.1 准备 data 数据

定时器的ID，便于清空定时器，同时也用于判断定时器存不存在

data () {
  return {
    totalSecond: 60, // 总秒数
    second: 60, // 当前秒数，开定时器
    timer: null // 定时器 id
  }
},

10.1.2 给按钮注册点击事件

只有它们两个相等时，才显示获取验证码，否则都是几秒后发送

<button @click="getCode">
  {{ second === totalSecond ? '获取验证码' : second + `秒后重新发送`}}
</button>

10.1.3 开启倒计时

判断：只有没有定时器，并且值相等才会开启

async getCode () {
  if (!this.timer && this.second === this.totalSecond) {
    // 开启倒计时
    this.timer = setInterval(() => {
      this.second--

      if (this.second < 1) {
        clearInterval(this.timer)
        this.timer = null
        this.second = this.totalSecond
      }
    }, 1000)

    // 发送请求，获取验证码
    this.$toast('发送成功，请注意查收')
  }
}

10.1.4 离开页面销毁定时器

destroyed () {
  clearInterval(this.timer)
}

10.2 验证码请求校验处理

10.2.1 准备变量

data () {
  return {
    mobile: '', // 手机号
    picCode: '' // 图形验证码
  }
},

10.2.2 双向绑定，以快速获取表单数据

<input v-model="mobile" class="inp" maxlength="11" placeholder="请输入手机号码" type="text">
<input v-model="picCode" class="inp" maxlength="5" placeholder="请输入图形验证码" type="text">

10.2.3 methods中封装校验方法,返回结果为true，则通过校验，可以继续

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
},

10.2.4 请求倒计时前进行校验

// 获取短信验证码
async getCode () {
  if (!this.validFn()) {
    return
  }
  ...
}

10.3 封装接口，请求获取验证码

10.3.1 封装接口

// 获取短信验证码
export const getMsgCode = (captchaCode, captchaKey, mobile) => {
  return request.post('/captcha/sendSmsCaptcha', {
    form: {
      captchaCode,
      captchaKey,
      mobile
    }
  })
}

10.3.2 调用接口，添加提示

async getCode () {
  if (!this.validFn()) {
    return
  }

  if (!this.timer && this.second === this.totalSecond) {
    // 发送请求，获取验证码
    await getMsgCode(this.picCode, this.picKey, this.mobile)
    this.$toast('发送成功，请注意查收')
    
    // 开启倒计时
    ...
  }
}

十一、封装api接口 - 登录功能

11.1 提供登录 Api 函数

// 验证码登录
export const codeLogin = (mobile, smsCode) => {
  return request.post('/passport/login', {
    form: {
      isParty: false,
      mobile,
      partyData: {},
      smsCode
    }
  })
}

11.2 login/index.vue 登录功能

<input class="inp" v-model="msgCode" maxlength="6" placeholder="请输入短信验证码" type="text">
<div class="login-btn" @click="login">登录</div>

data () {
  return {
    msgCode: '',
  }
},
methods: {
  async login () {
    if (!this.validFn()) {
      return
    }
    if (!/^\d{6}$/.test(this.msgCode)) {
      this.$toast('请输入正确的手机验证码')
      return
    }
    await codeLogin(this.mobile, this.msgCode)
    this.$router.push('/')
    this.$toast('登录成功')
  }
}

十二、响应拦截器统一处理错误提示

响应拦截器是拿到数据的 第一个 “数据流转站”，可以在里面统一处理错误，只要不是 200 默认给提示，抛出错误。

utils/request.js里toast不能直接使用，需要导入

import { Toast } from 'vant'

...

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  const res = response.data
  if (res.status !== 200) {
    Toast(res.message)
    return Promise.reject(res.message)
  }
  // 对响应数据做点什么
  return res
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

weixin_63298649
关注
  • 26
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Android购物商城项目
weixin_44822939的博客
08-02 2万+
网络商城APP，实现购买，加入购物车，移除商品，实现短信验证登录和定位
Vue购物商城项目(一)
白瑕 的博客
07-03 6290
Vue购物商城项目 文章目录Vue购物商城项目前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import
SSM购物商城项目开发
gulang_luofeng的博客
07-02 5267
开发环境 ： 当前用myeclipse （idea） jdk7 tomcat 8,.5 创建项目 new —— web project ——— 记得把web.xml勾上 SSM框架整合配置 添加依赖 添加依赖的方式常用的有两种： 通过maven创建 项目，通过maven来添加依赖 本地导入对应的jar包，初学者可以使用，不过添加内容比较多 我们现在用本地导入 WEB-INF --li...
Jieyue捷阅网购物商城项目介绍说明
云丶言的博客
11-10 4615
jieyue捷阅网是基于springboot开发的轻量级单体架构购物商城网站，并分为用户、商户、后台三大模块。用户模块能够进行商品搜索浏览、在线下单、微信支付等功能；商户模块则可以对收益情况进行查看以及订单成交情况、可对商品进行上下架和增加等操作；后台模块可进行群发消息通知、RBAC权限管理、商户的停用启用以及商城的广告海报设置等功能。...
基于JavaEE的汉服购物商城 项目（可毕设）
d694046387的博客
11-08 2290
项目下载: 基于JavaEE的汉服购物商城 （可用毕设） 本项目于2020年10月构想编写 项目前端原型是从网上找的一个u袋网的购物商城界面。 本项目使用的是jsp、servlet、javascript、ajax、jquery、tomcat、redis、MySQL。 除项目本身，还有前端的项目原型，有写好的数据字典、SQL文件、流程图、功能图等。 ! 项目下载: 基于JavaEE的汉服购物商城 （可用毕设） ...
前端“尚品汇”大型购物商城项目（前台页面）系列1
阿卡内的博客
07-07 4987
前端“尚品汇”大型购物商城项目（前台页面）系列1
购物商城框架java_基于jsp的购物商城-JavaEE实现购物商城 - java项目源码
weixin_39870238的博客
02-25 1884
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的购物商城, 该项目可用各类java课程设计大作业中, 购物商城的系统架构分为前后台两部分, 最终实现在线上进行购物商城各项功能,实现了诸如用户管理, 登录注册, 权限管理等功能, 并实现对各类购物商城相关的实体进行管理。该购物商城为一个采用mvc设计模式进行开发B/S架构项目,并采用分层架构对项目进行架构, 分为...
vue网易严选购物商城项目
qq_45327221的博客
09-08 3538
vue网易严选购物商城项目项目展示项目上线（移动端访问）：http://182.92.226.242:8080/#/indexlist项目源码： https://github.com/wy-linux/yan_xuan项目截图：项目模块登录模块页面布局密码与验证码登录切换密码输入框的密码显示与隐藏业务逻辑验证码发送登录功能警告提示框用户的持久登陆购物车模块页面布局vue动画业务逻辑购物车添加商品购物车的全选与单选购物车的商品结算购物车商品的删除购物车的状态维持首页模块首页商品列表的渲染首页商品详情页的渲染值
Web项目实战（购物商城项目简单的实现）
m0_67391683的博客
06-18 2811
商城项目的简单实现开发平台：NetBeans：NetBeans是开源软件开发集成环境，是一个开放框架，可扩展的开发平台，可以用于Java、C/C++，PHP等语言的开发，本身是一个开发平台，可以通过扩展插件来扩展功能。 开发工具：JDK是 Java 语言的软件开发工具包，主要用于移动设备、嵌入式设备上的java应用程序。JDK是整个java开发的核心，它包含了JAVA的运行环境(JVM+Java系统类库)和JAVA工具。 应用服务器：Apache Tomcat 8.0.27.0一个轻量级的web服务器，to
商城项目介绍
m0_73400863的博客
03-30 1465
好的项目在开发前必定做好需求分析，选用合适的框架，创建好各类的数据库以及库之间的关联；店铺管理，涉及多店铺商户，可以增删改店铺，设置营业状态及时间，批量或单独设置商铺的各类信息，如基本信息、商品管理、下单设置、优惠设置、活动设置、配送设置、自定义设置、接单设置、结算设置.......等；商品管理，增删改查商品，涉及商品库存、分类、规格、是否必选、上架下架、商品销量......等；系统设置，这是总体的系统的设置，只有该商铺管理员能进行操作，可修改整个系统的信息。可以浏览商品，选择自己喜欢的商品；
JavaWeb购物商城项目（完整源码+Mysql数据库）
05-14
【实例简介】我们在学习了JavaWeb各种基础知识之后，最需要做的就是学会应用，开发一些项目把所学的知识应用起来，下面的这个《JavaWeb购物商城项目》实战项目就是比较好的练手教程。 开发环境：Java、MySQL 相关...
JAVAWEB购物商城项目
07-08
项目描述： ① 主页显示热销商品； ② 所有商品展示，可进行商品搜索； ③ 点击商品进入商品详情页，显示库存，具有立即购买和加入购物车功能，可增减购买商品数量亦可手动输入(同时验证库存)，显示该商品的评价信息...
基于JAVAWEB购物商城项目
08-20
开发环境：Servlet、MySQL 相关工具及技术：C3P0数据源、MVC设计模式、动态代理模式、Ajax、jQuery、JSP、JSTL、Fileupload等 项目描述： ① 主页显示热销商品； ② 所有商品展示，可进行商品搜索； ③ 点击商品...
基于java web开发的购物商城项目源码
05-12
"基于Java Web开发的购物商城项目源码"是指一个使用Java Web技术栈构建的在线购物平台的完整源代码。这个项目可能是为了帮助学生或开发者进行毕业设计或者作为小型项目的参考实例。 【描述解读】 描述中提到，这个...
OpenSNN推文：近期优质博客推荐汇总
最新发布
opensnn的博客
07-12 343
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
更新商品前端接口编写
weixin_55639995的博客
07-12 368
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 310
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 209
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 275
通过sm4对文件进行加解密，用户输入密码
flask购物商城项目
05-05
Flask购物商城项目可以包括以下功能： 1. 用户注册和登录：用户可以注册一个账号，并且用该账号登录到商城系统。 2. 商品展示：商城可以展示所有的商品，并且每个商品可以显示其名称、价格、图片等信息。 3. 商品搜索：用户可以通过关键词搜索商品，如商品名称、分类等。 4. 商品分类：商城可以将商品按照分类展示，方便用户查找。 5. 购物车：用户可以将自己想要购买的商品添加到购物车中，方便结算。 6. 订单结算：用户可以结算购物车中的商品，生成订单并完成支付。 7. 订单查询：用户可以查询自己历史订单记录。 8. 个人中心：用户可以在个人中心修改个人信息，如昵称、头像、收货地址等。 9. 后台管理：管理员可以登录后台管理系统，管理商品信息、订单信息等。 以上是Flask购物商城项目的基本功能，你可以根据自己的需求进行扩展和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值