谷粒学苑_第四天

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}
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

编写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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

获取数据

this. userList = response.data.data.items
1

遍历数据

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 +....
1

修改npm镜像:

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

npm config list
1

下载jquery依赖:

npm install jquery
1

如果发现有很多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
1

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

npm install
1

其他:

babel

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

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

重新创一个文件夹:babeldemo

打开终端

初始化:

npm init -y
1

安装:

npm install --location=global babel-cli
1

创建es6的代码: 01.js

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

创建babel配置文件: .babelrc

{
"presets": ["es2015"],
"plugins": []
}
1
2
3
4

记得ctrl+s保存文件

安装es2015的转码器

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

使用命令进行转码:

根据文件进行转码

babel 01.js -o 001.js
1

根据文件夹进行转码

babel es6 -d dist
1

出现类似错误:可以手动cmd到对应目录进行转换

模块化

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

建立一个文件夹: moduledemo

打开终端初始化:

npm init -y
1

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
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

调用代码 02.js

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

1
2
3
4
5
6
7

保存测试:

node 02.js
1

es6的模块化操作

写法一:

创建文件夹 modulees61,在babeldemo里

创建01.js

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

1
2
3
4
5
6
7
8
9

创建02.js

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

1
2
3
4
5
6

测试:

创建es611文件夹

需要转换成es5

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

babel modulees61 -d es611
1

转化成功:

写法二:

简化写法

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

01.js改成:

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

//简化写法:
export default{
    getList(){
        console.log('getList......')
    },
    update(){
        console.log('update....')
    }
}
1
2
3
4
5
6
7
8
9
10
11

02.js改写:

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

1
2
3
4
5
6

测试:

建立es622文件夹

打开babeldemo对应的文件夹的cmd

babel modulees62 -d es622
1

webpack

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

安装插件

创建一个文件夹:webpackdemo

初始化:

npm init -y
1

末尾老师少打了个i

npm install --location webpack webpack-cli
1

js打包

先加一个src

common.js:

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

utils.js

exports.add=function(a,b){
    return a+b;
    
}
1
2
3
4

main.js

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

创建webpack配置文件

webpack.config.js

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

创建dist文件夹

记得Ctrl+S保存

webpack
1

出现一个警告

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

默认好像是生产环境

变成开发环境输出

webpack --mode=development
1

创建0.1html

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


1
2
3

CSS打包

创建css文件:style.css

body{
    background-color: bisque;
}

1
2
3
4

在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))
1
2
3
4
5
6
7

安装css加载器

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

1
2

修改配置文件

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']
            }
        ]
    }
}
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

删除dist里的生成的文件

打包:

webpack
1

注意保存

搭建项目前端页面环境

选一个模板(框架):

vue-admin-template

下载地址:

https://gitee.com/panjiachen/vue-admin-template.git

解压到工作区

用vscode,打开终端,安装依赖:

npm install
1

启动项目

npm run dev
1

框架介绍

入口:index.html main.js