在线教育项目第四天

一、axios

概念

独立于vue的项目，但常和vue一起使用，实现ajax操作

应用场景

前端发送ajax请求后端接口，后端接口返回数据用于前端展示

使用

创建html页面，引入js文件，vue和axios
将json文件中的数据显示到页面上
<div id="app">
    <table border="1" cellspacing="0" cellpadding="0">
        <tr v-for="user, index in userList">
            <td>{{index + 1}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            //定义变量和初始值
            userList: []
        },
        created() {
            //页面渲染之前执行
            //调用定义的方法
            this.getList();
        },
        methods: {
            //编写具体的方法
            getList(id) {
                axios.get("data.json")
                    .then(response => {
                        console.log(response);
                        this.userList = response.data.data.items;
                        console.log(this.userList);
                    })
                    .catch(error => {
                        console.log(error);
                    })
            }
        }
    })
</script>

二、element-ui

概念

饿了么出品的基于vue的后台组件库，可以进行页面的快速布局和构建
文档：http://element.eleme.cn/#/zh-CN
可以直接将提供的代码整合到自己的项目中，比如各种不同的按钮，表格等等

三、node.js

概念

JavaScript的运行环境
不需要浏览器就可以运行JavaScript，因为其基于谷歌的V8引擎
可以模拟服务器的效果，如tomcat，通过ip 端口进行访问

安装

建议装到c盘，可能会有问题
cmd node -v 可以看到版本号

运行编写的js文件

在文件路径输入cmd
cmd输入node 文件名.js

在vscode中打开cmd，执行js文件

右击文件夹，打开集成终端窗口
可能出现的问题
    打开终端什么都不显示，需要回车两次才会显示运行目录进行输入
    输入node -v没有版本号输出 可能是win10的权限问题
        关闭vscode
        右击桌面上的图标，点击兼容性，勾选以管理员身份运行
        若没用，确定node.js是否安装成功，即使用cmd看版本
            安装成功，重启电脑
            安装不成功，重装

四、npm

概念

node package manager node.js包管理工具
maven 后端中用于构建项目，管理jar包依赖，可以联网下载依赖
npm类似于maven，在前端中管理js依赖，可以联网下载依赖

安装npm

安装node.js时会一起安装
cmd npm -v

使用

npm项目初始化
    使用命令npm init 一路默认 输入yes回车
    会生成package.json文件，类似于pom.xml文件
    可以直接输入npm init -y回车
修改npm镜像为淘宝镜像，下载速度更快 每次初始化项目都要配置镜像
    npm config set registry http://registry.npm.taobao.org
    package-lock.json锁定当前使用的依赖版本
npm下载依赖
    命令npm install 依赖名
根据package.json文件下载依赖
    在文件所在文件夹中打开终端，npm install
安装插件
    npm install --save-dev eslint或npm install -D eslint 当前工作空间可用
    npm install -g webpack 全局可用
卸载包
    npm uninstall 包名
    npm uninstall -g 包名 全局卸载
更新包
    npm update 包名
    npm update -g 包名 全局更新

五、babel转码器

概念

将es6转为es5

安装

npm install --global babel-cli
babel --version
    错误：babel : 无法加载文件 G:\npm\node_global_modules\babel.ps1，因为在此系统上禁止运行脚本。
    解决：（1）以管理员身份运行vs code
         （2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）
         （3）在终端执行：set-ExecutionPolicy RemoteSigned
         （4）在终端执行：get-ExecutionPolicy，显示RemoteSigned

使用

创建文件，编写es6代码
    //转码前
    //定义数据
    let input = [1, 2, 3];
    //将数组的每个元素+1
    input = input.map(item => item + 1);
    console.log(input);
在文件夹中创建配置文件.babelrc
    {
        "presets": ["es2015"],
        "plugins": []
    }
安装转码器
    npm install --save-dev babel-preset-es2015
使用命令进行转码
    写入文件
        创建转码结果写入的文件
            mkdir dist1
        根据文件进行转码
            babel 目录/文件名 --out-file dist1/文件名
            或
            babel 目录/文件名 -o dist1/文件名
    写入文件夹
        创建转码结果写入的文件夹
            mkdir dist2
        根据文件夹进行转码
            babel 文件夹名 --out-dir dist2
            或
            babel 文件夹名 -d dist2
    转码后
        "use strict";
        //转码前
        //定义数据
        var input = [1, 2, 3];
        //将数组的每个元素+1
        input = input.map(function (item) {
          return item + 1;
        });
        console.log(input);
面试
    前端用过什么内容？
    babel，一个将es6代码转换为es5代码的转码器，转码后浏览器兼容性更好。

六、模块化

概念

开发后端接口时，开发controller service mapper，通过controller注入service，service注入mapper来实现不同类之间的调用
类与类之间的调用称为后端的模块化操作
js与js之间的调用称为前端的模块化
模块化可以使得项目的结构更加清晰

es5使用模块化

创建文件夹module，初始化项目，修改镜像
创建文件夹es5，文件01和02
    01定义方法
        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调用01的方法
        引入01文件 ./当前目录 ../上一级目录 这里的./不可省略
        const m = requestAnimationFrame("./01.js");
        调用方法
        console.log(m.sum(1, 2));
        console.log(m.subtract(6, 3));
    终端进入es5文件夹，执行命令node 02.js

es6的模块化

es6的模块化无法在node.js中执行，需要用babel转为es5执行
面试题：
    遇到的问题？
    开发前端时使用es6写模块化的代码，在node.js中不能运行，使用babel转为es5就可以运行了
写法1
    在babel文件夹中创建文件夹module_es6_1，创建文件01和02
        01定义方法 export表示可以被调用
            export function getList() {
                console.log("getList");
            }
            export function save() {
                console.log("save");
            }
        02调用01的方法
            引入方法 ./不能省略 js可以省略
            import {getList, save} from "./01.js"
            调用方法
            getList()
            save()
    创建转码输出的文件夹 mkdir module_es5_1
    使用babel转为es5 babel module_es6_1 -d module_es5_1
    终端进入文件夹module_es5_1 执行命令node 02.js
写法2
    在babel文件夹中创建文件夹module_es6_2，创建文件01和02
        01定义方法 export表示可以被调用
            export default {
                getList() {
                    console.log("getList")
                },
                save() {
                    console.log("add")
                }
            }
        02调用01的方法
            引入方法
            import m from "./01.js"
            调用方法
            m.getList()
            m.add()
    创建转码输出的文件夹 mkdir module_es5_2
    使用babel转为es5 babel module_es6_1 -d module_es5_2
    终端进入文件夹module_es5_2 执行命令node 02.js

七、webpack

概念

前端资源加载/打包工具
将多个静态资源文件js或css打包为一个文件，避免一个文件发送一次请求
一般在项目完成之后，部署之前使用

安装

npm install -g webpack webpack-cli
webpack -v

使用

创建js文件
    common.js
        exports.info = function(str) {
            document.write(str);
        }
    util.js
        export function add(a, b) {
            return a + b;
        }
    main.js 引入前两个文件并调用
        const common = require("./common");
        const util = require("./util");
        common.info("Hello Webpack" + util.add(2, 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"//输出文件名
        }
    }
终端进入webpack文件夹，执行命令webpack或webpack --mode=development 加上开发模式
    警告：WARNING in configuration
         The 'mode' option has not been set, webpack will fallback to 'production' for this value.
         Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    原因：没有设置打包的模式，可以设置为development或production
    默认使用生产模式生成的文件是一行显示的，开发环境生成的文件是有缩进的
测试
    创建html文件
    引入bundle.js
    打开浏览器运行
创建css文件style.css
    body {
        background-color: pink;
    }
在main.js中引入style.css
    //js可以省略，css不能省略
    require("./style.css")
安装css加载工具style-loader和css-loader
    npm install --save-dev style-loader css-loader
修改配置文件
    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 --mode=development

八、搭建项目前端页面环境

项目模式

B2C模式 角色有两个 管理员和普通用户
管理员 后台管理系统
    后端接口
    前端页面
普通用户 前台用户系统

使用框架搭建环境

选取框架进行环境搭建vue-admin-template
    使用100多k的压缩文件即可，900多k的压缩文件写好了更多的功能
    解压到工作区
    使用vscode终端打开解压的文件夹，执行命令npm install进行依赖的安装
        错误：npm ERR! code ELIFECYCLE
             npm ERR! errno 1
             npm ERR! node-sass@4.14.1 postinstall: `node scripts/build
        解决：是因为sass安装时获取源的问题，修改sass安装的源
             使用taobao的npm
             npm config set sass_binary_site=https://npm.taobao.org/mirror
    启动项目
        npm run dev
        输出提示：Your application is running here: http://localhost:9528
    前端页面环境说明
        入口：index.html
             src/main.js
        使用的框架vue-admin-template的实现主要基于vue和element-ui
        项目结构
            build 项目构建/编译的文件
            config 配置文件
                index 项目最基本的设置 ip 端口号
                    修改useEslint为false
                    eslint是一个整理代码格式的插件，太严格了，多的空格和换行也会报错
                dev.env
                    执行命令npm run dev时会执行这个文件
                    文件中包括要访问的后端接口地址
                prod.env
            node_modules 下载的依赖
            static 存放静态资源 一般不用
            src
                api 定义要调用的方法
                assets 静态资源 css js 图片
                components 组件 额外的框架/插件
                icons 图标
                router 路由
                store 脚本文件
                styles 样式文件
                utils 工具类
                views 具体的页面
            通常要改的是dev.env中的接口地址、src中的api、router、views
        框架实现了ajax请求的封装、es6和es5的转码等等功能
        我们要做的是定义api中的方法，写路由，到views的页面中调用方法，用element-ui显示
        点击登录按钮，访问的是框架默认的地址easy-mock，经常会访问不了，之后改为本地地址就可以了