第13章 电子商务平台的前端设计与实现

Vue.js3从入门到实战（微课视频版）第13章电子商务平台的前端设计与实现学习目的与要求本章通过一个小型电子商务平台的前端界面设计，讲述如何使用VueCLI、Vite等前端开发与构建工具开发一个Vue前端应用，其中主要涉及的技术包括Vue、VueRouter、ElementPlus、webpack、Vite、WebStorage等前端技术。通过本章的学习，掌握基于VueCLI、Vite等前端开发与构建工具的Vue前端应用开发的流程、方法以及技术栈。《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录13.1系统设计13.2实现技术13.3系统管理13.4后台管理子系统实现13.5电子商务子系统实现《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.1.1系统功能需求《Vue.js3从入门到实战》陈恒主编，清华大学出版社1．后台管理子系统后台管理子系统要求管理员登录成功后，才能对商品进行管理，包括添加商品、查询商品、修改商品以及删除商品。除商品管理外，管理员还包括商品类型管理、用户订单管理、销量统计、订单统计等功能。2．电子商务子系统1）非注册用户非注册用户或未登录用户具有的功能如下：浏览首页、查看商品详情以及搜索商品的功能。2）用户成功登录的用户除具有未登录用户具有的功能外，还具有购买商品、查看购物车、收藏商品、查看订单、查看收藏以及查看用户个人信息的功能。13.1.2系统模块划分《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.1.2系统模块划分《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录13.1系统设计13.2实现技术13.3系统管理13.4后台管理子系统实现13.5电子商务子系统实现《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.2.1使用Vite构建后台管理子系统《Vue.js3从入门到实战》陈恒主编，清华大学出版社Vite（法语意为“快速的”，发音/vit/，发音同“veet”）是一种新型前端构建工具，能够显著提升前端开发体验。Vite意在提供开箱即用的配置，同时它的插件API和JavaScriptAPI带来了高度的可扩展性，并有完整的类型支持。Vite主要由两部分组成： 一个开发服务器：它基于原生ES模块提供了丰富的内建功能，速度快、模块热更新。 一套构建指令：它使用Rollup

打包代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。13.2.1使用Vite构建后台管理子系统《Vue.js3从入门到实战》陈恒主编，清华大学出版社Vite通过在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。

依赖：大多为在开发时不会变动的纯JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如ESM

或者CommonJS）。Vite将会使用Esbuild预构建依赖。Esbuild使用Go

编写，并且比以JavaScript

编写的打包器预构建依赖快10-100倍。

源码：通常包含一些并非直接是JavaScript

的文件，需要转换（例如JSX，CSS

或者Vue/Svelte组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。Vite以原生ESM

方式提供源码。这实际上是让浏览器接管了打包程序的部分工作，Vite只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。1．安装Vite《Vue.js3从入门到实战》陈恒主编，清华大学出版社打开命令行窗口，使用npmivite-g安装Vite。2．初始化ebusiness-admin《Vue.js3从入门到实战》陈恒主编，清华大学出版社在命令行窗口，使用npminitviteebusiness-admin命令初始化项目ebusiness-admin。3．安装项目依赖《Vue.js3从入门到实战》陈恒主编，清华大学出版社在命令行窗口，首先使用cdebusiness-admin命令进入ebusiness-admin目录，然后使用npminstall命令安装项目依赖。4．启动服务器，运行项目《Vue.js3从入门到实战》陈恒主编，清华大学出版社在命令行窗口，首先使用npmrundev命令启动服务器；然后在浏览器地址栏打开:5173运行项目。13.2.2使用VueCLI构建电子商务子系统《Vue.js3从入门到实战》陈恒主编，清华大学出版社参考10.2.4节，使用VueCLI构建基于VueRouter的Vue.js项目ebusiness-before（电子商务子系统）。目录13.1系统设计13.2实现技术13.3系统管理13.4后台管理子系统实现13.5电子商务子系统实现《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.3.1安装ElementPlus《Vue.js3从入门到实战》陈恒主编，清华大学出版社首先使用VSCode分别打开13.2节构建的两个Vue.js项目ebusiness-admin和ebusiness-before。然后在Terminal

终端，使用命令npminstallelement-plus–save安装ElementPlus，并使用npminstall@element-plus/icons-vue命令安装ElementPlus的Icon

图标。13.3.2安装ECharts《Vue.js3从入门到实战》陈恒主编，清华大学出版社ECharts是一款基于JavaScript的数据可视化图表库，提供直观、生动、可交互、可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。在后台管理子系统ebusiness-admin中，使用ECharts对销量及订单进行统计并可视化展示。所以，首先使用VSCode打开Vue.js项目ebusiness-admin，然后在Terminal

终端使用命令npminstallecharts--save安装ECharts。13.3.3安装VueRouter《Vue.js3从入门到实战》陈恒主编，清华大学出版社在本小节，仅需要使用VSCode打开使用Vite构建的Vue.js项目ebusiness-admin，然后在Terminal

终端使用命令npminstallvue-router安装VueRouter。13.3.4配置文件《Vue.js3从入门到实战》陈恒主编，清华大学出版社本小节将对13.2节创建的两个Vue.js项目ebusiness-admin

和ebusiness-before

进行配置，同时对两个Vue.js项目的ElementPlus以及VueRouter进行相关配置。1．配置路由《Vue.js3从入门到实战》陈恒主编，清华大学出版社在项目ebusiness-admin

的src目录下，创建router/index.js文件，并在该文件中配置路由。在项目ebusiness-before

的src/router/index.js

文件中，配置路由。2．配置入口文件main.js《Vue.js3从入门到实战》陈恒主编，清华大学出版社在两个Vue.js项目ebusiness-admin和ebusiness-before

中，入口文件main.js的配置是一样的，都是引入ElementPlus、VueRouter以及注册图标等相关配置。3．项目配置《Vue.js3从入门到实战》陈恒主编，清华大学出版社在项目ebusiness-admin的配置文件vite.config.js

中，配置路径别名、端口号等。在项目ebusiness-before的配置文件vue.config.js中，配置路径别名、端口号等。目录13.1系统设计13.2实现技术13.3系统管理13.4后台管理子系统实现13.5电子商务子系统实现《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.4后台管理子系统实现《Vue.js3从入门到实战》陈恒主编，清华大学出版社管理员登录成功后，可以对商品、商品类型以及订单进行管理，还可以对商品销量、订单进行统计，并可视化显示。13.4.1管理员登录界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社管理员登录界面LoginView.vue

主要通过ElementPlus表单组件el-form中的输入框组件el-input和按钮组件el-button进行界面设计。当单击“登录”按钮时，执行login(loginForm)完成表单验证。管理员登录成功后，将用户名保存到sessionStorage中，以便后续权限验证使用。13.4.2导航栏界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社在主界面的左侧有导航菜单组件SidebarCom.vue，顶部有头部组件HeaderCom.vue。在主界面组件HomeView.vue

中引入导航菜单组件SidebarCom.vue和头部组件HeaderCom.vue。13.4.3类型管理界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社管理员登录成功后，可以对商品类型进行管理，包括新增类型、编辑类型、删除类型、查询类型等功能。13.4.4商品管理界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社管理员登录成功后，可以对商品进行管理，包括新增商品、编辑商品、删除商品、查询商品等功能。13.4.4商品管理界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.4.4商品管理界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.4.4商品管理界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.4.4商品管理界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.4.5订单管理界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社管理员登录成功后，可以对订单进行管理，包括订单查询、订单详情、删除订单等功能。13.4.5订单管理界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.4.5订单管理界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.4.6销量统计界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.4.6销量统计界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.4.7订单统计界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录13.1系统设计13.2实现技术13.3系统管理13.4后台管理子系统实现13.5电子商务子系统实现《Vue.js3从入门到实战》陈恒主编，清华大学出版社13.5电子商务子系统实现《Vue.js3从入门到实战》陈恒主编，清华大学出版社游客具有浏览首页、查看商品详情和搜索商品等功能。成功登录的用户除具有游客具有的功能外，还具有购买商品、查看购物车、收藏商品、查看我的订单以及用户信息的功能。13.5.1导航栏及搜索界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社在导航栏及搜索界面HeaderView.vue中，使用el-carousel

在特定区域，循环播放广告商品图片；使用defineEmits声明向父组件抛出的自定义事件，并根据自定义事件将商品类型ID和搜索框输入信息传递给父组件。13.5.2首页界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社在首页界面IndexView.vue中，引入导航栏及搜索界面组件HeaderView，并根据子组件HeaderView传递过来的商品类型ID或搜索框输入信息，显示相关商品信息。单击商品类型（如“水果”），首页界面将仅显示该类型下的商品信息；在搜索输入框中，输入“XXX”后，单击“搜索”按钮，首页界面将仅显示商品名称包含“XXX”的商品信息。13.5.3用户注册界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社在首页界面中，单击“注册”超链接，调用register函数，在register函数中通过router.push()方法，打开用户注册界面RegisterView.vue。13.5.4用户登录界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社在首页界面中，单击“登录”超链接，调用login函数，在login函数中通过router.push()方法，打开用户登录界面LoginView.vue。登录成功，将用户信息保存到sessionStorage对象中，以便鉴权使用。13.5.5商品详情界面《Vue.js3从入门到实战》陈恒主编，清华大学出版社在首页