尚医通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…
阅读更多...
华为数通智选交换机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对于大脑中神经网络的模拟更是完全不同于人类大脑的行为。
阅读更多...
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] //车牌…
阅读更多...
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地址去哪里了&…
阅读更多...
【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;将…
阅读更多...
【C语言】扫雷----详解（扩展版）

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

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

【MySQL】SQL入门(一)

&#x1f697;MySQL学习起始站~ &#x1f6a9;本文已收录至专栏&#xff1a;数据库学习之旅 ❤️每章节附章节思维导图&#xff0c;文末附全文思维导图&#xff0c;感谢各位点赞收藏支持~ 一.引入 (1) SQL分类 SQL语句&#xff0c;根据其功能&#xff0c;主要分为四类&#x…
阅读更多...
【GPT模型】遥感云大数据在灾害、水体与湿地领域中的应用

【GPT模型】遥感云大数据在灾害、水体与湿地领域中的应用

近年来遥感技术得到了突飞猛进的发展&#xff0c;航天、航空、临近空间等多遥感平台不断增加&#xff0c;数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量猛增&#xff0c;遥感数据已经越来越具有大数据特征。遥感大数据的出现为相关研究提供了前所未有的机遇&#xf…
阅读更多...
【Vue3】初始化和Composition API（组合式）

【Vue3】初始化和Composition API（组合式）

Vue3 创建Vue3.0工程查看自己的vue/cli版本&#xff0c;使用Vue/cli创建使用vite创建 查看Vue3.0工程vue.config.js中&#xff0c;关闭语法检查&#xff0c;main.js讲解app.vue讲解 常用的Composition API&#xff08;组合式&#xff09;1.拉开序幕的setup返回对象返回渲染函数…
阅读更多...
Android Glide预加载preload ,kotlin

Android Glide预加载preload ,kotlin

Android Glide预加载preload ,kotlin val imageView findViewById<ImageView>(R.id.image_view)Glide.with(this).asBitmap().load(image_file.path).signature(ObjectKey(image_file.path)).addListener(object : RequestListener<Bitmap> {override fun onLoadF…
阅读更多...
Unity UnityWebRequest使用http与web服务器通讯

Unity UnityWebRequest使用http与web服务器通讯

一、搭建客户端与服务器http通讯 1.在Nodejs中文官网Node.js 中文网 (nodejs.com.cn)&#xff0c;下载并安装Nodejs 2.在项目文件夹下新建WebServer文件夹&#xff0c;打开CMD窗口&#xff0c;在WebServer文件夹路径下安装express 3.在WebServer文件夹中新建main.js文件&#…
阅读更多...
Pytorch基本使用—参数初始化

Pytorch基本使用—参数初始化

深度学习模型参数初始化是指在训练深度神经网络时&#xff0c;对网络的权重和偏置进行初始化的过程。合适的参数初始化可以加速模型的收敛&#xff0c;并提高模型的性能。 ✨ 1 基本介绍 在深度学习中&#xff0c;常用的参数初始化方法有以下几种&#xff1a; 零初始化&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023