YAPI和前端工程化（Nodejs+Vue-cli）

zk计科小牛马

于 2024-08-21 17:57:24 发布

阅读量846

点赞数 17

分类专栏： javaweb 文章标签：前端

本文链接：https://blog.csdn.net/2202_75483664/article/details/141367599

版权

javaweb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、前后端分离模式

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

二、接口管理平台YAPI

1.YAPI介绍

前后台分离开发中，我们前后台开发人员都需要遵循接口文档，所以接下来我们介绍一款撰写接口文档的平台。

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

其官网地址：http://yapi.smart-xwork.cn/

YApi主要提供了2个功能：

API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。

2.接口文档管理

接下来我们演示一下YApi是如何管理接口文档的。

首先我们登录YAPI的官网，然后使用github或者百度账号登录，没有的话去注册一个，如下图所示：

登录进去后，在个人空间中，选择项目列表->添加测试项目，效果如图所示：

然后点击创建的项目，进入到项目中，紧接着先添加接口的分类，如下图所示

然后我们选择当前创建的分类，创建接口信息，如下图所示：

紧接着，我们来到接口的编辑界面，对接口做生层次的定制，例如：接口的参数，接口的返回值等等，效果图下图所示：

添加接口的请求参数，如下图所示：

添加接口的返回值，如下图所示：

然后保存上述设置，紧接着我们可以来到接口的预览界面，查询接口的信息，其效果如下图所示：篇幅有限，只截取部分

最后，我们还可以设置接口的mock信息，

来到接口的Mock设置窗口，如下图所示：

紧接着我们来到接口的预览界面，直接点击Mock地址，如下图所示：

我们发现浏览器直接打开，并返回如下数据：

如上步骤就是YAPI接口平台中对于接口的配置步骤。

三、前端工程化

1.环境准备

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

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS，然后才能安装Vue-cli

所以首先是

NodeJS安装和Vue-cli安装

详细安装步骤，请参考NodeJS安装文档.pdf文件

2.创建Vue项目（图形化界面）

首先，我们再桌面创建vue文件夹，然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文件夹的cmd窗口界面，如下图所示：

然后进入如下界面：

然后再当前目录下，直接输入命令vue ui进入到vue的图形化界面，如下图所示：

然后我门选择创建按钮，在vue文件夹下创建项目，如下图所示：

然后来到如下界面，进行vue项目的创建

然后预设模板选择手动，如下图所示：

然后再功能页面开启路由功能，如下图所示：

然后再配置页面选择语言版本和语法检查规范，如下图所示：

然后创建项目，进入如下界面：

最后我们只需要等待片刻，即可进入到创建创建成功的界面，如下图所示：

到此，vue项目创建结束

3.vue项目目录结构介绍

我们通过VS Code打开之前创建的vue文件夹，打开之后，呈现如下图所示页面：

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

其中我们平时开发代码就是在src目录下

4.运行Vue项目

那么vue项目开发好了，我们应该怎么运行vue项目呢？主要提供了2种方式

命令行和图形化界面，下面只介绍图形化界面

通过VS Code提供的图形化界面，如下图所示：（注意：NPM脚本窗口默认不显示，可以参考本节的最后调试出来）

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

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

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

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

不需要任何刷新，网页内容自动发生变化，这就是我们vue项目的热部署功能

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

5.Vue项目开发流程

（1）引出问题

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

我们自习观察发现，index.html的代码很简洁，但是浏览器所呈现的index.html内容却很丰富，代码和内容不匹配，所以vue是如何做到的呢？接下来我们学习一下vue项目的开发流程。

（2）开发流程

对于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

new Vue(): 创建vue对象

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

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

render: 主要使用视图的渲染的。

来到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组件文件的代码编写

（3）小试牛刀

更改App.vue文件内容：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
//数据对象
  data() {
    return {
      message:"Hello world"
    }
  }, 
//行为对象
  methods:{

  } 
}
</script>

<style>

</style>

效果

更改script标签的数据源的内容为Hello world22

zk计科小牛马

关注

17
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
YAPI和前端工程化（Nodejs+Vue-cli）

前后台分离开发中，我们前后台开发人员都需要遵循接口文档，所以接下来我们介绍一款撰写接口文档的平台。YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。YApi主要提供了2个功能：API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。
复制链接

扫一扫

专栏目录