前后端分离开发流程

news/2024/5/20 23:45:33

1、介绍

在前后端分离开发中,前端负责用户界面和交互逻辑的实现,后端则处理业务逻辑和数据持久化。这种开发模式的优势在于前后端可以独立进行开发,提高了开发效率,并且使得前后端可以采用不同的技术栈来实现各自的功能。

2、开发流程

前后端分离开发的基本流程如下:

  1. 确定需求:前后端开发团队共同明确项目需求和功能,在此基础上进行系统设计和规划。

  2. 划分任务:根据需求确定前后端各自的任务和工作量,明确接口文档和数据格式。

  3. 前端开发:前端团队根据接口文档和需求进行页面设计和开发,选择合适的前端技术栈进行开发。

  4. 后端开发:后端团队根据前端的需求和接口文档进行接口编写和业务逻辑实现,选择合适的后端技术栈进行开发。

  5. 接口对接:前后端团队进行接口对接测试,确保前后端的数据传输和交互正常。

  6. 联调测试:前后端团队进行整体联调测试,确保系统功能正常运行。

  7. 部署上线:将前后端开发完成的代码部署到生产环境中,并进行上线测试和监控。

  8. 迭代优化:根据用户反馈和需求变更,持续进行优化和迭代开发。

其中,接口的定义、对接尤为关键
在这里插入图片描述

3、前端技术栈

开发工具

  • Visual Studio Code
  • hbuilder

技术框架:

nodejs 、VUE 、 ElementUl 、mock 、 webpack

  • Node.js:

一个基于 Chrome V8 引擎的 JavaScript 运行时环境,可用于构建高性能的后端服务。它具有非阻塞的 I/O 模型和事件驱动的特点,适用于处理大量并发请求和实时应用。

  • Vue.js:

一款流行的前端 JavaScript 框架,用于构建用户界面。它采用了组件化的开发模式,通过数据驱动视图的方 式 ,使得开发者能够轻松构建交互丰富的单页应用程序。

  • Element UI:

一个基于 Vue.js 的 UI 组件库,提供了丰富的 UI 组件,包括按钮、表单、弹窗等,可以帮助开发者快速 构建美观的用户界面。

  • Mock:

一个用于生成模拟数据的工具,可以用于前端开发中的接口测试和数据模拟。通过定义模拟数据规则和接口 映射,Mock 能够有效地模拟后端接口的返回数据,提高前端开发效率。

  • Webpack:

一个现代的前端打包工具,用于构建和打包前端项目。它支持将多个 JavaScript、CSS、图片等资源打包为一个或多个静态文件,同时还提供了模块化的开发和加载机制,能够优化代码的性能和体积。


http://www.mrgr.cn/p/74308080

相关文章

学习笔记|大模型优质Prompt开发与应用课(二)|第二节:超高产文本生成机,传媒营销人必备神器

文章目录 01 文字写作技能的革新,各行各业新机遇四大类常见文字工作新闻记者的一天新闻记者的一天–写策划prompt 新闻记者的一天–排采访prompt生成结果prompt生成结果 大模型加持,文字写作我们如何提效营销创作营销创作-使用预置法为不同平台生成文案p…

以智慧监测模式守护燃气安全 ,汉威科技“传感芯”凸显智慧力

城市燃气工程作为城市基建的重要组成部分,与城市居民生活、工业生产紧密相关。提升城市燃气服务质量和安全水平,也一直是政府和民众关注的大事。然而,近年来居民住宅、餐饮等工商业场所燃气事故频发,时刻敲响的警钟也折射出我国在…

Mybatis插件

文章目录 1. 如何自定义插件1.1 创建接口Interceptor的实现类1.2 配置拦截器1.3 运行程序 2. 插件原理2.1 解析过程2.2 创建代理对象2.2.1 Executor2.2.2 StatementHandler2.2. 3ParameterHandler2.2.4 ResultSetHandler 2.3 执行流程 1. 如何自定义插件 1.1 创建接口Intercep…

el-table 表格头部合并

<el-table v-loading"listLoading" :key"tableKey" :data"list" stripe border fit highlight-current-rowstyle"width: 100%;" size"mini"><el-table-column label"第一行" align"center">…

Vue3 导出word

&#x1f642;博主&#xff1a;锅盖哒 &#x1f642;文章核心&#xff1a;导出word 目录 1.首先&#xff0c;你需要安装docxtemplater库。可以使用npm或yarn来安装&#xff1a; 2.在Vue组件中&#xff0c;你可以使用docxtemplater来生成Word文档并提供一个导出按钮供用户下载…

2023软件设计师中级备考经验分享(文中有资料链接分享)

先摊结论吧&#xff0c;软考中级设计师备考只是备考半个月&#xff08;期间还摆烂了几天&#xff09;&#xff0c;然而成绩如下&#xff1a; 我自己都没想到会这么好的成绩。。。 上午题&#xff1a;推荐把软考通APP里的历年真题刷3-4遍&#xff0c;直接刷真题&#xff0c;然后…

白盒测试和黑盒测试的区别是什么?

前言 曾言道“黑猫&#xff0c;白猫&#xff0c;只要能抓住老鼠就是好猫”。我们的测试亦是如此&#xff0c;不管是黑盒测试还是白盒测试&#xff0c;只要能测试出来bug&#xff0c;可以找出问题所在&#xff0c;保障软件质量就是好的测试方法。 对于刚入门的软件测试小白来说…

PHP数组转对象和对象转数组

PHP数组转对象和对象转数组 <?php function array_to_object($arr){$obj new stdClass();foreach ($arr as $key > $val) {if (is_array($val) || is_object($val)) {$obj->$key array_to_object($val);} else {$obj->$key $val;}}return $obj; } function o…

Verilog语法学习——LV2_异步复位的串联T触发器

LV2_异步复位的串联T触发器 题目来源于牛客网 [牛客网在线编程_Verilog篇_Verilog快速入门 (nowcoder.com)](https://www.nowcoder.com/exam/oj?page1&tabVerilog篇&topicId301) 题目 题目描述&#xff1a; 用verilog实现两个串联的异步复位的T触发器的逻辑&#x…

【Python数据分析】Python常用内置函数(二)

&#x1f389;欢迎来到Python专栏~Python常用内置函数&#xff08;二&#xff09; ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文…

【机器学习】西瓜书学习心得及课后习题参考答案—第3章线性模型

过了一遍第三章&#xff0c;大致理解了内容&#xff0c;认识了线性回归模型&#xff0c;对数几率回归模型&#xff0c;线性判别分析方法&#xff0c;以及多分类学习&#xff0c;其中有很多数学推理过程以参考他人现有思想为主&#xff0c;没有亲手去推。 术语学习 线性模型 l…

为Android构建现代应用——主体结构

创建Screents和ViewModels 在前面的章节中&#xff0c;我们已经分析了OrderNow项目的理论概念和我们将赋予的组织。 在本章中&#xff0c;我们将开始实现初始结构和模板&#xff0c;这将联接每一个应用程序的部分。 首先将添加以下带有各自视图模型的主屏幕&#xff1a; •…

ElementUI 实现动态表单数据校验(已解决)

文章目录 &#x1f34b;前言&#xff1a;&#x1f34d;正文1、探讨需求2、查阅相关文档&#xff08;[element官网](https://element.eleme.cn/#/zh-CN/component/form)&#xff09;官方动态增减表单项示例3、需求完美解决4、注意事项 &#x1f383;专栏分享&#xff1a; &#…

linux NDK交叉编译rtmp 与 ffmpeg+rtmp交叉编译(v7a,v8a) 完成流程

最近在学RTMP,记录一下完成的编译流程 我是mac 电脑,但是mac上编译一直通过不了,后来才换到服务器上编译, 其实mac也能编译,只是最开始踩到坑里面了… 这里记录一下linux编译完整流程 环境: NDK: android-ndk-r17cFfmpeg: ffmpeg4.2.2 (高版本也可以编译)system: mac 1. …

【云原生】Docker容器资源限制(CPU/内存/磁盘)

目录 ​编辑 1.限制容器对内存的使用 2.限制容器对CPU的使用 3.block IO权重 4.实现容器的底层技术 1.cgroup 1.查看容器的ID 2.在文件中查找 2.namespace 1.Mount 2.UTS 3.IPC 4.PID 5.Network 6.User 1.限制容器对内存的使用 ⼀个 docker host 上会运⾏若⼲容…

Rust vs Go:常用语法对比(十一)

题目来自 Rust Vs Go: Which Language Is Better For Developing High-Performance Applications?[1] 202. Sum of squares Calculate the sum of squares s of data, an array of floating point values. 计算平方和 package mainimport ( "math")func main() { da…

AD21 PCB设计的高级应用(三)PCB多板互连装配设计

&#xff08;三&#xff09;PCB多板互连装配设计 一旦模块在多板原理图上相互连接,就可以验证板到板的连接。这将检测网络到引脚分配错误和引脚到引脚的互连布线错误。可以解决这些错误并将修改信息更新到对应的 PCB 中,或者重新更新到源系统原理图。 印制电路板不是孤立存在的…

ES6: 对象简写/symbol()/ Iterator/set/map/await.......

对象简写 对象名字为变量 复制对象/还有个assign方法 symbol() 这种写法用户怎么添加属性都ok 获取属性,这个方法获取symbol属性 获取属性,这个方法获取symbol和普通属性 Iterator 比较复杂,可以看视频 有迭代器的可用for..of循环 012-ES6-Iterator_哔哩哔哩_bilibili Set 它…

谈谈你对Synchronized关键字的理解及使用

synchronized关键字最主要的三种使用方式的总结 修饰实例方法&#xff0c;作用于当前对象实例加锁&#xff0c;进入同步代码前要获得当前对象实例的锁修饰静态方法&#xff0c;作用于当前类对象加锁&#xff0c;进入同步代码前要获得当前类对象的锁 。也就是给当前类加锁&…

剑指 Offer 第二版

剑指 Offer 第二版 文章目录 剑指 Offer 第二版[剑指 Offer 06. 从尾到头打印链表](https://www.nowcoder.com/practice/d0267f7f55b3412ba93bd35cfa8e8035?tpId13&tqId23278&ru/exam/oj/ta&qru/ta/coding-interviews/question-ranking&sourceUrl%2Fexam%2Foj…