前后端分离开发 和 前端工程化

来源:黑马程序员JavaWeb开发教程,实现javaweb企业开发全流程(涵盖Spring+MyBatis+SpringMVC+SpringBoot等)_哔哩哔哩_bilibili

前后端混合开发:

需要使用前端的技术栈开发前端的功能,又需要使用Java的技术栈编写后端的实现,还需要操作数据库。

前后端分离开发:

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

两者之间需要交互:

在前端工程中发起异步请求,来请求后端工程。

后端工程接收到请求,对请求进行处理,再给前端工程返回一个响应结果。

为了能正常的交互,在开发的时候必须遵循接口文档。

YApi

介绍:YApi 是高效、易用、功能强大的 api 管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务

地址: http://yapi.smart-xwork.cn/

前端工程化

前端工程化:是指在企业级的前端项目开发中,把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

环境准备

介绍: Vue-cli 是Vue官方提供的一个脚手架,用于快速生成一个 Vue 的项目模板。

Vue-cli提供了如下功能:

  • 统一的目录结构

  • 本地调试

  • 热部署

  • 单元测试

  • 集成打包上线

依赖环境:NodeJS

依赖环境:NodeJS

  1. 安装NodeJS

  2. 验证NodeJS环境遍历

    javascript 复制代码
    node -v
  3. 配置npm的全局安装路径:使用管理员身份运行命令行,在命令行中,执行如下指令

    javascript 复制代码
    npm config set prefix "E:\develop\NodeJS" // 最后""里面是NodeJS的安装路径
  4. 切换npm的镜像

    javascript 复制代码
    npm config set registry https://registry.npmmirror.com
  5. 安装 vue-cli

    javascript 复制代码
    npm install -g @vue/cli

Vue项目简介

Vue项目-创建

  1. 命令行:

    javascript 复制代码
    vue create vue-project01 
  2. 图形化界面:

    javascript 复制代码
    vue ui

Vue项目-目录结构

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

Vue项目-启动

  1. 方式一:图形化界面

  1. 方式二:命令行 npm run serve

Vue项目-配置端口

打开vue.config.js,增加devServer配置:

再重新启动,会发现端口号改变:

Vue项目开发流程

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

相关推荐
南风木兮丶2 分钟前
Vue 项目安装 @antfu/eslint-config 保姆级教程
前端·javascript·vue.js
万少15 分钟前
记 HarmonyOS 开发中的一个小事件 怒提华为工单
前端·harmonyos
未来之窗软件服务17 分钟前
万象EXCEL开发(六)excel单元格运算逻辑 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
Mintopia24 分钟前
🚀 Cesium-Kit:10 秒为你的 Cesium 项目添加动态光效标记
前端·javascript·cesium
Mintopia25 分钟前
🌩️ 云边协同架构下的 WebAI 动态资源调度技术
前端·javascript·aigc
Olrookie27 分钟前
若依前后端分离版学习笔记(十六)——scoped、路由跳转
前端·笔记
qaqxiaolei27 分钟前
高效办公利器:前端实现表格导出excel格式 + 自定义水印的完整方案
前端·javascript
叫我詹躲躲30 分钟前
为什么Bun.js能在3秒内启动一个完整的Web应用?
前端·javascript·bun
Olrookie30 分钟前
若依前后端分离版学习笔记(十七)——ruoyi开发规范&流程,请求流程,依赖引入,组件注册&通信
前端·笔记
Keepreal49631 分钟前
谈谈对闭包的理解以及常见用法
前端·javascript