实战：三

Vue的声明周期函数

<div id="app">
    {{msg}}
</div>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg:'hello'
        },
        created() { //在页面渲染之前执行
            debugger
            console.log('created.....')
        },
        mounted() {//在页面渲染之后执行
            debugger
            console.log('mounted.....')
        }
    })
</script>

Axios

axios是独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求。

new Vue({
        el: '#app',
        data: {
            userList:[]
        },
        created() { //在页面渲染之前执行
            //调用方法，得到返回json数据
            this.getList()
        },
        methods:{
            getList() {
                //使用axios方式ajax请求
                axios.get("user.json")
                    .then(response => {//请求成功
                        //console.log(response)
                        this.userList =  response.data.data.items
                        console.log(this.userList)
                    }) 
                    .catch(error => {
                        console.log(error)
                    }) //请求失败
            }
        }

Element-ui

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建。

官网：https://element.eleme.cn/#/zh-CN

Node.js

脱离浏览器环境也可以运行JavaScript，只要有JavaScript引擎就可以。

Node.js是一个基于Chrome V8引擎的JavaScript运行环境：即Node.js内置了Chrome的V8 引擎，可以在Node.js环境中直接运行JavaScript程序。

在Node.js中写JavaScript和在Chrome浏览器中写JavaScript基本没有什么不一样。哪里不一样呢？

Node.js没有浏览器API，即document，window的等。

加了许多Node.js 专属API，例如文件系统，进程，http功能。

BFF技术

一个前端页面向 Service A、Service B 以及 Service C发送请求，不同的微服务返回的值用于渲染页面中不同的组件。此时，每次访问该页面都需要发送 3 个请求。我们需要一个服务来聚合Service A、Service B 以及 Service C响应的数据，这个服务层叫做BFF。

BFF层的作用是让前端有能力自由组装后台数据，减少大量的业务沟通成本，加快业务的迭代速度。

无论是数据聚合还是数据剪裁，这类程序的特点是不需要太强大的服务器运算能力，但是对程序的灵活性有较高的要求，这两个特点都正好和Node.js的优势相吻合。

NPM包管理工具

什么是NPM

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。

#npm初始化
npm init
npm init -y #使用默认
#设置镜像
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

#下载依赖,如:下载jquery
npm install jquery
#如果安装时想指定特定的版本
npm install jquery@2.1.x
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或简写
npm i -D eslint
#一些命令行工具常使用全局安装的方式
npm install --global webpack
#或简写
npm install -g webpack

#根据package.json中的配置下载依赖，初始化项目
npm install

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

模块化开发

随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

实现

//这个一个模块
exportdefault {
getList() {
console.log('获取讲师列表')
    },
save() {
console.log('保存讲师')
    }
}
//在另一个模块中调用这个方法
import teacher from"./teacherApi.js" //首先引入这个模块，teacher是对象。
teacher.getList()
teacher.save()

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

使用babe来解决这个问题。

Babel

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。

这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。

#安装Babel
npm install -g babel-cli
#安装转码器
npm install -D babel-preset-es2015

创建一个转码配置文件.babelrc

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

使用命令进行转码

babel src -d dist

此时可以使用 node + dist中的src文件进行编译

Webpack

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

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

#安装
npm install -g webpack webpack-cli
或
npm install -g webpack
npm install -g webpack-cli

编写两个普通js

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

exports.info=function (str) {
    document.write(str)
}

创建配置文件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'//输出文件
    }
}

执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码打包

webpack --mode=development

测试

在html中引入bundle.js，即可完成测试。

CSS的打包

安装插件

npm install -D 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']
            }  
        ]  
    }
}

Vue开发

在router/index.js中添加需要使用的路由

设置跳转路径

component: () => import('@/views/dashboard/index')

在api文件夹中定义接口路径
在页面中使用axios进行调用，把接口返回的数据在页面中显示。

在router/index.js中添加需要使用的路由

//医院的基本增删改查。
  {
    path: '/hospSet',
    component: Layout,
    redirect: '/hospSet/list',
    name: '医院设置管理',
    Meta: { title: '医院设置管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '医院设置列表',
        component: () => import('@/views/hospSet/list'), //设置的跳转路径
        Meta: { title: '医院设置列表', icon: 'table' }
      },
      {
        path: 'add',
        name: '医院设置添加',
        component: () => import('@/views/hospSet/add'), //设置的跳转路径
        Meta: { title: '医院设置添加', icon: 'tree' }
      }
    ]
  }

在api文件夹中定义接口路径

import request from '@/utils/request'

export default {
  getHospSetList(current,limit,searchObj){
    return request({
      url:`/admin/hosp/hospitalSet/findPageHospSet/${current}/${limit}`,//通过``代码片段
      method:"POST",
      data:searchObj //使用json进行传递
    })
  }
}

在页面中引入api中的js

<template>
<div></div>
</template>

<script>
    import hospSet from "@/api/hospSet";
    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            //这里存放数据
            return {
                current: 1,
                limit: 3,
                searchObj:{},
                list:[]
            };
        },
        //监听属性 类似于data概念
        computed: {},
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            getList:function(){
                hospSet.getHospSetList(this.current,this.limit,this.searchObj)
                    .then(response=>{
                    console.log(response.data)
                })
                    .catch(response=>{
                    console.log(response)
                })
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            this.getList();
        }
</script>

访问时记得处理跨域问题。

出现如下任何一种情况都会出现跨域问题
- 域名不同
- 访问协议不同
- 端口号不同
简单的解决方法是在Controller类上使用@CrossOrign注解