乐趣区

关于程序员:文创商城项目实战

我的项目背景介绍

本我的项目咱们将综合使用后面学习过的常识,基于前端 vue 框架来开发一个网上商城,商城的商品次要分为文创产品、助农产品、时代经典图书等,让同学们在学习前端常识的同时,能理解一些比拟有创意想法的产品,感触咱们国家的历史文化以及新时代思维。

我的项目性能介绍

我的项目为一个繁难的文创商品购物网站,次要包含用户登录登出、顶部菜单、轮播图、商品展现、商品筛选、商品详情查看、退出购物车、购物车查看等性能

我的项目框架搭建

一. 创立我的项目

vue create mall

二. 装置依赖库

        npm i  axios vue-axios vue-router@3.x  element-ui

三. 在 main.js 中配置

import App from './App.vue'
import axios from "axios"
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import Login from './components/Login.vue';
import Home from './components/Home.vue';
import Cultural from "./components/CulturalFolder/Cultural.vue";
import Clothe from "./components/ClotheFolder/Clothe.vue";
import Fresh from "./components/FreshFolder/Fresh.vue";
import Book from "./components/BookFolder/Book.vue";
import Cart from "./components/ShoppingCart/Cart.vue"
import ProdectDetail from './components/CulturalFolder/ProdectDetail'

Vue.config.productionTip = false

Vue.use(VueAxios, axios)
Vue.use(VueRouter)
Vue.use(ElementUI)

四、配置跨域转发

在根目录下新建 vue.config.js
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    proxy: {
      '/v1': {target: 'http://140.246.26.182:7070'}
    }
  }
})
初始化 vue-router
1. 先把页面分成两个,一个主页 Home,一个登录页 Login。创立 Home 和 Login 组件
2. 在 main.js 中,配置路由表
/* 配置路由表 */
const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login,
  },
  {
    path: '/',
    name: 'home',
    component: Home,
    children: [
      {
        path: '/cultural',
        name: 'cultural',
        component: Cultural
      },
      {
        path: '/clothe',
        name: 'clothe',
        component: Clothe
      },
      {
        path: '/fresh',
        name: 'fresh',
        component: Fresh
      },
      {
        path: '/book',
        name: 'book',
        component: Book
      },
      {
        path: '/cart',
        name: 'cart',
        component: Cart
      },
      {
        path: 'detail/:id',      // 商品详情页路由,id 示意一个变量(任取)component: ProdectDetail,
        props: true      // 把 path 上的变量作为参数传递到 ProductDetail 组件中
      }
    ]
  }
]
3. 在 App 组件中放入 router-view

五. 编写登录页面,Login 组件

<template>
  <div class="page-login">
    <el-row type="flex" justify="center">
      <el-col style="width: 250px">
        <el-row type="flex" align="middle" class="row">
          <label class="label"> 用户 </label>
          <el-input v-model="name" style="width: 200px"></el-input>
        </el-row>
        <el-row type="flex" align="middle" class="row">
          <label class="label"> 明码 </label>
          <el-input v-model="password" type="password" style="width: 200px"></el-input>
        </el-row>
        <el-row type="flex" align="middle" class="row">
          <el-button type="primary" @click="handleClick" style="width: 250px"> 登录 </el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<style>
.page-login {padding-top: 200px;}
.row {
  width: 250px;
  margin-bottom: 20px;
}
.label {
  width: 50px;
  text-align: left;
}
</style>

六、登录申请接口,查看返回后果,判断是否登录胜利

 data() {
    return {
      name: "",
      password: ""
    };
  },
  methods: {handleClick() {
      this.axios
        .post("/v1/login", {
          name: this.name,
          password: this.password
        })
        .then(res => {if (res.data.code === 1) {this.$router.push({ path: "/cultural"});
          } else {alert(res.data.msg);
          }
        });
    }
  }
};

顶部菜单

成果

一、布局

能够合成为四块,两头局部选用 el-menu 组件,其余三块应用三个 di

el-menu 组件文档

https://element.eleme.cn/#/zh-CN/component/menu 1. 新建 HeadMenu 组件,作为顶部菜单组件,并在 Home 组件中引入 2. HeadMenu 组件内布局通过引入 el-menu 组件实现顶部菜单

款式

二、切换 1. 四个菜单,须要对应 4 个组件,创立 4 个组件,而后在路由表中配置子路由 2. 实现切换,el-menu 组件有一个 select 事件,当用户切换菜单时,这个事件会触发,因而能够在 handleSelect 中实现路由跳转,由此实现菜单切换
三、下拉菜单,实现登出性能,成果 1. 应用 DropDown 组件 https://element.eleme.cn/#/zh-CN/component/dropdown

先尝试根底用法 2. 批改原来的款式,退出 DropDown 组件 3. 退出性能,调用服务端退出登录接口

首页轮播图
成果展现:

能主动进行图片的轮播
一、轮播图组件根底用法
咱们要实现图片的轮播,就是把轮播的内容改成图片,即用 img 标签,因而要先从服务端获取轮播图的数据
二、数据获取,查看返回的后果

三、将数据渲染到轮播图组件中

四、优化登录,当没有登录时,申请轮播图数据会返回 未登录,状态码为 -90001,因而能够判断状态码,如果未登录,就跳转到登录页面

五、工作:退出分页

文创商品列表
一. 成果展现
二、商品列表展现
先获取列表数据,接口地址阐明如下 1. 残缺代码
2、创立 ProductItem 组件,并通过 v-for 循环渲染各个商品
3、在 ProductItem 组件中编写代码,实现展现布局

本文由 mdnice 多平台公布

退出移动版