前后台分离开发 YAPI平台 前端工程化之Vue-cli

2023-09-22 16:04:52

目录

前后台混合开发这种开发模式有如下缺点：

沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使
用
分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才
不便管理：所有的代码都在一个工程中
不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。

所以我们目前基本都是采用的前后台分离开发方式.前端工程交给专业的前端人员开发，后端工程交给专业的后端人员开发。前端页面需要数据，可以通过发送异步请求，从后台工程获取。前后台统一指定一套规范，这就是我们的接口文档。接口文档有离线版和在线版本，接口文档示可以查询今天提供资料/接口文档示例里面的资料。其我们后台开发者根据产品经理提供的产品原型和需求文档所撰写出来的。

在这里插入图片描述

在这里插入图片描述

1. 需求分析：首先我们需要阅读需求文档，分析需求，理解需求。
2. 接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
3. 前后台并行开发：各自按照接口文档进行开发，实现需求
4. 测试：前后台开发完了，各自按照接口文档进行测试
5. 前后段联调测试：前段工程请求后端工程，测试功能



YAPI介绍

前后台分离开发中，我们前后台开发人员都需要遵循接口文档，所以接下来我们介绍一款撰写接口文档
的平台。YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管
理服务。 其官网地址： YAPI

YApi提供了添加项目、添加分类、添加接口等功能

请添加图片描述

最后，我们还可以设置接口的mock信息，来让YApi提供一个测试接口，设置好接口信息就会自动生成mock地址，将来前端程序员在测试的时候就可以直接访问这个地址模拟后端服务器，自动生成mock测试数据

请添加图片描述




前端工程化之Vue-cli

前端工程化简介

当在前端开发中需要使用一些资源时，例如：vue.js，和axios.js文件，直接在工程中导入的开发模式存在如下问题：

每次开发都是从零开始，比较麻烦
多个页面中的组件共用性不好
js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护

所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点

模块化：将js和css等，做成一个个可复用模块
组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
自动化：项目的构建，测试，部署全部都是自动完成

说白了，就是在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率，降低开发难度等等。

前端工程化入门——Vue-cli

环境准备

我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。Vue-cli主要提供了如下功能：

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

运行Vue-cli，需要依赖NodeJS，我们需要先安装NodeJS，然后才能安装Vue-cli。

将nodejs选择安装到一个，没有中文，没有空格的目录下。安装完毕后，会自动配置好环境变量，我们在cmd验证一下是否安装成功，通过： node -v。
然后配置npm的全局安装路径，使用管理员身份运行命令行，在命令行中:
npm config set prefix “安装路径”
然后使用管理员身份运行命令行下载Vue-cil
npm install -g @vue/cli

安装完后运行vue --version有版本号代表成功


Vue项目简介

创建Vue项目

Vue-cli提供了如下2种方式创建vue项目:

命令行：直接通过命令行方式创建vue项目
vue create vue-project01

图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建
vue ui

我们采用第二种方法，在工程目录下进入cmd，直接输入命令vue ui 进入到vue的图形化界面:

在这里插入图片描述

便可在此图形化界面创造项目：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

到此，vue项目创建结束。


vue项目目录结构介绍

在这里插入图片描述

vue项目的标准目录结构以及目录对应的解释如下图所示:

在这里插入图片描述

平时开发代码就是在src目录下。



vue项目运行方法

方法一

首先要将vscode的NPM脚本窗口调试出来:

在这里插入图片描述

然后重启VS Code，并且双击打开package.json文件，然后点击资源管理器处的3个小点，勾选npm脚本选项，如图所示

在这里插入图片描述

然后就能都显示NPM脚本小窗口了

在这里插入图片描述

点击之后，我们等待片刻，即可运行，在终端界面中，我们发现项目是运行在本地服务的8080端口，我们直接通过浏览器打开地址

在这里插入图片描述

最终浏览器打开后，呈现如下界面，表示项目运行成功

在这里插入图片描述

其实此时访问的是 src/App.vue这个根组件，此时我们打开这个组件，修改代码：添加内容Vue

在这里插入图片描述

只要我们保存更新的代码，我们直接打开浏览器，不需要做任何刷新，发现页面呈现内容发生了变化

在这里插入图片描述

这就是我们vue项目的热更新功能

对于8080端口，经常被占用，所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容，添加如下代码：

devServer:{
	port:7000
}

如下图所示，然后我们关闭服务器，在vscode命令行输入ctrl c关闭服务器，并且重新启动，发现是通过7000端口来访问我们之前的项目。

在这里插入图片描述

第二种方式：命令行方式
直接基于cmd命令窗口，在vue目录下，执行输入命令npm run serve 即可，如下图所示：

在这里插入图片描述




Vue项目开发流程

其实我们访问的首页是index.html，但是我们找到public/index.html文件，打开之后发现，里面没有什么代码，但是能够呈现内容丰富的首页如下图所示：

在这里插入图片描述

所以vue是如何做到的呢？接下来我们学习一下vue项目的开发流程。
对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

上述代码中，包括如下几个关键点：

import: 导入指定文件，并且重新起名。例如上述代码import App from './App.vue' 导入当前目录下的App.vue并且起名为App

ps:import代表引入模块，与其对应的是export，是将对象或者函数导出为模块，在需要使用的地方将其import

new Vue(): 创建vue对象

$mount('#app');将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。这里就是挂载到了index.html中的div中

router: 路由，详细在后面的小节讲解

render: 主要用于视图的渲染的。它在这里的作用就是将上面导入进来的app中定义的视图创建出对应的虚拟dom元素，然后挂载到#app这个区域

所以其实上述代码相当于：

new Vue(
	el: "#app",
	router:router,//es6写法是当属性名和属性值一样就可以简写为router,
	render: h => h(App)
)

来到public/index.html中，我们删除div的id=app属性，打开浏览器，发现之前访问的首页一片空白，就证明了，我们main.js中通过代码挂载到index.html的id=app的标签区
域的。

此时我们知道了vue创建的dom对象挂在到id=app的标签区域，但是我们还是没有解决最开始的问题：
首页内容如何呈现的？这就涉及到render中的App了，如下图所示：

在这里插入图片描述

那么这个App对象怎么回事呢，我们打开App.vue,注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分：

template: 模板部分，主要是HTML代码，用来展示页面主体结构的
script: js代码区域，主要是通过js代码来控制模板的数据来源和行为的
style: css样式部分，主要通过css样式控制模板的页面效果得

如下图所示就是一个vue组件的小案例：

在这里插入图片描述

此时我们可以打开App.vue，观察App.vue的代码，其中可以发现，App.vue组件的template部分内容，和我们浏览器访问的首页内容是一致的，如下图所示：

在这里插入图片描述

接下来我们可以简化模板部分内容，添加script部分的数据模型，删除css样式，完整代码如下：

<template>
  <div id="app">
    {{message}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

保存直接，回到浏览器，我们发现首页展示效果发生了变化，如下图所示：

在这里插入图片描述

至此就熟悉了Vue项目开发的基本流程


PS:
其中写script标签时vscode有代码补全，要选择javascript.vue。

请添加图片描述

补全后是下面这样的一个标准结构，加了export代表我们定义的这一部分对象导出去，只有这样讲其导出成一个模块，在其他地方才能import。

<script>
export default {
  
}
</script>

想定义vue当中的数据模型怎样写呢？之前是这样写，new一个Vue对象然后在里面声明属性data，然后在里面指定对象。

new Vue({
    el: "#app", //vue接管区域
    data:{
       addrs:["北京", "上海", "西安", "成都", "深圳"]
    },
    methods: {
        
    }
})

而现在不能指定对象，而是指定函数function，在函数里声明对象return回去，若还想定义函数直接在下面再定义一个属性methods，在其中定义一个个的方法：

<script>
export default {
//写data可以自动提示补全
  data: function () {//在js里有简写 简写为:data()也可以
    return {
      message: "Hello Vue",
    };
  },
};
</script>
更多推荐

安卓毕业设计各种app项目，Android毕设设计，Android课程设计，毕业论文

作为一位从事软件开发多年的专业人士，您积累了丰富的经验和技能，解决了许多不同类型的问题。除了开发原创项目，您还愿意分享您的知识，指导实习生和在校生。这种乐于助人的行为对于行业的发展和新一代软件开发者的成长都起着积极的促进作用。辅导实习生或在校生有许多好处。首先，您可以通过与他们分享您的经验和见解，帮助他们更好地理解软件

Zookeeper运维

我是一个目录1.参数说明2.Zookeeper优化建议3.Zookeeper性能查看4.建议1.参数说明工作节点瞬间压力大，导致和集群通信出现延迟，被踢出节点，瞬间释放的连接立即又连接到另外节点，最终集群挂掉。加了一些延迟配置后，集群稳定。参数说明tickTime=2000Zookeeper服务器之间或客户端与服务器之

BD就业复习第四天

1.布隆过滤器怎么实现去重布隆过滤器是一种用于快速检查一个元素是否可能存在于一个大集合中的数据结构，但它并不适用于精确去重。因为布隆过滤器具有一定的误判率（可能会将不存在的元素误判为存在），所以不能确保完全的去重。但可以结合其他数据结构来实现近似的去重功能。以下是使用布隆过滤器进行近似去重的一般步骤：初始化布隆过滤器：

Android Key/Trust Store研究+ssl证书密钥

前言：软件搞环境涉及到了中间件thaltrustzonecertificatekey，翻译过来是thal信任区域证书密钥，不明白这是什么，学习一下ssl证书密钥SSL密钥是SSL加密通信中的重要组成部分。SSL证书通过加密算法生成，用于保护网络通信的安全性和私密性。密钥是一种密码学算法中的关键元素，用于加密和解密敏感信

mac安装运行superset及踩坑解决过程

介绍ApacheSuperset是一个现代的企业级商业智能Web应用程序。它快速、轻量、直观，并加载了各种选项，使所有技能的用户都可以轻松探索和可视化他们的数据，从简单的饼图到高度详细的Deck.gl地理空间图表。安装首先安装自制homebrew安装管理器，然后运行以下命令：brewinstallreadlinepkg

Java版本spring cloud + spring boot企业电子招投标系统源代码

项目说明随着公司的快速发展，企业人员和经营规模不断壮大，公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境，最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范，以及审计监督要求；通过电子化平台提高招投标工作的公开性和透明性；通过电子化招投标，使得招标采购的质量更高、速度

Week2：包含 min 函数的栈

1️⃣题目描述定义栈的数据结构，请在该类型中实现一个能够得到栈的最小元素的min函数在该栈中，调用min、push及pop的时间复杂度都是O(1)。示例:MinStackminStack=newMinStack();minStack.push(-2);minStack.push(0);minStack.push(-3)

代码随想录算法训练营Day45 | 动态规划(7/17) LeetCode 70. 爬楼梯 （进阶） 322. 零钱兑换 279.完全平方数

开始第七天的练习！第一题70.ClimbingStairsYouareclimbingastaircase.Ittakesnstepstoreachthetop.Eachtimeyoucaneitherclimb1or2steps.Inhowmanydistinctwayscanyouclimbtothetop?在刚进

ScrollView如何裁剪粒子特效

1）ScrollView如何裁剪粒子特效2）Unreal在移动设备中无法使用Stat命令获取到GPUThread的耗时3）Unity中如何看到相机视野范围内的剔除结果这是第354篇UWA技术知识分享的推送，精选了UWA社区的热门话题，涵盖了UWA问答、社区帖子等技术知识点，助力大家更全面地掌握和学习。Rendering

Zero-Shot 使用简单两层网络不用训练就能进行图像恢复

文章今天要分享的文章是CVPR2023比较有意思的一篇《Zero-ShotNoise2Noise:EfficientImageDenoisingwithoutanyData》，通过简单的两层网络，并且不需要数据训练直接进行图像恢复代码https://colab.research.google.com/drive/1i8

Si314 低功耗 14 通道电容触摸传感器，软硬件兼容替代GTX314L

Si314是一款具有自动灵敏度校准功能的14通道电容传感器，其工作电压范围为1.8~5.5V。Si314设置休眠模式来节省功耗，此时，功耗电流为10uA@3.3V。Si314各个感应通道可实现独立使能、校准、灵敏度调节，可以确保可靠性，且具有自适应滤波功能，以应对各种噪音和环境变化。I2C串行接口可以读写内部寄存器，检

热文推荐
  1. nginx反向代理vue项目

    文章目录前言一、创建站点1.添加站点2.添加ssl证书二、反向代理vue项目1.添加反向代理2.更改vue项目配置3.修改反向代理配置前言项目描述：前端vue项目、后端Java项目、首页WordPress项目客户要求：使用宝塔进行部署需求描述：客户只有一个SSL单域名DV证书要求首页部署wordpress项目作为官网，

  2. 大话数据结构 2 算法

    算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令表示一个或多个操作算法的五个基本特性：输入、输出、有穷性、确定性、可行性1.输入输出：算法具有0个或多个输入，算法至少有1个或多个输出。2.有穷性:指算法在执行有限的步骤后，自动结束而不会出现无限循环，并且每一个步骤在可接受的时间内完成

  3. JUC相关面试题

    👏作者简介：大家好，我是爱发博客的嗯哼，爱好Java的小菜鸟🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦📝社区论坛：希望大家能加入社区共同进步🧑‍💼个人博客：智慧笔记📕系列专栏：面试宝典本文引自黑马程序员Java面试宝典JUC基础薄弱的可以先看JUC详解文章目录面试官：聊一下并行和并发有什么

  4. 干货：数据仓库基础知识（全）

    1、什么是数据仓库？权威定义：数据仓库是一个面向主题的、集成的、相对稳定的、反映历史变化的数据集合，用于支持管理决策。1）数据仓库是用于支持决策、面向分析型数据处理；2）对多个异构的数据源有效集成，集成后按照主题进行重组，并包含历史数据，而且存放在数据仓库中的数据一般不再修改。面对大数据的多样性，在存储和处理这些大数据

  5. 【算法】单调栈

    💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kuan的首页,持续学习,不断总结,共同进步,活到老学到老导航檀越剑指大厂系列:全面总结java核心技术点,如集合,jvm,并发编程redis,kaf

  6. JAVA开发技术能力和学历哪个重要？

    Java开发技术能力和学历都是Java开发人员必须具备的基本条件，二者之间没有谁更加重要的绝对答案。不同的人在不同的时期，所处的不同环境下会给出不同的答案。下面从多个角度进行讨论，探究Java开发技术能力和学历哪个更重要。1、招聘角度从企业的招聘需求来看，技术能力在某些情况下更为重要。随着科技的不断发展，对于一些前沿技

  7. 8位微控制器上的轻量级SM2加密算法实现：C语言详细指南与完整代码解析

    引言在当今的数字化世界中，安全性是每个系统的核心。无论是智能家居、医疗设备还是工业自动化，每个设备都需要确保数据的安全性和完整性。对于许多应用来说，使用高级的微控制器或处理器可能是不切实际的，因为它们可能会增加成本、功耗和尺寸。这就是为什么8位微控制器仍然在许多应用中占据着重要的地位。但是，8位微控制器的计算能力有限，

  8. 天翎知识管理系统：支持多种文件类型，整合各类知识资源

    编者按：知识管理系统支持多种格式可以更好地适应不同的业务需求和行业规范，同时也可以避免文件格式不兼容带来的麻烦。本文将介绍天翎知识管理系统的文件类型支持，包括文档格式的在线预览及在线编辑，以便用户可以更全面地了解天翎系统。知识管理系统文件类型支持在线预览天翎知识管理系统支持多种文档格式在线预览，可以让用户在不下载文档的

  9. Mybatis面试题(三)

    文章目录前言一、Xml映射文件中，除了常见的select|insert|updae|delete标签之外，还有哪些标签？二、当实体类中的属性名和表中的字段名不一样，如果将查询的结果封装到指定pojo？三、模糊查询like语句该怎么写四、通常一个Xml映射文件，都会写一个Dao接口与之对应,Dao的工作原理，是否可以重载