基于Vue2、vant、vue-cookies&axios技术实现瑞幸咖啡项目

Achong_0427

已于 2023-07-23 10:47:37 修改

阅读量1.6k

点赞数 6

文章标签： vue.js 前端 javascript

于 2023-07-23 10:34:07 首次发布

本文链接：https://blog.csdn.net/m0_71479134/article/details/131873772

版权

一、项目介绍

i、基本描述

本次项目以Vue2来进行开发，主要是后端为前端提供接口从而实现页面的数据渲染，该瑞幸咖啡应用APP由多个模块组成，包括商品展示、购物车、订单管理等，商品顾名思义是以咖啡类为主，满足了用户多种咖啡需求。

ii、页面功能的实现

1、静态页面的实现

首页

搜索页

商品详情页

菜单页

购物袋页

我的页面

还有个人资料、我的订单、我的收藏~等页面太多了，就没一一展示，下面详细简介会有相关截图进行展示。

2、后端接口的请求

本次项目所用的全部后端接口：后端接口

3、该项目使用到的技术栈

i、配置vant：npm i vant -S

安装按需引入vant组件插件：npm i babel-plugin-import --save-dev

在babel.config.js文件添加以下代码

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

在main.js写入以下代码

//导入vant框架的组件
  import { Button } from 'vant'

//全局注册
  Vue.use(Button)

//测试Button组件
  <van-button type="info">信息按钮</van-button>

ii、配置axios：npm i axios vue-axios --save

在main.js引入一下代码

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
//将请求的路径和appkey存放在原型属性里 
Vue.prototype.baseURL="http://www.kangliuyong.com:10002"
Vue.prototype.appkey="U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA="

//请求拦截器
 axios.interceptors.request.use(config => {
      if (config.method === "post") {
        // 序列化 post 请求参数
        let paramsString = "";
        for (let key in config.data) {
          paramsString += `${key}=${config.data[key]}&`;
        }
        config.data = paramsString.slice(0, -1);
      }
      return config;
    });

iii、配置vue-cookies：https://www.jianshu.com/p/60c13168cc8f

安装：npm i vue-cookies --save

在main.js引入一下代码

import VueCookies from 'vue-cookies'
Vue.use(VueCookies)



//设置cookie
//过期时间以秒为单位
//this.$cookies.set(键名, 值, 过期时间)

二、项目的业务实现流程

i、登录

在登录页面点击注册按钮会弹出注册框进行注册操作，注册手机号必须为唯一才并且密码必须为字母开头才能注册成功。

// 注册接口
    postRegister() {
      let self = this;
      let data = {
        appkey: self.appkey,
        nickName: self.registerInfo.name,
        password: self.registerInfo.password,
        phone: self.registerInfo.phone
      };
      postRegister(data)
          .then(res => {
            this.$toast({
              message: res.data.msg,