JavaWeb开发 —— 前端工程化
目录
一、前后端分离开发
二、YApi
三、前端工程化
1. 环境准备:vue-cli
2. Vue项目创建
四、Vue项目开发流程
一、前后端分离开发
① 最早的前端开发就是实现页面,顶多再写写JS让页面可以有交互的特效。属于前后端未分离的时代。

早期前后端混合开发缺点:
- 沟通成本高
- 分工不明确
- 不便管理
- 不变维护扩展
② 但是随着需求的增加,我们不仅要做Web应用,还要做App、小程序以及各种端。前后端分离的时代开始,在这种需求日增的情况下,必须得考虑一种新的方式,优化前端的开发工作,例如,解决代码冗余,项目可维护性,提升版本迭代速度等等一系列的问题。前端工程化的概念也就是在这中情况下被提出了。
| 前端开发 |
| 后端开发 |
具体开发流程:
③ 前端工程化的主要目标就是解放生产力、提高生产效率。通过制定一系列的规范,借助工具和框架解决前端开发以及前后端协作过程中的痛点和难度问题。
二、YApi
① 介绍:YApi:是高效、易用、功能强大的 api 管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务。
② 官网:http://yapi.smart-xwork.cn/
③ 使用方式:
- 添加项目
- 添加分类
- 添加接口

三、前端工程化
前端工程化:是指在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。
| 模块化 | JS、CSS |
| 组件化 | UI结构、样式、行为 |
| 规范化 | 目录结构、编码、接口 |
| 自动化 | 构建、部署、测试 |
1. 环境准备:vue-cli
① 介绍:Vue-cli 是Vue官方提供的一个脚手架,用于快速生成一个Vue的项目模板。
② Vue-cli 提供了如下功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
③ 依赖环境:Node.Js
④ 安装教程:Node.Js安装
2. Vue项目创建
- 命令行:vue create vue-project01
- 图形化界面:vue ui

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

四、Vue项目开发流程
Vue的组件文件以 .vue结尾,每个组件由三个部分组成: <template> ,<script> ,<style> 。
![]() | ![]() |
相关文章:
JavaWeb开发 —— 前端工程化
目录 一、前后端分离开发 二、YApi 三、前端工程化 1. 环境准备:vue-cli 2. Vue项目创建 四、Vue项目开发流程 一、前后端分离开发 ① 最早的前端开发就是实现页面,顶多再写写JS让页面可以有交互的特效。属于前后端未分离的时代。 早期前后端混合开…...
listener监听器框架
监听器是Web开发中常用的一种组件,用于监听某些事件并根据事件触发相应的处理逻辑。在Spring Boot中使用监听器可以方便地实现对程序中各种事件的监听,比如启动事件、关闭事件等。 首先需要定义一个监听器,通常需要实现ApplicationListener接…...
tp5实现导入excel表到数据库
hello,大家好,好长时间没有更新文章了。最近一直在忙着做项目。所以断更了。 那么好,各位老铁是否想要实现导入导出的功能 请关注我,解密如何实现导入导出, 那么今天先来讲一下用thinkphp5.0 如何实现Excel表格导入数据…...
Python基础-04 字符串
字符串的表示方式 在Python中,可以使用一对单引号/双引号或者一对三个双引号/一对三个单引号表示字符串 a hello b "hello" c hello d """hello""" # 如果字符串里面还有双引号,外面就可以使用单引号 # 反之一样 # 如果字符串里…...
VVC之编码结构
VVC之编码结构(新一代通用视频编码的读书笔记) 缩写概述EncAppmain函数解读 缩写 缩写含义CVSCoded Video Sequence, 编码视频序列IRAPIntra Random Access Point, 帧内随机接入点GDRGradual Decoding Refresh, 逐渐解码刷新AUAccess Unit, 访问单元PUP…...
FPGA基于SFP光口实现10G万兆网UDP通信 10G Ethernet Subsystem替代网络PHY芯片 提供工程源码和技术支持
目录 1、前言2、我这里已有的UDP方案3、详细设计方案4、vivado工程详解5、上板调试验证并演示6、福利:工程代码的获取 1、前言 目前网上的fpga实现udp基本生态如下: 1:verilog编写的udp收发器,但不带ping功能,这样的代…...
Linux Redis主从复制 | 哨兵监控模式 | 集群搭建 | 超详细
Linux Redis主从复制 | 哨兵监控模式 | 集群搭建 | 超详细 一 Redis的主从复制二 主从复制的作用三 主从复制的流程四 主从复制实验4.1 环境部署4.2 安装Redis(主从服务器)4.3 修改Master节点Redis配置文件 (192.168.163.100)4.4 修改Slave节点Redis配置…...
整柜海运到美国的规格和收费标准是什么
整柜海运是指将所有货物安装在一个整箱内,由发货人和收货人共同操作,而目的港的收货人一般只有一个,方便操作。整柜海运到美国的主要流程有以下几个步骤:订舱、装柜、报关、海运、清关、提柜和送货。实际上,国际物流出…...
Session和Cookie区别介绍+面试题
Session 会话: 对应的英文单词:session用户打开浏览器,进行一系列操作,然后关闭浏览器。整个过程叫做一次会话一个会话包含多次请求 session机制属于B/S结构的一部分,主要的作用就是为了保存会话状态。(用户登录成功后…...
easyx
普通的画线图什么的 首先我们需要安装一个easyx的图形库,然后把头文件搞出来 #include <stdio.h> #include <easyx.h>//easyx画线啥啥的图形库 #include <graphics.h> #include <math.h> #include <conio.h>//键盘操作的头文件 设…...
记一次科学
华为云与Centos8 华为云99元Hongkong的服务器:1M,1C,2G,40G,自带不可更改的Centos 8.2 64bit 华为yum源不可以,网上找了可用的CentOS8 官方源不支持后配置yum源 # 备份 mv /etc/yum.repos.d/CentOS-Base…...
亚马逊被人差评了怎么办?
第一种: 也是最简单的做法就是通过电话或者邮件联系留差评的买家,大致意思就是按照货值的2-3倍作为赔偿,能不能把差评给删了 赔偿一个普通产品2-3倍的价格比起找服务商删一个差评几百到一千不等可以说是绰绰有余了,碰到那种愿意…...
【目标检测】YOLOv5:修改自己的网络结构
前言 YOLOv5就像一座金矿,里面有无数可以学习的东西。之前的博文一直将YOLOv5当作一个黑盒使用,只考虑模型的输入和输出,以此来对模型进行二次开发。 本篇博文将更近一层,深入到“金矿”内部,来尝试对模型结构进行替换…...
spring boot 工程整合mongodb,遇到的坑
首先说一下背景,因为其他的一个web工程有使用mongo,我想着给另外一个工程把mongo也加过来吧。也是最近做一个发送 丘比特信 的需求,觉得这个信应该是存到 mongodb。结果拿过来遇到了很大的坑,也是对版本对原理不了解吧。 下面介…...
防抖函数(最全 最干净 最好理解)
1.应用场景 1.input输入框 输入远程查询 2.邮箱,手机号验证,用户名验证 3.resize等高评率场景 2.解决问题 高频场景带来的重复渲染 等问题 多次操作 只在操作结束后再执行操作函数 3.具体实现 3.1this问题(因为settimeout是window的对…...
王小川,才是深「爱」李彦宏的那个人?
在推出中国首个类ChatGPT产品「文心一言」后,李彦宏在接受专访时断言,中国基本不会再出一个OpenAI了,「创业公司重新做一个ChatGPT其实没有多大意义,基于大语言模型开发应用机会很大,没有必要再重新发明一遍轮子。」 听…...
南京邮电大学通达学院2023《电子装配实习》报告
南京邮电大学通达学院2023《电子装配实习》报告 一 声明二 题目/实习报告提示三 例答 红笺寄 休遣玉人知 ——赠nmy 一 声明 南京邮电大学通达学院2023《电子装配实习》报告 答案更新时间:2023.04.10,已更新完成,如无错误不在更新 由于作者解答能力有限…...
Linux--tty
Linux 终端(TTY) TTY 是 Teletype 或 Teletypewriter 的缩写,原来是指电传打字机,后来这种设备逐渐键盘和显示器取代。不管是电传打字机还是键盘显示器,都是作为计算机的终端设备存在的,所以 TTY 也泛指计算机的终端(terminal)设…...
一位女程序员的自述:我是如何成为前端工程师的
今天,我想和大家分享一下我的职场经历:我是如何成为一名前端工程师的,以及我为什么会选择这个职业。此外,大家比较关心的是我们为什么要出国工作呢?也是想给自己的职业生涯做一个阶段性的总结,尤其是作为一…...
C++命名空间详解
1.什么是命名空间 在c中,名称(name)可以是符号常量、变量、函数、结构、枚举、类和对象等等。工程越大,名称互相冲突性的可能性越大。另外使用多个厂商的类库时,也可能导致名称冲突。为了避免,在大规模程序…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子,用于处理异步操作(如数据加载)中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误:捕获在 loader 或 action 中发生的异步错误替…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
Git常用命令完全指南:从入门到精通
Git常用命令完全指南:从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...
sshd代码修改banner
sshd服务连接之后会收到字符串: SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢? 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头,…...
门静脉高压——表现
一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构:由肠系膜上静脉和脾静脉汇合构成,是肝脏血液供应的主要来源。淤血后果:门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血,引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...
理想汽车5月交付40856辆,同比增长16.7%
6月1日,理想汽车官方宣布,5月交付新车40856辆,同比增长16.7%。截至2025年5月31日,理想汽车历史累计交付量为1301531辆。 官方表示,理想L系列智能焕新版在5月正式发布,全系产品力有显著的提升,每…...
项目进度管理软件是什么?项目进度管理软件有哪些核心功能?
无论是建筑施工、软件开发,还是市场营销活动,项目往往涉及多个团队、大量资源和严格的时间表。如果没有一个系统化的工具来跟踪和管理这些元素,项目很容易陷入混乱,导致进度延误、成本超支,甚至失败。 项目进度管理软…...



