尚医通04：Axios Node Npm bable webpack+前端工程改造

目录

本日学习

内容介绍

Axios

Node

NPM包管理器

Babel

模块化

Webpack

搭建前端工程

前端框架介绍

前端开发过程介绍

登录改造成本地接口

本日学习

  1. 了解Axios :他是异步请求用的，前后端。 用于在浏览器和 Node.js 中发送 HTTP 请求。它支持从服务器获取数据、上传数据以及执行其他与 HTTP 相关的操作。

  2.Node:它允许你在服务器端运行 JavaScript.

  3.Npm:是node.js 的软件管理包

  4.Bable:转换器。Ems6到5 的转换器

  5.weback:模块打包器

熟知

1.前端工程的流程

   1.首先添加路由：为了可以跳转地址。   2.添加新页面，修改路由配置。

   3.以下为第三步中登录和删除的功能。    4.实现前端页面    

 2. 知道request.js 作用 （src/utils/request.js）:他的作用就是 地址。访问的地址

 

 

base api:

 3.跨域的概念：当一个网页的 JavaScript 代码尝试访问不同源（不同协议、域名或端口）的资源时，就会引发跨域问题。（说白了，就是浏览器，访问后台的东西）

内容介绍

1、Axios（重点）

2、Node

3、NPM（重点）

4、babel

5、模块化（重点）

6、webpack

7、前端工程搭建

8、前端工程介绍

9、前端开发过程介绍

10、登录改造成本地接口

Axios

1、是什么

在浏览器中可以帮助我们完成 ajax请求的发送

$.get(‘url’,data=>{   })

2、创建实例，导入依赖

（1）创建目录、添加js

3创建模拟测试数据

{"success": true,"code": 20000,"message": "成功","data": {"items": [{"id": "1","name": "刘德华","intro": "毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余"},{"id": "2","name": "zhang3","intro": "毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余"},{"id": "3","name": "li4","intro": "毕业于师范大学数学系，热爱教育事业，执教数学思维6年有余"}]}}

4、实现实例

（1）初步实现

<body><div id="app"></div><script src="vue.min.js"></script><script src="axios.min.js"></script><script>let app = new Vue({el:'#app',data:{userList:[] },created () {this.getData() },methods: {getData(){axios.get('data.json').then(response=>{console.log(response)})}}})</script></body>

（2）完成实例

<body><div id="app"><table><tr v-for="user in userList"><td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.intro}}</td></tr></table></div><script src="vue.min.js"></script><script src="axios.min.js"></script><script>let app = new Vue({el: '#app',data: {userList: []},created() {this.getData()},methods: {getData() {axios.get('data.json').then(response => {console.log(response)this.userList = response.data.data.items}).catch(error => {console.log(error)})}}})</script></body>

Node

1、是什么

（1）java独立运行需要jdk，js独立运行需要node

（2）web工程发布需要tomcat，js服务工程运行需要node

2、安装

（1）安装包

node -v

3、独立运行js代码

（1）创建目录、创建实例

console.log('Hello Node.js')

（2）进入命令行窗口，运行

（3）使用工具终端窗口

4、js服务工程运行

（1）创建实例

const http = require('http');

http.createServer(function (request, response) {

    // 发送 HTTP 头部

    // HTTP 状态值: 200 : OK

    // 内容类型: text/plain

    response.writeHead(200, {'Content-Type': 'text/plain'});

    // 发送响应数据 "Hello World"

    response.end('Hello Server');

}).listen(8888);

// 终端打印如下信息

console.log('Server running at http://127.0.0.1:8888/');

（2）运行

5、问题解决

（1）在cmd下运行node命令正常，在vscode里运行报错

*原因：vscode权限不够

*解决：调整权限

（2）在cmd下运行node命令报错

可以重启系统

卸载node后，重新安装

NPM包管理器

1、是什么

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven

2、安装

npm -v

3、使用npm

（1）创建目录

（2）在终端初始化

npm init

npm init -y

（3）修改npm镜像

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载

npm config set registry https://registry.npm.taobao.org

#查看npm配置信息

npm config list

（4）下载依赖

*指定下载

npm install jquery

#根据package.json中的配置下载依赖，初始化项目

npm install

# 局部安装

npm install -D eslint

#全局安装

npm install -g webpack

Babel

1、是什么

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

2、安装

npm install --global babel-cli

#查看是否安装成功

babel --version

3、使用

（1）创建新目录，npm初始化

npm init -y

（2）创建目录、创建ES6代码

// 转码前

// 定义数据

let input = [1, 2, 3]

// 将数组的每个元素 +1

input = input.map(item => item + 1)

console.log(input)

（3）添加配置文件  .babelrc

{

    "presets": ["es2015"],

    "plugins": []

}

（4）安装转码器

npm install --save-dev babel-preset-es2015

（5）创建目录，进行转码

*转单个文件

babel src/01.js -o dist/001.js

*转整个目录

babel src -d dist

模块化

1、是什么

Javascript模块化在一个js文件中导出函数或方法，在另一个文件中导入相关函数方法

2、为什么

解决命名冲突、文件依赖

3、实现ES5模块化

（1）在babeldemo目录下创建目录module

（2）创建导出1.js

const sum = function(a,b){return parseInt(a) + parseInt(b)}const subtract = function(a,b){return parseInt(a) - parseInt(b)}//简写module.exports = {sum,subtract}（3）创建导入2.js//引入模块，注意：当前路径必须写 ./const m = require('./1.js')console.log(m)const result1 = m.sum(1, 2)const result2 = m.subtract(1, 2)console.log(result1, result2)

（4）运行

4、实现ES6模块化方式一（函数方式）

（1）创建目录es6

（2）导出文件01.js

export function getList() {console.log('获取数据列表')}export function save() {console.log('保存数据')}（3）导入文件02.js//只取需要的方法即可，多个方法用逗号分隔import { getList, save } from "./01.js"getList()save()

（4）运行测试

*node不支持es6

（5）借助babel转码

5、实现ES6模块化方式二（方法方式）

（1）导出文件001.jsexport default {getList() {console.log('获取数据列表2')},save() {console.log('保存数据2')}}（2）导入文件002.jsimport user from "./001.js"user.getList()user.save()

（3）测试同上

Webpack

1、是什么

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

2、安装

npm install -g webpack webpack-cli

webpack -v

3、创建目录、初始化

4、打包js

（1）创建源码目录src，创建相关js

*01.jsexports.info = function (str) {document.write(str);}*02.jsexports.add = function (a, b) {return a + b;}（2）src下创建main.jsconst common = require('./01');const utils = require('./02');common.info('Hello world!' + utils.add(100, 200));（3）webpack目录下创建配置文件webpack.config.jsconst path = require("path"); //Node.js内置模块module.exports = {entry: './src/main.js', //配置入口文件output: {path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径filename: 'bundle.js' //输出文件}}

（4）打包js

webpack

webpack --mode=development #没有警告

（5）创建页面，导入js

webpack目录下创建index.html

<body><script src="dist/bundle.js"></script></body>

（6）发布测试

5、打包css

（1）安装style-loader和 css-loader

npm install --save-dev style-loader css-loader

（2）在webpack.config.js添加相关内容

const path = require("path"); //Node.js内置模块module.exports = {entry: './src/main.js', //配置入口文件output: {path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径filename: 'bundle.js' //输出文件},module: {rules: [ { test: /\.css$/,    //打包规则应用到以css结尾的文件上use: ['style-loader', 'css-loader']} ] }}（3）在src文件夹创建style.cssbody{background:pink;}

（4）在main.js中导入样式

require('./style.css');

（5）重新打包

搭建前端工程

1、工程选型

在已有的开源后台管理系统上做二次开发

2、搭建工程（标准步骤）

（1）工程包

（2）修改名称yygh-admin，复制到工程目录下

（3）进入终端目录，运行命令下载依赖

npm install

（4）运行命令启动

npm run dev

2、搭建工程（快捷步骤）

（1）工程包

（2）修改名称yygh-admin，复制到工程目录下

（3）进入终端目录，运行命令启动

npm run dev

前端框架介绍

1、目录概览

2、目录介绍

（1）一级目录

*build // 构建脚本

*mock//模拟接口、数据

*src//源码目录

*开发环境配置

*主配置文件

（2）二级目录src

*api//前后端对接接口

*layout//存放布局组件

*router//路由目录

*views//视图目录，存放页面组件

前端开发过程介绍

登录改造成本地接口

1、分析改造方案

（1）分析网络请求

（2）实现方案

 *login（post） ： {"code":20000,"data":{"token":"admin-token"}}*info（get） ： {"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}

2、创建后端模拟登陆接口

@ApiOperation(value = "模拟登陆")@PostMapping("login")// {"code":20000,"data":{"token":"admin-token"}}public R login(){return R.ok().data("token","admin-token");}@ApiOperation(value = "模拟获取用户信息")@GetMapping("info")//{"code":20000,"data":{"roles":["admin"],//"introduction":"I am a super administrator",//"avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",//"name":"Super Admin"}}public R info(){Map<String,Object> map = new HashMap<>();map.put("roles","admin");map.put("introduction","I am a super administrator");map.put("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");map.put("name","Super Admin");return R.ok().data(map);}

3、改造前端

（1）修改运行时配置

（2）修改api接口方法

4、登陆测试

（1）错误日志

（2）错误定位

*URL错误

*跨域问题（确认）：系统访问中协议、IP地址、端口号有一个发生变化，就会出现跨域问题

（3）解决问题

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/576.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[桌面运维] 显示器 色准，色域，色深，分辨率，带宽，刷新率的基本概念，图像呈现的基本原理

[桌面运维] 显示器 色准，色域，色深，分辨率，带宽，刷新率的基本概念，图像呈现的基本原理

⬜⬜⬜ &#x1f430;&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;(*^▽^*)欢迎光临 &#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea;&#x1f430;⬜⬜⬜ ✏️write in front✏️ &#x1f4dd;个人主页&#xff1a;陈丹宇jmu &am…
阅读更多...
redis 设置expire=0和直接调用delete删除key的区别

redis 设置expire=0和直接调用delete删除key的区别

背景 问题起源于生产上应用redis做的一个临时缓存的场景&#xff0c;调用方首先调用某个容器的生成接口&#xff0c;该接口会生成临时缓存的数据放到redis中&#xff0c;然后调用方在调用获取数据内容的接口从任何一台容器中获取放置在redis中的临时数据。 还原问题场景 由于…
阅读更多...
华为数通智选交换机S5735S-L24T4S-QA2无法SSH远程访问

华为数通智选交换机S5735S-L24T4S-QA2无法SSH远程访问

以前都是按照华为S5700交换机开启SSH远程访问方法配置不同网段通过静态路由实现互通，华为S5700交换机开启ssh远程登陆，现在新买的华为数通智选交换机S5735S-L24T4S-QA2，也是按照这步骤配置,令人不解的是，竟然无法ssh访问，仔细看了配置也没有发现问题，在华为eNSP模拟器上验…
阅读更多...
初识mysql数据库之复合查询

初识mysql数据库之复合查询

目录 一、多表查询的概念 二、笛卡尔积 1. 笛卡尔积的概念 2. 笛卡尔积使用案例 2.1 显示雇员名、雇员工资以及所在部门的名字 2.2 显示部门号为10的部门名&#xff0c;员工名和工资 2.3 显示所有员工的姓名、工资和工资级别 3. 自连接 3.1 自连接的概念 3.2 自连接案…
阅读更多...
微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明

微信小程序中的条件渲染和列表渲染，wx:if ,wx:elif,wx:else,wx:for,wx:key的使用，以及block标记和hidden属性的说明

微信小程序中的条件渲染和列表渲染 1. 条件渲染1.1. 语法格式 (wx:if, wx:elif ,wx:else)1.2. block标记1.3. hidden属性1.4. wx:if 与 hidden 的对比 2. 列表渲染2.1. wx:for 语法格式 及 wx:key的使用 1. 条件渲染 1.1. 语法格式 (wx:if, wx:elif ,wx:else) <view wx:if…
阅读更多...
MachineLearningWu_13_AGI

MachineLearningWu_13_AGI

AGI的全称是artificial general intelligence&#xff0c;通用人工智能&#xff0c;而我们现在做的关于医学影像的分析&#xff0c;可以说完全是ANI。 而我们使用MLP对于大脑中神经网络的模拟更是完全不同于人类大脑的行为。
阅读更多...
如何开发一个软件

如何开发一个软件

一、软件开发流程 1. 需求分析 主要有两个文档&#xff0c;一个需求规格说明书和一个产品原型图 2. 设计 UI设计、数据库设计、接口设计 3. 编码 项目代码编写、单元测试 4. 测试 测试用例、测试报告 5. 上线运维 软件环境安装、配置 二、角色分工 项目经理 对整个…
阅读更多...
flutter开发实战-Running Gradle task ‘assembleDebug‘ 的解决方法

flutter开发实战-Running Gradle task ‘assembleDebug‘ 的解决方法

flutter开发实战-Running Gradle task ‘assembleDebug‘ 的解决方法 使用Android studio经常出现Running Gradle task ‘assembleDebug‘问题&#xff0c;记录一下解决方法。 一、在Android目录下更改build.gradle 将repositories中的google(), mavenCentral() repositori…
阅读更多...
IIS 部署的应用禁用HTTP TRACE / TRACK方法【原理扫描】

IIS 部署的应用禁用HTTP TRACE / TRACK方法【原理扫描】

远程Web服务器支持TRACE和/或TRACK方法。 TRACE和TRACK是用于调试Web服务器连接的HTTP方法。 直接在网站Web.config文件中进行如下操作&#xff1a;在Web.config中的<system.webServer>节点内添加以下配置即可&#xff1a; <security> <requestFiltering> &…
阅读更多...
数据结构day2（2023.7.15）

数据结构day2（2023.7.15）

一、Xmind整理&#xff1a; 二、课上练习&#xff1a; 练习1&#xff1a;定义车的信息&#xff1a;品牌&#xff0c;单价&#xff0c;颜色&#xff0c;车牌号 struct Car{char name[20]; //品牌int price; //单价char color[10] //颜色char id[20] //车牌…
阅读更多...
XXF(x-forwarded-for)

XXF(x-forwarded-for)

IP伪造 TCP/IP层面的IP伪造很难实现&#xff0c;因为更改后很难实现正常的TCP通信&#xff0c;但在HTTP层面的伪造就显得很容易。可以通过伪造XFF头进行IP伪造 XFF字段 X-Forwarded-For(XFF)是用来识别通过HTTP代理或负载均衡方式连接到Web服务器的客户端最原始的IP地址的HTT…
阅读更多...
MySQL基础

MySQL基础

MySQL基础 数据库基础&#xff08;重点&#xff09;一.登陆选项的认识二.什么是数据库三.见一见数据库四.主流数据库五.服务器、数据库、表之间的关系六.MySQL架构七.SQL分类八.存储引擎 数据库基础&#xff08;重点&#xff09; 一.登陆选项的认识 mysql -h 127.0.0.1 -P 33…
阅读更多...
计算机网络 day5 子网划分 - IP包 - arp协议

计算机网络 day5 子网划分 - IP包 - arp协议

目录 子网划分 为什么需要子网划分&#xff1f; 我们为什么不直接使用一个A类的IP地址给一家2000人的公司使用呢&#xff1f; 子网划分本质 子网划分的步骤&#xff1a; 实验&#xff1a;将192.168.1.0/24 划分为4个小网段 --》192.168.1.0/26 减少的IP地址去哪里了&…
阅读更多...
“深入了解API和Python的完美结合：构建强大、灵活的应用程序“

“深入了解API和Python的完美结合：构建强大、灵活的应用程序“

引言&#xff1a; 在当前科技高速发展的时代&#xff0c;应用程序是各行各业的重要组成部分。而API&#xff08;Application Programming Interface&#xff09;作为不同系统之间实现通信和数据交换的桥梁&#xff0c;具有至关重要的作用。而Python作为一种强大而灵活的编程语言…
阅读更多...
【C++】位图和布隆过滤器

【C++】位图和布隆过滤器

文章目录 位图概念难点代码 布隆过滤器概念插入查找删除优缺点代码 位图 概念 所谓位图&#xff0c;就是用每一个比特位位来存放某种状态&#xff0c;适用于海量数据&#xff0c;数据无重复的场景。通常是用来判断某个数据存不存在的。 给40亿个不重复的无符号整数&#xff…
阅读更多...
RestFul风格讲解

RestFul风格讲解

以前是localhost:8080/user?methodadd&uid1; RestFul风格是以/接上的 localhost:8080/user/马云/6562 package com.qf.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annot…
阅读更多...
【华为机试】HJ17 坐标移动详解+完整源代码示例

【华为机试】HJ17 坐标移动详解+完整源代码示例

忙碌了一周&#xff0c;一直没时间更新&#xff0c;趁着周末来更新第二个题目。 题目 题目解析 这个题目相比于上一个题目来说&#xff0c;会简单一些&#xff0c;不涉及到那些复杂的算法&#xff0c;就是对于字符串的处理。 算法步骤 输入一个字符串根据分号&#xff0c;将…
阅读更多...
《银行法律法规》三、银行管理——1、银行管理基础

《银行法律法规》三、银行管理——1、银行管理基础

第一章 银行管理基础 第一节 商业银行的组织架构 考点1 商业银行组织架构的内涵★★ 含义 商业银行组织架构是银行各部分按照一定的排列顺序、 空间位置、 聚集状态、 联系方式以及各部分之间相互关系组成的一个有机系统。 这个系统涉及商业银行前台、 中台、 后台业务运…
阅读更多...
大数据有哪些应用领域？

大数据有哪些应用领域？

常见的大数据应用领域&#xff1a; 1、理解客户满足客户服务需求 大数据应用目前在这领域是最广为人知的。通过大数据分析更好的了解客户以及用户的爱好和行为。企业非常喜欢通过在线客服系统搜集用户社交方面的数据、浏览器的日志、各类文本和传感器的数据&#xff0c;从而更…
阅读更多...
【C语言】扫雷----详解（扩展版）

【C语言】扫雷----详解（扩展版）

&#x1f341; 博客主页:江池俊的博客_CSDN博客 &#x1f341; 如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏&#x1f31f; 三连支持一下博主&#x1f49e; ✉️每一次努力都是一次进步&#xff0c;每一次尝试都是一次机会。无论遇到什么困难&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023