Vue.js

最新推荐文章于 2024-07-23 21:45:00 发布

老庄发电机

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量176

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_71222496/article/details/129172394

版权

这里写自定义目录标题

1、Vue的认知
2、Vue的语法
- 2、1：创建Vue对象
- 2、2：插值表达式
3、Vue的基本语法
- 3、1 分支结构
- 3、2：v-show
- 3、3：循环结构
- 3、4：属性绑定v-model
- 3、5：属性绑定 v-bind
- 3、6 事件绑定
- 3、7：计算属性---了解
4、Vue的组件化开发
- 种类1：全局注册的组件
- 种类2：本地注册的组件
- 组件的生命周期
5、Vue脚手架的搭建
6、配置IDEA的Vue开发环境
7、Vue项目的目录结构
8、组件开发
9、组件之间的传值
9、1：把父组件中变量的值传递到子组件中
- 9、2：把子组件的值，传递到父组件中
10、路由
- 10、1 路由的基本使用
- 10、2：路由传参
11、Vue的AJAX请求
12、在webpack项目下添加、使用Element UI组件
- 12、1 Element UI组件库：
13、综合案例
- 13、1 后台：数据接口，springboot整合mybatis
- - 13.1.1：新建mave项目
  - 13.1.2：添加依赖
- 13、2 前端：Vue+ElementUI
14、条件查询
- 14、1：在Dept组件中，构建查询条件视图
- 14、2 绑定的变量
14、3：请求条件查询
15、添加部门
16、修改部门
17、删除部门

1、Vue的认知

是一个双向绑定的JavaScript框架，是一个基于MVVM模型的框架

M：model 指的是页面中的JavaScript

V：view 页面 html

VM:vue的对象通过vue的VM对象把JavaScript和html页面关联在一起，简化JavaScript开发。

简单案例，初始Vue:

1、新建web项目

2、导入vue的js库

本地导入：需要下载文件，把文件存放到项目的某个目录下，然后在页面中引入

cdn引入：远程引入，速度更快

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

3、要声明一个JavaScript变量，并且赋值，然后把变量的值，赋值给页面上的一个p标签

Vue的原理：通过Vue的vm对象把页面中的标签和JavaScript中的变量进行双向绑定

使用的观察者设计模式实现

AngularJS

简单介绍一下，AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
ReactJS

React引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。
微信小程序

微信小程序的视图层和数据层就是通过MVVM进行绑定的。

2、Vue的语法

vue的开发方式有两种：

方式1：引入vue.js（本地引入，cdn远程引入）—使用的较少

方式2：脚手架开发注解下载vue所需的各种环境，创建各个目录 —主要使用

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

2、1：创建Vue对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>创建Vue对象</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head> 
	    <!--vue开发首先要定义一个父容器-->
		<div id="box">
			{{zhang}}
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div id="test">
			<p>{{zhang}}</p>
		</div>
		<script>
			//创建Vue对象,可创建多个
			var v1=new Vue({
				el:"#box", //el  就是Vue对象要操作的容器，注意，容器必须加上选择器标识
				data:{  //在vue中声明变量必须放在data中，而且是json格式
					zhang:"中丛鑫",
					wang:"王镇",
					stus:["aaa","bbb","ccc"],
					age:20,
					isPass:true,
					pi:3.14
				}
			});
			new Vue({
				el:"#test",
				data:{
					zhang:"小张"
				}
			})
		</script>
	<body>
	</body>
</html>

2、2：插值表达式

只能用在开始标签和结束标签之间，用于输出js中变量或函数的返回值

语法结构：{{变量、函数}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插值表达式</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<p>{{meg}}</p>
			<p>年龄：{{age}}</p>
			<p>考研是否通过？{{isPass}}</p>
			<p>整个数组{{stus}}</p>
			<p>数组里的第二个值:{{stus[1]}}</p>
			<p>大野json对象的值{{daye}}</p>
			<p>大野的信息的名字：{{daye.stuName}}</p>
			<p>使用插值表达式调用方法：{{sayHi()}}</p>
			<p>使用插值表达式调用无返回值的方法：{{sayHi2()}}</p>
			<p>插值表达式做计算：{{num1+num2}}</p>
			<br />
			<!--以下不可以-->
			<input type="text" value={{meg}} />
		</div>
		<script>
			new Vue({
				el:"#box",
				data:{
					meg:"我在学习插值表达式", //字符串
					age:20, //数值
					isPass:true, //布尔值
					stus:["aaa","bbb","ccc"], //数组
					daye:{stuNo:"qf001",stuName:"钱大野",age:18},
					num1:10,
					num2:10
				},
				methods:{
					//声明方法
					sayHi:function(){
						return "你好！";
					},
					sayHi2:function(){
						alert("大家好！");
					}
				}
			})
		</script>
	</body>
</html>

3、Vue的基本语法

3、1 分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分支结构</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<p v-if="week==1">
				星期一
			</p>
			<p v-if="week==2">
				星期二
			</p>
			<p v-if="week==3">
				星期三
			</p>
			<p v-if="week==4">
				星期四
			</p>
			<p v-else-if="week==5">
				星期五
			</p>
			<p v-if="isPass">
				考研通过
			</p>
			<p v-else="isPass">
				继续二战
			</p>
		</div>
		<script>
			new Vue({
				el:"#box",
				data:{
					week:6,
					isPass:false
				}
			})
		</script>
	</body>
</html>

3、2：v-show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-show</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<p v-show="isPass">
				考研上岸
			</p>
			<p v-show="isPass1">
				继续二战
			</p>
		</div>
		<script>
			new Vue({
				el:"#box",
				data:{
					isPass:true,
					isPass1:false
				}
			})
		</script>
	</body>
</html>

【面试题】v-if v-show 的区别？

v-if 通过标签的创建、删除方式来控制标签的显示、隐藏

v-show 通过display的显示、隐藏方式来控制标签的是否可见。

当标签频繁的显示、隐藏时，使用v-show效率会更高。

3、3：循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>循环结构</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li v-for="(p,i) in poem">索引值：{{i}}---{{p}}</li>
			</ul>
		</div>
		<script>
			new Vue({
				el:"#box",
				data:{
					poem:["床前明月光","疑是地上霜","举头望明月","低头思故乡"]
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>循环结构</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li v-for="(p,i) in poem">索引值：{{i}}---{{p}}</li>
			</ul>
			<hr />
			张丛鑫信息如下：
			<!--
				参数1:v 名字任意，存放从json对象中取出到的第一个键值对里的值
				参数2：k 名字任意，存放从json对象中取出到的第一个键值对里的key
				参数3：i 名字任意，存放取出的键值对的索引
			-->
			<p v-for="(v,k,i) in zhang">{{i}}    键：{{k}},值:{{v}}</p>
		</div>
		<script>
			new Vue({
				el:"#box",
				data:{
					poem:["床前明月光","疑是地上霜","举头望明月","低头思故乡"],
					zhang:{name:"张丛鑫",gender:"男",age:20,addr:"辽宁大连"}
				}
			})
		</script>
	</body>
</html>

声明一个JSON对象数组：

外层循环：遍历数组，取出数组里的各个元素

内存循环：遍历每个元素的各个属性

3、4：属性绑定v-model

v-model:把js中的变量和表单标签的value进行双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-model</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<p>账号:<input type="text" v-model="userId" /></p>
			<p>密码:<input type="password" v-model="pwd" /></p>
			<p>昵称:<input type="text" v-model="nick" /></p>
			<input type="button" value="注册" @click="register()" />
		</div>
		<script>
			new Vue({
				el:"#box",
				data:{
					userId:"1001",
					pwd:"",
					nick:""
				},
				methods:{
					register:function(){
						//把变量的值弹出显示
						alert("账号:"+this.userId+",密码："+this.pwd+",昵称："+this.nick);
					}
				}
			})
		</script>
	</body>
</html>

3、5：属性绑定 v-bind

把标签的属性值(表单标签的value属性除外)和JavaScript的变量进行双向绑定

在这里插入图片描述

3、6 事件绑定

在开始标签中 v-on:事件名=“函数名(参数)”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件绑定</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<p>
				账号：<input type="text" v-model="userId"/>
			</p>
			<p>
				密码：<input type="password" v-model="pwd" />
			</p>
			<p>
				<input type="button" value="注册" v-on:click="reg()" />
				<input type="button" value="注册2" @click="reg()" />
				<input type="button" value="调用有参函数" @click="com(1,2)" />
				<input type="button" value="调用有参、有返回值的函数" @click="com2(1,2)" />
			</p>
		</div>
		<script>
			new Vue({
				el:"#box",
				data:{
					userId:"",
					pwd:"",
					num1:10
				},
				methods:{
					reg:function(){
						alert("账号:"+this.userId+",密码："+this.pwd);
					},
					com:function(num1,num2){ //有参函数
						//访问data里声明的变量，必须使用this.变量名的方式
						
						var result=num1+num2+this.num1;
						alert(result);
					},
					com2:function(num1,num2){
						return num1+num2;
					}
				}
			
			})
		</script>
	</body>
</html>

3、7：计算属性—了解

本质就是函数，对函数的处理结果进行缓存，当下次进行同样的函数调用时，无需再次执行函数里的代码，直接返回缓存中的结果。对相同的调用提升调用效率。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算属性</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="box">
			
			<p>
				调用计算属性的结果:{{com1}}
			</p>
			<p>
				再次调用计算属性：{{com1}}
			</p>
		</div>
		<script>
			new Vue({
				el:"#box",
				data:{
					meg:""
				},
				methods:{
					
				},
				computed:{ //声明计算属性
					//要求：无参数，有返回值
					com1:function(){
						var result=1+5;
						return result;
					}
				}
			})
		</script>
	</body>
</html>

4、Vue的组件化开发

Vue是单页面，默认只有一个index.html页面，使用组件进行开发，所谓的组件就是标签、样式、javascript代码的一个集合体。在页面中使用各个组件。

Vue的组件分两种

种类1：全局注册的组件

组件是独立声明的，不在任何一个new出的Vue对象内部，各个Vue对象都可以使用这个组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全局注册的组件</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<!--使用组件,通过组件的名字来使用-->
			<login></login>
			<hr />
			<login></login>
		</div>
		<div id="java2204">
			<login></login>
		</div>
		<script>
			//1、先定义组件---全局组件
			//component函数中有两个参数
			//参数1：组件的名字，任意
			//参数2：具体定义的组件内容，是json格式 key是关键字
			Vue.component("login",{
				//通过template来声明组件里的显示
				template:"<div><p>账号：<input type='text' v-model='userId'/></p><p>密码：<input type='password' v-model='pwd'/></p><p><input type='button' value='登录' @click='login()'/></p></div>",
				data:function(){ //组件里声明变量
					return{
						userId:"",
						pwd:""
					}
				},
				methods:{
					login:function(){
						alert("登录！");
					}
				}
			});
			
			new Vue({
				el:"#box"
			})
			new Vue({
				el:"#java2204"
			})
		</script>
	</body>
</html>

种类2：本地注册的组件

声明在某个Vue对象的内容，只能被这个Vue对象使用，其他Vue对象不能使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>本地注册的主键</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<login></login>
		</div>
		<div id="java2204">
			<login></login>
		</div>
		<script>
			new Vue({
				el:"#box",
				components:{  //声明组件
					login:{  //login名字自定义，是组件的名字
						template:"<div><p>账号：<input type='text' v-model='userId'/></p><p>密码：<input type='password' v-model='pwd'/></p><p><input type='button' value='登录' @click='login()'/></p></div>",
						data:function(){ //组件里声明变量
							return{
								userId:"",
								pwd:""
							}
						},
						methods:{
							login:function(){
								alert("登录！");
							}
						}
					},
					reg:{
						
					}
				}
			});
			new Vue({
				el:"#java2204"
			})
		</script>
	</body>
</html>

组件的生命周期

生命周期：

bean servlet

组件的生命周期特别重要，因为需要在生命周期的不同阶段，做不同的事情

例如：在组件加载完成后，发出AJAX请求，填充某个下拉列表数据

1、开始创建组件之前 beforeCreate()

2、已经开始创建created()

3、创建完成之前beforeMount()

4、创建完成之后mounted() 重要

5、跟新组件的数据之前beforeUpdate()

6、更新之后updateed()

7、销毁之前beforeDestroy()

8、销毁之后destroyed()

5、Vue脚手架的搭建

把Vue需要的环境进行本地部署，创建需要的一些目录结构，方便Vue开发。

1、下载、安装node.js 使用node.js里的命令才能安装脚手架

双击安装，注意：不要有中文路径，一路下一步即可

2、检测一下是否安装成功

进入cmd的命令窗口:node -v 查看版本号，如果显示版本号，则安装成功

3、可以使用node.js命令进行脚手架的安装

npm install vue-cli -g

-g 全局安装，安装了vue-cli命令程序后，在电脑的任何位置都可以使用vue-cli的命令

安装过程如下：
在这里插入图片描述
如果因为太慢，导致安装失败，就需要更改安装源，改为taobao的安装源

npm install -g cnpm --registry=https://registry.npm.taobao.org

改完安装源后使用如下命令安装vue-cli

cnpm install vue-cli -g npm install vue-cli -g

4、输入命令 vue list 查看项目的类型
在这里插入图片描述
主要使用的是webpack项目类型

说明vue-cli命令安装成功了！

5、手动创建一个项目目录：存放vue项目的文件夹，进入到此文件夹，在地址栏输入cmd打开命令行程序

5、输入命令初始化项目

vue init webpack 项目名

6、操作提示见如下：
在这里插入图片描述
7、下载成功

8、进入到项目目录下，在地址栏输入cmd命令

输入命令 npm run dev

启动vue服务

出现如下界面就成功！

在这里插入图片描述

6、配置IDEA的Vue开发环境

由于vue是组件化开发，扩展名.vue IDEA需要配置后才能支持组件的创建

在这里插入图片描述
配置IDEA,让其识别.vue格式的文件

在这里插入图片描述
使用IDA打开vue项目

在这里插入图片描述

7、Vue项目的目录结构

在这里插入图片描述

8、组件开发

1、新建组件

2、编辑组件

【注意】组件的template部分，有且仅有一个根标签

<template>
  <div id="box">
    <p>
      账号：<input type="text" v-model="userId"/>
    </p>
    <p>
      密码：<input type="password" v-model="pwd"/>
    </p>
    <p>
      <input type="button" value="登录" @click="login()"/>
    </p>
  </div>
</template>

<script>
    export default {
        name: "Login",
        props:{ //声明组件需要的变量,变量格式是JSON
            userId:{
                type:String,  //变量的类型
                required:true, //必须有值，不能为空
                default:"1001" //设置默认值
            },
            pwd:{
                type: String,
                required: true,
                default: ""
            }

        },
        methods:{ //声明函数
            login:function () {
                alert("登录！");
            }
        }
    }
</script>

<style scoped>

</style>

3、在全局配置文件main.js文件中注册组件

分两步：导入、注册

在这里插入图片描述

9、组件之间的传值

通常在一个组件中会使用另一个组件，例如在App.vue组件中，使用了Login.vue这个组件，外部的App.vue称为父组件，被引用的组件就是子组件。

父子组件之间如何传递值？

9、1：把父组件中变量的值传递到子组件中

1、在子组件中声明变量
在这里插入图片描述
2、在父组件中

9、2：把子组件的值，传递到父组件中

1、在子组件中声明一个“抽象”函数
在这里插入图片描述
2、在父组件中，“实现、重写”子组件里的抽象函数

10、路由

10、1 路由的基本使用

概念：是一个功能，当用户发出路径的请求时，路由能够找到该请求所对应的组件。

在router目录的index.js文件中配置路由。
在这里插入图片描述
新建若干个组件，然后在main.js中注册，然后配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from "../view/Login";
import Register from "../view/Register";
import Goods from "../view/Goods";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '登录',
      component: Login
    },
    {
      path: '/reg',
      name: "用户注册",
      component: Register
    },
    {
      path:'/goods',
      name:"商品列表",
      component: Goods
    }
  ]
})

【说明】
1、在使用路由时，需要确保安装了路由，如果在拉取项目的时候没有安装路由，进入到项目的根目录，cmd打开命令窗口，输入如下命令暗转路由:vue install vue-router -s

2、可以通过router-link进行路由的跳转
在这里插入图片描述

10、2：路由传参

1、如何传递参数

在路由中设置参数
在这里插入图片描述
在组件中收参

11、Vue的AJAX请求

Vue的原则，表现与动作分离，所以Vue不支持AJAX请求，需要axios组件来进行AJAX请求

需要在当前项目中安装axios插件。

1、进入项目的根目录，cmd打开命令窗口。

2、输入命令 npm install --save axios vue-axios

3、启动项目npm run dev

4、在项目中注册axios

在这里插入图片描述
5、新建部门组件，用于添加部门

<template>
    <div id="box">
      <p>
        部门名称：<input type="text" v-model="deptName"/>
      </p>
      <p>
        部门位置：<input type="text" v-model="loc"/>
      </p>
      <p>
        <input type="button" value="添加部门" @click="addDept()"/>
      </p>
    </div>
</template>

<script>
    export default {
        name: "Dept",
        data(){
            return{
                deptName:"",
                loc:""
            }
        },
        methods:{
            addDept:function () {
                //使用axios发出AJAX
              this.axios({
                method:'get',
                  url:'http://localhost:8083/dept/add?deptName='+this.deptName+"&loc="+this.loc
              }).then(function (result) {
                  alert("添加结果为："+result.data);
              })
            }
        }
    }
</script>

<style scoped>

</style>

6、注册组件

7、配置路由

在这里插入图片描述

8、运行

12、在webpack项目下添加、使用Element UI组件

1、在webpack项目下添加、使用Element UI组件

2、Vue的综合项目：主页路由

表格、分页

修改、删除

条件查询

下拉列表的使用

12、1 Element UI组件库：

是一款专门为vue设计、使用的组件库。

使用elementui 就需要在项目中添加elementui的支持：

1、使用的icon图标、背景图等

2、css样式

3、JavaScript

在脚手架下，添加elementui组件库

1、进入到项目的根目录，cmd打开命令窗口

2、输入命令 npm i element-ui -S

在这里插入图片描述
3、在main.js中注册element-ui组件

4、新建组件，使用element-ui

<template>
  <div id="box">
    <el-form ref="form" :model="emp" label-width="80px">
      <el-form-item label="员工编号">
        <el-input v-model="emp.empNo"></el-input>
      </el-form-item>
      <el-form-item label="员工姓名">
        <el-input v-model="emp.empName"></el-input>
      </el-form-item>
      <el-form-item label="员工电话">
        <el-input v-model="emp.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" round @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
    export default {
        name: "Emp",
        data() {
            return {
                emp: {
                    empNo:'',
                    empName:'',
                    phone:''

                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>

<style scoped>
  #box{
    width: 600px;
    margin: 0 auto;
  }
</style>

在这里插入图片描述

13、综合案例

13、1 后台：数据接口，springboot整合mybatis

13.1.1：新建mave项目

13.1.2：添加依赖

<packaging>war</packaging>
<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.3.4.RELEASE</version>
    <relativePath/>
</parent>
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.0.5</version>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid-spring-boot-starter</artifactId>
        <version>1.2.11</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.1.2</version>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.24</version>
    </dependency>
</dependencies>

3、创建配置文件application.yml

4、创建启动类

package com.qf.springbootvue;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBootVueApplication {
    public static void main(String[] args) {
        SpringApplication.run(SpringBootVueApplication.class,args);
    }
}

5、在application.yml配置文件中，整合mybatis

server:
  port: 8081
spring:
  datasource:  # 连接池信息
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://localhost:3306/java2204
    username: root
    password: root
    driver-class-name: com.mysql.jdbc.Driver
    druid:
      initial-size: 3
mybatis:
  configuration:
    map-underscore-to-camel-case: true  # 强制要求mybatis对应的接口中的方法，必须采用驼峰命名法
  mapper-locations: classpath:mapper/*.xml # 映射文件的位置
  type-aliases-package: com.qf.springbootvue.pojo # 实体类的位置

dao的位置，是在启动类中通过注解进行的配置
在这里插入图片描述
5、编写查询功能

13、2 前端：Vue+ElementUI

1、新建前端项目文件夹

2、使用vue-cli拉取webpack类型的项目

vue init webpack vuepro

3、添加axios的支持

4、添加elementui的支持

5、在main.js中注册axios elementUI

在这里插入图片描述
6、修改App.vue组件

注释掉vue的logo

7、新建Home主组件

内容：

<template>
  <div id="box">
    <el-container>
      <el-header>
        千锋教育云平台
      </el-header>
      <el-container>
        <el-aside width="300px">
          <!--导航菜单开始-->
            <h3>管理系统菜单</h3>
          <el-menu router :default-active="$route.path"
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>基础数据维护</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/dept">部门信息维护</el-menu-item>
                <el-menu-item index="/emp">员工信息维护</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>业务处理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/dept">请假审批处理</el-menu-item>
                <el-menu-item index="/emp">请款审批处理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
          <!--导航菜单结束-->
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>
  *{
    padding: 0;
    margin: 0;
  }
  .el-header{
    background-color: deepskyblue;
    color: white;
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-weight: bolder;
    font-size: 30px;
  }
  .el-aside{
    background-color: lightskyblue;
    color: black;
    text-align: left;
    height: 800px;
    line-height: 40px;
  }
  .el-aside h3{
    text-align: center;
  }
</style>

2、注册组件

3、路由

4、单击路由请求，在Home里的el-main里显示对应的组件

在这里插入图片描述

在这里插入图片描述
8、新建Dept部门组件

8、1：使用表格显示部门信息，可分页

<template>
    <div>
      <h1>部门组件</h1>
      <el-table :data="depts" border style="width: 100%;margin-top: 20px;"
                :header-cell-style="{
        background:'deepskyblue',
        color:'white',
        textAlign:'center',
        padding:'5px 0'}">
        <el-table-column
         label="部门编号"
         prop="deptNo"
         width="200px">
        </el-table-column>

        <el-table-column
          label="部门名称"
          prop="deptName"
          width="300px">
        </el-table-column>

        <el-table-column
          label="部门位置"
          prop="loc"
          >
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
    export default {
        name: "Dept",
        data(){
            return{
                depts:[]  //用于存储AJAX请求的所有部门信息
            }
        },
        methods:{
            getAllDept:function () {
                //发出AJAX请求
                this.axios({
                    method:'get',
                    url:'http://localhost:8081/dept/find'
                }).then(response=>{
                    //后台回调的代码，响应的数据在变量response.data里存储
                    //把响应的JSON数据，赋值给变量depts
                    this.depts=response.data;
                })
            }
        },
        mounted() {
            //调用请求AJAX的函数
            this.getAllDept();
        }
    }
</script>

<style scoped>

</style>

步骤1：定义变量
在这里插入图片描述
步骤2：使用表给绑定存储数据的变量

步骤3：发出AJAX请求，给变量赋值

步骤4：调用AJAX请求的函数

分页的实现：

后端分页：在数据库需要进行分页查询

特点：一次性查询的数据量小，只查询当前页的数据

增加数据库的访问次数

mysql数据库下分页sql语句：

当前页：int currentPage=1;

每页显示的记录的数量：int pageSize=10;

select deptNo,deptName,loc
from dept
limit (currentPage-1)*pageSize,pageSize

1,5

limit 0,5 前5条数据

2,5

limit 5,5

3,5

limit 10,5

前端分页：把所有数据一次性的查询返回给前端

特点：查询的数据量大—查询效率会降低

前端按分页逐页显示数据

8、2：添加部门，使用”div“显示添加的标签

8、3：修改部门，使用“div"显示修改页面的标签

8、4：删除部门，需要删除确认提示

8、5：条件查询

Vue使用的是前端分页：

1、一次性查询出所有数据

控制器

//支持返回总记录数的查询
@GetMapping("/findByPage")
public Map<String,Object> findDeptByPage(){
    Map<String,Object> map=new HashMap<String, Object>();
    List<Dept> list=deptService.findDept();
    map.put("data",list);
    map.put("totalCount",list.size());
    return map;
}

在返回数据的同时，返回了数据的条数

data—>集合数据

totalCount—>总记录数
在这里插入图片描述

export default {
    name: "Dept",
    data(){
        return{
            depts:[],  //用于存储AJAX请求的所有部门信息
            pageSizes:[5,10,15,20],  //名字任意：用于设置每页显示多少条，分页下拉列表里显示的值
            total:100,   //名字任意 用于设置总记录数，需要AJAX返回时重新赋值
            page:1,//名字任意 默认从第一页开始显示
            pageSize:5 //名字任意
        }
    },
    methods:{
        getAllDept:function () {
            //发出AJAX请求
            this.axios({
                method:'get',
                url:'http://localhost:8081/dept/findByPage'
            }).then(response=>{
                //后台回调的代码，响应的数据在变量response.data里存储
                //把响应的JSON数据，赋值给变量depts
                this.depts=response.data.data;
                //给分页变量中总记录数变量赋值
                this.total=response.data.totalCount;
            })
        }
    },
    mounted() {
        //调用请求AJAX的函数
        this.getAllDept();
    }
}

需要在表格的data里设置分页
在这里插入图片描述
点击分页按钮，需要实现如下：

14、条件查询

14、1：在Dept组件中，构建查询条件视图

<!--查询条件标签开始-->
<el-form ref="form" inline="true" :model="queryForm" label-width="80px">
  <el-form-item label="部门名称">
    <el-input v_model="queryForm.deptName"></el-input>
  </el-form-item>
  <el-form-item label="部门位置">
    <el-input v_model="queryForm.loc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="queryDeptByCondition">查询</el-button>
  </el-form-item>
</el-form>
<!--查询条件标签结束-->

14、2 绑定的变量

在这里插入图片描述

14、3：请求条件查询

在这里插入图片描述

15、添加部门

1、添加按钮
在这里插入图片描述
思路：在添加的事件调用的函数中，让添加表单所在的层显示即可

2、编写添加部门的表单需要的“层”

<!--添加部门开始-->
<el-dialog title="添加部门窗口" :visible.sync="newFormVis" width="50%" center top="10%">
  <div>
    <el-form style="margin-top: 10px" status-icon :model="newForm" ref="newForm">
      <el-row>
        <el-col  style="width: 600px">
          <el-form-item label="部门名称" pro="deptName">
            <el-input v-model="newForm.deptName" placeholder="请输入部门名称"
             style="width: 500px;margin-right: 20px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col  style="width: 600px">
          <el-form-item label="部门位置" pro="loc">
            <el-input v-model="newForm.loc" placeholder="请输入部门位置"
                      style="width: 500px;margin-right: 20px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="saveDept">保  存</el-button>
    <el-button  @click="cancelNew">取  消</el-button>
  </span>
</el-dialog>
<!--添加部门结束-->

3、声明的变量
在这里插入图片描述

4、使用的函数
在这里插入图片描述
5、表单验证

引入消息变量Message
在这里插入图片描述
6、添加接口

7、AJAX请求添加接口

saveDept:function () { //AJAX请求添加接口
  //判断验证是否通过
    this.$refs.newForm.validate((valid)=>{
        //执行验证，通过变量valid判断是否验证通过
        if(valid){
            //验证通过，发出AJAX请求
            this.axios({
                method:'get',
                url:'http://localhost:8081/dept/add?deptName='+this.newForm.deptName+"&loc="+this.newForm.loc
            }).then(response=>{
                //判断是否添加成功
                if(response.data=="success"){
                    //弹窗显示
                    Message.success({message:"添加部门成功！"});
                    //隐藏添加“层”
                    this.newFormVis=false;
                    //清空表单里的内容:表单初始化
                    this.newForm=this.$options.data().newForm;
                    //调用查询方法
                    this.getAllDept();
                }else {
                    Message.error({message:'添加部门失败！'});
                }
            })
        }
    })
}

16、修改部门

1、增加操作列

 <!--操作列开始-->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-button size="mini" plain type="primary" @click="updateDept(scope.$index,scope.row)">
              <i class="el-icon-edit"></i> <!--编辑图片-->
            </el-button>

            <!--删除按钮-->
            <el-button size="mini" plain type="danger">
              <i class="el-icon-delete"></i>
            </el-button>

            <!--详情按钮-->
            <el-button size="mini" plain type="success">
              <i class="el-icon-search"></i>
            </el-button>
          </template>
        </el-table-column>

2、编写修改“层”

    <!--修改部门开始-->
      <el-dialog title="修改部门窗口" :visible.sync="updateFormVis" width="50%" center top="10%">
        <div>
          <el-form style="margin-top: 10px" :model="updateForm" ref="updateForm">
            <el-row>
              <el-col>
                <el-form-item label="部门编号" prop="deptNo">
                  <el-input v-model="updateForm.deptNo" placeholder="请填写部门编号"
                  style="width: 500px;margin-right: 20px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="部门名称" prop="deptName">
                  <el-input v-model="updateForm.deptName" placeholder="请填写部门名称"
                            style="width: 500px;margin-right: 20px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="部门位置" prop="loc">
                  <el-input v-model="updateForm.loc" placeholder="请填写部门位置"
                            style="width: 500px;margin-right: 20px;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveUpdate">保存修改</el-button>
          <el-button  @click="cancelUpdate">取  消</el-button>
        </span>
      </el-dialog>
      <!--修改部门结束-->

3、声明变量控制修改层的显示
在这里插入图片描述
4、修改函数

updateDept:function (idIndex,idData) {  //每一行的修改按钮调用的函数
    //参数idIndex:是操作行数据的索引
    //参数idData:是操作行的数据
    //设置修改视图显示
    this.updateFormVis=true;
    //回显数据：把当前行的数据，赋值到表单对应的标签中

}

5、定义变量，用于修改表单使用
在这里插入图片描述
6、回显值

7、修改表单里的保存按钮调用的函数

saveUpdate:function () {//保存修改信息
    //post请求提交的数据格式是json
    //使用let声明一个JSON对象，名字任意，在此deptInfo
    //确保json里的key值，和java对象里的属性值一致即可
    let deptInfo={
        deptNo:this.updateForm.deptNo,
        deptName:this.updateForm.deptName,
        loc:this.updateForm.loc
    }
    //post方式发出请求
    //参数1：请求的接口的路径
    //参数2：提交到后台的json数据
    this.axios.post('http://localhost:8081/dept/update',deptInfo).then(response=>{
        //AJAX请求之后，响应时，回调的函数
        //判断是否修改成功
        if(response.data=="success"){
            Message.success({message:'修改部门成功！'});
            this.updateFormVis=false;
            this.updateForm=this.$options.data().newForm;
            this.getAllDept();
        }else{
            Message.error({message:'修改部门失败！'})
        }
    })
}

17、删除部门

在操作列的删除按钮里调用删除函数：

<!--删除按钮-->
<el-button size="mini" plain type="danger" @click="deleteDept(scope.row)">
  <i class="el-icon-delete"></i>
</el-button>

删除函数里

deleteDept:function (rowData) {//删除按钮调用的函数
        //1、弹出确认窗口
        this.$confirm('确定要删除所选数据吗？','删除确认',{
            confirmButtonText:'确定删除', //确认按钮上的文本信息
            cancelButtonText:'取消删除'//取消按钮上的文本
        }).then(()=>{
            //当点击了确认删除按钮后，调用此函数
            //发出删除请求
            this.axios.get('http://localhost:8081/dept/delete?deptNo='+rowData.deptNo).then(response=>{
                if(response.data=="success"){
                    Message.success({message:'删除部门成功！'});
                    this.getAllDept();
                }else{
                    Message.error({message:'删除部门失败！'});
                }
            })
        }).catch(()=>{
            //单击取消按钮时，调用的函数
            this.$message({
                type:'info',
                message:'已取消删除！'
            })
        })
    }

}