前端工程化

2024-10-28 07:09:47

前后端分离开发

        早期的开发模式多是前后端混合开发，指的是在一个项目中，指的是前端代码和后端代码在同一个项目中进行开发和管理，存在一定程度的耦合而不是完全分离。但这种开发方式弊端颇多，现已不再是主流。

        现在的开发模式就是前后端分离开发，分为前端工程和后端工程，由不同的工程师独立开发，开发完成后前端发送请求，后端响应请求。为了使前后端交互成功，两端开发时需制定某种开发规范，并定义在一份文档中，我们称该文档为接口文档。(该接口不是java的interface，而是指某种功能，例如添加/删除员工)。

        由此可见项目的开发过程分为以下几步：

        接下来我们介绍一款接口文档的管理平台：YApi 

YApi

        YApi 是一个开源的、功能强大的 API 管理平台，它旨在帮助开发者更高效、更便捷地管理 API。 它的功能主要包括以下两个方面：

  1. API 接口管理：YApi 允许用户导入、导出和在线编辑 API 文档，支持多种格式的文档，如 Swagger、Postman、HAR 等。

  2. Mock 数据：YApi 提供了 Mock 功能，允许前端开发者在不依赖后端实现的情况下，通过 YApi 该平台模拟真实 API 响应数据，从而并行开发。

添加接口

        1、首先进入官方网址并注册账户：YApi Pro-高效、易用、功能强大的可视化接口管理平台

        2、点击左侧"添加分类"为接口创建分类，并在新添加的分类中点击"添加接口"或"+"     

        3、点击编辑完善接口信息，点击"导入json" 

         4、点击"保存"，此时就可在预览页面看到该接口的基本信息。还生成了Mock地址，点击地址就可看到系统已生成了基本信息，但该信息可能过于宽泛，可以点击"高级Mock"—"添加期望"来制定想要的值。

前端工程化

        前端工程化是指将软件工程的方法和实践应用于前端开发的过程，把前端开发所需的工具、技术、流程、经验、等进行规范化，标准化，从而提高前端开发的质量、效率和可维护性。前端工程化主要讲求：

  1. 模块化：将js、css等制作成一个个的模块，便于使用、管理和维护。

  2. 组件化：将界面拆分成可复用的组件，提高代码的复用性和开发效率。

  3. 规范化：制定编码规范，确保代码风格统一，降低阅读和理解成本。

  4. 自动化：通过工具（如 Webpack、Gulp）自动执行任务，如代码压缩、打包、混淆等。

环境准备

        如果手动的编写代码完成上述目标，效率无疑会很低，所以我们会使用一些现成的工具来辅助完成。这个工具就是 Vue  官方提供的脚手架工具:vue-cli，它可用于快速搭建 Vue.js 项目架构。

        vue-cli 提供的功能：

  • 统一的目录结构
  • 本地调试
  • 热部署:程序代码变动时无需重新运行就可直接加载最新的程序
  • 单元测试
  • 集成打包测试

        而该工具的运行需要有依赖环境:Node，两者的关系就相当于java运行需要配置jdk，此处仅示范关键步骤：

  1. 搜索node/js官网，下载普通版，不要下载尝鲜版，安装到想要的路径
  2. 搜索cmd并以管理员身份打开，执行以下代码：
C:\Users\CHN>npm config set prefix "安装路径"

C:\Users\CHN>npm config get prefix//检查是否安装成功
D:\TOOLS\nodeJs

C:\Users\CHN>npm config set registry https://registry.npmmirror.com//配置镜像网站

C:\Users\CHN>npm install -g @vue/cli//安装脚手架工具
//等待数十秒
C:\Users\CHN>vue --version//检查是否安装成功
@vue/cli 5.0.8

Vue项目简介

        一、创建Vue项目

  • 在想要存放文件的位置在路径框输入cmd，再使用以下两方法任一
    • 命令行：直接输入：vue creat 项目名称
    • 图形化界面：输入vue ui回车调用vue项目管理器，创建vue项目->详情页输入项目名，包管理器选择npm，取消勾选"初始化git仓库"，下一步->预设界面选择手动，下一步->勾选Babel、Router、Linter/Formatter，下一步->版本选择2.x，语法规范选择ESLint with error prevention only，下一步->创建项目，暂不保存预设

        二、Vue项目目录结构

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

  • node_modules：整个项目的依赖包
  • public：存放项目的静态文件
  • src：存放项目的源代码
    • assets：静态资源
    • components：可重用组件
    • router：路由配置
    • views：视图组件(页面)
    • App.vue：入口页面(根组件)
    • main.js：入口js文件
  • .gitignore # Git忽略文件配置，指定不需要被git跟踪的文件
  • babel.config.js # Babel配置文件，用于转译ES6+代码
  • package.json：模块基本信息，项目开发所需模块，版本信息
  • packagelock.json：# 锁定项目依赖的版本号
  • postcss.config.js：# PostCSS配置文件，用于CSS后处理
  • vue.config.js：保存vue配置的文件，如：代理，端口的配置

Vue项目运行

        运行Vue项目由两种方式：

一、通过VS Code图形化页面运行：

        构建完毕后会自动启动相应的服务， 该服务运行在8080端口上，所以可以直接通过访问链接http://localhost:8080/ 来访问该项目，其访问的页面就是src目录下的App.vue。

        此时我们就可以尝试直接修改App.vue中的数据，无需重启程序，页面就会随代码变化。这就是热部署功能。

二、通过命令行的方式运行：在当前目录的路径下打开cmd执行npm run serve

三、Vue项目配置端口(可选)

        在vue.config.js增加一段配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true/*增加代码,
  devServer: {
    port: 4399//指定端口号
  }*/
})

        再按ctrl+c，弹出语句：终止批处理操作吗(Y/N)? 输入y，再点击左下角运行重新启动程序。

Vue项目开发流程 

        我们默认的页面为public项目下的默认页面index.html，在该文件中默认引入了入口文件main.js，其中有很多关键字import代表引入文件，与之相对的还有export代表将对象或函数导出为模块

//main.js文件
import Vue from 'vue'//导入包
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({//创建vue对象
  router,//路由
  render: h => h(App)//函数，将上文导入的app中的视图创建出虚拟的dom元素
}).$mount('#app')//将vue对象实例挂载到index.html中id为app的div区域
/*等价于new Vue({
  el: "#app",
  router:router,//属性名和属性一致，则:及之后可以省略
  render: h => h(App)
})*/
//index.html文件
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

        但我们可见<div>中并未填充内容，但网页中却有很多内容，这是因为在创建vue对象时render: h => h(App)函数创建了虚拟的dom元素，该dom元素是在App.vue根组件中定义的，接下来我们介绍App.vue

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

<template>

        这是组件的模板部分，它告诉Vue如何渲染组件的DOM结构，生成html代码。

        在<template>块中，你可以使用HTML语法，以及Vue提供的指令（如v-if、v-for、v-bind等）和插值表达式（如{{ variable }}）。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Welcome to my Vue component!</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>

        包含组件的JavaScript代码控制模板的数据来源和行为。在这里，你可以定义组件的数据、方法、计算属性、侦听器以及生命周期钩子等。

        在<script>块中，你可以使用ES6+的JavaScript语法，并且通常导出一个Vue组件对象。

<script>
export default {
  data() {
    return {
      title: 'Hello World'
    };
  },
  methods: {
    greet() {
      alert('Hello!');
    }
  }
};
</script>

<style>

        用于定义组件的样式。这里可以写CSS，以及一些预处理器语言（如Sass、SCSS、Less等），只要你的项目配置了相应的加载器。

        在<style>块中，你可以使用标准的CSS语法，也可以使用CSS预处理器语法，如果你设置了相应的构建配置。

        将其综合在一起即可得到：

<style></style>
<template>
  <div>
    <!-- 一般需要根标签，根标签一般为div -->
    <h1>{{ title }}</h1>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
export default {//export代表要将定义的对象导出为一个模块
  data() {//之前为声明属性data，但现在为声明方法(:function已省略)
    return {//需声明对象并return
      title: 'Hello World'
    };
  },
  methods: {
    greet() {
      alert('Hello!');
    }
  }
};
</script>

<style>
</style>

        此时我们就可直接修改代码而无需重启程序。

        在日常中像main.js、index.html一般很少去操作，我们主要对后缀为.vue之类的组件文件进行修改。

上一篇：php后端学习，Java转php


下一篇：Unity-Editor扩展,引擎管理AudioClip,音乐音效快捷播放功能