首页 前端知识 前端04:Axios Node Npm bable webpack 前端工程改造

前端04:Axios Node Npm bable webpack 前端工程改造

2024-07-24 23:07:03 前端知识 前端哥 899 914 我要收藏

目录

本日学习

内容介绍

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.前端工程的流程

31ef1c459bb94a53be939d4c1205f837.png

 

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

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

b989ae75c0fa47c8966406c280f45b89.png

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

 7f54eec69eb0431c98ceabb87e557658.png

 1bfb2dd9d66c4edd854967716ef1a99c.png

base api:

ffdaed7ee77d457ba6f8858545076050.png

 

 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

d5be87c83d9249b88cf81918fb9921be.png

 

3创建模拟测试数据

d9c97ad565134e44a670a2127c6ee1e7.png

{

    "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>

5241e4825c284e53b3700a4021fd5e17.png

(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)安装包

2d389a74aadf48d19f04452d8432846d.png

node -v

2cfd4cef6e8a45da94f885872fe1bdc2.png

3、独立运行js代码

(1)创建目录、创建实例

6c331cb2ac974799abb6dd08bd361c0e.png

console.log('Hello Node.js')

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

e8002bb05e8f4ebba0af19b78e27c596.png

(3)使用工具终端窗口

f92b314d9b3042cf9f3d32229c007b9e.png

c7977a5bf55547d8b5a4786ddde943e9.png

 

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)运行

e1ab37ccd16541bf828302d1c2778e1a.png

7f59d954768341049e1b2a42f3a9a2cb.png

5、问题解决

(1)在cmd下运行node命令正常,在vscode里运行报错

*原因:vscode权限不够

*解决:调整权限

04da115dd95744b78914a5ba50ec1df3.png

25939c03995f42428cd0d79fd2187659.png

(2)在cmd下运行node命令报错

可以重启系统

卸载node后,重新安装

 

 

 

NPM包管理器

1、是什么

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

2、安装

929f8a730415485b99a66cd9afce4228.png

npm -v

3a102cc57939413fb1cee74558908210.png

 

3、使用npm

(1)创建目录

050a5eb0df564d479f881b9bec38e115.png

(2)在终端初始化

npm init

npm init -y

6086955f5593466d992b72304373df48.png

(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

c9f5dac71eec405096dc0ab9799327ec.png

 

3、使用

(1)创建新目录,npm初始化

af0028ac491f4b93bfdd0374f88fa678.png

npm init -y

(2)创建目录、创建ES6代码

d998a1074f1d42cd93eb313b63f8b5be.png

 

// 转码前

// 定义数据

let input = [1, 2, 3]

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

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

console.log(input)

 

(3)添加配置文件  .babelrc

7527abb305ca49e1abee1da1a0fd5009.png

{

    "presets": ["es2015"],

    "plugins": []

}

 

(4)安装转码器

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

(5)创建目录,进行转码

37b57da74c78412dbcbc9c95ff3b8348.png

*转单个文件

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

43621e8fa03943c298d5ca258350d0b3.png

 

*转整个目录

babel src -d dist

33ecf2d3b0b8458cbb76cabdddb35ca7.png

 

 

模块化

1、是什么

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

2、为什么

解决命名冲突、文件依赖

 

3、实现ES5模块化

(1)在babeldemo目录下创建目录module

86f393ef558e41ef94d778daa4c0e06f.png

(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)运行

82d8dffc338042bc958d284db395fa1e.png

 

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)运行测试

e464be727675445e87b0baa2b95d471b.png

*node不支持es6

 

(5)借助babel转码

be8103f689b74745bf3c49f084c85cc1.png

4b8ddc78544b44f3a253fa24e673eacd.png

 

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

9bfc10b63a1c471e9f04867146429bfe.png

2、安装

npm install -g webpack webpack-cli

webpack -v

 

3、创建目录、初始化

746b4dc664204472bd54ee96fff88791.png

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

c853d72f38d5458aae1d60a0c3557f61.png

webpack --mode=development #没有警告

1e853efeb8bb4407ab2804097ef76cb2.png

(5)创建页面,导入js

webpack目录下创建index.html

<body>

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

</body>

(6)发布测试

df0a7b143e624ff2ac5a2a94c2a3795b.png

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');

e3519d42831f41e0aaf13c04bcfde2f0.png

(5)重新打包

29789fe572fe4aa8be6d6b97361d31ba.png

fb3a58e6c79e4940a2ad964248404473.png

 

搭建前端工程

1、工程选型

6147fa80f5ae4354adad3c0af2735228.png

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

2、搭建工程(标准步骤)

(1)工程包

4036f227e9074c5bb5f9070100891711.png

(2)修改名称yygh-admin,复制到工程目录下

(3)进入终端目录,运行命令下载依赖

npm install

(4)运行命令启动

npm run dev

2、搭建工程(快捷步骤)

(1)工程包

 

a573f39363a74cdda9472f45eece5c0c.png

(2)修改名称yygh-admin,复制到工程目录下

(3)进入终端目录,运行命令启动

npm run dev

b29c2531c81c4f4596b8a8f85caf8433.png

8b85dce3b49b4ffe88774e8912cca7a5.png

前端框架介绍

1、目录概览

430d9e24863f4125b843c6e5aaea99ac.png

2、目录介绍

(1)一级目录

*build // 构建脚本

*mock//模拟接口、数据

*src//源码目录

*开发环境配置

7d4a8a4c14fc4b7d8fa0bdbda8b1c143.png

2a7a19117894461fb8a3724856a35956.png

*主配置文件

4de3b1fae65f42dbafee63539d562f66.png

(2)二级目录src

*api//前后端对接接口

*layout//存放布局组件

*router//路由目录

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

 

 

 

 

 

前端开发过程介绍

a7c3050d563a4bd2968e4f327ed9d768.png

 

 

登录改造成本地接口

1、分析改造方案

(1)分析网络请求

84a4908adbc642dfada5f947432e9241.png

3e602cd31f9c4684981c60013e2ebcc1.png

25dda8ea0f934fd88127cbaee91da001.png

f627c8e5f68943eaa53a018bdfdcbc5e.png

(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)修改运行时配置

ab4cd71a3a694fd49b986071dd091879.png

(2)修改api接口方法

8050c5faeb314432be6b1c2e85d91f82.png

c419cf23e85949f48dc971311e731adf.png

4、登陆测试

(1)错误日志

2bae40851e7046e3ab92d7e12e583b25.png

(2)错误定位

*URL错误

5d0b0702bd604c36b07ef4644dadd619.png

*跨域问题(确认):系统访问中协议、IP地址、端口号有一个发生变化,就会出现跨域问题

 

(3)解决问题

30eb94a37b83433a96fc4bbb3ee58657.png

53e1c4da13be45ba8552d528dc5b808c.png

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14293.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!