vue商城流程

～晴天～～

已于 2023-05-08 22:30:43 修改

阅读量166

点赞数

文章标签： vue.js javascript html

于 2022-01-28 15:54:34 首次发布

本文链接：https://blog.csdn.net/rcx0113/article/details/122732439

版权

1.写页面

在router下的index.js中导入

{
    path: "/",
    name: "Home",
    component: () => import("../views/Home.vue"),
  },
  {
    path: "/list",
    name: "List",
    component: () => import("../views/List.vue"),
  },
      .........
  {
    path: "/detail",
    name: "Detail",
    component: () => import("../views/Detail.vue"),
    meta: {
      hideNav: true, //跳转到详情页时，首页底部导航隐藏
    },
  },

在app.vue中写底部导航

 <div id="app">
    <router-view class="main" />
    <!-- 底部导航 -->
    <van-tabbar active-color="red" route :fixed="false" v-show="isShowNav">
      <van-tabbar-item icon="home-o" :to="{ name: 'Home' }"
        >首页</van-tabbar-item
      >
      <van-tabbar-item icon="bars" :to="{ name: 'List' }" dot
        >列表</van-tabbar-item
      >
      <van-tabbar-item icon="shopping-cart-o" :to="{ name: 'Cart' }" badge="5"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" :to="{ name: 'User' }"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>

【注】：页面布局底部导航可能会覆盖一部分内容，设置:fixed="false，在写布局

html,
body,
#app {
  height: 100%;
  widows: 100%;
}
#app {
  display: flex;
  flex-direction: column;
}
img {
  width: 100%;
}
.main {
  flex: 1;
  overflow: auto;
}

【注】：详情页的导航可能被首页的导航覆盖，需要给他一个meta值，然后在App.vue页面中进行监听

data() {
    return {
      isShowNav: true,
    };
  },
  watch: {
    //跳转到详情页时，首页底部导航隐藏
    $route(v) {
      if (v.meta.hideNav) {
        this.isShowNav = false;
      } else {
        this.isShowNav = true;
      }
    },
  },

2.封装请求方式

utils下的两个js文件

tool.js

export const serverUrl = "http://localhost:1337";
//箭头函数一行不需要写return 
export const setToken = (token) => sessionStorage.setItem("token", token);
export const getToken = () => sessionStorage.getItem("token");
export const removeToken = () => sessionStorage.removeItem("token");
export const isLogined = () => (getToken() ? true : false);

request.js

import axios from "axios";
import NProgress from "nprogress"; //进度条引用  需要安装
import "nprogress/nprogress.css";
import { serverUrl, getToken } from "./tools";

//1.创建一个拥有通用配置的axios实例
//axios.create(config) 对axios请求进行二次封装
const instance = axios.create({
  baseURL: serverUrl,
  timeout: 5000,
});

//3.写拦截器 cv地址https://github.com/axios/axios#interceptors
instance.interceptors.request.use(
  function (config) {
    NProgress.start(); //启动进度条
    // 以后你们使用的接口中的token名字可能不一样，也可能有其他的设置位置
    //  记得去问给你接口的人
    config.headers.token = getToken(); // 在请求头中设置token

    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function (response) {
    NProgress.done(); //关闭进度条
    return response.data; //返回 response.data,否则外层需要返回.data.data
  },
  function (error) {
    console.dir(error);
    //401表示没有登录
    if (error.response?.status == 401) {
      //
      window.location.href = "/login";
    }
    NProgress.done(); //关闭进度条
    return Promise.reject(error);
  }
);

//2.写请求方式
export const get = (url, params) => instance.get(url, { params });
export const post = (url, data) => instance.post(url, data);
export const put = (url, data) => instance.put(url, data);
export const del = (url) => instance.delete(url);

3.请求接口

轮播图

//1.banner.js
import { get } from "../utils/request";
export const loadBannersAPI = () => get("/api/v1/banners");
//2.Home.vue页面渲染
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="item in banners" :key="item.id">
    <img :src="item.coverImage | dalImg" :alt="item.name" />
  </van-swipe-item>
</van-swipe>
//3.页面创建时加载资源
import { loadBannersAPI } from "../services/banner";
async created() {
    const res = await loadBannersAPI();
    this.banners = res.data;
  },
//4.图片可能加载不出来，需要写一个全局过滤器  main.js
  //全局过滤器 图片的路径加载
    Vue.filter("dalImg", (url) => {
      if (url) {
        if (url.startsWith("http")) {
          return url;
        } else {
          return serverUrl + url;
        }
      }
      //指定一张默认的图片
      return "http://oss.penkuoer.com/uPic/ss.jpeg";
    });

 商品分类

//1.categories.js
import { get } from "../utils/request";
export const loadCategoriesAPI = () => get("/api/v1/product_categories");
//2.Home.vue页面渲染
<van-grid :column-num="3">
      <van-grid-item
        v-for="value in categories"
        :key="value.id"
        :icon="value.coverImage | dalImg"
        :text="value.name"
      />
</van-grid>
//3.页面创建时加载资源
import { loadCategoriesAPI } from "../services/categories";
const resCategories = await loadCategoriesAPI();
this.categories = resCategories.data;

商品列表

商品加载更多，用List列表写
//1.products.js
import { get } from "../utils/request";
export const loadProductsAPI = (page = 1) => get("/api/v1/products", { page });
//2.List.vue页面渲染
//oading 表示是否加载  finished 当数据加载完成之后设置为true
<van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
      <van-card
        v-for="(item, index) in products"
        :key="item.id"
        :tag="index < 5 ? index + 1 + '' : ''"
        :num="item.amount"
        :price="item.price"
        :origin-price="item.price"
        :title="item.name"
        :thumb="item.coverImage | dalImg"
        @click-thumb="toDetail(item.id)"
      />
</van-list>
//3.页面创建时加载资源
import { loadProductsAPI } from "../services/products";
export default {
  data() {
    return {
      products: [],
      page: 1,
      loading: false,
      finished: false,
    };
  },
  created() {
    this.onLoad();
  },
  methods: {
    async loadMore() {
      this.loading = true; // 设置为加载中
      const res = await loadProductsAPI(this.page);
      if (res.data.length == 0) {
        this.finished = true;//显示没有更多了
      }
      this.page++;
      this.products.push(...res.data);
      this.loading = false;
    },
    onLoad() {
      this.loadMore();
    },
    toDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      });
    },
  },
};

商品详情

//1.products.js
export const loadProductByIdAPI = (id) => get("/api/v1/products/" + id);
//2.Deatil.vue渲染页面
 <h1>{{ detail.name }}</h1>
 <div class="content" v-html="detail.content"></div>
//3.页面创建时加载资源
import { loadProductByIdAPI } from "../services/products";
 created() {
    loadProductByIdAPI(this.$route.query.id).then((res) => {
      this.detail = res.data;
      console.log(this.detail);
    });
  },
  //写法等同于
  async created() {
    const res = await loadProductByIdAPI(this.$route.query.id);
    this.detail = res.data;
  },
};

商品加入购物车

//1.调用加入购物车的接口  （接口在购物车中写有）
import { addToCartAPI } from "../services/cart";
//2.写点击方法
 async onClickButton() {
      await addToCartAPI(this.detail.id, 1, this.detail.price);
      Toast.success({
        message: "加入购物车成功",
      });
},

4.登录注册

在tool.js中封装token值的设置和获取，判断是否需要登录

//上面有箭头函数的写法
export function setToken(token) {
  sessionStorage.setItem("token", token);
}
export function getToken(token) {
  return sessionStorage.getItem("token");
}
export function removeToken() {
  return sessionStorage.removeItem("token");
}
export function isLogin() {
  return getToken() ? true : false;
}

在request.js中需要在全局请求拦截中写请求头中设置token
```
  config.headers.token = getToken();
```

路由index.js中判断哪个页面需要登录后才可以显示，写导航守卫

给需要判断的页面写meta属性,然后写beforeEach

//1.添加meta属性
 meta: {
      needLogin: true,
    },
//2.导航守卫
router.beforeEach((to, from, next) => {
  if (to.meta.needLogin) {
    if (isLogined()) {
      next();
    } else {
      next({
        name: "Login",
      });
    }
  } else {
    next();
  }
});

在services文件夹下的auth.js中封装登录和注册的请求方法

import { post } from "../utils/request";
export const loginAPT = (data) => post("/api/v1/auth/login", data);
export const regAPI = (data) => post("/api/v1/auth/reg", data);

 async onSubmit(val) {
      const res = await loginAPT(val);
      console.log(res);
      if (res.code == 1) {
        setToken(res.data);
        Toast.success({
          message: "登录成功",
        });
        this.$router.replace({
          name: "User",
        });
      } else {
        Toast.fail({
          message: res.data,
        });
      }
    },

同登录，调用注册接口

5.购物车

在cart.js中封装接口方法

//获取购物车数据
export const loadCartsAPI = () => get("/api/v1/shop_carts");
//加入购物车  需要传3个参数
export const addToCartAPI = (product, amount, price) =>
  post("/api/v1/shop_carts", { product, amount, price });
//删除购物车
export const delCartAPI = (cart_id) => del("/api/v1/shop_carts/" + cart_id);

调用购物车列表

调用购物车列表，可以在methods中写一个loadData()方法，在created的时候调用方法,

页面通过v-for循环展示

created() {
    this.loadData();
 },
//加载购物车列表数据 
async loadData() {
      const res = await loadCartsAPI();
      console.log(res);
      this.carts = res.data
        .filter((item) => item.product)//有些数据为空，所以需要过滤
        .map((item) => ({
          ...item,
          checked: false,
        }));
    },

 购物车数量加减

//1.vant总的步进器中点击按钮的方法plus和minus,禁用输入数值disable-inpu
 <template #footer>
          <van-stepper
            v-model="item.amount"
            :disable-input="true"
            @plus="plusCart(item)"
            @minus="minusCart(item)"
          >
          </van-stepper>
  </template>
//2.写添加plus和减少minus的方法
//添加数量
async plusCart(item) {
  await addToCartAPI(item.product.id, 1, item.product.price);
},
//减少购物车数量
async minusCart(item) {
  await addToCartAPI(item.product.id, -1, item.product.price);
},

全选反选，计算总价

//1.单个复选框  checked值在加载时默认都给了false
 <template #tag>
    <van-checkbox v-model="item.checked"></van-checkbox>
 </template>
//2.全选
 <van-submit-bar :price="sumPrice" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked">全选</van-checkbox>
</van-submit-bar>
//3.写计算属性  全选反选，计算总价
 computed: {
    checked: {
      set(val) {
        this.carts.forEach((item) => (item.checked = val));
      },
      get() {
        return this.carts.every((item) => item.checked);
      },
    },
    sumPrice() {
      return (
        this.carts
          .filter((item) => item.checked)
          .reduce((pre, cur) => pre + cur.amount * cur.price, 0) * 100
      );
    },
  },

删除购物车数据

//1.调用接口
import { delCartAPI } from "../services/cart";
//2.写点击删除的事件
 async delCart(id) {
      await delCartAPI(id);
      Toast.success({
        message: "删除成功",
      });
      this.loadData();
    },

～晴天～～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue商城流程

1.写页面在router下的index.js中导入{ path: "/", name: "Home", component: () => import("../views/Home.vue"), }, { path: "/list", name: "List", component: () => import("../views/List.vue"), }, ......... { path: "/de...
复制链接

扫一扫