Spring 项目 实战基础 8

项目5“彩云之南-文旅驿站”项目前端开发01【学前导读】【学前导读】本项目将详细介绍“彩云之南-文旅驿站”项目的前端实现，包括前端项目的初始化、组件设计、路由配置和数据交互等。我们将通过Vue.js和ElementPlus，展示前端页面的具体实现。同时，我们将介绍前端项目的打包和部署流程。02【学习目标】【学习目标】理解前后端分离的开发模式及其优势；掌握Vue.js和ElementPlus的基本用法；了解前端项目的打包和部署流程；能够通过实际案例分析前端实现的关键步骤。03【课程思政】【课程思政】通过前端开发过程中的自主学习，培养学生独立自主的意识；强调在开发过程中注重界面优化和用户体验，培养学生的工匠精神；通过团队合作完成前端开发，培养学生的协作能力和沟通技巧。本项目将深入学习如何运用Vue.js构建“彩云之南-文旅驿站”项目的前端。首先，项目将介绍如何使用VueCLI（CommandLineInterface，命令行界面）来初始化项目，帮助用户迅速搭建开发环境，并对项目目录及配置文件进行详细讲解，确保能够全面理解项目结构。在处理与后端API的交互时，项目将重点讲解如何利用Axios发起HTTP请求，处理请求和响应，并在Vue组件中实现，同时探讨常见的错误处理策略。这将有助于构建具有动态数据交互能力的现代化前端应用。【课程思政】此外，路由管理是构建SPA（SingleApplication，单页面应用）的关键环节。我们将使用VueRouter来配置应用路由，支持动态路由和嵌套路由的实现，从而提升用户体验并简化页面导航。最后，项目的打包与部署同样是不可或缺的环节。用户将学习如何利用VueCLI对项目进行打包，并将其部署到服务器上。同时，我们还将简要介绍CI/CD（持续集成/持续部署）的基本概念，确保项目能够高效上线。生活中的类比例子——以建设社区为例类比项目初始化与结构设置：就像在建设一个社区之前，我们需要先打地基和分配房间区域。在这里，我们用VueCLI来创建项目，相当于为社区打下一个稳固的基础，并建立了各个区域（项目目录结构）。【课程思政】组件开发与管理：我们可以把每个Vue组件比喻成社区里的不同房间。比如，客厅：展示重要的信息；卧室：保存用户个人信息；厨房：展示美食。每个房间（组件）都有自己的用途和功能。我们需要通过门（props）来传递信息，并且通过对讲机（事件）来进行沟通，确保各个房间之间信息互通。数据交互：好比用户需要购买生活用品，去超市（后端API）购物，用购物车（Axios）装载你需要的商品（数据）。这些商品买回来后，你会把它们摆放到家里的合适位置（Vue组件上），比如把牛奶放进冰箱，书籍放在书架上（数据绑定和展示）。页面路由配置：VueRouter好比连接每个房间的走廊，允许用户从一个页面顺畅地切换到另一个页面，就类似从客厅走到卧室或餐厅。为了方便导航，房间需要清晰的门牌号和路标（路由配置），甚至有直达电梯（动态路由）帮助你快速通往不同的楼层和房间。【课程思政】后端管理页面设计：类似社区管理员需要管理的社区各种设施和信息，在那里可以添加新设施（新增数据）、修改现有设施的信息（修改数据）、移除不需要的设施（删除数据）。为了确保信息录入准确，我们制作了方便填写的表单（输入表单和验证）。12UI设计与优化：为了让社区更美观，我们引入了漂亮的家具和装饰（UI组件库，如ElementUI、Vuetify等），让每个房间（页面）都悦目和舒适，确保即使不同人（不同设备）参观，都能享有一致的体验（响应式设计）。3景点展示页面设计：好比家中有一个展示柜，放满了用户旅游收集的各种纪念品（景点）。游客（用户）可以在展示柜前驻足观看每件纪念品的详细信息。我们需要设计分类展示架（列表页面），每个纪念品都有自己的背景介绍和图片（详情页面），让参观者能详细了解这些景点的特色。【课程思政】项目打包与部署：当所有东西都安排妥当，我们需要把房子交付使用，即打包项目并部署到服务器上（生产环境），确保我们的社区能够正常运行并为居民提供服务。任务5.1前端工程项目环境的创建与配置5.1.1前后端分离的项目架构5.1.1前后端分离的项目架构本项目采用的是前后端分离的项目架构。前后端分离是目前互联网开发中比较广泛使用的开发模式，主要是将前端和后端的项目业务进行分离，可以做到更好的解耦合，前后端之间的交互通过JSON或XML的方式，前端主要做用户界面的渲染，后端主要负责业务逻辑和数据的处理。前后端分离项目结构如图5-1所示。图5-1前后端分离项目结构5.1.1前后端分离的项目架构图5-1展示前端项目和后端项目之间的关系。图中左侧框图代表前端项目，右侧框图代表后端项目。两个项目之间通过一条带有“JSON或XML”标签的双向箭头连接，表示它们之间的数据传输格式可以是JSON或XML。前端项目主要包括以下几个组件：HTML（超文本标记语言）：用于结构化网页内容的基础语言。CSS（层叠样式表）：用于定义网页的外观和布局。JavaScript：用于增加网页的动态功能和交互性的脚本语言。后端项目则包含了更多的技术和工具，如：Java：一种广泛使用的编程语言，常用于企业级应用的开发。5.1.1前后端分离的项目架构SpringFramework：一个开源的Java平台，提供了全面的开发工具和服务支持。1MyBatis：一款持久层框架，可以帮助开发者更方便地进行数据库操作。2MySQLDatabaseDriver：MySQL数据库驱动程序，用于连接和管理MySQL数据库。3RedisDriver：Redis数据库驱动程序，用于连接和管理Redis数据库。4RESTfulAPI：一种软件架构风格，用于设计和开发Web服务接口。5MQ（MessageQueue）：消息队列技术，用于异步通信和处理高并发场景下的消息传递。65.1.2项目的跨域访问问题跨域访问简介跨域资源共享（Cross-OriginResourceSharing，CORS）是一种网络安全策略，它规定了不同域名之间的网页资源如何进行交互。在前后端分离的Web项目中，当前端尝试向不同域的后端发送异步请求时，常常会遇到跨域问题，这主要是由于浏览器的“同源策略”所引起。“同源”概念指的是两个网页必须共享相同的协议（protocol）、域名（host）以及端口号（port）。浏览器的“同源策略”（Same-OriginPolicy）严格限制了来自一个源的JavaScript脚本与另一个源的资源进行交互，其目的是防止恶意网站通过客户端脚本窃取另一个域下的敏感信息，是一种用于保护用户信息安全和隐私的重要安全机制。同源策略的实施，为浏览器的稳定性和用户数据的安全性提供了重要保障。若没有这一策略，浏览器中的多项功能可能会遭受安全威胁，无法正常运作。跨域访问简介跨域问题的产生，在前后端分离的开发模式中尤为常见。在这种模式下，前端代码通常部署在一个域名上，而后端API则可能位于另一个域名。由于同源策略的限制，前端直接发起的异步请求（如AJAX请求）会被浏览器拦截，从而无法成功获取后端的数据。跨域访问简介生活中的类比例子——以小朋友玩具为例类比假设一个小朋友在自己的院子里玩耍（这个院子就相当于一个域名），突然发现隔壁小朋友（另一个不同的域名）有一个非常有趣的玩具，于是想去借过来玩。但是院子的大门通常是锁着的，不允许该小朋友直接跑到别人家去拿玩具，这就好比浏览器的同源策略，出于安全考虑，不允许网页随便访问不同域名的数据。由于浏览器“同源策略”的限制，以下几种行为受到限制：（1）无法访问跨域的Cookie、LocalStorage和IndexedDB。这防止了不同源之间的网页共享存储的数据，从而保护了用户的隐私和数据安全。（2）无法操作跨域的DOM。每个源的网页DOM是隔离的，不能被其他源的脚本直接操作，这防止了恶意脚本篡改其他网页的内容。（3）无法发起跨域的AJAX请求。这限制了网页与不同源服务器之间的异步数据交互，防止了数据泄露和潜在的恶意行为。跨域访问简介生活中的类比例子——以小朋友玩具为例类比这些限制是必要的，因为它们确保了Web应用的安全性，防止恶意网站通过脚本访问其他网站的敏感数据。然而，这些限制也为开发需要跨域交互的Web应用带来了挑战，因此开发者需要采取特定的技术和策略（如CORS、JSONP、代理服务器等）来合法地实现跨域资源访问和数据交互。跨域问题的判定只要当一个请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同，就可判定为跨域。表5-1展示了跨域判定示例。当前页面URL被请求页面URL是否跨域原因//index.html否同源（协议、域名、端口号相同）//index.html是协议不同（http/https）//是主域名不同（test/baidu）//是子域名不同（www/blog）:8080/:7001/是端口号不同（8080/7001）表5-1跨域判定示例跨域问题的判定这个表格通过具体的例子说明了什么是跨域请求以及导致跨域的各种原因。图5-2所示为浏览器同源策略与跨域访问示意图。在这幅图中，我们看到了两个服务器：服务器A和服务器B。这两个服务器之间可以直接相互访问，因为它们属于相同的域，所以不存在跨域问题。同样地，服务器A上的脚本如果要访问服务器A自身的资源，也不需要担心跨域问题，因为这也符合浏览器的同源策略。然而，当服务器A上的脚本尝试访问服务器B的资源时，这就变成了跨域请求。在这种情况下，由于请求是从一个不同的源发出的，浏览器会根据其内置的同源策略自动阻止这一请求。这样做是为了防止恶意站点利用跨站脚本攻击等方式窃取敏感信息或其他不当行为。图5-2浏览器同源策略与跨域访问示意图跨域问题的判定这张图显示的是一个XMLHttpRequest的错误消息，表明存在跨域资源共享（CORS）政策的问题。具体来说，它表示从http://localhost:5173发起的一个XMLHttpRequest尝试访问http://localhost:9090/api/touristAttraction/selectAllLimit2资源时被阻止了。原因是预检请求没有得到预期的Access-Control-Allow-Origin头部的响应。由于本项目采用前后端分离的架构，前端使用一个服务器，后端使用另一个服务器，开发中存在跨域问题。开发中常见的错误提示如图5-3所示。图5-3项目中的跨域错误提示跨域访问的常用解决方案浏览器默认实施的同源策略是一个安全措施，它限制了来自不同源的文档或脚本之间的交互，以防止恶意网站窃取数据。然而，在开发复杂的前端应用时，跨域访问是不可避免的。为了解决这个问题，开发者可以采取以下技术手段：（1）CORS。这是解决跨域问题的现代标准方法，通过在服务器端的HTTP响应头中添加Access-Control-Allow-Origin字段，服务器可以明确授权哪些外部域可以访问其资源，而浏览器根据这些头部信息来决定是否放行跨域请求。CORS支持多种HTTP方法，包括GET、POST等，使得跨域数据交换更加安全和灵活。跨域访问的常用解决方案（2）JSONP。JSONP（JSONwithPadding，填充式JSON）利用了<script>标签不受同源策略限制的特性，通过动态创建<script>标签，开发者可以发起跨域请求，服务器返回的是一段可执行的JavaScript代码，通常是一个函数调用，其中包含了所需的数据。这种方法虽然简单，但只支持GET请求，并且存在安全性问题，因为它不提供与CORS相同级别的控制。（3）代理服务器。开发者可以在同源的服务器上设置一个代理服务，该代理服务会接收来自前端应用的请求，然后将这些请求转发到目标服务器，并将响应返回给前端应用。这样，前端应用实际上是在与同源服务器交互，从而绕过了同源策略。（4）WebSockets。WebSockets提供了一个全双工通信通道，允许服务器和客户端之间进行实时通信。WebSockets不受同源策略的限制，因此可以用于跨域通信。然而，WebSockets的使用场景通常是需要实时数据传输的应用，如在线游戏、实时聊天等。项目后端跨域访问解决方案要解决跨域问题，本质上是要向浏览器表明“此次请求是安全的，请解除拦截”。常见的解决跨域问题的方法有以下五种：通过注解实现特定区域的跨域请求，使用CorsFilter对象来全局性地处理跨域，利用配置文件设定全局跨域策略，通过Response对象在局部处理跨域，以及利用ResponseBodyAdvice实现全局跨域响应的定制。以下演示了在SpringBoot中常用的方法。（1）使用@CrossOrigin注解实现特定区域的跨域请求。使用@CrossOrigin注解可以轻松实现跨域，此注解既可以修饰类，也可以修饰方法。修饰类时，表示此类中的所有接口都可以跨域；修饰方法时，表示此方法可以跨域。实现代码如下：项目后端跨域访问解决方案importorg.springframework.web.bind.annotation.RestController;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.CrossOrigin;importjava.util.HashMap;@RestController@CrossOrigin(origins="*")//1.使用了在控制类上加入注解，表示这个类中的接口可以跨域访问publicclassTestController{@RequestMapping("/test")publicHashMap<String,Object>test(){returnnewHashMap<String,Object>(){{put("state",200);put("data","success");put("msg","");}};}}项目后端跨域访问解决方案这种方式虽然实现跨域相对简便，但细心的开发者可能会注意到，它仅能解决部分跨域问题。在涉及多个类的大型项目中，采用这种方法会显得较为繁琐，因为需要在每个类上都添加相应的注解。这样的处理不仅增加了代码的维护成本，也可能导致代码的冗余和不易管理。项目后端跨域访问解决方案importorg.springframework.context.annotation.Configuration;importorg.springframework.context.annotation.Bean;importorg.springframework.web.cors.CorsConfiguration;importorg.springframework.web.cors.UrlBasedCorsConfigurationSource;importorg.springframework.web.cors.CorsFilter;@Configuration//标记为配置类，用于定义BeanpublicclassMyCorsFilter{@Bean//声明一个Bean，用于创建CorsFilter实例publicCorsFiltercorsFilter(){//1.创建CORS配置对象CorsConfigurationconfig=newCorsConfiguration();//支持域（允许所有来源）config.addAllowedOriginPattern("*");

项目后端跨域访问解决方案//是否发送Cookie（允许携带凭证）

config.setAllowCredentials(true);//支持所有请求方式（允许所有请求方法，如GET、POST等）

config.addAllowedMethod("*");//允许的原始请求头部信息（允许所有请求头）

config.addAllowedHeader("*");//暴露的头部信息（允许前端访问响应中的所有头部）

config.addExposedHeader("*");//2.添加地址映射

UrlBasedCorsConfigurationSource

corsConfigurationSource=newUrlBasedCorsConfigurationSource();//注册CORS配置，匹配所有路径（"/**"表示所有请求路径）

corsConfigurationSource.registerCorsConfiguration("/**",config);//3.返回

CorsFilter

对象returnnewCorsFilter(corsConfigurationSource);}}跨域问题的本质是浏览器为了保证用户安全的一种拦截机制，想要解决跨域问题，只需要告诉浏览器“我是自己人，不要拦截我”就行。项目前端跨域访问解决方案前端通过设置代理服务器以实现跨域通信的基本原理如下：在Vue项目的配置文件中，指定一个代理服务器的地址；当前端发起请求时，这些请求首先被转发至该代理服务器；代理服务器随后担当中间人的角色，向目标服务器发出请求，并在接收到响应数据后，将其回传给前端。通过这种方式，前端应用能够巧妙地规避浏览器的同源策略限制，从而顺利地进行跨域数据交互。（1）以Webpack为例。修改vue.config.js的配置如下：//vue.config.jsmodule.exports={devServer:{项目前端跨域访问解决方案proxy:{'/api':{target:'',//目标服务器地址changeOrigin:true,//是否改变源地址，设置跨域pathRewrite:{'^/api':''//重写路径}}}项目前端跨域访问解决方案（2）以vite为例。修改vite.config.js的配置如下：//vite.config.jsimport{defineConfig}from'vite';

exportdefaultdefineConfig({server:{proxy:{'/api':{target:'',//目标服务器地址changeOrigin:true,//开启源地址修改，解决跨域rewrite:(path)=>path.replace(/^\/api/,'')//重写路径，移除请求路径中的`/api`前缀}}}});项目前端跨域访问解决方案经过设置后，前端进行访问的时候就可以直接通过修改后的地址进行访问：axios.get（'/api/some-endpoint'）.then（response=>{console.log（response.data）;}项目前端跨域访问解决方案logo经过跨域（前端跨域或者后端跨域）的设置之后，前端页面只需要简单地进行Axios异步请求到后端的项目中提供的接口上即可获取数据，如图5-4所示。图5-4展示了一个前后端分离的跨域访问架构：左侧：前端使用Vue技术，部署在http://localhost:8080，包含多个页面模块。右侧：后端使用SpringBoot，部署在http://localhost:8081，提供多个API接口。跨域关系：由于前后端分别拥有独立的域名和端口（8080与8081不同），前端页面访问后端API时会产生跨域问题，图中以“跨域”文字明确标注了这一交互特性。图5-4本项目的跨域访问示意图5.1.3Node.js的安装和配置Node.js简介Node.js是一个基于ChromeV8JavaScript引擎的异步事件驱动的JavaScript运行时环境，它赋予了JavaScript在浏览器之外独立运行的能力。这一创新使得开发者能够利用JavaScript在服务器端构建高效、可扩展且可靠的网络应用程序。这使得JavaScript不仅限于客户端开发，还能够在服务器端发挥其强大的编程能力。ChromeV8引擎与Node.js的关系如图5-5所示。图5-5ChromeV8引擎与Node.js的关系Node.js简介作为一个开源的跨平台运行环境，Node.js的使用完全免费，并由一个活跃的全球开发者社区持续维护和优化。这个社区不断地推动Node.js的发展，使其保持与时俱进，满足各种复杂多变的应用场景需求。Node.js的生态系统也非常丰富，拥有大量的库和工具，为开发者提供了极大的便利，助力他们在现代网络应用开发中不断创新和突破。（1）Node.js的特点。①高效性能：Node.js搭载了ChromeV8引擎，这一高性能的JavaScript执行环境确保了代码的快速解析和执行。得益于其事件驱动和非阻塞I/O模型，Node.js能够高效地处理并发请求，最大化CPU和内存的使用效率，从而显著提升了应用程序的性能和响应速度。②跨平台兼容性：Node.js具备出色的跨平台能力，支持Windows、MacOS、Linux等多种操作系统，为开发者提供了灵活的选择，确保了应用的一致性和可移植性。③活跃的社区支持：Node.js背后是一个充满活力的全球开发者社区，他们不断贡献大量的开源模块和工具，这些资源极大地丰富了Node.js的生态系统，并推动了技术的持续进步，使得应用开发变得更加高效和便捷。④安全性设计：Node.js架构采用了包括沙箱环境、模块化架构在内的多种安全措施，有效防范了代码注入、数据泄露等潜在的安全威胁，为开发者构建安全可靠的应用提供了保障。Node.js简介①Web应用程序开发：Node.js非常适合构建高性能的Web应用程序，如个人博客、电子商务平台、社交媒体网站等；它能够高效处理成千上万的并发连接，同时，其模块化的代码结构使得应用程序易于扩展和维护。②实时通信应用：Node.js在开发实时通信应用程序方面表现出色，如即时聊天应用、多人在线游戏、实时通知系统等。其事件驱动和非阻塞I/O模型能够确保数据的实时传输和快速响应。③命令行工具：Node.js能够轻松地创建功能强大的命令行工具，这些工具可以用于自动化任务，进行系统管理或作为其他开发工具的辅助。Node.js的内置模块简化了文件系统操作和网络请求的处理。（2）Node.js的使用场景。Node.js简介④物联网应用：在物联网领域，Node.js凭借其轻量级和高效的处理能力，成为开发智能家居、工业自动化、健康监测等应用的理想选择。它能够处理大量的设备数据，并支持与云服务的无缝集成。⑤API服务和微服务架构：Node.js在构建RESTfulAPI、GraphQLAPI或其他类型的API服务方面表现卓越。它的异步特性使得它能够快速处理大量的请求，同时保持低延迟。此外，Node.js也适用于微服务架构，其中每个微服务可以独立部署和扩展，提高了系统的灵活性和可维护性。（3）选择Node.js作为Vue项目开发环境的原因。选择Node.js作为Vue项目开发环境的原因主要包括以下几点：Node.js简介①构建工具的兼容性：Vue项目在开发过程中常常依赖于Webpack等现代前端构建工具进行代码的打包和编译，这些构建工具均基于Node.js平台，因此，拥有Node.js环境是运行这些工具的前提，确保了项目构建的顺畅进行。②模块化编程的支持：Vue框架鼓励开发者采用模块化的开发方式，而Node.js的模块化机制与Vue的理念相同。利用Node.js，我们可以更有效地组织代码结构，提高代码的可读性和可维护性。③便捷的包管理：Node.js内置的NPM（NodePackageManager，Node包管理器）是JavaScript生态系统中不可或缺的包管理工具。通过NPM，开发者可以轻松安装和管理Vue及相关依赖，如VueRouter、Vuex等，极大地简化了项目依赖的集成过程。Node.js简介④服务器端渲染能力：Node.js不仅在前端构建中发挥作用，其强大的服务器端处理能力也使得实现Vue的服务器端渲染成为可能。通过Vue的SSR（服务端渲染）支持，可以在服务器端预渲染Vue组件，从而提升首屏加载速度和搜索引擎优化。⑤跨平台开发的灵活性：Node.js的跨平台特性允许开发者在不同的操作系统上无缝工作，无论是Windows、Mac还是Linux，都能提供一致的开发体验，这为Vue项目的开发带来了极大的便利和灵活性。综上所述，Node.js为Vue项目提供了一个稳定、高效且功能丰富的开发环境，它的工具生态系统和编程范式与Vue框架完美契合。Node.js的下载和安装（1）Node.js的下载。访问Node.js官方下载页面，根据操作系统选择相应版本的安装包，建议下载LTS（长期支持）版本以获得长期支持和稳定性，如图5-6、图5-7所示。图5-6Node.js官方下载界面Node.js的下载和安装（2）Node.js的安装。双击下载的安装包，按照安装向导的提示进行操作，保持默认设置即可。安装过程中会自动配置环境变量，无须额外操作。安装成功界面如图5-8所示。图5-7选择Node.js版本Node.js的下载和安装默认情况下，Node.js在安装的时候他已经把环境变量都写入到系统的环境变量中，不需要配置即可使用。图5-8安装成功界面Node.js的下载和安装验证是否安装成功：按下“Win+R”，在运行窗口中输入命令“cmd”，如图5-9所示。图5-9运行cmd命令Node.js的下载和安装图5-10查看Node.js和NPM的版本在命令行界面分别输入“node-v”和“npm-v”，可以查看安装的Node.js和NPM的版号，如图5-10所示。NPM的配置和使用NPM是Node.js的官方包管理器，它不但用于安装、发布和管理JavaScript库及其依赖项，而且还是全球最大的开源软件注册库之一。在这个庞大的生态系统中，NPM托管着数百万个可用的软件包，这些包覆盖了从简单的实用工具到复杂的框架，几乎满足了所有JavaScript项目的需求。此外，NPM还提供了版本控制和包更新的机制，使得开发者能够轻松地跟踪和升级他们的项目依赖，从而保持代码库的现代化和安全性。（1）NPM的主要功能和用途。NPM作为一个全面的包管理工具，极大地促进了JavaScript社区的协作和发展，它的主要功能和用途如下：NPM的配置和使用②依赖关系管理：在复杂的软件项目中，管理依赖关系是一项关键任务。NPM通过其强大的依赖管理功能，自动处理项目所需的依赖包，包括安装、升级和移除操作，从而保证了项目环境的稳定性和可靠性。①包的安装与管理：NPM提供了一个高效的平台，使得开发者能够轻松地安装、升级和卸载各种JavaScript包。它通过命令行工具简化了这一过程，确保了包管理的便捷性和一致性。③包的发布与维护：对于开发者而言，NPM不仅是一个包的消费平台，也是一个发布平台。开发者可以轻松地将自己的代码打包并发布到NPM注册表中，同时也能够对已发布的包进行版本控制和维护。010203NPM的配置和使用④脚本自动化执行：NPM允许开发者在项目的package.json文件中定义自定义脚本命令。这些脚本可以在项目开发周期的不同阶段被调用，如测试、构建、部署等，从而实现自动化工作流程，提高开发效率。⑤版本控制：NPM支持语义版本控制（SemanticVersioning），帮助开发者理解和控制包的版本更新。⑥私有包支持：NPM提供私有包管理服务，允许企业和组织在私有环境中安全地共享和存储代码。⑦组织管理：NPM支持组织账户，便于团队协作和项目管理。⑧包文档和元数据：NPM注册表中的每个包都包含详细的文档和元数据，便于开发者了解和使用。NPM的配置和使用（2）查看、修改NPM的注册表地址。在命令行窗口，查看NPM的注册表地址的命令是：npmconfiggetregistry。NPM的默认注册表地址是/，服务器在国外，是NPM默认的官方注册表地址，直接访问NPM官方服务器可能会受到网络延迟和速度限制，而国内镜像服务器可以提供更快的访问速度和更稳定的连接。修改NPM的注册表地址的命令是（以为例）：npmconfigsetregistry是淘宝提供的NPM镜像源。国内其他常用的NPM镜像源还有：华为云NPM镜像‌：‌/repository/npm/图5-12修改NPM的注册表地址NPM的配置和使用‌阿里云NPM镜像‌：‌腾讯云NPM镜像：/npm/（3）CNPM的使用。由于NPM的官方服务器位于国外，开发者在使用NPM时可能会遇到访问速度慢或无法访问的问题。CNPM（ChinaNPM）提供了一个同步于使用NPM官方库的镜像，从而解决了这些问题。CNPM是由淘宝团队维护的NPM在中国的镜像库，它定期从NPM官方注册表同步数据，确保了包的时效性和完整性。CNPM提供了一个命令行工具，可以替代NPM命令行工具，使得用户可以无缝切换到CNPM镜像。NPM的配置和使用Node.js默认没有安装CNPM，需要手动安装。安装命令如下：npminstall-gcnpm--registry=。命令解释：npminstall：这是npm的基本命令，用于安装Node.js包。-g：这个参数代表“global”，意味着将全局安装cnpm。全局安装的包可以在任何项目中通过命令行直接使用，而不需要在每个项目中单独安装。cnpm：是要安装的包的名字。cnpm可以加快国内用户下载包的速度。--registry=：这个参数指定了安装包时使用的注册表。示例中的网址指向国内的npm镜像站点，这个镜像站点提供了更快的访问速度和稳定性，特别适合国内开发者。安装完成后，开发者就可以像使用NPM一样使用CNPM命令了。5.1.4Vite的安装和项目创建Vite简介Vite是一种新兴的前端构建工具，旨在为开发者提供一个快速、高效且易于使用的开发环境，常用在现代JavaScript框架和库的开发中。Vite的主要特点如下：01（1）基于原生ES模块：Vite利用了现代浏览器对ES模块的原生支持，使得开发服务器能够即时地提供模块，而不需要像传统工具那样进行预编译，大大加快了启动速度。02（2）模块热替换：Vite提供了快速的模块热替换（HotModuleReplacement，HMR）功能，当开发者修改代码时，浏览器能够实时更新，无须手动刷新，从而提高了开发效率。03（3）预配置的构建命令：Vite使用Rollup作为其生产环境下的打包工具，它预配置了一系列优化策略，使得构建出的应用在性能上得到了优化，同时简化了配置过程。04Vite简介（4）高度可扩展：Vite拥有强大的插件系统，开发者可以通过插件API轻松扩展或自定义Vite的功能，以满足特定的项目需求。（5）TypeScript支持：Vite提供了对TypeScript的内置支持，这意味着开发者可以使用TypeScript进行开发，并享受到类型检查和自动补全等特性。（6）丰富的插件生态：Vite社区提供了大量的插件，这些插件可以帮助开发者集成各种工具和框架，如Vue、React、Svelte等。生活中的类比例子：想象做一道菜，传统的方法是需要提前准备好所有的食材和工具，然后逐步按顺序慢慢完成每个步骤，这样整个过程会比较耗时。而Vite就像是一位超级助手，帮助用户在厨房里快速、灵活地准备食材并且实时调整。使用Vite创建Vue项目（1）安装Vite。Vite需要Node.js环境来运行，所以确保在你的系统上安装了Node.js。安装完成Node.js后，命令窗口界面安装Vite的命令是：npminstall-gvite。执行后的界面如图5-14所示。命令中的参数-g表示全局安装Vite，这样就可以在任何项目目录中使用Vite命令了。图5-14安装Vite使用Vite创建Vue项目（2）创建Vue项目文件夹。假定需要创建的项目文件夹为D:\vuepro。先创建这个文件夹，然后在命令窗口界面上将当前目录更改到D:\vuepro，可以使用命令：cd/dD:\vuepro。界面如图5-15所示。图5-15更改当前目录使用Vite创建Vue项目命令解释：cd：ChangeDirectory（更改目录）的缩写，用于更改当前目录的命令。/d：一个可选的参数，用于同时更改当前驱动器和工作目录。在Windows命令提示符中，如果用户想从一个驱动器（例如C:）切换到另一个驱动器（例如D:），通常需要先使用盘符切换到目标驱动器，然后再更改目录。使用/d参数，可以一步完成这两个操作。（3）创建Vue3项目。执行命令：npmcreatevite@latestmy-vue3-project。Vite将引导用户完成项目创建过程，包括选择项目名称、添加Vite插件等。使用Vite创建Vue项目命令解释：npmcreate：这是npm用于创建新项目的命令。vite@latest：指定要使用的项目脚手架为Vite，@latest表示使用Vite的最新版本。my-vue3-project：这是新创建项目的目录名称，可以更改成用户需要的项目名称。当该命令执行时，npm将会在当前工作目录中创建一个名为my-vue3-project的新文件夹，并在其中初始化Vite项目。如图5-16所示，执行命令后，选择框架（framework）为Vue，语言（variant）为JavaScript，项目就成功创建了，并按提示执行cdmy-vue3-project、npminstall、npmrundev三个命令。图5-16创建Vue3项目使用Vite创建Vue项目命令解释：cdmy-vue3-project：将当前目录切换到该项目的my-vue3-project文件夹。npminstall：读取项目中的package.json文件，安装dependencies和devDependencies字段中列出的所有依赖包。npmrundev：启动开发服务器。命令执行情况如图5-17所示。图5-17启动开发服务器使用Vite创建Vue项目图5-18Vite+Vue项目欢迎界面说明：对于该示例中的http://localhost:5173，其中5173为该开发服务器提供Web服务端口号，在具体的配置中可能不同，根据实际生成的使用即可。现在，Vue3项目应该已经启动。浏览器中打开http://localhost:5173，就可以看到Vue的欢迎界面，如图5-18所示。Vue项目文件结构项目创建后，D:\vuepro\my-vue3-project文件夹下生成的项目文件如图5-19所示。图5-19使用Vite创建的Vue3项目文件结构Vue项目文件结构01（1）.vscode：这个文件夹用于存储VisualStudioCode的配置文件和插件数据。05（5）index.html：项目的入口HTML文件，是浏览器加载的第一个文件，用于引入应用的根组件。03（3）src：源代码文件夹，包含了项目的核心代码，包括组件、页面、样式和其他自定义逻辑。02（2）public：这个文件夹包含了项目中不需要经过编译处理的静态文件，如HTML入口文件和其他资源文件。04（4）.gitignore：Git配置文件，用于指定哪些文件或文件夹不应该被提交到版本控制系统。以下是对该目录下关键文件和文件夹的解释：Vue项目文件结构（6）package.json：Node.js应用的配置文件，包含了项目的元数据和依赖项列表，还定义了可运行的脚本。（7）README.md：一个Markdown文件，通常用于存放项目的介绍和使用说明。（8）vite.config.js：Vite的配置文件，用于定制Vite的行为，如别名、插件、优化选项等。在项目开发过程中，src目录是开发人员最频繁交互的区域。以下是对该目录下关键文件和文件夹作用的解释：（1）assets：该文件夹用于存放项目中使用的静态资源，如图像、字体和视频等。（2）components：该文件夹用来组织和管理Vue组件。（3）App.vue：Vue项目的入口组件文件，可以用于定义整个应用的顶级结构和状态管理。（4）main.js：Vue项目的入口JavaScript文件（5）style.css：该文件是CSS样式表，用于定义Vue组件的样式。图5-20Vue3项目src目录结构示例5.1.5ElementPlus的安装和使用ElementPlus简介ElementPlus是一个基于Vue3的前端UI组件库，提供了一系列高质量的界面组件，帮助开发者快速构建功能丰富且美观的网页应用。它是由饿了么前端团队开发并维护的，是ElementUI的升级版，专门为Vue3设计。主要特点包括：（1）组件丰富：ElementPlus包含了表格、表单、按钮、导航、通知等众多组件，满足常见的界面元素需求。（2）易于使用：该库的设计理念是提供开箱即用的UI组件和扩展功能，帮助开发者快速构建应用程序。（3）丰富的文档和教程：ElementPlus提供了详细的文档和教程，方便开发者学习和使用。（4）主题定制：支持主题定制，可以根据需求更换组件的样式。ElementPlus的安装在原来创建好的Vue+Vite项目的基础上，通过NPM命令就可以安装，命令是：npminstallelement-plus--save。界面如图5-21所示。图5-21安装ElementPlusElementPlus的安装图5-22package.json增加了项目对element-plus的依赖命令解释：npminstall：用于安装Node.js项目所需的包。element-plus：要安装包的名称。--save：一个选项标志，用于告诉npm在安装包的同时，将这个包的信息添加到项目根目录下的package.json文件的dependencies字段中。加入--save选项后，package.json增加了项目对element-plus的依赖。这意味着当你或其他人运行npminstall时，element-plus会被自动安装，因为它被视为项目运行所必需的，如图5-22所示。ElementPlus的使用示例下面以在Vue项目中使用ElementPlus制作用户注册页面为例进行讲解。这个例子包括了输入框、密码框、选择器、复选框和按钮组件。（1）在项目的入口文件src/main.js中引入ElementPlus并注册：import{createApp}from'vue'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'importAppfrom'./App.vue'constapp=createApp(App)app.use(ElementPlus)app.mount('#app')ElementPlus的使用示例（2）将src/App.vue修改为如下代码：<template><divclass="register-container"><el-formref="registerForm":model="form":rules="rules"label-width="100px"><!--用户名输入框--><el-form-itemlabel="用户名"prop="username"><el-inputv-model="form.username"placeholder="请输入用户名"></el-input>ElementPlus的使用示例</el-form-item><!--密码输入框--><el-form-itemlabel="密码"prop="password"><el-inputv-model="form.password"type="password"placeholder="请输入密码"></el-input></el-form-item><!--确认密码输入框-->ElementPlus的使用示例<el-form-itemlabel="确认密码"prop="checkPassword"><el-inputv-model="form.checkPassword"type="password"placeholder="请再次输入密码"></el-input></el-form-item><!--邮箱输入框--><el-form-itemlabel="邮箱"prop="email"><el-inputv-model="form.email"placeholder="请输入邮箱"></el-input>ElementPlus的使用示例</el-form-item><!--用户协议复选框--><el-form-itemlabel="同意协议"prop="agree"><el-checkboxv-model="form.agree">我已阅读并同意用户协议</el-checkbox></el-form-item><!--按钮组--><el-form-item><divclass="button-container">ElementPlus的使用示例<el-buttontype="primary"@click="submitForm('registerForm')">注册</el-button><el-button@click="resetForm('registerForm')">重置</el-button></div></el-form-item></el-form></div></template><script>ElementPlus的使用示例exportdefault{data(){return{

form:{

username:'',

password:'',

checkPassword:'',

email:'',

agree:false

},

rules:{

username:[

{required:true,message:'请输入用户名',trigger:'blur'}

],

password:[

{required:true,message:'请输入密码',trigger:'blur'}

],

checkPassword:[

{required:true,message:'请再次输入密码',trigger:'blur'},

{validator:this.validatePassword,trigger:'blur'}

],

ElementPlus的使用示例email:[

{required:true,message:'请输入邮箱地址',trigger:'blur'},

{type:'email',message:'请输入正确的邮箱地址',trigger:'blur'}

],

agree:[

{required:true,message:'请同意用户协议',trigger:'change'}

]

}

};

},

methods:{

submitForm(formName){

this.$refs[formName].validate((valid)=>{

if(valid){

alert('提交成功!');

//这里可以执行注册逻辑，例如发送请求到后端

}else{

console.log('errorsubmit!!');

returnfalse;

}

});

},

ElementPlus的使用示例resetForm(formName){

this.$refs[formName].resetFields();

},

validatePassword(rule,value,callback){

if(value!==this.form.password){

callback(newError('两次输入密码不一致!'));

}else{

callback();

}

}

}};</script>

ElementPlus的使用示例<stylescoped>

.register-container{

width:500px;

margin:50pxauto;

}

.button-container{

text-align:center;

}</style>

以上示例代码创建了一个带有基本验证功能的用户注册表单，包括用户名、密码和确认密码字段，以及提交和重置按钮。用户可以输入信息，如果输入不符合规则，将显示错误消息。点击提交按钮会进行验证，而点击重置按钮会清除所有输入。ElementPlus的使用示例（3）启动开发服务器，查看网页效果，如图5-23所示。服务启动后，在浏览器中打开http://localhost:5173，即可以查看网页效果，如图5-24所示。图5-23启动开发服务器图5-24用户注册页面显示效果5.1.6Vue中路由的安装和使用5.1.6Vue中路由的安装和使用在Vue.js中，路由是使用官方提供的VueRouter库来实现的。以下是VueRouter的安装和基本配置步骤：打开命令行工具，进入Vue项目目录D:\vuepro\my-vue3-project，然后运行命令npminstallvue-router，可以安装VueRouter的最新版本，如图5-25所示。图5-25安装VueRouterVue中路由的安装和使用图5-26查看VueRouter的版本号安装后打开package.json文件，可以查看安装的VueRouter版本，如图5-26所示。Vue中路由的安装和使用下面以在Vue项目中使用VueRouter实现导航切换为例进行讲解。该实例涉及4个代码文件，项目结构如图5-27所示。（1）组件定义。在D:\vuepro\my-vue3-project\src\components\文件夹下新建Home.vue和About.vue两个文件，用于创建组件代码：图5-27实例文件结构图示Vue中路由的安装和使用①Home.vue的代码：<!--D:\vuepro\my-vue3-project\src\components\Home.vue--><template><div><h1>这是网站主页面</h1></div></template><script>exportdefault{name:'Home'};</script>Vue中路由的安装和使用②About.vue的代码：<!--D:\vuepro\my-vue3-project\src\components\About.vue--><template><div><h1>这是网站关于页面</h1></div></template>

<script>

exportdefault{

name:'About'

};

</script>Vue中路由的安装和使用（2）修改根组件。修改D:\vuepro\my-vue3-project\src\App.vue代码如下：<!--D:\vuepro\my-vue3-project\src\App.vue--><template><divid="app"><nav><router-linkto="/">主页</router-link>|<router-linkto="/about">关于</router-link>

</nav>

<router-view/>

</div></template>

<script>exportdefault{

name:'App'};</script>Vue中路由的安装和使用（3）路由配置。修改D:\vuepro\my-vue3-project\src\main.js代码如下：//文件路径：D:\vuepro\my-vue3-project\src\main.jsimport{createApp}from'vue';import{createRouter,createWebHistory}from'vue-router';importAppfrom'./App.vue';//定义路由配置constroutes=[

{path:'/',component:Home},

{path:'/about',component:About}];Vue中路由的安装和使用//创建路由实例constrouter=createRouter({

history:createWebHistory(),

routes});

//创建并挂载根实例constapp=createApp(App);app.use(router);app.mount('#app');Vue中路由的安装和使用（4）查看运行效果。启动开发服务器，在浏览器中打开http://localhost:5173，即可以查看网页效果，如图5-28、图5-29所示。图5-28点击“主页”链接显示的内容Vue中路由的安装和使用当用户点击“主页”链接时，浏览器显示Home.vue组件的内容；当用户点击“关于”链接时，浏览器会显示About.vue组件的内容。这个实例展示了VueRouter在Vue.js应用程序中的基本用法，包括如何设置路由、如何通过组件来定义页面内容以及如何在不刷新页面的情况下实现页面间的导航。总的来说，VueRouter是一个功能强大、简单易用的路由管理器，可以帮助开发者高效地构建单页面应用，提供丰富的路由特性和灵活的导航控制。图5-29点击“关于”链接显示的内容5.1.7Vue中Axios的安装和配置5.1.7Vue中Axios的安装和配置Axios是Vue.js中的HTTP客户端，用于发送请求和接收响应，支持数据交互和异步操作，其提供的强大功能和灵活性使其成为处理HTTP请求的首选库之一。无论是在客户端应用中与服务端交互，还是在服务端调用其他服务，Axios都能提供简洁、高效的解决方案。Axios的安装打开命令行工具，进入Vue项目目录D:\vuepro\my-vue3-project，然后运行命令npminstallaxios，可以安装axios，如图5-30所示。图5-30安装axiosAxios的使用实例下面以在Vue项目中使用Axios获取数据为例进行讲解。该实例涉及4个代码文件，项目结构如图5-31所示。图5-31实例文件结构图示Axios的使用实例（1）创建Axios实例。在D:\vuepro\my-vue3-project\src目录下创建一个api文件夹，并在其中创建一个http.js文件来配置Axios实例，代码如下：////文件路径：D:\vuepro\my-vue3-project\src\api\http.jsimportaxiosfrom'axios';consthttp=axios.create({baseURL:'',//示例API基础地址timeout:5000,//请求超时时间Axios的使用实例});exportdefaulthttp;说明：代码中的baseURL:''为演示地址，在实例应用中记得将baseURL的地址替换为用户实际需要请求的API地址。（2）在Vue3应用中挂载Axios实例。在D:\vuepro\my-vue3-project\src\main.js文件中导入并挂载Axios实例，代码如下：//src/main.jsimport{createApp}from'vue';Axios的使用实例importAppfrom'./App.vue';importhttpfrom'./api/http';//导入配置好的axios实例constapp=createApp(App);app.config.globalProperties.$http=http;//将axios实例挂载到Vue3的全局属性上app.mount('#app');Axios的使用实例（3）在组件中使用Axios。在D:\vuepro\my-vue3-project\src\components\创建一个Vue组件Postlist.vue，并在其中使用Axios来获取数据，代码如下：<!--D:\vuepro\my-vue3-project\src\components\PostList.vue--><template><div><h1>Posts</h1><ul>Axios的使用实例（3）在组件中使用Axios。在D:\vuepro\my-vue3-project\src\components\创建一个Vue组件Postlist.vue，并在其中使用Axios来获取数据，代码如下：<!--D:\vuepro\my-vue3-project\src\components\PostList.vue--><template><div><h1>Posts</h1><ul>

<liv-for="postinposts":key="post.id">

{{post.title}}

</li>

</ul>

</div>

</template>Axios的使用实例<script>

exportdefault{

name:'PostList',

data(){

return{

posts:[],

};

},

created(){

this.fetchPosts();

},

methods:{

asyncfetchPosts(){

try{

constresponse=awaitthis.$http.get('/posts');

this.posts=response.data;

}catch(error){

console.error('Errorfetchingposts:',error);

}

},

},

};

</script>Axios的使用实例（4）在应用中使用该组件。在D:\vuepro\my-vue3-project\src\App.vue应用中使用PostList组件，代码如下：<!--D:\vuepro\my-vue3-project\src\App.vue--><template><divid="app"><PostList/></div></template>Axios的使用实例<script>importPostListfrom'./components/PostList.vue';exportdefault{name:'App',components:{PostList,},};</script>Axios的使用实例（5）查看运行效果。启动开发服务器，在浏览器中打开http://localhost:5173，即可以查看网页效果，如图5-32所示。任务5.2前端页面的实现与调试图5-32获取的示例数据2.1项目前端展示页面的实现2.1项目前端展示页面的实现用户登录图5