vue-element-admin 如何连接 springboot 项目的 login接口（前后端跨域问题、代码生成器的用法及检验、后端接口开发流程）

一、前端

1.设置访问端口和网站名称

.env.development 和 .env.production 两个文件是开发环境和生产环境

当我们运行npm run dev进行开发调试的时候,此时会加载执行 .env.development 文件内容

当我们运行npm run build:prod进行生产环境打包的时候,会加载执行 .env.production 文件内容

要在.env.development开发环境中设置具体路径如图：

 base_url 和具体的路径进行拼接

 2.在vue.config.js中解决跨域问题

1. 设置跨域配置 proxy属性

2. 设置 target属性：跨域的地址

3. 是否容许跨域

4. 注释模拟数据 mock

 3.设置接口

在api内的文件中可设置api接口。这里以登录接口为例
在user.js中：设置登录接口请求的路由。

4.像后端发起请求 

request.js 封装 axios 插件，可以系统的配置 post、get 的方法的头，以及组织参数。
原框架没有设置 post 头，这里增加代码块9-20 行。

 二、后端

1.Mybatis-Plus 是一款 Mybatis 的增强工具包，它提供了一些方便开发的功能，其中之一就是代码生成器。Mybatis-Plus 的代码生成器可以根据数据库中的表和字段信息生成对应的实体类、Mapper 接口、Service 接口、Controller 类等代码，大大提高了开发效率。下面是使用 Mybatis-Plus 代码生成器的步骤：

添加 Mybatis-Plus 依赖

在项目中添加代码生成器模块在pom.xml文件中

配置代码生成器的参数，例如数据库连接 URL、用户名、密码、生成文件的输出路径等。Mybatis-Plus 代码生成器提供了很多参数可配置

编写代码生成器的启动类。在启动类中，初始化代码生成器并执行生成操作

配置了数据库连接 URL、用户名、密码等参数，并设置了需要生成的表名为 user。生成的文件将输出到 src/main/java 目录下

运行代码生成器的启动类即可生成相关代码如图：

2.这些生成好之后打开userController在此文件中添加你所需要的接口，如图：

在运行后可先在postman中进行查看，看图

 返回一下内容正确，然后可以去网页控制台查看是否正确

出现这个说明你成功了！!   !

三、可能会出现的情况

1、就是在postman中可以实现，网页控制台却出现这种情况

 报404状态码，你要去仔细看下你前端的接口是否正确，两个接口是否一致

 2.注意此操作一定要用代码生成器来写

否则操作全部正确，也会出现以下这种情况