谷粒学院第四天

最新推荐文章于 2022-09-08 22:48:15 发布

热爱可抵岁月漫长-yh

最新推荐文章于 2022-09-08 22:48:15 发布

阅读量348

点赞数 1

文章标签： vue 谷粒学院 nodejs

本文链接：https://blog.csdn.net/m0_52462015/article/details/119845438

版权

在这里插入图片描述

一、`axios`

1、介绍

在这里插入图片描述

2、使用

<!DOCTYPE html>
<html lang="en">
<head>
    <title>axios使用</title>

    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div  v-for="(item, index) in userList">
            index：{{index}}
            name：{{item.name}}
            age：{{item.age}}
        </div>
    </div>

    <script>
        // 创建一个 vue 对象
        new Vue({
            // 绑定 vue 的作用域
            el : '#app',
            // 定义页面中显示的数据模型
            data : {
                userList : []
            },
            // 页面渲染之前执行
            created() {
                // 调用定义的方法
                this.getUserList();
            },
            // 编写具体的方法
            methods: {
                getUserList() {
                    // axios.请求方式("请求接口").then().catch();
                    // then：请求成功执行的方法
                    // cath：请求失败执行的方法
                    axios.get("data.json")
                        .then(response => {
                            console.log(response);
                            this.userList = response.data.data.item;
                        }) 
                        .catch(error => {

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

二、`element-ui` 组件

1、介绍

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

官网：<Element - 网站快速成型工具>

三、`node.js`

1、介绍

在这里插入图片描述

官网：<Node.js (nodejs.org)>

2、使用

（1）新建 01.js 文件

console.log('hello node.js！');

（2）在 01.js 文件所在的路径打开命令行窗口

（3）输入命令

node 01.js

看到 hello node.js！就说明成功了！

四、`npm`

1、介绍

在这里插入图片描述

2、使用

（1）npm 项目初始化操作

在命令行窗口输入命令：

npm init

初始化完成后会有一个 package.json 文件，类似于 maven 的 pom 文件。

# 使用默认的信息初始化项目
npm init -y

（2）npm 下载 js 依赖

设置镜像地址：

# 设置镜像地址，这里使用的是淘宝的镜像
npm config set registry https://registry.npm.taobao.org
# 查看 npm 配置信息
npm config list

下载依赖：

# 例：npm install jquery@版本号
# 可以不指定版本号
npm install 依赖名称

根据 package.json 文件下载依赖：

npm install

五、`babel`

1、介绍

在这里插入图片描述

2、使用

（1）安装 babel 工具，使用命令

npm install -global babel-cli
# 查看是否安装成功
babel --version

（2）初始化项目

npm init -y

（3）创建 js 文件

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

（4）配置 .babelrc

{
    // 设置转码规则
    "presets": ["es2015"],
    "plugins": []
}

（5）安装转码器

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

（6）转码

# 转码结果写入一个文件
mkdir dist1

# 指定文件转码
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
【babel src/example.js -o dist1/compiled.js】

# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
【babel src -d dist2】

六、模块化

1、介绍

在这里插入图片描述

2、使用

（1）es5 写法

01.js 文件（定义方法）

// 1 定义方法
const sum = function(a, b) {
    return parseInt(a) + parseInt(b);
}

const subtract = function(a, b) {
    return parseInt(a) - parseInt(b);
}

// 2 设置你的哪些方法可以被其他 js 调用
module.exports = {
    sum,
    subtract
}

02.js 文件（调用方法）

// 调用方法
// 1 引入 js
const m = require('./01.js');

// 2 调用
console.log(m.sum(1, 2));
console.log(m.subtract(1, 2));

（2）es6 写法

注意：这时的程序无法运行的，因为 ES6 的模块化无法在 Node.js 中执行，需要用 Babel 编辑成 ES5 后再执行。

第一种写法：

导出模块：

export function getList() {
    console.log('获取数据列表')
}

export function save() {
    console.log('保存数据')
}

导入模块：

//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from "./userApi.js"

getList()
save()

转换成 es5：

babel es6model -d es6model_es5

第二种写法

导出模块：

export default{
    getList(){
        console.log("获取数据列表2");
    },
    save(){
        console.log("保存数据2");
    }
}

导入模块：

import user from "./userApi2"
user.getList();
user.save();

转换成 es5：

babel es6model -d es6model_es5

七、`webpack`

1、介绍

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。减少了页面的请求。

在这里插入图片描述

2、使用

（1）安装 webpack 工具

npm install -g webpack webpack-cli

（2）安装后查看版本号

webpack -v

（3）common.js 文件

exports.info = function (str) {
    document.write(str);//在浏览器中输出
}

（4）创建 utils.js 文件

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

（5）创建 main.js 文件

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

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

（6）js 打包

webpack 目录下创建配置文件 webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件，main.js文件中已经引入了另外两个js文件
    output: {
    path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路
    径,
    filename: 'bundle.js' //输出文件
    }
}

执行编译命令

webpack # 有黄色警告
webpack --mode=development # 没有警告
# 执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

（7）CSS 打包

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以

理解为是模块和资源的转换器。

安装style-loader和 css-loader：

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

修改 webpack.config.js：

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{},
    module: {
        rules: [
            {
                test: /\.css$/, //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

创建 body.css：

body{
    background:pink;
}

修改 main.js：

在第一行引入 body.css：

require('./body.css');

执行打包指令：

webpack --mode=development

八、搭建项目前端环境

1、介绍

在这里插入图片描述

2、前端页面框架介绍

使用框架：vue-admin-template-master

（1）程序入口

index.html、src/main.js

（2）主要基于两种技术

vue、element-ui

（3）build 目录

做一些编译和项目构建之类

（4）config 目录

项目的一些配置，比如端口号等

index.js（配置端口号）

dev.env.js（配置接口)

（5）node_module 目录

一些项目的依赖

（6）src 目录

api 定义调用方法
assets 放一些静态资源
component 其他插件
icons 放一些图标
router 页面中的路由部分
store 放一些脚本文件
styles 放一些 css
utils 放一些工具类
views 项目中具体的页面

3、前端页面框架登录问题

这个是正常的，服务器出问题了。

热爱可抵岁月漫长-yh

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
谷粒学院第四天

一、axios1、介绍2、使用<!DOCTYPE html><html lang="en"><head> <title>axios使用</title> <script src="vue.min.js"></script> <script src="axios.min.js"></script></head><body> ...
复制链接

扫一扫