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

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

相关推荐
ai小鬼头14 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.1 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端
foxhuli2292 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔3 小时前
CSS实现百分比水柱图
前端·css
影子信息3 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js