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

来源:黑马程序员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> 。

相关推荐
誰能久伴不乏19 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪1 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾1 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的2 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句2 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6662 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html
gis收藏家2 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端