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

目录

本日学习

内容介绍

Axios

Node

NPM包管理器

本日学习

  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.hqwc.cn/news/19537.html

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

相关文章

python PYQT5 键盘，鼠标，绘制，焦点，改变，输入法，事件的方法和使用例子

python PYQT5 键盘，鼠标，绘制，焦点，改变，输入法，事件的方法和使用例子

https://img-blog.csdnimg.cn/7630017d3ee444eab9bdedf8d48d575f.png from PyQt5.Qt import * import sys class MyQwidget(QWidget):def __init__(self):super().__init__()def showEvent(self, a0) -> None:print("窗口被展示出来",a0)def closeEvent(self,a0) …
阅读更多...
linux开发工具：repo

linux开发工具：repo

1&#xff1a;repo简单介绍 repo是Google开发的用于管理Android版本库的一个工具&#xff0c;它是由一系列的Python脚本组成&#xff0c;封装了一系列的Git命令&#xff0c;用来统一管理多个Git仓库。repo不是用于取代git&#xff0c;而是简化了对多个Git版本库的管理。 repo…
阅读更多...
Java中可以使用哪些系统架构？怎样选择?

Java中可以使用哪些系统架构？怎样选择?

架构&#xff0c;又名软件架构&#xff0c;是有关软件整体结构与组件的抽象描述&#xff0c;用于指导大型软件系统各个方面的设计。 Java企业级的应用根据业务的复杂程度&#xff0c;通常使用的系统架构有应用架构、垂直应用架构、面向服务的架构(Service-Oriented Architectu…
阅读更多...
IDEA 导入多模块项目并设置运行

IDEA 导入多模块项目并设置运行

1、导入多模块项目 导入的步骤点击左上角File->New->Module from Existing Sources&#xff0c;最后点击选择项目的pom文件即可 2、设置模块 如果pom.xml文件是灰色并且有横杠&#xff0c;则需要这样设置&#xff1a; 把√去掉。 项目结构如图所示&#xff1a; 本项…
阅读更多...
816. 数组翻转

816. 数组翻转

链接&#xff1a; 链接 题目&#xff1a; 给定一个长度为 nn 的数组 aa 和一个整数 sizesize&#xff0c;请你编写一个函数&#xff0c;void reverse(int a[], int size)&#xff0c;实现将数组 aa 中的前 sizesize 个数翻转。 输出翻转后的数组 aa。 输入格式 第一行包含两个整…
阅读更多...
【Docker】简单的Linux安装Redis

【Docker】简单的Linux安装Redis

目录 Docker 安装 Redis拉取镜像安装容器修改配置文件容器随docker启动自动运行redis客户端 史上最详细Docker安装Redis &#xff08;含每一步的图解&#xff09;实战 Docker 安装 Redis 拉取镜像 docker pull redis安装容器 创建redis配置文件目录&#xff1a;如果内部没有相…
阅读更多...
webRTC实现P2P音视频通话（无服务端）

webRTC实现P2P音视频通话（无服务端）

文章目录 先看效果视频对话源码音频对话源码遇到问题解决方案 先看效果 视频对话源码 虽然是vue项目&#xff0c;但是我卸载了主页的index页面&#xff0c;仅仅为了测试&#xff0c; <!DOCTYPE html> <html lang"en"> <head><meta charset"…
阅读更多...
IDEA debug 断点调试技巧

IDEA debug 断点调试技巧

1、首先看下IDEA中Debug模式下的界面&#xff1a; ① 以Debug模式启动服务&#xff0c;左边的一个按钮则是以Run模式启动。在开发中&#xff0c;我一般会直接启动Debug模式&#xff0c;方便随时调试代码。 ② 断点&#xff1a;在左边行号栏单击左键&#xff0c;或者快捷键Ctrl…
阅读更多...
ceph用户认证

ceph用户认证

Cephx认证机制 ceph使用cephx协议对客户端进行身份认证 cephx用于对ceph保存的数据进行认证访问和授权&#xff0c;用于对访问ceph的请求进行认证和授权检测&#xff0c;于mon通信的请求都要经过ceph认证通过&#xff0c;但是也可以在mon节点关闭cephx认证&#xff0c;但是关…
阅读更多...
Android AccessibilityService 实现《李跳跳》功能

Android AccessibilityService 实现《李跳跳》功能

AccessibilityService&#xff08;无障碍服务&#xff09;是 Android 操作系统中的一个功能&#xff0c;旨在帮助用户具有视觉、听觉或运动上的障碍更轻松地使用设备。它是 Android 提供的一种特殊服务&#xff0c;可以接收设备上发生的各种事件&#xff0c;并提供自定义的反馈…
阅读更多...
【Java】链表LinkedList

【Java】链表LinkedList

文章目录 一、链表1.1 链表的概念1.2 链表的结构 二、LinkedList的简介三、LinkedList的使用3.1 构造方法3.2 常见操作3.3 遍历方法 四、LinkedList的模拟实现五、LinkedList 和 ArrayList 的区别 一、链表 1.1 链表的概念 链表&#xff08;Linked List&#xff09;是一种常见…
阅读更多...
问懵了....美团一面索命44问，过了就60W+

问懵了....美团一面索命44问，过了就60W+

说在前面 在40岁老架构师尼恩的&#xff08;50&#xff09;读者社区中&#xff0c;经常有小伙伴&#xff0c;需要面试美团、京东、阿里、 百度、头条等大厂。 下面是一个小伙伴成功拿到通过了美团一次技术面试&#xff0c;最终&#xff0c;小伙伴通过后几面技术拷问、灵魂拷问…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023