前端工程化

mckl

已于 2024-03-17 15:20:38 修改

阅读量1.1k

点赞数 29

分类专栏： Web前端浅尝辄止文章标签：前端 elementui ajax vue node.js

于 2024-03-17 15:15:32 首次发布

本文链接：https://blog.csdn.net/m0_53190754/article/details/136782692

版权

Web前端浅尝辄止专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端工程化-拾遗

Ajax

Ajax简介

什么是 AJAX？
AJAX = Asynchronous JavaScript And XML.
AJAX 并非编程语言。

AJAX 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器相应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，like搜索框联想（加载出与关键字相关的词条）。

同步异步差异：

同步：客户端发送请求后，在服务器处理的过程中，客户端处于等待状态，等到收到服务端的响应，才能开始执行其他操作。
相比之下，异步的话，在服务器处理请求的过程中，客户端可以执行其他操作。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

对于原生Ajax：

先准备数据地址（json格式数据的url）
创建XMLHttpRequest对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>让 AJAX 更改这段文本</h2>
  <button type="button" onclick="loadDoc()">更改文本</button>
</div>

</body>
</html>

<script>
function loadDoc() {
  //1.创建XMLHttpRequest对象
  var xhttp = new XMLHttpRequest();
  //2.获取服务响应数据（等待change
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {//4表示成功
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  //3.向服务器发送异步请求
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
} 
</script>

在这里插入图片描述

Axios

Axios是对原生的Ajax的封装，简化书写，快速开发。
官网https:www.axios-http.cn/

使用步骤
1.引入axios的js文件
<script src="js/axios-0.18.0.js"></script>
2.使用Axios 发送请求，并获取响应结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios.js"></script>
</head>
<body>
    <input type="button" value="获取数据get" onclick="get()">
    <input type="button" value="删除数据post" onclick="post()">
</body>
<script>
    function get(){
        //通过axios发送异步请求-get
        axios({
            method:"get",
            url:"ajax_info.txt"
        }).then(result=>{
            console.log(result.data)
        })

    }
    function post(){
        //通过axios发送异步请求-post
        axios({
            method:"get",
            url:"ajax_info.txt",
            data:"id=1"
        }).then(result=>{
            console.log(result.data)
        })
    }
</script>
</html>

请求方式别名：

axios.get(url[,config])
axios.delete(url[,config])
axios.post(url[,config])
axios.put(url[,config])

上面的post函数可以简化为

<script>
  axios(url,"id=1").then((result)=>{
    console.log(result.data)
  })
</script>

可以在vue的生命周期写请求方式别名
在这里插入图片描述

也可以和vue结合就可以MVVM
在这里插入图片描述

前后端分离开发

前后端混合开发：（沟通成本高，分工不明确，不便于管理，不便于维护扩展）

前端与后端进行交互：前端异步请求，后端响应。
交互就需要遵循一定的规范：接口文档（业务功能）

接口文档includes：请求路径，请求方式，接口描述，请求参数，请求样例；响应数据，响应数据样例。

前后端分别需要阅读接口文档-开发

接口文档维护方式：在线（管理平台）or离线（本地）

接口文档由产品经理提供的页面原型以及需求文档分析而来

流程：需求分析->接口定义->前后端并行开发（遵守规范）->测试（前端，后端）->前后端联调测试

YAPI

是一款api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务（api接口管理，mock服务即模拟）
YAPI可能gg了，可以看https://yapi.pro/

前端工程化

模块化（js、css）
组件化（UI结构，样式，行为）
规范化（目录结构，编码，接口）
自动化（构建，部署，测试）

手动完成这些工作，效率低下

不如现成工具：Vue脚手架
Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板

Vue脚手架提供了以下功能：统一的目录结构，本地调试，热部署（代码变动不需要再次运行，就可以加载最新程序），单元测试，集成打包上线；

环境搭建

环境依赖：Node.js
(当时搞vscode的leetcode插件的时候，就下啦)
配置npm全局安装路径(set改get去掉路径查看是否配置成功)
npm config set prefix "E:\Marc\VSCode\Leetcode_Node"
配置镜像源下载路径
npm config set registry https://registry.npmmirror.com
安装vue-cli
npm install -g @vue/cli
vue --version查看是否下载成功

Vue项目-创建

命令行：vue create vue-project01
图形化界面：vue ui（在文件夹所在目录下，输入cmd，打开命令行，再输入vue ui）填写项目基本信息后，会自动创建在所在文件夹下。
在这里插入图片描述

node_modules存放整个项目的依赖包
public存放项目的静态文件
src存放项目的源代码
…
package.json存放模块基本信息，项目开发所需模- 块，版本信息。
vue.config.js保存vue配置文件，如代理、端口的配置。

src所含目录：

asset：静态资源
components：可重用的组件
router：路由配置
views：视图组件（页面）
app.vue:入口页面（根组件）
main.js:入口js文件

项目启动：1.命令行：在项目所在文件打开cmd，输入npm run serve。2.右击时间线点击npm脚本，就有了GUI的serve->run
在这里插入图片描述

默认端口号为8080，但是java程序（Tomcat）也是8080，这里需要修改
在vue.config.js中增加配置
devServer:{
port:52407
}

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:52407
  }
})

保存之后在终端ctrl+c，输入y终止之前的，run新的。

vue项目开发流程

开始初始化访问的是public下的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>

该文件默认引入main.js

import Vue from 'vue'
import App from './App.vue'//把App.vue文件导入->与export配对，只有对应的文件中有export，此处才能import
import router from './router'

Vue.config.productionTip = false

new Vue({//vue核心对象
  router,//路由
  render: h => h(App)//将导入进来的App定义的视图创建出虚拟dom元素，挂载到#app区域，
}).$mount('#app')//挂在到#app区域，在index.html中div的id。等价于 el:"#app",router:router

.vue结尾的文件，我们称之为组件文件，每个组件文件由三部分组成：<template><script><style>

<template>
  <div>
    <h1>{{message}}</h1>
  </div>
</template><!-- 模板部分，生成html代码（在其中可以定义原生html代码 -->
<script>
export default {
  //原本指定vue对象以及data：{}对象；现在只能制定一个function，在function中定义一个对象，并return回去
  data：function(){//可以简化为data(){}
    return{
      message:"Hello Vue"
    }
  },//数据模型
  methods:{
    //里面定义方法
  }
}
</script>
  <!-- script代码控制模板的数据来源以及行为 -->

<style>

</style><!-- css样式代码 -->

一般操作的是组件文件，main.js,index.html等很少用

Vue组件库Element

是饿了么团队研发的，一套为开发者、设计师和PM准备的Vue2.0的桌面端组件库。
组件：组成网页的部分，例如：超链接、按钮、图片、表格、表单、分页条等等
官网：https://element.eleme.cn/#/zh-CNListener

在当前项目中安装npm install element-ui@2.15.3(会放在modules目录下)
在main.js中引入element-ui的组件库（可以访问官网查看）

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

3.定义组件文件，访问官网，复制组件代码（不放在根组件App.vue下，在view目录下创建新的.vue
like：

<template>
    <div>
        <!-- button -->
        <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-row>
    </div>
</template>
<script>export default {}</script>
<style></style>

（默认情况下，展示根组件App.vue的内容，想展示ElementView.vue，在根组件中引用）

<template>
  <div>
    <!-- <h1>{{message}}</h1> -->
    <element-view></element-view>
  </div>
</template><!-- 模板部分，生成html代码（在其中可以定义原生html代码 -->
<script>
import ElementView from './views/element/ElementView.vue'
export default {
  components: { ElementView },
  //原本指定vue对象以及data：{}对象；现在只能制定一个function，在function中定义一个对象，并return回去
  data:function(){//可以简化为data(){}
    return{
      message:"Hello Vue"
    }
  },//数据模型
  methods:{
    //里面定义方法
  }
}
</script>

Element常用组件，即用即copy