Vu基础及其开发5

第十二章项目实战：电商后台管理系统学习目标熟悉电商后台管理系统功能熟练项目的创建和环境准备，以及项目的配置，如路由、状态管理等熟悉ElmentPlusUI组件库了解Mock.js实现接口的模拟熟练常见页面结构的编写、网络交互和逻辑处理通过之前章节的学习，相信读者已经掌握了Vue3的基本运用，包括指令、组件及其通信、组合式API和响应式编程，以及Vue3相关的工具链的使用，如VueCLI和Vite的脚手架、路由管理VueRouter、状态管理Vuex和Pinia，甚至是网络交互技术axios和服务器渲染技术。但是，在实际项目中，如何综合运用这些技术，才是需要解决的问题。因此，本章将通过一个电商后台管理项目的实战，让大家更加熟练和灵活地将所学技术应用于实际项目开发中，从而提高实际项目开发的能力和水平。项目分析12开始项目3ElementPlus介绍和安装4Mock.js介绍和使用5编写登录页面6编写主页7编写商品管理页面项目分析1．项目介绍本书选择了一个电商后台管理系统作为实战目的，因为这类项目数量众多，同时对Vue的综合知识运用要求也很高，非常适合初学者掌握Vue的熟练操作。通常来说，完整的电商项目具有很多业务功能，并且涵盖的应用端也很广泛，例如PC端前台和后台管理系统、移动app以及小程序等。而本章重点介绍电商PC端后台管理系统，其主要职责是处理后台业务，包括管理员登录、前台用户管理、商品管理、订单管理、系统设置和数据统计等功能。具体的功能及其效果图如图所示。

项目分析项目分析项目分析项目分析项目分析2．技术栈的选择在做一个项目的时候，一旦确定了项目功能需求后，接下来就是技术栈的选择了。因为本书是以Vue技术栈为讲解的，所以电商后台管理系统的主要技术栈还是以Vue为主，具体的技术栈选型如表所示。

技术项目基础框架Vue3项目构建脚手架VueCLI5（或Vite）路由管理VueRouter4状态管理VueX(或Pinia)、vuex-persistedstate状态持久化UI组件库ElementPlus网络交互Axios可视化图表ECharts消息总线Mitt ...项目分析3．前后端分离开发注意事项如今，前后端分离模式已成为应用开发的主流。作为一名前端开发者，在进行前后端分离模式开发时，需要遵循一些规范和注意事项：(1)了解HTTP/HTTPS协议和网络交互技术，这是前后端分离模式开发的基础。(2)熟悉RESTAPI风格，RESTAPI是一种标准的API设计风格，可以方便地进行接口开发和调用。(3)掌握前端实现跨域的方法，跨域是前后端分离模式下常见的网络交互问题。(4)制定前后端通信规范，包括数据格式、接口设计、错误处理等。后端开发者通常会通过技术如Java的Swagger来提供API文档，前端开发者需严格按照API文档进行开发。当然在开发过程中API文档也会随着实际情况而不断的进行更新（如API接口增添了参数和返回数据字段等），以保证前后端业务的正常交互。(5)考虑安全性问题，例如身份认证、授权、输入合法性校验等。安全性问题是前后端分离模式下必须重视的问题。

项目分析12开始项目3ElementPlus介绍和安装4Mock.js介绍和使用5编写登录页面6编写主页7编写商品管理页面开始项目1．环境准备在项目开发前，我们首先要准备好本地开发所需要的一些环境，这样可以避免开发过程中出现因环境出现的一些不必要情况，如：npm安装依赖失败，因Node版本问题运行项目失败等。本章节中的项目使用的开发环境如表所示。为了更加灵活和个性化地进行学习，读者可以根据自己的喜好和学习技术，选择适合自己的开发环境。例如，包管理工具可以选择使用yarn代替npm，开发语言也可以尝试使用TypeScript替代JavaScript，从而提升开发效率和代码可维护性。

环境说明JavaScript运行环境Nodev18.12.1包管理工具NPMV8.19.2开发工具VisualStudioCode开发语言JavaScriptES6+开始项目2．创建项目准备好了必要的开发环境和工具后，就可以开始创建Vue项目了。打开系统自带的命令行工具或VisualStudioCode的Terminal终端，使用VueCLI的“vuecreate”命令或使用vueui界面化创建一个名为“shop-admin”的项目。在选择创建模板的时候，我们选择默认的Vue3模板创建即可，如图所示。如果读者对于router和Vuex的基本配置已经相当熟练了也可以直接使用预设好的带有router和VueX的自定义模板。创建成功后，就可以在VisualStudioCode中以“文件”→“打开文件”的方式导入vue-shop项目。创建好的项目中有脚手架创建的多余的页面组件HelloWorld.vue，我们把它删除掉，同时也在App.vue中删除HelloWorld组件相关的代码。当然为了确保项目是可以正常运行的，还需要执行“npmrunserve”命令，查看项目是否可以正常运行。

开始项目3．配置路由首先，使用npm安装vue-router依赖，在项目目录下执行命令如下：

然后，在src目录下创建router目录，并在router目录下创建index.js文件，index.js配置了网站的路由所有配置，如下所示。npminstallvue-router@4-S

在代码中，创建路由对象选择了Hash模式，然后通过router.beforeEach添加了路由全局守卫，一些拦截和其他处理都可以放到全局守卫中完成，如：未登录不能访问相关路由，动态设置网页标题等等。开始项目接下来，就是需要在main.js中把router应用到Vue中，如下所示。最后，我们需要在App.vue中设置路由显示的视图即<router-view>，如下所示。开始项目4．配置状态管理在电商后台管理系统中，需要把一些状态进行共享。如：登录的状态、登录的用户信息，甚至是一些异步的操作都可能交由Vuex来处理，所以接下来就进行Vuex的配置，步骤如下所示。①安装vuex依赖，执行命令如下：②在src目录下创建store目录，并在store下创建index.js。如果项目中多个模块都需要使用state，也可以将store拆分为多个模块使用。本项目中使用的共享状态有限因此并没有使用模块拆分。npminstallvuex@next-S开始项目index.js的代码如下所示。

代码中，使用vuex的createStore函数创建了store对象并通过export提供给外部使用。在state中我们定义了三个状态分别为isLogin（登录状态）、token（登录凭证）、admin（登录用户信息），并在mutations中提供了SET_USERINFO方法来修改这些状态，同时也允许通过CLEAR_INFO方法在用户退出登录的时候清空这些状态。开始项目在main.js文件中把vuex应用到Vue中，如下所示。在使用Vuex存储状态的时候有个问题，就是当页面刷新后state数据就会丢失。这就会导致在使用系统的时候，如果刷新了页面，登录状态和数据被重置。一旦状态被重置就需要重新登录才行用户体验较差，那如何解决这样的问题呢？state的存储是内存中的数据存储，这意味着存储的状态只存在于应用程序运行时的内存中。当刷新页面或关闭应用程序时，存储的状态将丢失。因此，如果想要刷新页面state数据不丢失，就需要在页面刷新的时候把state持久化到本地，比如如使用Cookie或LocalStorage进行存储。当页面加载的时候再从本地存储中加载state即可。要实现状态的本地存储可以通过window.addEventListener('beforeunload',()=>{})事件在刷新页面前把state存储到本地，然后页面加载的时候再读出来。开始项目当然，也可以使用第三方插件来完成状态的持久化存储，如使用vuex-persistedstate插件。vuex-persistedstate提供了更多方式的存储策略和配置，既支持本地存储localStorage也支持会话存储sessionStorage，同样也支持结合“js-cookie”将数据存储到cookie中，还可以结合“secure-ls”实现本地混淆存储这在一定程度上保证了数据的安全性。本项目将使用vuex-persistedstate插件作为状态的持久化存储策略，使用如下：①

先安装vuex-persistedstate依赖。npminstallvuex-persistedstate-S开始项目②然后在createStore函数的plugins选项中配置createPersistedState()，如下所示。开始项目5．配置Axios网络交互项目中网络交互是必不可少的，因此在做页面前可以先把Axios集成到项目中。为了API调用的复用和更好的维护性，我们需要把Axios进行封装下。Axios的配置和封装的步骤如下：①安装axios依赖。执行命令如下：②封装axios。在src下创建utils目录，并在utils目录下创建request.js。npminstallaxios-S开始项目

在request.js中，通过axios.create创建了store实例，并设置了baseUrl、timeout等通用配置。在interceptors.request请求拦截中对登录凭证token进行了拼接，保证了使用axios请求的API都携带token凭证。在interceptors.response响应拦截中又对API接口返回的数据进行处理，如服务器返回了code为501表示token失效等。最后通过export将axios暴露给外部调用。开始项目③外部调用。封装后的axios，外部可以通过import直接进行调用，如下所示：这里request只是引用时对象的名称，也可以是其他的命名只要符合命名规范即可。温馨提示因为request.js对axios进行了封装供外部调用，因此也不需要使用vue-axios依赖了，vue-axios的使用主要也是方便在组件中调用axios。开始项目6．编写404页面通常网站都会有一些错误处理页面，比如当路由地址错误时会跳转到404页面等，下面以404页面为例，来编写下错误页面。步骤如下。①创建404.vue页面。在src下创建views目录用来存放页面组件，然后在views下创建errorPage目录，并创建404.vue文件，因篇幅有限这里就不在展示style样式代码。开始项目404.vue中使用到的静态图片资源均放到了assets目录下，在使用的可以直接本地引用到代码中。

在项目中的一些样式使用了sass语法，需要安装node-sass和sass-loader依赖。安装node-sass的时候需要注意node-sass跟Node.js版本兼容，同时也需要注意node-sass和sass-loader的版本兼容，如表所示。温馨提示如果想要修改网站的icon可以修改项目路径下public目录中的index.html的内容，或者直接替换掉public目录下的favicon.ico即可。NodeJSnode-sasssass-loaderNode209.0+13.3.0+Node198.0+13.2.0+Node188.0+13.2.0+Node177.0+,<8.012.4.0+Node166.0+10.2.0+开始项目使用npm安装需要指定sass的版本号，本书中使用的版本如下：②配置404页面的路由。当要跳转的路由地址并没有在配置的路由列表中时，就会跳转到404的页面路由，告知用户页面不存在。npminstall-Dnode-sass@8.0.0sass-loader@13.2.2

代码中，:pathMatch(.*)*表示匹配所有未匹配到的路由。404路由还设置了meta元信息选项用来设置页面的标题，meta可以将信息附加到路由上，如过渡名称、谁可以访问路由等，这些信息都可以通过路由对象获取到然后做相应的逻辑处理。开始项目完成404页面相关配置后，我们可以在浏览器地址栏项目路径后随意输入一个不存在的路由地址，就可以看到会自动匹配到404页面，如图所示。项目分析12开始项目3ElementPlus介绍和安装4Mock.js介绍和使用5编写登录页面6编写主页7编写商品管理页面ElementPlus介绍和安装ElementPlus是一个基于Vue3的UI组件库（Element对应着Vue2的版本），它是VueUI组件库中非常流行和受欢迎的组件库之一，也是大多数基于Vue3项目UI库的选择。ElementPlus不仅提供了丰富的组件和功能，而且易于使用和定制。在ElementPlus中，开发者可以找到许多常见的UI组件，包括按钮、表单、表格、弹出框、导航菜单、分页等。这些组件都采用了一致的设计风格，从而确保了整个应用程序的一致性，在项目分析中展示的功能效果图的样式就是采用了ElmentPlus的UI组件实现的。此外，ElementPlus还提供了许多实用的功能。例如，数据导出功能可以帮助你将表格数据导出为Excel或CSV文件，数据筛选功能可以让你轻松筛选表格中的数据，分页功能可以让你方便地分页显示数据等等。除了以上的组件和功能，ElementPlus还支持主题定制。开发者可以根据自己的需求轻松地定制主题颜色和样式，从而满足开发者的设计要求。这使得开发者可以在不同的项目中使用ElementPlus，同时保持一致的视觉风格。总之，ElementPlus是一个功能丰富、易于使用、高度可定制的UI组件库，适用于各种VueWeb应用程序的开发。它不仅提供了大量的组件和功能，还具有灵活性和可扩展性。因此，结合ElementPlus开发者可以大大提高页面开发的效率。ElementPlus介绍和安装在Vue项目中使用ElementPlus也极其简单，只需要安装ElementPlus依赖，然后作为Vue的插件使用即可，使用步骤如下：①安装ElementPlus依赖。②在main.js中引用ElementPlus插件和样式，如下所示。

上述代码中，还引入了element-plus提供的国际化，不然它的一些组件显示的默认是英文，如分页组件。通过use安装了ElementPlus插件后，就可以在任何组件中直接使用ElementPlus的UI组件。npminstallelement-plus-S项目分析12开始项目3ElementPlus介绍和安装4Mock.js介绍和使用5编写登录页面6编写主页7编写商品管理页面Mock.js介绍和使用1．Mock.js介绍和使用在前后端开发过程中，很多时候可能后端服务器的接口并没有编写完成，前端如果想要编写页面的时候不受后端开发进度的影响，可以在前后端规定好API接口规范后进行API的数据请求和返回的模拟，而Mock.js就是一个很好的选择。Mock.js是一款用于生成随机数据的模拟数据生成库，它能够模拟接口返回数据、前端数据模拟等场景下需要的各种数据类型。Mock.js能够模拟生成各种数据格式，包括数字、字符串、布尔值、对象、数组、图片、颜色等，同时它也支持生成符合特定格式要求的数据。Mock.js的主要特点包括：省去手写测试数据的繁琐过程，提高开发效率。支持自定义数据模板和数据类型。提供了丰富的数据模板方法和数据占位符，能够满足不同的数据模拟需求。支持在浏览器端和Node.js环境下使用，兼容性好。Mock.js使用起来非常方便，引入Mock.js后只需要按照规则编写数据模板即可生成随机数据。Mock.js使用Mock.mock()生成并返回数据。Mock.js介绍和使用案例如下所示。上述代码中，会生成一个包含1-3个用户对象的数组，每个用户对象包含name、age、gender、email、phone五个属性，属性值为随机生成的数据。其中，@cname是一个数据占位符，表示生成中文名字，1-3表示生成1到3个对象，'gender|1':['男','女']表示随机选择一个性别。Mock.js介绍和使用同时Mock.js也支持拦截Ajax请求，当前端使用axios发送网络请求时就会被Mock.js拦截到并处理返回数据，这也使得前端可以模拟API接口的调用场景。比如要模拟一个获取用户数据的接口，如下所示。上述代码中，使用Mock.js模拟了一个“/api/user/info”的接口，并且请求的方法是get请求，最后返回一个随机的对象数据。Mock.js更多类型的数据生成本章中就不再赘述了，读者可以到Mock.js官网查看语法规则的使用。Mock.js介绍和使用2．项目中引入Mock.js首先，安装mockjs依赖，执行命令如下：然后，在src下创建mock目录，并创建index.js文件。index.js就是项目所使用的API接口的模拟了，因篇幅限制本书中只展示部分API接口的模拟代码，如下所示。npminstallmockjs-DMock.js介绍和使用Mock.js介绍和使用Mock.js介绍和使用Mock.js介绍和使用在index.js中，除了使用Mock.js生成的随机数据外（如：统计接口的模拟），还使用了定义好的json数据，这些数据都放到了mock目录下的data.js文件中。温馨提示Mock.mock()在模拟API接口的时候，api的地址都加上了“http://localhost:8080/”这是因为在创建axios实例的时候设置了baseUrl，如果mock()方法中不添加baseUrl前缀，访问模拟接口会报错404。读者也可以将baseUrl封装到一个单独的config.js文件中，这样baseUrl和Mock.mock()拦截的API地址前缀也方便维护。Mock.js介绍和使用

最后，想要Mock.js拦截的ajax请求生效，需要在main.js中引入编写好的index.js文件。当然，需要注意的是Mock.js只能在开发环境下使用，当应用部署到生产环境下的时候需要禁用Mock.js。可以根据process.env.NODE_ENV环境变量进行判断是否需要加载Mock.js，如下所示。项目分析12开始项目3ElementPlus介绍和安装4Mock.js介绍和使用5编写登录页面6编写主页7编写商品管理页面编写登录页面在后台管理类型的系统中，登录页面是我们进入系统时首先看到的页面，因为其他后台系统页面需要登录才能访问。编写登录页面可分为以下几个部分：页面效果设计、与API进行网络交互以及处理登录相关逻辑。1．编写页面结构在src/views目录下创建一个名为login的文件夹，并在login文件夹中创建一个名为index.vue的组件文件。在index.vue组件中设计登录页面布局，包括logo、标题、账号输入框、密码输入框和登录按钮。编写登录页面页面中的样式因为篇幅限制上述代码中就不在展示了。在登录的页面效果中，加入了一个粒子动画特效的背景，借助了一个vue-particles的插件，安装命令如下：在main.js引入vue-particles，如下所示。npminstallvue-particles-S编写登录页面2．编写API交互尽管Axios的使用已经进行了封装，但直接在组件中使用并不是一个良好的做法，因为这样不便于接口的维护。为了更好地管理接口，我们可以将相关模块的操作接口放在一个单独的JavaScript文件中，例如将商品相关的接口放在goods.js中。在src下创建api目录，然后创建一个login.js文件，login.js中封装了跟登录相关的所有API接口的调用。编写登录页面3．编写页面逻辑为了使代码更加简洁、可重用、方便将相同逻辑代码放在一起易于维护，可以将大部分代码放在setup函数中编写。对于登录页面，主要逻辑包括数据绑定、表单校验和登录行为。如下程序所示。编写登录页面编写登录页面上述代码中，使用<scriptsetup>标签实现了跟setup函数相同的效果。其中，loginRules与<el-form>的rules属性绑定，定制了表单的校验规则。doLogin函数是登录行为，在执行登录前通过loginFormRef的validate方法进行表单校验。然后，通过定义好的loginApi调用登录的API接口。在异步调用API的过程中，使用了async和await来处理异步行为。根据接口返回的code判断登录是否成功，如果成功，将登录状态、用户信息和token凭证存储到store中，并通过路由跳转到"/home"页面。如果登录失败，则进行错误提示处理。温馨提示在<scriptsetup>中通过import的组件可以直接使用到<template>中，如果是选项式API组件需要在components中进行注册才能使用。编写登录页面4．配置登录路由和登录拦截当编写完登录页面后，需要在路由列表中配置登录页面的路由。并且要在路由的前置守卫中配置未登录行为的拦截，如果登录状态为false，则会自动将路由跳转到登录页面。项目分析12开始项目3ElementPlus介绍和安装4Mock.js介绍和使用5编写登录页面6编写主页7编写商品管理页面编写主面登录成功后进入主页，主页是展示各个功能页面的入口，因此在系统中需要优先编写主页。这样可以确保用户登录后能够快速访问和使用其他功能页面。1．编写主页结构在src/views目录下创建一个名为home的文件夹，并在home文件夹中创建一个名为index.vue的组件文件。通常，后台管理系统的布局结构由上方的头部（header）和下方的内容部分（content）组成。在内容部分中，通常包含左侧的菜单（menu）和右侧的路由页面显示部分。这种布局方式可以提供良好的用户体验和导航功能。在index.vue组件中使用ElementPlus提供的组件来实现主页的页面布局结构，其中包括el-header、el-container、el-aside和el-main组件。菜单部分使用了el-menu和el-sub-menu来实现二级菜单的效果。编写主面编写主面

代码中，顶部el-header中主要由水平方向的el-menu组成，el-container内部部分由el-aside和el-main组成。其中el-aside为左侧菜单的展示，使用el-sub-menu、el-menu-item分别展示一级和二级菜单，并使用v-for进行动态加载；el-main中设计了router-view，表示其他嵌套路由页面的渲染出口。菜单结构根据定义好的menuList数组的结构（也可以由服务器接口返回，这样可以做动态权限设计），通过循环遍历生成菜单的层级结构。menuList定义在utils目录下的list.js中编写主面menuList定义在utils目录下的list.js中，如右图所示。编写主面2．编写主页逻辑主页面的逻辑主要是菜单相关的事件处理，如展开和折叠菜单事件、点击左侧菜单事件、打开指定菜单项。除了菜单外就是退出登录和跳转修改密码页面的处理，如右图所示。代码中，我们使用store.dispatch方法调用名为logout的action。该action中包含了调用退出登录接口和清除用户信息的逻辑。使用then方法来处理Promise对象的返回结果，在成功退出登录后，通过router.push方法跳转到登录页面。编写主面store/index.js中的代码，如下所示。编写主面温馨提示在Vuex的actions中可以执行异步处理，包括API的调用。这样可以更好地组织和管理代码。通过在组件中使用store.dispatch调用actions，就可以触发相应的异步操作。编写主面3．配置主页及其其他路由主页布局中右侧的内容部分使用了<router-view>，这意味着我们将使用嵌套路由的方式来在el-main区域显示其他页面。在之前主页效果图中，右侧部分有内容显示，其实是默认显示了路由页面dashboard.vue。主页的的路由path可以定义为“/”，之后一些其他页面都可以作为其嵌套的子路由。编写主面编写主面编写主面4．编写dashboard组件dashboard.vue为主页el-main默认显示的路由页面。在dashboard组件中主要定义了菜单功能的快捷入口，如点击订单管理可以快速展开菜单并展示订单列表页面。这里设计到一个跨组件方法调用的问题，即点击dashboard.vue中的订单管理触发点击事件，但是展开菜单和显示路由页面却是在home/index.vue中触发的事件。在Vue2.x的时候，使用

EventBus

事件总线可以实现兄弟组件的通信。而在Vue3中事件总线模式已经被移除，官方建议使用外部的、实现了事件触发器接口的库,例如mitt或tiny-emitter。本章中将使用mitt插件库实现跨组件通信。使用mitt库来实现组件之间的事件通信时，通过emitter.on函数定义要调用的函数，然后在其他组件中使用emitter.emit来调用这些函数即可。首先，先安装mitt依赖。npminstallmitt-S编写主面最后，在dashboard.vue中调用openMenu函数即可实现跨组件通信。编写主面项目分析12开始项目3ElementPlus介绍和安装4Mock.js介绍和使用5编写登录页面6编写主页7编写商品管理页面编写商品管理页面电商后台管理系统多以各种管理、配置、统计等功能为主，因篇幅有限，本章节中就以商品管理中的商品管理部分页面为例进行讲解。当然读者学习了商品管理页面的编写后，可以更快的完成用户管理、分类管理、订单管理、操作日志等页面的编写。1．编写商品列表页面结构在src/views目录下创建一个名为goods的目录，并在该目录下创建一个名为listGoods.vue的商品列表页面组件。商品列表的页面布局见功能展示图，主要包含商品数据展示和搜索功能。商品列表和搜索结果的分页展示使用了el-table和el-pagination组件进行实现，点击商品详情展示使用el-dialog弹框的实现，并使用el-backtop实现了返回顶部功能等。编写商品管理页面编写商品管理页面代码中，BackTop为封装了el-backtop的自定义组件，读者也可以直接使用el-backtop组件完成返回顶部功能。编写商品管理页面2．编写商品相关api的封装在编写页面逻辑前，需要把该页面中的API接口的网络交互完成。在api目录下创建goods.js，相关接口的封装如下所示。编写商品管理页面上述API接口中，其中getGoodsDetailApi使用了RESTAPI风格的接口。REST是HTTP协议主要设计者RoyThomasFielding在他2000年的博士论文中提出的，它是一种网络应用程序的设计风格和开发方式，它基于HTTP，可以使用XML格式或JSON格式定义。它结构清晰、使用简单、易于理解、扩展方便，所以正得到越来越多网站的采用。REST的其设计原则如下：每一个URI代表一个访问的资源，即不同的API接口访问的资源是不同的。统一资源接口，对服务器资源的访问，不管是GET、POST、PUT、DELETE请求都是统一URI接口（如：所有商品的操作都使用api/goods地址），只不过是不同的方法进行的操作不一样；GET用来获取资源，POST用来新建资源（也可以用于更新资源），PUT用来更新资源，DELETE用来删除资源；通过操作资源的表现形式来操作资源：例如可以通过Content-Type来确定数据的形式是json还是xml等；所有操作都是无状态的，服务器不会保存客户端的状态。RESTAPI支持缓存，客户端可以缓存资源，以提高性能和减少网络开销。编写商品管理页面3．编写商品列表页面逻辑商品列表的页面的逻辑功能主要为获取商品列表、设置分页逻辑、删除商品、跳转添加和编辑页面、导出数