项目背景介绍
本项目我们将综合运用前面学习过的知识,基于前端 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 组件
登录
.page-login {
padding-top: 200px;
}
.row {
width: 250px;
margin-bottom: 20px;
}
.label {
width: 50px;
text-align: left;
}
六、登录请求接口,查看返回结果,判断是否登录成功
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多平台发布
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: 纯前端!超简单!实现查询功能闲言碎语函数科普查询功能
目录 闲言碎语 函数科普 查询功能 查询的目标数据 精确查询 模糊查询 闲言碎语 曾经一无所知的我手撸过一次纯前端的模糊查询功能,当时绞劲脑汁做出来,还颇有成就感,如今回头看就是纯小丑!纯手撸的内容在这里:VUE前端实现“模糊搜索“(纯前端)。 函数科普 在 …