原文地址：从后端到前端 - Pleasure的博客
下面是正文内容：
前言
在前面几章中主要介绍了系统开发的后端部分，但是验证接口的适用性只能通过专门的软件（Apifox，Postman等）来进行测试。那从现在开始，就正式来编写系统的前端部分。
这需要有一定的前端编写基础，并不会详细介绍前端页面具体是如何一步步编写的。
前端部分采用Vue.js来进行编写，后端部分采用SpringBoot来进行编写。
由于在企业中前端和后端一般通过标准规范的接口文档进行连接，而且每个人编写的后端程序变量名打包等存在差异，所以这篇文章还是以前端为主，通过接口进行连接和调用，后端用的就是我之前这个专栏撰写的用户模块的部分。
后端工程专栏：https://blog.csdn.net/2302_79791164/category_12611545.html
前置知识：前端工程Vue前置知识-CSDN博客
用户模块前端的代码：https://yiming1234.blog.csdn.net/article/details/136987110
正文
今天这篇文章就主要以介绍基础操作为主，具体的接口连接，登录态的保持等细节需要慢慢来。
创建Vue工程
需要准备的是Windows系统中的Nodejs环境变量。
大概配置方法可以参考我之前的这篇文章
https://yiming1234.blog.csdn.net/article/details/136120573
配置完成后，在想要放置工程目录的文件夹下cmd创建工程
npm init vue@latest
npm run dev用VScode进行编辑，左边放置代码编辑器，右边放置网页文件进行实时刷新。
合理运用element-plus
Anchor 锚点 | Element Plus
自从Vue开发以来，Web前端页面的编辑也迈出了向组建化发展的重要一步。
element-plus就是重要的一步，让前端页面的编写变得非常简单。
安装：npm install element-plus --save
导入：import ElementPlus from 'element-plus'
导入组件：import { User, Lock } from '@element-plus/icons-vue'
想要什么页面展示组件只需要机械的进行复制粘贴和拼接就可以了。
但是在功能逻辑的实现上还需要进行另外规划。
默认文件的作用
在下面的这篇文章中我曾介绍过Vue工程中主要默认文件夹的作用，但是在实际应用中还有一些差异。
从前端到前端框架-CSDN博客
比如说这次涉及到的用户登录模块，相比于上面提到的文件，多出了api，router，utils，views等子文件夹。这些文件夹顾名思义，在分化上也和springboot有一定的相似性。
有专业名词不懂的可以去看这个前置知识。
api文件夹中存放连接调用接口的函数的文件。
router文件夹存放定义路由关系创建路由路由导出路由的文件。
stores文件夹一般用于存放与用户状态相关的文件。
utils文件夹用于存放工具类，比如说请求拦截器，响应拦截器等。
views文件夹用于存放直观展示的前端页面文件。
每一个文件夹基本上就代表着一个特定的功能，需要分别另起一章进行记录。
感兴趣的话大家可以点个关注跟进一下。
前置知识补充2
书接上文，前端工程Vue前置知识-CSDN博客
上一篇文章还是有一些概念没有提到，在这里一并进行补充。知道的可以跳过。
路由守卫
Vue 的路由守卫是一种机制，允许你在导航过程中对路由进行拦截和控制。通过路由守卫，你可以在路由导航前、导航后、组件更新前等不同阶段执行一些逻辑操作，比如权限验证、数据预加载、页面切换动画等。Vue Router 提供了三种类型的路由守卫：
- 全局前置守卫：通过在路由对象上注册
beforeEach方法来实现全局前置守卫。这个方法会在每次路由导航触发之前被调用，可以用来进行全局的路由拦截和控制。 - 全局解析守卫：通过在路由对象上注册
beforeResolve方法来实现全局解析守卫。这个方法会在导航被确认之前被调用，也就是在所有组件内守卫和异步路由组件被解析之后调用。 - 全局后置守卫：通过在路由对象上注册
afterEach方法来实现全局后置守卫。这个方法会在每次路由导航完成之后被调用，可以用来进行一些全局的清理操作。
此外，还有组件内的路由守卫，比如 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave，这些守卫钩子函数可以在组件实例内部定义，用来对特定路由进行拦截和控制。
生命周期和钩子函数
Vue 的生命周期是指 Vue 实例从创建、挂载到销毁的整个过程中，会依次触发一系列的钩子函数，这些钩子函数称为生命周期钩子函数。Vue 实例的生命周期可以分为以下几个阶段：
- 创建阶段：
beforeCreate：实例初始化之后，数据观测和事件配置之前被调用。created：实例已经创建完成之后被调用，此时实例已经完成数据观测、属性和方法的运算，但是尚未挂载到 DOM 中。
- 挂载阶段：
beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。mounted：实例挂载之后被调用，这时候 DOM 已经渲染出来了。
- 更新阶段：
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。updated：数据更改导致虚拟 DOM 重新渲染和打补丁之后调用。
- 销毁阶段：
beforeDestroy：实例销毁之前调用。此时实例仍然完全可用。destroyed：实例销毁后调用，此时所有绑定和实例都会被解绑。
在每个阶段，开发者可以通过这些生命周期钩子函数来执行自定义逻辑，比如在创建阶段初始化数据、在挂载阶段发送网络请求、在销毁阶段清除定时器等。通过合理地使用生命周期钩子函数，可以更好地控制 Vue 实例的行为和实现一些特定的业务逻辑。
网络请求
Vue 的路由守卫是一种机制，允许你在导航过程中对路由进行拦截和控制。通过路由守卫，你可以在路由导航前、导航后、组件更新前等不同阶段执行一些逻辑操作，比如权限验证、数据预加载、页面切换动画等。Vue Router 提供了三种类型的路由守卫：
- 全局前置守卫：通过在路由对象上注册
beforeEach方法来实现全局前置守卫。这个方法会在每次路由导航触发之前被调用，可以用来进行全局的路由拦截和控制。 - 全局解析守卫：通过在路由对象上注册
beforeResolve方法来实现全局解析守卫。这个方法会在导航被确认之前被调用，也就是在所有组件内守卫和异步路由组件被解析之后调用。 - 全局后置守卫：通过在路由对象上注册
afterEach方法来实现全局后置守卫。这个方法会在每次路由导航完成之后被调用，可以用来进行一些全局的清理操作。
此外，还有组件内的路由守卫，比如 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave，这些守卫钩子函数可以在组件实例内部定义，用来对特定路由进行拦截和控制。
Vue 的路由守卫是一种机制，允许你在导航过程中对路由进行拦截和控制。通过路由守卫，你可以在路由导航前、导航后、组件更新前等不同阶段执行一些逻辑操作，比如权限验证、数据预加载、页面切换动画等。Vue Router 提供了三种类型的路由守卫：
- 全局前置守卫：通过在路由对象上注册
beforeEach方法来实现全局前置守卫。这个方法会在每次路由导航触发之前被调用，可以用来进行全局的路由拦截和控制。 - 全局解析守卫：通过在路由对象上注册
beforeResolve方法来实现全局解析守卫。这个方法会在导航被确认之前被调用，也就是在所有组件内守卫和异步路由组件被解析之后调用。 - 全局后置守卫：通过在路由对象上注册
afterEach方法来实现全局后置守卫。这个方法会在每次路由导航完成之后被调用，可以用来进行一些全局的清理操作。
此外，还有组件内的路由守卫，比如 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave，这些守卫钩子函数可以在组件实例内部定义，用来对特定路由进行拦截和控制。
通常会在组件的生命周期钩子函数中调用网络请求，比如在 created 钩子函数中发送网络请求获取数据，然后在 mounted 钩子函数中将数据渲染到页面上。这样可以保证数据在组件渲染之前就已经准备好了。
通过合理地使用第三方库进行网络请求，可以方便地与后端进行数据交互，并在 Vue 项目中实现各种功能，比如获取数据、提交表单、文件上传等。网络请求是 Vue 项目中常见的操作，也是实现前后端交互的重要手段。
尾声
要看代码的还是去这篇文章
https://yiming1234.blog.csdn.net/article/details/136987110
后续可能不会更新那么及时，需要时间用来整理一下素材和思路。
还有就是照顾一下学业，毕竟还是学生。
写博文只是为了以另一种形式在实战中练手罢了。
