学习自：【黑马程序员Java项目实战《苍穹外卖》，最适合新手的SpringBoot+SSM的企业级Java项目实战】https://www.bilibili.com/video/BV1TP411v7v6?vd_source=9fed3cefc266aa5b3895aaab6e6214f5

本文是基于上述视频教程和视频配套文档的文字总结。

VUE框架介绍

Vue适用于场景丰富的Web前端框架。

VUE是一套构建用户界面的渐进式框架。渐进式框架允许开发者根据项目需求逐步引入和使用其他功能的框架，而不需要一次性使用框架的全部特性。

常见的渐进式框架有：Vue，React，Angular

基于脚手架创建前端工程

我们要使用Vue，必须具备以下环境：

node.js 前端项目运行的环境

npm JavaScript的包管理工具

Vue CLI 通过交互式的图形化界面来创建Vue工程

npm install @vue/cli -g

接下来要创建项目，我们有两种方式创建vue项目。在创建项目之前，要将路径切换到要创建项目的目录处。

第一种：vue create project_name

第二种: vue ui

在创建项目过程中，我们可以选择router，vuex以及TS，版本号选择Vue3。创建完成之后，我们来看下项目的基本结构。

node_modules: 当前项目依赖的js包

assets: 静态资源的存放目录

components: 公共组件存放目录

router/index.ts: 路由配置文件

App.vue: 项目的主组件，页面的入口文件

main.ts: 整个项目的入口文件

packge.json: 项目的配置信息，依赖包管理

vue.config.js: vue-cli配置文件（配置代理等）

然后我们就可以启动项目了。

1
npm run serve

Vue基本使用方式

  1. vue组件

由三部分组成。

<template>负责编写HTML代码，用来展示页面的结构。

<Style>负责编写CSS代码，用来控制页面展示效果，展示样式。

<script> 负责编写JS代码，用来控制模板的数据来源和行为。编写逻辑。

  1. 文本插值

用来绑定data方法返回的对象属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
    <div>
        <h1>{{ name }}</h1>
        <h1>{{ age > 60 ? '老年' : '青年' }}</h1>
    </div>
</template>
<script>
    export default {
        data() {
            return { name: '张三', age: 30 };
        }
    };
</script>
  1. 属性绑定

为标签的属性绑定data方法中返回的属性。

用法：v-bind:xxx，简写为 :xxx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
    <div>
        <div><input type="text" v-bind:value="name"></div>
        <div><input type="text" :value="age"></div>
        <div><img :src="url"/></div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            name: '王五',
            age: 20,
            src: 'https://www.itcast.cn/2018czgw/images/logo2.png'
        };
    }
}
</script>
  1. 事件绑定

为元素绑定对应的事件

用法：v-on:xxx 简写为@xxx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
    <div>
      <div>
        <input type="button" value="保存" v-on:click="handleSave"/>
        <input type="button" value="保存" @click="handleSave"/><br>
      </div>
    </div>
  </template>
<script>
export default {
    data(){ return { name: ‘张三’}
    },
    methods: {
        handleSave(){
            alert(this.name)
        }
    }
}
</script>
  1. 双向绑定

表单输入项和data方法的返回值进行双向绑定，任何一方的改变都会同步的影响到另一方

用法： v-model

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
    <div>
        <div>
            双向绑定：{{ name }}
            <input type="text" v-model="name" />
            <input type="button" value="改变" @click="handleChange"/>
        </div>
    </div>
  </template>
<script>
export default {
    data(){return {name: '张三'}
    },
    methods: {
        handleChange(){
            this.name = '李四'
        }
    }
}
</script>
  1. 条件渲染

用来根据不同的条件，展示不同的结果，动态渲染页面元素

用法：v-if，v-else-if，v-else 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
    <div>
        <div v-if="sex == 1">
            男
        </div>
        <div v-else-if="sex == 2">
            女
        </div>
        <div v-else>
            未知
        </div>
    </div>
  </template>
  
<script>
export default {
    data(){
        return {sex: 1}
    }
}
</script>
  1. axios

axios是一个基于Promise的网络请求库，发出异步请求，作用于浏览器和node.js

安装命令： npm install axios

在<script>中导入axios，import axios from ‘axios’

axios的统一使用方式，axios(config)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
axios(
    method:'post', // 默认为get
    url: 'localhost:8080/admin/employee/login', // url必须，其他非必须
    data: { // 请求体
        firstName: 'value',
        secondName: 'value'
    },
    params: { // 请求参数
        id: 1,
        page: 1,
        pageSize: 10
    }

)

为了解决前后端的跨域问题，我们要在vue.config.js中配置代理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070,
    proxy: {
      '/api': { # 前端带有/api的请求会被转发到后端的8080端口
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '' # 请求路径去除/api，只包含/api后面的路径
        }
      }
    }
  }
})

路由Vue-Router

vue-router介绍

什么是路由？

所谓的路由，就是根据浏览器的路径不同，用不同的视图组件替换这个页面的显示内容。

vue应用中如何实现路由？

通过vue-router实现路由，需要安装js库（如果创建项目的时候没有选择router组件的话），npm install vue-router

路由配置

路由组成？

VueRouter路由器：根据请求的路径在路由视图中渲染对应的视图组件。

<router-link>路由链接：对应超链接，浏览器会解析成<a>。

<router-view>路由视图：用来展示与路由路径匹配的视图组件。路由视图其实就是一个占位符，它写在哪里，视图组件就在哪里展示。即用来控制路由视图组件展示的位置。

以下是三者的关系图：

路由跳转方式？

标签式。即在html代码中写入<router-link to="/">。

编程式。通过this.$router.push(‘/emplpyee’)进行跳转。两种方式如下图所示。

嵌套路由

如果我们的一个组件内要切换内容，就要用到嵌套路由，也叫子路由。

在配置router.ts的时候，使用children属性进行配置。如下图。

状态管理Vuex

vuex是什么？

vuex是vue.js的状态管理库。

vuex可以在多个组件之间共享数据，共享数据是响应式的，即数据的变更能够即使渲染到模板上去。

vuex采用集中式管理所有组件的状态。

如何使用vuex?

state：在store对象的state属性中定义共享数据。

mutations：在store对象的mutations属性中修改共享数据，且只能包括同步操作。

actions：类似于mutations，不过它可以包含异步操作，但是必须通过调用mutations属性中的函数才能修改共享数据。

引用state中的数据时，通过类似于插值表达式的方式引用。

在调用mutations属性中的方法时，不能直接调用，必须通过this.$store.commit(函数名称，参数)来调用。

在调用actions属性中的方法时，不能直接调用，必须通过this.$store.dispatch(函数名称，参数)来调用。

如下两个图为演示图。

TypeScript

TypeScipt是什么？

它是微软推出的一门语言，是JavaScipt语言的超集，换句话说，JS有的TS都有。但是TS新增了对数据类型的支持，在使用时要显示声明数据的类型。

TS需要编译成JS代码才能运行，在编译的时候会进行类型的擦除。也就是说，我们的前端项目打包后，看到的都是编译后的JS代码，没有原来的TS代码了。这样做的好处是，我们在编写代码的时候就能检查出是不是有类型或者说代码的的错误，方便了我们排查bug。

通过tsc xxx.ts进行编译。之后，node xxx.js运行。

TS和JS的区别在哪？

TS是静态类型语言,相同变量只能作用相同的类型。

JS是动态类型语言，这意味着相同的变量可作用不同的类型。

静态类型语言：TS，Java，C/C++，C#

动态类型语言：Python，JavaScript

TS常用的数据类型：

类型 例子 备注
字符串类型 string
数字类型 number
布尔类型 boolean
数组类型 number[],boolean[]等
任意类型 any 相当于回到了没有类型的时代
复杂类型 type与interface
函数类型 （）=> void 对函数的参数和返回值进行说明
字面量类型 “a”|”b”|”c”
class类 class Animal

类型标注的位置？

变量，函数参数，函数的返回值

1
2
3
4
5
6
7
8
let msg:string = 'hello ts'
console.log(msg)

// ts的箭头函数
let sum = (a:number,b:number) : number => {
    return a + b;
}
console.log(sum(10,11))

常用数据类型举例

  1. interface类型，它让TS具有了JS所缺少的描述复杂数据结构的能力。
1
2
3
4
5
6
7
8
// 定义一个接口，名字为Cat
interface Cat{
    name: string,
    age: number
}
// 定义Cat类型的变量
const c1:Cat = {name:"qinyi",age:22}
const c1:Cat = {name:"qinyi"} 或者 const c1:Cat = {name:"qinyi",age:22,sex:1}

缺少或者有多余的属性都会报错，在编写代码的时候就会检查出来。
可以在属性后面加上”?“，表示当前属性可选。

  1. class类型

    使用 class 关键字来定义类，类中可以包含属性、构造方法、普通方法等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 定义接口
interface Animal{
    name:string,
    eat():void
}


// 定义一个类，实现上面的接口
class Bird implements Animal{
    name:string;
    constructor(name:string){
        this.name = name
    }
    eat():void {
        console.log(this.name + ' eat')
    }
}

// 创建类型为Bird的对象
const b1 = new Bird("杜鹃")
console.log(b1.name)
b1.eat()


// 定义Parrot类，并且继承Bird类
class Parrot extends Bird{
    say():void {
        console.log(this.name + ' say hello')
    }
}

const myParrot = new Parrot("Polly")
myParrot.eat()
myParrot.say()