JavaWeb-11-前端工程化

最新推荐文章于 2024-04-17 09:27:42 发布

学不会is dog

最新推荐文章于 2024-04-17 09:27:42 发布

阅读量171

点赞数

分类专栏： JavaWeb 文章标签：前端

本文链接：https://blog.csdn.net/yelitoudu/article/details/132405983

版权

JavaWeb 专栏收录该内容

35 篇文章 6 订阅

订阅专栏

一、前后端分离开发

1、前后端混合开发

介绍：

开发人员要开发一个项目：
① 既需要使用开发前端的技术栈来开发前端的功能

② 又需要使用Java的技术栈来编写后端的功能实现

③ 还需要操作数据库

那这种就是将前端和后端代码全部都写在一个工程当中的。
前端开发工程师：

主要负责开发静态的HTML页面，然后将开发好的HTML页面提供给后端人员。
后端开发工程师：

需要基于前端开发工程师提供的HTML页面的模板进行改造，与服务器端进行交互，并完成页面的渲染和展示。

如果发现HTML页面有问题，再反馈给前端开发工程师进行修改。

在这种开发模式当中，后端开发人员既需要熟悉前端开发的技术栈，也需要熟悉服务器端开发的技术栈。

存在问题：

① 沟通成本高：

后端人员发现HTML页面有问题的时候，需要反馈给前端人员，前端人员修改完成后要再交给后端人员进行使用。

② 分工不明确：

后端人员既需要开发前端的功能实现，还需要开发服务器端的功能。这样会导致在一个项目中很难培养出专业性的人才。

因为开发人员的精力都是有限的。

③ 项目不便于管理、维护扩展：

因为所有程序代码都写在一个工程中，现在前端可能包含了PC、移动端，如果后期需求增加一个小程序端，那么就需要在原有的代码基础上再来进行改动。

2、前后端分离开发（目前主流）

介绍：

当前最为主流的开发模式：前后端分离。
将一个项目拆分为两个部分：

① 前端工程

由专业的前端开发人员负责开发，开发好的前端工程要与后端程序进行交互，需要在前端工程当中发起异步请求来请求后端工程。

② 后端工程

由专业的后端开发人员负责开发，后端工程接收到前端工程的异步请求，对请求进行处理，处理完毕之后再给前端工程返回一个响应结果即可。

在这种开发模式中，前端程序和后端程序都是由独立的团队进行开发的；

前后端程序要想最终能够正常的交互对接起来，他们在进行开发的时候就需要遵守某种开发规范；

而这个开发规范，我们需要定义在专门的文档当中的——接口文档。

接口文档：

这里的接口不是之前Java的Interface。
这里的接口指的是一个业务功能
- 如：添加员工就是一个功能，我们可以称之为接口
- 如：删除员工也是一个功能，我们可以称之为接口
所以一个业务功能就是一个接口。
有了接口文档之后，前端、后端工程师可以阅读这份接口文档，然后基于接口文档来进行开发。
接口文档当中描述了这个接口在请求的时候需要传递什么参数，前端工程师就给后端传递对应的参数即可。

后端工程师需要根据接口文档当中所描述的形式来接收参数，后端处理完成后，再按照接口文档当中所描述的规范来给前端响应对应的数据。

前端开发工程师再根据接口文档当中所描述的响应数据的格式进行数据解析即可。

如果前端工程师和后端工程师都严格的遵循了同一份接口文档，那最终他们所开发出来的前端工程和后端工程是可以无缝集成在一起的。

接口文档维护：

① 在线维护方式：

可以通过很多的在线文档管理平台进行维护。

② 离线维护方式：

可以在word、md、excel当中定义这份接口文档。

接口文档来源

由产品经理所提供的页面原型以及需求分档，分析而来的。

业务功能开发流程：

① 先熟悉业务需求，进行需求分析

② 需求分析完成后，需要依据页面原型和需求文档定义出API接口文档

③ 前后端人员依据API接口文档进行并行开发，此时必须遵守接口文档当中定义的规范

④ 前后端开发完成后，前端人员测试前端的程序代码，后端人员测试后端的程序代码

⑤ 前后端都测试完成后，进行前后端的联调测试（前后端工程都开发完毕后，前端工程调用后端工程，然后进行联合调试）

二、YAPI

1、介绍

YAPI 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。
地址：http://yapi.smart-xwork.cn/

2、YAPI功能

API接口管理
Mock服务：

通过YAPI这个平台，可以模拟真实接口生成接口的模拟测试数据，用于前端工程测试。

正因为有了这个功能，在前后端分离开发模式中前后端就可以并行开发了。

即使后端的接口还没有开发完毕，前端人员也可以使用YAPI当中所提供的Mock地址来进行模拟数据的测试。

3、YAPI管理接口文档

使用步骤：

① 注册登录

② 添加项目

③ 添加分类

④ 添加接口

⑤ 编辑接口

⑥ 模拟测试

其实，之前在Axios案例中所用的地址正是Mock地址

三、前端工程化

小白眼中的前端开发

这种结构的工程在开发大型项目时会存在很多的问题：
比如：

① 每次开发功能都是从零开始，多个页面当中的组件或功能复用性并不好。

② JS、图片资源文件没有规范化的存储目录，想怎么定义就怎么定义，在团队协作开发时，每个开发人员都有自己的开发习惯。这样做并不利于项目的维护和管理。

实际的前端开发

在现在的前端开发当中，都讲究前端开发的模块化、组件化、规范化、自动化。

① 模块化

指的是我们可将JS、CSS制作成一个一个可以复用模块。

② 组件化

指的是我们可将UI组件、CSS样式、JS行为封装成一个一个的组件，便于管理。

③ 规范化

指的是我们可以提供一套标准规范的目录结构、编码规范，所有开发人员都遵守这一套统一的规范进行开发。

④ 自动化

指的是项目的构建、部署、测试都可以自动化的进行。

以上这些就可以组成前端的工程化开发。

前端工程化：

是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
从而来提升前端工程的开发效率、产品质量，降低开发难度、成本。

① 环境准备

介绍

Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。
Vue-cli 提供了如下功能：
- 统一的目录结构
- 本地程序调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：NodeJS

下载NodeJS

通过浏览器搜索进入官网
选择下载长期维护版本，比较稳定

安装NodeJS

① 双击NodeJS安装包

② 选择安装目录

选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

③ 验证NodeJS环境变量

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

④ 配置npm的全局安装路径

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set prefix "E:\develop\NodeJS"

注意：E:\develop\NodeJS 这个目录是NodeJS的安装目录

⑤ 切换npm的淘宝镜像

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npm.taobao.org

⑥ 安装Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

⑦ 确认是否安装完成

② Vue项目简介

（1）创建

命令行：

指令：vue create 项目名称
例：vue create vue-project01

图形化界面：
```
指令：vue ui
```
- 通过命令窗口输入指令：vue ui
- 输入指令回车后，会调用出 vue 的项目管理器
- 点击在此创建新项目

（2）在VS Code中打开vue项目

（3）目录结构

基于Vue脚手架创建出来的工程，有标准的目录结构，如下：

（4）启动

方式一：图形化界面
- 如果没有NPM脚本，试试以下方法：
- 如果设置完了，还是像我一样没有NPM脚本
  
  可以前往：关于vs code软件npm脚本显示问题-解决方案
- 或者可以通过方式二运行项目，也可以右键项目文件夹—>在集成终端中打开
方式二：命令行输入指令 npm run serve

（5）访问

直接复制这个地址，在浏览器中访问即可

（6）热部署

Vue给我们提供了热部署

（7）配置Vue项目端口

因为在后面需要讲解到Tomcat，这个工具是用来部署Java项目的，Tomcat默认占用的端口号就是8080，所以在这里修改一下vue项目的端口号为7000

③ Vue项目开发流程

（1）index.html

我们目前访问到的这个页面是Vue项目默认的首页index.html
而在index.html页面当中是默认引入了main.js文件（Vue项目的入口文件）

（2）Vue的组件

Vue的组件文件以 .vue结尾，每个组件由三个部分组成：<template> 、<script>、<style> 。

（3）示例

<template>
  <!-- template内部是用来定义HTML代码的（相当于vue当中的视图部分） -->
  <div>
    <h2>{{massage}}</h2>
  </div>
</template>

<script>
// script内部是用来定义JS代码
// export default：
//   是默认格式不需要变动，因为只要定义export，别的地方才可以通过import导入当前组件文件APP.vue
export default {
  // vue当中的数据模型
  data () {
    return {
      massage: "Hello Vue!!"
    }
  },
  // vue当中的函数（方法）
  methods: {
    
  },
}
</script>

<style>
/* style内部是用来定义CSS样式 */

</style>

在开发中，一般很少改动index.html、main.js文件，很多时候都是编写.vue组件文件。

学不会is dog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb-11-前端工程化

开发人员要开发一个项目① 既需要使用开发前端的技术栈来开发前端的功能② 又需要使用Java的技术栈来编写后端的功能实现③ 还需要操作数据库那这种就是将前端和后端代码全部都写在一个工程当中的。前端开发工程师主要负责开发静态的HTML页面，然后将开发好的HTML页面提供给后端人员。后端开发工程师需要基于前端开发工程师提供的HTML页面的模板进行改造，与服务器端进行交互，并完成页面的渲染和展示。如果发现HTML页面有问题，再反馈给前端开发工程师进行修改。
复制链接

扫一扫