谷粒学苑_第四天

最新推荐文章于 2023-01-18 16:49:06 发布

Like_wen

最新推荐文章于 2023-01-18 16:49:06 发布

阅读量453

点赞数

分类专栏：谷粒学院前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_52070517/article/details/126773562

版权

谷粒学院同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

前端

10 篇文章 1 订阅

订阅专栏

本文介绍了前端开发中的axios库用于HTTP请求，讲解了如何在Vue项目中使用axios获取JSON数据。此外，还探讨了模块化概念，包括CommonJS和ES6的模块导入导出，并通过babel将ES6代码转为ES5。最后，简要提到了webpack的打包功能及其在处理CSS和JS文件中的应用。

摘要由CSDN通过智能技术生成

axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

axios下载在这里找

下载地址:https://github.com/axios/axios/blob/v1.x/dist/axios.js

在这里插入图片描述

数据模拟:data.json

{
    "sucess": true,
    "code": 20000,
    "message": "成功",
    "data": {
        "items": [
            {"name":"lucy","age":12}, 
            {"name":"lucy2","age":121},
             {"name":"lucy3","age":122}
        ]
    }
}

编写html代码(不能运行?)

    <div id="app">
       
    </div>
    <script src="vue.js"></script>  
    <script src="axios.js"></script>
    <script>
     
       new Vue({
            el: '#app',
            data: {
                userList: []

            },
            created(){
                //页面渲染前执行
                //调用定义的方法
                this.getUserList()

            },
            methods: {//编写具体的方法


                getUserList() {
                    //vm=this
                    //http://localhost:8081/admin/ucenter/member
                    axios.get("data.json")
                        .then(response => {
                            console.log(response)
                        })
                        .catch(error=>{
                        console.log(error)

                    })
                }
            }

        })
    </script>

获取数据

this. userList = response.data.data.items

遍历数据
在这里插入图片描述

element-ui

饿了么出的,官网:https://element.eleme.cn/#/

可以在上面cv需要的好看的组件

Node.js安装+

运行在服务端的JavaScript

模拟服务器效果,带有谷歌什么什么引擎,可以提供JavaScript环境

安装,搜就行

最好安装到C盘,

node -v用来获取版本号,证明安装成功

NPM

Node Package Manager ,是Node.js包管理工具

相当于前端的maven

初始化结构

npm init

一直回车,最后yes
在这里插入图片描述

出现这个相当于pom.xml
在这里插入图片描述

npm下载:

npm install +....

修改npm镜像:

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

npm config list

下载jquery依赖:

npm install jquery

如果发现有很多err!npm warn config global --global, --local are deprecated. use --location=global instead.

试一下这个方法

https://blog.csdn.net/m0_52070517/article/details/126714709?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22126714709%22%2C%22source%22%3A%22m0_52070517%22%7D

安装指定版本:

npm install jquery@2.1.x

根据package.json下依赖(在pom.xml写好再刷新)

npm install

在这里插入图片描述

其他:

在这里插入图片描述

babel

是转码器,可以实现代码兼容低版本浏览器

//es6版本的浏览器不向下兼容,可以依靠转码器,转成es5可以读懂的代码

重新创一个文件夹:babeldemo

打开终端

初始化:

npm init -y

安装:

npm install --location=global babel-cli

创建es6的代码: 01.js

//转码前
//定义数据
let input = [1,2,3]
//将数组的每个元素 +1
input =input.map(item => itme+1)
console.log(input)

创建babel配置文件: .babelrc

{
"presets": ["es2015"],
"plugins": []
}

记得ctrl+s保存文件

安装es2015的转码器

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

使用命令进行转码:

根据文件进行转码

babel 01.js -o 001.js

根据文件夹进行转码

babel es6 -d dist

出现类似错误:可以手动cmd到对应目录进行转换
在这里插入图片描述

模块化

类似于后端的不同类的调用,叫模块化操作,在前端js与js之间调用,

建立一个文件夹: moduledemo

打开终端初始化:

npm init -y

es5的模块化操作

建立文件夹:es5mode

创建文件:01.js 02.js
在这里插入图片描述

被引入代码 01.js

//创建方法
//定义成员
const sum=function(a,b){
    return parseInt(a)+parseInt(b)
}
const subtract= function(a,b){
return parseInt(a) -parseInt(b)
}
//设置可以被哪些js调用
module.exports={
    sum,
    subtract
}

调用代码 02.js

//调用01.js方法
//引入
const m=require('./01.js')
//调用
console.log(m.sum(1,2))
console.log(m.subtract(10,3))

保存测试:

node 02.js

在这里插入图片描述

es6的模块化操作

写法一:

创建文件夹 modulees61,在babeldemo里

创建01.js

///定义方法，设置哪些方法可以被其他js调用
export function getList() {
    console.log('getList............' )
    }
    export function save (){
    console.log('save............' )
    }

创建02.js

//调用01. js的方法，引入01. js文件，进行调用
import {getList, save} from './01.js'
//调用方法I
getList()
save()

测试:

创建es611文件夹

需要转换成es5

出现错误要使用cmd来输命令

babel modulees61 -d es611

转化成功:
在这里插入图片描述

写法二:

简化写法

复制文件夹,然后重命名:modulees62

01.js改成:

///定义方法，设置哪些方法可以被其他js调用

//简化写法:
export default{
    getList(){
        console.log('getList......')
    },
    update(){
        console.log('update....')
    }
}

02.js改写:

//调用01. js的方法，引入01. js文件，进行调用
import m from './01.js'
//调用方法I
m.getList()
m.update()

测试:

建立es622文件夹

打开babeldemo对应的文件夹的cmd

babel modulees62 -d es622

在这里插入图片描述

webpack

打包程序,将多个静态资源转化成一个静态文件

安装插件

创建一个文件夹:webpackdemo

初始化:

npm init -y

末尾老师少打了个i

npm install --location webpack webpack-cli

在这里插入图片描述

js打包

先加一个src

common.js:

exports.info=function(str){
    document.write(str)//浏览器页面输出
}

utils.js

exports.add=function(a,b){
    return a+b;
    
}

main.js

const common = require('./common.js')
const utils = require('./utils.js')
common.info('hello common'+ utils.add(1,2))

创建webpack配置文件

webpack.config.js

const path = require("path");
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
    path: path.resolve(_dirname, './dist'), //输出路径，_ dirname: 当前文件所在路径
    filename: 'bundle.js' //输出文件
    }
}

创建dist文件夹

记得Ctrl+S保存

webpack

在这里插入图片描述

出现一个警告

意思是叫你选一个环境(开发,生产)

默认好像是生产环境

变成开发环境输出

webpack --mode=development

创建0.1html

<script src="dist/bundle.js"></script>
<!-- 创建html文件，引入打包之后js文件，使用浏览器查看效果 -->

CSS打包

创建css文件:style.css

body{
    background-color: bisque;
}

在main.js引入js

const common = require('./common.js')
const utils = require('./utils.js')
//css文件引入
//.css后缀不能省略
require( './style.css')

common.info('hello common'+ utils.add(1,2))

安装css加载器

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

修改配置文件

const path = require("path");
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']
            }
        ]
    }
}