Day4 前端技术 - axios element-ui等

最新推荐文章于 2024-03-01 11:26:28 发布

weixin_39505091

最新推荐文章于 2024-03-01 11:26:28 发布

阅读量128

点赞数

分类专栏：在线教育项目开发

本文链接：https://blog.csdn.net/weixin_39505091/article/details/106333494

版权

在线教育项目开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一. axios使用

axios经常与Vue一起使用，实现 ajax 操作（异步请求）。

引入axios.js文件；
通过 axios.请求方式(“请求路径”).then().catch() 发送请求；

<body>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <div id="app"> 
        
    </div>
    <script>
        new Vue({
            el: '#app', //绑定vue的作用范围
            data: { //定义页面中显示的数据
            },
            created() {
                this.getUserList()
            },
            methods: {
                getUserList() {
                    //发送ajax请求 axios.请求方式("请求路径").then().catch()
                    axios.get("data.json").then(response => {
                        console.log(JSON.stringify(response.data))
                    }).catch(error => {

                    })
                }
            }
        })
    </script>
</body>

二. node.js 和 npm

node.js是 JavaScript 的运行环境，用于执行 JavaScript 代码。 不需要浏览器，直接使用 node.js 执行 JavaScript 代码。

使用 node.js 需要先进行安装，这里不再进行介绍。

使用node.js 执行 JavaScript 代码：

node xxx.js

此外，node.js 还能模拟服务器，比如tomcat.

npm (node package management) 是 node.js 的包管理器，用于管理前端的 js 依赖（类似于后端的maven）。

npm 初始化项目

npm init -y

npm 下载依赖

//先设置镜像地址
npm config set registry https://registry.npm.taobao.org
//下载 如jquery
npm install jquery
//指定版本下载
npm install jquery@3.5.x

根据项目文件下载依赖：

npm install

三. babel转码

es6的兼容性很差，但是语法简洁，所以一般可以通过es6编写代码，再通过babel转成es5运行。

安装 babel

npm install --global babel-cli

测试是否安装成功：babel --version
竟然报错！！！！：

NODE_MODULES/.BIN/BABEL : 无法加载文件 D:\NODE\NODE_PROJECT\ES6\NODE_MODULES.BIN\BABEL.PS1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 HTTPS:/GO.MICROSOFT.CO M/FWLINK/?LINKID=135170 中的 ABOUT_EXECUTION_POLICIES。

解决方式：

以管理员身份运行vs code
执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的
执行：set-ExecutionPolicy RemoteSigned
这时再执行get-ExecutionPolicy，就显示RemoteSigned
搞定！！！！！！！

编写 es6 代码文件
编写 babel 配置文件：文件名为 .babelrc，内容如下：

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

下载 es2015转码器

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

转码

//使用文件转码
babel es6Demo/02.js -o es6Demo/002.js
//使用文件夹转码
babel es6Demo -d dist

四. 模块化

前端中的模块化是指 js 之间的相互调用，可以通过引入别的 js 中的方法进行复用。

1. es5 模块化写法

// 被调用文件 01.js
const add = function(a, b) {
    return a + b
}

const substract = function(a, b) {
    return a - b
}

module.exports = {
    add,
    substract
}

//调用文件 02.js
const compute = require('./01.js')
console.log(compute.add(1, 2))

2. es6 模块化写法

注意：es6 写的模块化无法在node.js中运行，需要转成es5再运行。

写法一：

// 被调用文件 01.js
export function add(a, b) {
    return a + b
}

export function substract(a, b) {
    return a - b
}

//调用文件 02.js
import {add, substract} from "./01.js"
console.log(compute.add(1, 2))

写法二：

// 被调用文件 01.js
export default {
    add(a, b) {
        return a + b
    },
    substract(a, b) {
        return a - b
    }
}

//调用文件 02.js
import compute from "./01.js"
console.log(compute.add(1, 2))

五. webpack打包

webpack可以将前端多个静态文件打包成一个文件，减少前端页面的访问次数。

1. 安装

npm install -g webpack webpack-cli
npm install  --save-dev style-loader css-loader //打包css文件所需

2. 打包

新建一个src文件夹，在里面编写前端代码，比如 js、css 文件（需要有一个引入所有其他文件的入口文件）；
在src文件夹同级目录中新建一个 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']
            }  
        ]  
    }
}

使用命令 webpack （或 webpack --mode=development）进行打包

3. 使用npm命令打包

配置项目的 npm 运行命令，修改package.json 文件

"scripts": {
	//......
	"dev": "webpack --mode=development"
}

运行 npm 命令执行打包：

npm run dev

六. 使用模板搭建前端环境

针对管理员系统，我们选择了 vue-admin-template 模板（直接官网下载）进行前端环境搭建。

搭建方法：

将 vue-admin-template 解压后放置到工作区中;
通过配置文件下载依赖：npm install；
使用 npm run dev 启动项目

模板目录介绍：
在这里插入图片描述