谷粒学院项目实战04——讲师管理模块前端基础(下）

讲师管理模块前端基础(下）
4.axios
5.element-ui
6.node.js
7.npm
8.babel转码器
9.模块化
9.1 es5的模块化
9.2 es6的模块化
10.webpack
10.1 打包js文件
10.2 打包css文件
11.vue-admin-template
11.1 前端页面搭建
11.2 前端框架介绍
11.3 前端框架登录问题

4.axios

axios经常与vue配合使用，实现ajax操作。axios的使用场景参考下图。

使用axios需要依赖axio.min.js.如果找不到资源可以参考https://blog.csdn.net/weixin_43274097/article/details/106570717。

下面示例axios的使用步骤。

(1)html文件导入依赖。

代码语言：javascript复制

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

(2)创建json.data文件手动构建json数据(非必要，实际开发是后端传数据)

代码语言：javascript复制

{
    "success":true,
    "message":"成功",
    "data":{
        "items":[
            {"name":"ez","age":9,"sex":"F"},
            {"name":"az","age":81,"sex":"F"},
            {"name":"wz","age":19,"sex":"M"}
        ]
    },
    "code":10000
}

(3)axios接受数据并处理。

完整的html文件代码如下。

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            // 固定的结构
            data: { // 定义变量和初始化数据
                "userList":[]
            },
            created() { //在页面渲染前调用定义的方法
                this.getUserList()
            },
            methods: { // 定义具体方法
                getUserList(){
                    // 数据通过get()方法传递，axios.get("请求接口/文件路径")
                    axios.get("data.json")
                    .then( // 箭头表达式
                        response => {console.log(response)}
                    ) 
                    .catch( error => {}) 
                }
            }
        })
    </script>
</body>

</html>

在console中可以看到数据的具体的层级结构，而这写数据都可以在response中拿到。

代码稍微改造下(对拿到的数据进行具体的展示)。

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <table border="1">
            <thead>
                <tr>
                    <td>name</td>
                    <td>age</td>
                    <td>sex</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in userList">
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>{{user.sex}}</td>
                </tr>      
            </tbody>
        </table>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            // 固定的结构
            data: { // 定义变量和初始化数据
                "userList":[]
            },
            created() { //在页面渲染前调用定义的方法
                this.getUserList()
            },
            methods: { // 定义具体方法
                getUserList(){
                    // 数据通过get()方法传递，axios.get("请求接口/文件路径")
                    axios.get("data.json")
                    .then( // 箭头表达式, reponse名字也可以替换成其他，它包含我们通过axios拿到的数据
                        // response => {console.log(response)}
                        response =>{
                            this.userList=response.data.data.items
                            console.log(this.userList)}
                    ) 
                    .catch( error => {}) 
                }
            }
        })
    </script>
</body>

</html>

可以看到数据被成功拿到了(...要点一点才会出现具体的数据)。

同时，页面中也展示了我们的数据，漂漂亮亮的。

5.element-ui

饿了么推出的基于vue的组件库，提供了丰富的样式效果。可以查阅官网快速上手，边用边学，直接根据需求将组件整合到项目中，https://element.eleme.cn/#/zh-CN/component/quickstart。

6.node.js

就像jdk作为运行java的环境，node.js是一个JavaScript的运行环境。在之前我们都是通过浏览器来运行JavaScript代码，而node.js使JavaScript不需要浏览器也能够运行。node.js还具有模拟服务器的效果，比如模拟tomcat。从官网https://nodejs.org/zh-cn/可以下载node.js，建议默认安装到c盘(安装到其他盘可能会出现问题)。

在控制台输入node -v如果能够成功的显示版本号，则说明安装成功。本教程安装版本为10.14.2.

跑一个hello，world吧，编一个01.js文件。

代码语言：javascript复制

console.log("hello,node.js!")

命令行执行。

代码语言：javascript复制

node 01.js

是不是很像最开始执行java代码的方式。其实node.js本质上底层使用的就是谷歌的一个引擎。

在vscode中右键一个文件可以选择在终端打开，这样就不用每次跑到cmd去运行文件了。在vscode中使用node.js可能会遇到在vscode的终端输入node -v出现红色提示。

解决方法为关闭vscode，右键点击vscode执行文件选择属性，勾选以管理员运行，如下图。

如果还没有出现版本号，先通过cmd输入命令，确认node.js安装成功，已成功的情况下可以重启电脑，即可解决问题。

7.npm

相当于后端管理jar包的maven，npm(node package manager)是前端依赖(主要为js)的版本工具。在node.js的安装目录下，就已经包含了npm。

(1)初始化

工作目录下新建npmdemo，在对应路径下执行终端命令npm init，一路回车确认(也可以使用npm init -y命令，直接使用默认配置无需回车)，会生成一个package.json文件,这个文件就是一个版本管理文件，类似于pom.xml。

(2)配置镜像

使用淘宝的镜像使下载依赖更快速。

代码语言：javascript复制

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

查看镜像配置是否成功

代码语言：javascript复制

 npm config list

可以看到镜像配置成功了。

(3)下载依赖

执行命令，下载jquery。

代码语言：javascript复制

 npm install jquery

下载成功后目录是这样子的。

在npmdemo下的package.json中多出来下面内容。

代码语言：javascript复制

"dependencies": {
    "jquery": "^3.6.0"
}

说明npm帮我们下载了最新的3.6.0版本的jquery。

同时发现多生成了一个新文件package-lock.json，这是用来锁定当前项目依赖的版本的。比如说我们通过git来协作编程，就可以通过这个文件来锁定不同开发者所下载的js依赖版本。

在项目路径下，使用npm install命令可以根据package.json下载所有依赖。

8.babel转码器

babel能把es6的代码转为es5，使其能够具有更好的浏览器兼容下。

(1)下载babel

代码语言：javascript复制

npm install --global babel-cli

参数--global为全局安装，将使babel可以在所有项目中都可以使用。

查看是否下载成功。

代码语言：javascript复制

babel --version

出现下面提示信息。

参考博客PowerShell：因为在此系统上禁止运行脚本，解决方法 - 简书 (jianshu.com)解决。

(2)转码测试

先新建目录es6demo/es6，编写一个es6的01.js文件，下面代码中箭头函数是典型的es6语法。

代码语言：javascript复制

let input=[1,2,3]
input = input.map(item => item 1)
console.log(input)

在项目目录创建.babelrc配置文件。

代码语言：javascript复制

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

安装es转码器。使用--save-dev参数使其作用范围为在本项目使用即可。

代码语言：javascript复制

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

下载成功后项目的node_modules目录如下图。

使用命令将es6下的01.js转码为vs5，保存在dist下。

代码语言：javascript复制

babel es6/01.js -o dist/01.js

生成的es5文件如下.

代码语言：javascript复制

"use strict";

var input = [1, 2, 3];
input = input.map(function (item) {
  return item   1;
});
console.log(input);

也可以根据文件夹进行转码。

代码语言：javascript复制

babel es6 -d dist

9.模块化

在后端中：controller->service->mapper的过程被称为模块化，它指的是类与类之间分工分层，然后依次调用的情况。在前端中，js文件之间互相调用的过程为模块化。

9.1 es5的模块化

如下图建立目录结构并执行npm init。

编写01.js代码。

代码语言：javascript复制

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

// 设置哪些方法可以被调用
module.exports = {
    sum,
    subtract
}

在02.js中调用01.js的方法。

代码语言：javascript复制

// 引入文件
const m = require('./02.js')

console.log(m.sum(5,8))
console.log(m.subtract(5,8))

9.2 es6的模块化

注意，es6的模块化代码无法直接在node.js环境下运行，而要先通过babel转码为es5代码才能在node.js环境下运行。

在之前的babeldemo目录下(已经做了babel的配置)新建文件夹es6，并在es6下新建01.js。

代码语言：javascript复制

// 定义方法
export function getList() {
    console.log("getList...")
}

export function getUser() {
    console.log("getUser...")
}

在es6下新建02.js。

代码语言：javascript复制

// 调用01.js的方法
import { getList, getUser } from "./01.js";

getList()
getUser()

在node下运行报错。这是因为我们使用了es6的语法，不能被识别了。

新建文件夹加es6_5，将es6的语法转为es5.

代码语言：javascript复制

babel es6 -d es6_5

在es6_5下执行就可以输出我们方法中的信息了。

当然es6语法可以让01.js更简洁。

代码语言：javascript复制

export default {
    getList(){
        console.log("getList...")
    },
    update() {
        console.log("update...")
    }
}

02.js对应这么写，通过别名调用方法。

代码语言：javascript复制

// 调用01.js的方法
import m from "./01.js";

m.getList()
m.update()

10.webpack

WebPack是一个前端静态资源打包工具，它可以把多个静态资源打包成为1个，减少页面资源请求次数。

10.1 打包js文件

(1) 安装webpack

下面新建文件目录webpackdemo，在该路径下执行npm init -y，然后安装webpack。

代码语言：javascript复制

npm install -g webpack webpack-cli

查看成功否。

代码语言：javascript复制

webpack -v

(2)创建资源文件

如下图目录结构创建三个资源文件。

commons.js.

代码语言：javascript复制

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

utils.js.

代码语言：javascript复制

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

main.js

代码语言：javascript复制

const common = require("./common.js")
const utils = require("./utils")

common.info("hello,webpack"   utils.add(500,20))

(3)打包

在webpackdemo下新建webpack.config.js。配置webpack打包信息。(记得创建输出文件夹)

代码语言：javascript复制

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' //输出文件
    }
}

执行打包命令，成功后会生成bundle.js。

代码语言：javascript复制

webpack # 有黄色警告
webpack --mode=development # 没有警告

编写test.html文件用于测试。右键浏览器打开即可看到js中输出的内容。

代码语言：javascript复制

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

10.2 打包css文件

(1)创建css文件

src下新建style.css.

代码语言：javascript复制

body{
    background-color: brown;
}

main.js中导入。

代码语言：javascript复制

require("./style.css")

(2)下载插件

代码语言：javascript复制

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

(3)创建配置文件

代码语言：javascript复制

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' //输出文件
    },
    module: {
        rules: [
            {
                test: /.css$/,        //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

(4)执行打包，请读者自测。

11.vue-admin-template

11.1 前端页面搭建

我们使用vue-admin-template作为前端的模板。下载地址：下载仓库 · 花裤衩/vue-admin-template - Gitee.com。将其解压并复制到工作区vs1010(选择自己的工作区即可).

看下目录结构，里面有个package.json文件，执行npm install安装依赖文件。

如果下载失败则删除下载的文件重新下载，下载成功后会生成node_modules,里面保存了依赖。

使用npm run dev启动项目。

前端页面是这样的。

前端的入口文件是index.html与main.js.可以关注下这两个文件的内容。

11.2 前端框架介绍

(1) 入口文件

main.js其实就是一个导入了很多外部框架的Vue文件。

代码语言：javascript复制

import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

在public下的index.html其实就是放了个div块(如果你用的vue-admin-template与我的下载地址不同，文件位置可能不一样)

代码语言：javascript复制

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

(2) 主要集成技术

vue element-ui

(3) 目录结构

build目录。放项目构建的脚本文件。

config目录。放项目配置文件。里面有index.js，将其中useEslint改为false。这个插件是用于帮助我们检查代码的，但其检查太过于严格了，使用的意义不大。config目录下还有个dev.env.js文件，可以用来配置后端的接口地址。

src目录。

11.3 前端框架登录问题

前端页面登录的url经常会挂掉，后面要改为本地地址。

json webpack npm axios babel

0 人点赞

谷粒学院项目实战04——讲师管理模块前端基础(下）

讲师管理模块前端基础(下）4.axios5.element-ui6.node.js7.npm8.babel转码器9.模块化9.1 es5的模块化9.2 es6的模块化10.webpack10.1 打包js文件10.2 打包css文件11.vue-admin-template11.1 前端页面搭建11.2 前端框架介绍11.3 前端框架登录问题

4.axios

5.element-ui

6.node.js

7.npm

8.babel转码器

9.模块化

9.1 es5的模块化

9.2 es6的模块化

10.webpack

10.1 打包js文件

10.2 打包css文件

11.vue-admin-template

11.1 前端页面搭建

11.2 前端框架介绍

11.3 前端框架登录问题

讲师管理模块前端基础(下）
4.axios
5.element-ui
6.node.js
7.npm
8.babel转码器
9.模块化
9.1 es5的模块化
9.2 es6的模块化
10.webpack
10.1 打包js文件
10.2 打包css文件
11.vue-admin-template
11.1 前端页面搭建
11.2 前端框架介绍
11.3 前端框架登录问题