从后端到前端

原文地址：从后端到前端 - 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 提供了三种类型的路由守卫：

1. 全局前置守卫：通过在路由对象上注册 beforeEach 方法来实现全局前置守卫。这个方法会在每次路由导航触发之前被调用，可以用来进行全局的路由拦截和控制。
2. 全局解析守卫：通过在路由对象上注册 beforeResolve 方法来实现全局解析守卫。这个方法会在导航被确认之前被调用，也就是在所有组件内守卫和异步路由组件被解析之后调用。
3. 全局后置守卫：通过在路由对象上注册 afterEach 方法来实现全局后置守卫。这个方法会在每次路由导航完成之后被调用，可以用来进行一些全局的清理操作。

此外，还有组件内的路由守卫，比如 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave，这些守卫钩子函数可以在组件实例内部定义，用来对特定路由进行拦截和控制。

生命周期和钩子函数

Vue 的生命周期是指 Vue 实例从创建、挂载到销毁的整个过程中，会依次触发一系列的钩子函数，这些钩子函数称为生命周期钩子函数。Vue 实例的生命周期可以分为以下几个阶段：

1. 创建阶段：
   • beforeCreate：实例初始化之后，数据观测和事件配置之前被调用。
   • created：实例已经创建完成之后被调用，此时实例已经完成数据观测、属性和方法的运算，但是尚未挂载到 DOM 中。
2. 挂载阶段：
   • beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
   • mounted：实例挂载之后被调用，这时候 DOM 已经渲染出来了。
3. 更新阶段：
   • beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   • updated：数据更改导致虚拟 DOM 重新渲染和打补丁之后调用。
4. 销毁阶段：
   • beforeDestroy：实例销毁之前调用。此时实例仍然完全可用。
   • destroyed：实例销毁后调用，此时所有绑定和实例都会被解绑。

在每个阶段，开发者可以通过这些生命周期钩子函数来执行自定义逻辑，比如在创建阶段初始化数据、在挂载阶段发送网络请求、在销毁阶段清除定时器等。通过合理地使用生命周期钩子函数，可以更好地控制 Vue 实例的行为和实现一些特定的业务逻辑。

网络请求

Vue 的路由守卫是一种机制，允许你在导航过程中对路由进行拦截和控制。通过路由守卫，你可以在路由导航前、导航后、组件更新前等不同阶段执行一些逻辑操作，比如权限验证、数据预加载、页面切换动画等。Vue Router 提供了三种类型的路由守卫：

1. 全局前置守卫：通过在路由对象上注册 beforeEach 方法来实现全局前置守卫。这个方法会在每次路由导航触发之前被调用，可以用来进行全局的路由拦截和控制。
2. 全局解析守卫：通过在路由对象上注册 beforeResolve 方法来实现全局解析守卫。这个方法会在导航被确认之前被调用，也就是在所有组件内守卫和异步路由组件被解析之后调用。
3. 全局后置守卫：通过在路由对象上注册 afterEach 方法来实现全局后置守卫。这个方法会在每次路由导航完成之后被调用，可以用来进行一些全局的清理操作。

此外，还有组件内的路由守卫，比如 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave，这些守卫钩子函数可以在组件实例内部定义，用来对特定路由进行拦截和控制。

Vue 的路由守卫是一种机制，允许你在导航过程中对路由进行拦截和控制。通过路由守卫，你可以在路由导航前、导航后、组件更新前等不同阶段执行一些逻辑操作，比如权限验证、数据预加载、页面切换动画等。Vue Router 提供了三种类型的路由守卫：

1. 全局前置守卫：通过在路由对象上注册 beforeEach 方法来实现全局前置守卫。这个方法会在每次路由导航触发之前被调用，可以用来进行全局的路由拦截和控制。
2. 全局解析守卫：通过在路由对象上注册 beforeResolve 方法来实现全局解析守卫。这个方法会在导航被确认之前被调用，也就是在所有组件内守卫和异步路由组件被解析之后调用。
3. 全局后置守卫：通过在路由对象上注册 afterEach 方法来实现全局后置守卫。这个方法会在每次路由导航完成之后被调用，可以用来进行一些全局的清理操作。

此外，还有组件内的路由守卫，比如 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave，这些守卫钩子函数可以在组件实例内部定义，用来对特定路由进行拦截和控制。

通常会在组件的生命周期钩子函数中调用网络请求，比如在 created 钩子函数中发送网络请求获取数据，然后在 mounted 钩子函数中将数据渲染到页面上。这样可以保证数据在组件渲染之前就已经准备好了。

通过合理地使用第三方库进行网络请求，可以方便地与后端进行数据交互，并在 Vue 项目中实现各种功能，比如获取数据、提交表单、文件上传等。网络请求是 Vue 项目中常见的操作，也是实现前后端交互的重要手段。

尾声

要看代码的还是去这篇文章

https://yiming1234.blog.csdn.net/article/details/136987110

后续可能不会更新那么及时，需要时间用来整理一下素材和思路。

还有就是照顾一下学业，毕竟还是学生。

写博文只是为了以另一种形式在实战中练手罢了。