前后端联调的一般步骤和Nginx简单配置

前后端联调的一般步骤

1、创建前端工程（这里创建的是vue-cli项目）

2、编写后端登录业务

3、替换页面元素为自己需要的，比如图标，标题之类的

4、编写前端页面Vue组件

5、编写跳转到组件的路由（router/index.js）

6、如果需要从后端获取数据，使用Axios异步通信，默认框架中使用了request封装请求

BASE_API:'"http://localhost:8120'

7、编写处理后端接口的js函数

import request from '@/utils/request'export function login(username,password){return request({url:'/admin/sysuser/login',//后端的请求路径method:'post', //请求方式data:{   //参数username,password}})
}

8、由于后端可能有多台服务器提供接口服务，前端无法实现分发请求，这个时候就需要使用到反向代理服务器，我们这里使用Nginx来进行请求的分发

9、前后端联调测试

前端api接口对接后端请求
axios异步获取请求拿到后端数据，然后进行页面渲染
页面细节的处理

10、具体业务功能编写

Nginx简单配置

配置文件

Nginx的配置文件nginx.conf在安装目录下的conf文件夹下，如下图所示

示例配置

server{listen 8210;   #监听端口（默认监听接口为80）server_name localhost; #服务名location ~ /edu/{  #请求路径含 /edu/的请求转发到8110端口proxy_pass http://localhost:8110;}location ~ /admin/sysuser{ #请求路径含 /admin/sysuser的请求转发到8210端口proxy_pass http://localhost:8210;}
}

反向代理原理如下图所示

Nginx的常用命令

1、启动Nginx，双击nginx.exe

nginx

2、停止Nginx

nginx -s stop

3、查看Nginx进程

ps -ef|grep nginx

4、重启Nginx

nginx -s reload

5、强制停止Nginx

pkill -9 nginx

6、查看Nginx版本

nginx -v

时隔两个月我又回来了，之前太堕落了，学习落下了好多，这个月必须要努力才行！简书更新之旅再度开启，朋友们一起加油吧！

前后端联调的一般步骤和Nginx简单配置相关推荐

用了这个 IDE 插件，5分钟解决前后端联调！
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 李海庆我是一个 Web 开发前端工程师,受到 ...
5 分钟解决前后端联调问题，说一说前端代理这件事
简介: 简洁,又能触达痛点的一站式前端代理解决方案,你值得拥有. 作者:寒斜说到前端代理,相信每一个做过前后端联调的同学都有遇到过.当下涉及前后端工程项目的研发,主流模式一定是前后端的分离.它让前后 ...
WebSocket前后端联调
WebSocket前后端联调问题简介最近由于要进行态势推演的开发,该功能需要实现多个websocket的管理,因此,在进行开发时,学习了关于前后端联调的一些细节,记录一下.该文章主要描述如何高效 ...
RuoYi-Vue 部署 Linux环境若依前后端分离项目（jar包+nginx 多机版本）
接上一篇:RuoYi-Vue 部署 Linux环境若依前后端分离项目(jar包+nginx 单机版本) 前端和后端不在一个服务器上,如何部署呢? 文章目录 1. 服务器和软件部署 2. 后端部署 3 ...
RuoYi-Vue 部署 Linux环境若依前后端分离项目（jar包+nginx 单机版本）
文章目录一.软件安装部署 1. 安装jdk 2. mysql8安装部署 3. redis安装 4. nginx 安装部署 5. 克隆项目二.后端项目 2.1. 修改数据库连接 2.2. 修改Red ...
京东java前后端联调_前端工程化、组件化实践JDM分享
前端技术原创文前端工程化.组件化实践JDM分享该文由孵化创新一部曾瑞文在研究院技术分享会的分享内容总结而成,主要讲解了团队创新的前端工程化.组件化的思想及实践应用. 为什么要搞前端框架? Java ...
vue框架前后端联调流程
什么是前后端联调定义在我们开发的过程中,发送请求的ajax数据都不是后端返回的真数据,而是我们自己通过接口mock模拟的假数据,当前端的代码编写完成后,后端的接口也写好后,我们就需要把mock数据 ...
【day1】谷粒商城-人人开源前后端联调准备工作
安装docker 这个过程看csdn的收藏.也可以看知乎https://zhuanlan.zhihu.com/p/143156163 配置docker加速在阿里云里配置,镜像加速器.照着抄就可以了. ...
java request payload_前后端联调之Form Data与Request Payload，你真的了解吗？
前言做过前后端联调的小伙伴,可能有时会遇到一些问题.例如,我明明传递数据给后端了,后端为什么说没收到呢?这时候可能就会就会有小伙伴陷入迷茫,本文从chrome-dev-tools(F12调试器)中看 ...