一、前端
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.注意此操作一定要用代码生成器来写
否则操作全部正确,也会出现以下这种情况