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

news2024/12/24 0:28:55

目录

本日学习

内容介绍

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、是什么

1java独立运行需要jdkjs独立运行需要node

2web工程发布需要tomcatjs服务工程运行需要node

2、安装

1)安装包

node -v

3、独立运行js代码

1)创建目录、创建实例

console.log('Hello Node.js')

2)进入命令行窗口,运行

3)使用工具终端窗口

4js服务工程运行

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.js

export default {

    getList() {

        console.log('获取数据列表2')

    },



    save() {

        console.log('保存数据2')

    }

}

(2)导入文件002.js

import 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.js

exports.info = function (str) {

    document.write(str);

}

*02.js

exports.add = function (a, b) {

    return a + b;

}

(2)src下创建main.js

const common = require('./01');

const utils = require('./02');



common.info('Hello world!' + utils.add(100, 200));

(3)webpack目录下创建配置文件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' //输出文件

    }

}

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.css

body{

    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.coloradmin.cn/o/747529.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

stm32(adc数模转换)

ADC介绍 ADC是什么&#xff1f; 全称&#xff1a;Analog-to-Digital Converter&#xff0c;指模拟/数字转换器 ADC的性能指标 量程&#xff1a;能测量的电压范围分辨率&#xff1a;ADC能辨别的最小模拟量&#xff0c;通常以输出二进制数的位数表示&#xff0c;比如&#xff1…

Leetcode每日一题:931. 下降路径最小和(2023.7.13 C++)

目录 931. 下降路径最小和 题目描述&#xff1a; 实现代码与解析&#xff1a; 动态规划 原理思路&#xff1a; 931. 下降路径最小和 题目描述&#xff1a; 给你一个 n x n 的 方形 整数数组 matrix &#xff0c;请你找出并返回通过 matrix 的下降路径 的 最小和 。 下降…

mongdb实战

概述 前言 这几天轮播图想用mongdb开发&#xff0c;然后就有了一下代码 效果图 源码如下 package jkw.pojo;import lombok.Data; import org.springframework.data.annotation.Id; import org.springframework.data.mongodb.core.index.Indexed; import org.springframewo…

【JAVA】穷词——基于嵌入式的数据库derby+BeautyEye的单词字典应用

文章目录 1. 题目2. 项目结构层次3. 环境以及技术栈说明4. 项目报告4.1软件功能描述4.2项目类图4.2.1 src层级下的类图4.2.2 data层级下的类图4.2.3 gui层级下的类图4.2.4 resource层级下的类图4.2.5 view层级下的类图4.2.6 DelWord的类图4.2.7 CustomMessageDialog的类图4.2.8…

Antd List组件增加gutter属性后出现横向滚动,如何解决

第一次使用ant design的List列表组件&#xff0c;设置gutter间隔属性后&#xff0c;页面出现了横向滚动条&#xff0c;查阅文档发现是由于加间隔后导致容器宽度被撑开&#xff0c;ant design官方默认给外层容器加了margin-left和margin-right 解决方法是在外层容器预留一定的pa…

stringstream的使用

写到290题使用stringstream简化步骤&#xff0c;学习一下使用 目录 小问题&#xff1f; 成员函数clear() 那么问题来了&#xff1f;clear在啥时候用呢&#xff1f; 数据类型转换 <sstream>库定义了三种类&#xff1a;istringstream、ostringstream、stringstream &l…

RT1176 LCDIFv2 RGB565引脚不连续

RT1052和RT1176的LCDIF&#xff0c;使用RGB565格式时PIN脚分配是连续的:LCDIF_DATA00~LCDIF_DATA15。 但RT1176的LCDIFv2并不是这样&#xff0c;使用RGB565格式时PIN脚分配不是连续的&#xff0c;而是移位填充8位*324位分配的。 RT1176 LCDIFv2 RGB565LCDIF_DATA00LCDIF_DATA0…

CVE漏洞复现-CVE-2021-36934 Windows 提权漏洞

CVE-2021-36934 Windows 提权漏洞 漏洞描述 7月20日&#xff0c;微软确认了一个新的本地提权漏洞&#xff0c;安全研究成员将其称为HiveNightmare或者SeriousSAM&#xff0c;该漏洞允许低权限的用户访问Windows系统文件。成功利用此漏洞的攻击者可以使用SYSTEM特权运行任意代…

16位ADC芯片SGM58031驱动重点

16位ADC芯片SGM58031驱动重点 文章目录 16位ADC芯片SGM58031驱动重点引脚描述时间要求I2C时序图I2C通讯描述I2C接口I2C地址选择I2C常规呼叫I2C速度模式从模式操作 寄存器指针寄存器转换寄存器配置寄存器低阈值和高阈值寄存器Config1寄存器芯片ID寄存器GN_Trim1寄存器&#xff0…

Linux(驱动编程)(调试技术)(imx6ull)

调试技术 1、在写驱动程序时函数未包含头文件 在linux内核源码driver/char目录下输入命令 grep “XXXX” * -nrw查看次函数在那个.c里用过&#xff0c;然后在vscode界面下按altp搜索这个.c就可以参考这个.c的头文件。 2、编译完驱动跟应用后先 insmod xxx.ko //插入 cat /…

原创 | SQL和 NoSQL的基本操作和查询语句

作者&#xff1a;杨金珊本文约3500字&#xff0c;建议阅读7分钟本文为你介绍SQL和 NoSQL的基本操作和查询语句。 SQL&#xff08;结构化查询语言&#xff09; SQL是用于管理和操作关系型数据库的语言。它遵循结构化模式&#xff0c;将数据组织成具有预定义关系的表格形式。以下…

告别被坑!掌握合合信息AI图像篡改检测工具,轻松识别图片造假

文章目录 一、前言1.1 背景与危害1.2会议探讨1.3 技术先行 二、亮点技术1&#xff1a;AI图像篡改检测技术2.1 传统方法Python实现步骤2.2 合合信息——PS纂改检测体验 三、亮点技术2&#xff1a;生成式图像鉴别3.1 生成式图像安全问题3.2 传统方法Python实现步骤3.2 合合信息—…

03_007linux内存管理架构以虚拟内存空间布局架构

内存管理子系统架构 内存管理子系统架构可以分为:用户空间、内核空间及硬件部分3个层面&#xff0c;具体结构如 下图所示: 1、用户空间:应用程序使用malloc()申请内存资源/free()释放内存资源。 2、内核空间:内核总是驻留在内存中&#xff0c;是操作系统的一部分。内核空间为内…

nginx uwsgi配置django

uwsgi文件 [uwsgi] # 服务端口号&#xff0c;这里没有设置IP值&#xff0c;默认是加载服务器的IP地址 #http :5000 socket:8000 # flask项目地址 chdir /pyprogram/electric # wsgi文件 /home/flask_project/mange.py #module app:app wsgi-file/pyprogram/electric/electr…

CompletionService的基本使用以及原理

文章目录 一、CompletionService的简介二、CompletionService的底层大致原理三、CompletionService的使用场景1. 批量下载文件&#xff1a;2. 多个商品价格查询&#xff1a;3. 并发处理多个API请求&#xff1a; 四、CompletionService的使用demo1. 代码如下&#xff1a;2. 案例…

mac上 如何批量在文件名中插入文字

mac上 如何批量在文件名中插入文字&#xff1f;在使用Mac电脑的时候&#xff0c;我们经常需要对大量文件的名称进行修改&#xff0c;例如需要在大量文件的名称中插入一些相同的文字或者字符的时候&#xff0c;你会用什么方法来完成这项工作呢&#xff1f;相信很多人就面对过类似…

前端vue入门(纯代码)30_路由的props配置

喜欢的东西太贵了&#xff0c;我一咬牙&#xff0c;狠下心决定不喜欢了&#xff01; 【28.Vue Router--路由的props配置】 props配置官网文档 props属性用法和params属性差不多&#xff0c;都是要在src/router/index.js文件中配置 // 该文件专门用于创建整个应用的路由器 i…

Spring 项目的创建和使用1(配置国内源)

目录 一、Spring项目的创建 1. 创建Maven项目 2. 添加Spring依赖&#xff08;重要&#xff09; (1) 必须要设置两个配置文件的国内源配置&#xff08;当前项目配置文件&#xff0c;新项目配置文件&#xff09; (2) 复制上一步中的User setting file 后面的路径在文件资源管理…

SpringBoot集成Flowable工作流

SpringBoot集成Flowable工作流 Flowable是什么&#xff1f;一、添加依赖二、flowable配置三、定义流程文件1.使用流程文件定义工作流2.idea使用插件来定义流程图1.安装插件2.创建bpmn文件并画流程图3.右击流程用模型设计器打开文件 四、测试controller Flowable是什么&#xff…

美女与修狗儿【 InsCode Stable Diffusion 美图活动一期】

女朋友最近买了一只小泰迪&#xff0c;于是给她和修狗儿做一幅画 一、Stable Diffusion 模型在线使用地址 https://inscode.csdn.net/inscode/Stable-Diffusion 二、模型版本及相关配置 模型&#xff1a;chilloutmix-Ni.safetensors[7234b76e42采样方法&#xff1a;Euler a…