vue笔记（脚手架，axios,router，整合spring boot案例）

最新推荐文章于 2022-08-05 10:02:54 发布

从此苏州|更江南

最新推荐文章于 2022-08-05 10:02:54 发布

阅读量419

点赞数

文章标签： vue spring boot bootstrap

本文链接：https://blog.csdn.net/weixin_45653314/article/details/113815920

版权

1、下载vue和vue案例

//开发版本:
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//生产版本:
	<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
        {{ msg }}  {{username}} {{pwd}}

        <br>
        <span>
            {{ username }}
            <h1>{{ msg }}</h1>
        </span>

   </div>


    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",  //element 用来给Vue实例定义一个作用范围
            data:{      //用来给Vue实例定义一些相关数据
                msg:"",
                username:"",
                pwd :"",
            },
        });
    </script>

2、v-text和差值表达式

        <span >{{ message }}</span>
        <span v-text="message"></span>

{{}}(插值表达式)和v-text获取数据的区别在于
a.使用v-text取值会将标签中原有的数据覆盖使用插值表达式的形式不会覆盖标签原有的数据
b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

3、v-html

`v-html`:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部  类似于javascript中 innerHTML

 data:{
                message:"<a href=''>fdfd</a>"
            }

//获取值
<span v-html="message">xxxxxx</span>

4、vue事件

    1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如  v-on:click也可以写成@click（简化写法）
	2.在v-on:事件名的赋值语句中是当前时间触发调用的函数名
	3.在vue中事件的函数统一定义在Vue实例的methods属性中
	4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据

5、v-if,v-bind,v-show,v-for

5.1 v-show

用来控制页面中某个标签元素是否展示底层使用控制是 display 属性

    <h2 v-show="false">yyh</h2>
    <h2 v-show="show">yyh02</h2>

 data:{
            show:false,
        },

5.2 v-if

用来控制页面元素是否展示

 <h2 v-if="false">yyh</h2>

5.3 v-bind

用来绑定标签的属性从而通过vue动态修改标签的属性

写法如 v-bind:属性名 简化之后 :属性名

  <img width="300" :title="msg"   alt="">
//给属性标签绑定一个值
 data:{
            msg:"yyh",
        },

5.4 v-for

v-for=“user,index in users” :key=“user.id”
注意：在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

总结：

	1.使用v-model指令可以实现数据的双向绑定 
	2.所谓双向绑定 表单中数据变化导致vue实例data数据变化   vue实例中data数据的变化导致表单中数据变化 称之为双向绑定

MVVM架构双向绑定机制

Model: 数据 Vue实例中绑定数据
VM: ViewModel 监听器

View: 页面页面展示的数据 ```

6、事件修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.sh{
				background-color: red;
				width: 400px;
				height: 300px;
			}
		</style>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<div id='app'class="sh" @click.self="b">
			<button @click.stop="a">按钮</button>
			<button @click="a1">按钮11</button>
		</div>
		
		<a href="www.baidu.com" @click.prevent.once="zu">百度</a>
	<script type="text/javascript">
		//stop防止事件冒泡，点击按钮后弹出按钮，还会弹出div.加上@click.stop就只弹出一个
		//prevent阻止事件的默认行为,可以不用访问到百度，只会弹窗阻止访问到百度
		//self只触发自己标签的事件,加上可以不用给每个div标签的子元素加stop
		//once只会触发一次事件，加上后访问百度第一次是弹出阻止访问到百度，第二次点击是跳转到百度
		var vm =new Vue({
			el:"#app",
			data:{
			
				
			},
			methods:{
				a(){
					alert("按钮");
				},
				b(){
					alert("div");
			},
			zu(){
				alert("阻止 访问到百度");
			},
			a1(){
				alert("a1");
			}
			}
		})
	</script>
	</body>
</html>

7、按键修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<!-- 键盘回车键弹起触发     .delete  .esc  .space   .left-->
		<div id='app'>
			<input type="text"  v-model="msg" @keyup.enter="keyups" />
			
		</div>
	<script type="text/javascript">
		var vm =new Vue({
			el:"#app",
			data:{
				msg:" "
			},
			methods:{
				keyups(){
					alert(this.msg);
				}
			}
		})
	</script>
	</body>
</html>

8. Axios

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript" src="js/axios.min.js" ></script>

</head>
<body>
<div id='app'>
dsssssssss

</div>
<script type="text/javascript">
 /*  axios.get("http://localhost:8080/findAll")
	.then(function(response){
		console.log(response.data)
	})
	.catch(function(erro){
		console.log(erro)
	})
	
	axios.post("http://localhost:8080/Post",{
		name:"yaoyuhongg",
		age:"52"
	}) */
	
	function findget(){
		return  axios.get("http://localhost:8080/findAll")
	.then(function(response){
		console.log(response.data)
	}).catch(function(erro){
		console.log(erro);
	})}
	function findpsot(){
		return axios.post("http://localhost:8080/Post",{
		name:"yaoyuhongg",
		age:"52"
	}).then(function(response){
		console.log(response.data)
	}).catch(function(erro){
		console.log(erro);
	})}
	
	// 并发请求
	axios.all([findget(),findpsot()]);
	/* 也可以一起写响应结果
	axios.all([findget(),findpsot()])。then(axios.spread(function(res1,res2){
		console.log(res1.data);
		console.log(res2.data);
	}));
	 */
	
    var vm =new Vue({
        el:"#app",
        data:{

        },
        methods:{


        }
    })
</script>
</body>
</html>

9、Vue 生命周期

生命周期钩子 ====> 生命周期函数

1.初始化阶段
				beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
            console.log("beforeCreate: "+this.msg);
        },
        created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
            console.log("created: "+this.msg);
        },
        beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
            console.log("beforeMount: "+document.getElementById("sp").innerText);
        },
        mounted(){//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
            console.log("Mounted: "+document.getElementById("sp").innerText);
        }
        
		2.运行阶段
			 	beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
            console.log("beforeUpdate:"+this.msg);
            console.log("beforeUpdate:"+document.getElementById("sp").innerText);
        },
        updated(){    //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致
            console.log("updated:"+this.msg);
            console.log("updated:"+document.getElementById("sp").innerText);
        },
        
		3.销毁阶段
			 	beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁

        },
        destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁

        }

10 组件中prop的单向数据流

单向数据流:所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定**：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。—摘自官网

代码分析：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<div id='app'>
			<login :name1="username" @find="findAll"></login>
			</br>
		</div>
		
		
	<script type="text/javascript">
		/* 组件声明 */
		const login={
			template:"<div><h1>药用{{name2}}</h1> <input type='button' value='点我' @click='change'/></div>",
			// 也可以写template:"#abc",其次在VUE实例中声明<template id="abc"><login></login></template>
			data(){
				return{
				// 当name1改变name2的值也会变
					name2:this.name1
				}
			},
			methods:{
				change(){
					/* 调用vue中实例函数 */
					this.$emit("find");
				},
			},
			props:["name1"]
		}
		var vm =new Vue({
			el:"#app",
			data:{
				username:"yaouhong"
			},
			methods:{
				findAll(){
					alert("vue中实例函数执行");
				}
			},
			components:{
				login:login,//如果变量和值相同可以直接写成login,
			}
		})
	</script>
	</body>
</html>

11、Router

11.1 引入router

 ```js
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  //vue 路由js

注意：引入路由需要放在引入vue下面

代码分析:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>
	<body>
		<div id='app'>
			<!-- 第一种方式 -->
			<!-- <a href="#/login">登录</a>
			<a href="#/register">注册</a> -->
			<!-- 第二种方式 -->
			<router-link to="/login" tag="button">登录</router-link>
			<router-link to="/register" tag="button">注册</router-link>
			<!-- 路由 -->
			<router-view></router-view>
		</div>
	<script type="text/javascript">
		// 声明组件模板
		const login={
			template:"<h1>用户登录</h1>"
		}
		const register={
			template:"<h1>用户注册</h1>"
		}
		// 创建路由对象
		const router=new VueRouter({
			routes:[
				{path:'/',redirect:"/register"},
				{path:'/login',component:login},
				{path:'/register',component:register}
				]
		})
		var vm =new Vue({
			el:"#app",
			data:{
			},
			methods:{	
			},
			/* 注册路由对象 */
			router:router//也可以直接写router
		})
	</script>
	</body>
</html>

11.2、router参数绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>
	<body>
		
		<div id='app'>
			<!-- 两种参数绑定   第一种方式 -->
			<router-link to="/login?id=22&name=张三" tag="button">登录</router-link>
			<!-- 第二种方式  /21 -->
			<router-link to="/register/21/zhangsan" tag="button">注册</router-link>
			<!-- 使用router -->
			<router-view></router-view>
		</div>
	<script type="text/javascript">
		/* 组件 */
	const login={
		template:"<h1>用户登录{{$route.query.id}}{{$route.query.name}}</h1>",
		data(){ return {}},
		methods:{},
		created(){
			// 两种方式取参数的方式不同
			console.log(this.$route.query.id);
		}
	}
	const register={
		template:"<h1>用户注册 {{$route.params.id}}{{$route.params.name}}</h1>",
		data(){ return {}},
		methods:{},
		created(){
			console.log(this.$route.params.id);
		}
	}
		// 创建路由对象
	 const router=new VueRouter({
		 routes:[
			 {path:'/', redirect:"/login"},
			 {path:'/login' ,component:login},
			 {path:'/register/:id/:name' ,component:register},
		 ]
		 
	 })
		var vm =new Vue({
			el:"#app",
			data:{
				
			},
			methods:{
				
			},
		// 在组件中注册路由
		router:router
		})
	</script>
	</body>
</html>

11.3、嵌套路由

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/vue-router.js"></script>
	</head>
	<body>
		
		<div id='app'>
			<router-link to="/product" tag="button">商品管理</router-link>
			<router-view></router-view>
			
			
		</div>
		<template id="product">
				<!-- 必须要加一个div标签 -->
				<div>
					<h1>商品管理</h1>
					<router-link to="/product/add" tag="button">商品增加</router-link>
					<router-link to="/product/delete1" tag="button">商品删除</router-link>
					<router-view></router-view>
				</div>
			</template>
	<script type="text/javascript">
		/* 组件 */
	const product={
		template:"#product"
	};
	const addproduct={
		template:"<h3>商品增加</h3>"
	};
	const deleteproduct={
		template:"<h3>商品删除</h3>"
	};
		// 创建路由对象
	 const router=new VueRouter({
		 routes:[
			 {path:'/product',component:product,children:[
				{path:"add",component:addproduct},
				 {path:"delete1",component:deleteproduct}
			 ]}
		 ]	 
	 })
		var vm =new Vue({
			el:"#app",
			data:{
				
			},
			methods:{
				
			},
		// 在组件中注册路由
		router:router
		})
	</script>
	</body>
</html>

12、侦听器案例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
	
	</head>
	
	<body>
		<div id="app">
		    <div>
		      <span>用户名：</span>
		      <span>
				  <!-- 输入框里的内容不会马上使得sapn标签{{}}里的值改变 -->
		        <input type="text" v-model.lazy='uname'>
		      </span>
		      <span>{{tip}}</span>
		    </div>
		  </div>
				
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript">
			
			
			
			 var vm = new Vue({
			      el: '#app',
			      data: {
			        uname: '',
			        tip: ''
			      },
				methods: {
				        checkName: function(u) {
				          // 调用接口，但是可以使用定时任务的方式模拟接口调用
				          var that = this;
				          setTimeout(function(){
				            // 模拟接口调用
				            if(u == 'admin') {
				              that.tip = '用户名已经存在，请更换一个';
				            }else{
				              that.tip = '用户名可以使用';
				            }
				          }, 2000);
				        }
				      },
				watch:{
					/* 参数是输入框接收的值 */
					uname:function(v){
						this.checkName(v);
						this.tip='正在验证......';	
					}
				}
			});
			
		</script>
		
	</body>
</html>

12.1 自定义指令实现侦听器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			<input type="text" v-gg/>
			<!-- <input type="text" v-color='msg'/> -->
			</div>
		
				
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript">
			
			/* Vue.directive('color',{
				bind:function(el, binding){
					el.style.backgroundColor = binding.value.color;
				}
			});
			 */
			
			Vue.directive('gg',{
				// 第一个参数是指令的名称，第二个参数是对象
				inserted:function(el){
					//el表示指令所绑定的元素，聚焦在输入框。
					el.focus();
				}
			});
			
			var vm=new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					
				}
			});
			
		</script>
		
	</body>
	
</html>

13、过滤器级联操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="uname">
			<br>
			<span>{{uname|upper}}</span>
			</br>
			<span>{{uname|upper|lower}}</span><!-- /级联属性 -->
			</div>
		<script type="text/javascript">
			//转大写
			Vue.filter('upper', function(val) {
			//chaarAt(3)出现数组下标为3的个数时候首字母转大写，sclice(2)大于2个才显示
			       return val.charAt(0).toUpperCase() + val.slice(1);
			     });
				 //转小写
			Vue.filter('lower', function(val) {
				       return val.charAt(0).toLowerCase() + val.slice(1);
				     });
			var vm=new Vue({
				el:'#app',
				data:{
				  uname:'',
				  
				},
				methods:{
					
				}
			});
			
		</script>
	</body>
</html>

13.1 计算属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title> 
   <script type="text/javascript" src='js/vue.js'></script>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div>{{reverseString}}</div>
  </div>

  <script type="text/javascript">
    /*
      计算属性
    */
    var vm = new Vue({
      el: "#app",
      data: {
        msg: 'Nihao'
      },
      computed: {
        reverseString: function(){
          return this.msg.split('').reverse().join('');
        }
      }
    });
  </script>
</body>
</html>

输出结果：
在这里插入图片描述

14、vue cli 脚手架

14.1、环境准备

    1.下载nodejs http://nodejs.cn/download/ windows系统: .msi 安装包(exe)指定安装位置 .zip(压缩包)直接解压缩指定目录
mac os 系统: .pkg 安装包格式自动配置环境变量 .tar.gz(压缩包)解压缩安装到指定名

    2.配置nodejs环境变量 windows系统:
      1.计算上右键属性----> 高级属性 ---->环境变量添加如下配置:
NODE_HOME= nodejs安装目录
PATH = xxxx;%NODE_HOME%
      2.macos 系统
推荐使用.pkg安装直接配置node环境

   3.验证nodejs环境是否成功 node -v

   4.npm介绍 node package mangager nodejs包管理工具前端主流技术 npm 进行统一管理 maven 管理java后端依赖远程仓库(中心仓库) 阿里云镜像 npm 管理前端系统依赖
远程仓库(中心仓库) 配置淘宝镜像

   5.配置淘宝镜像 npm config set registry https://registry.npm.taobao.org npm config get registry

   6.配置npm下载依赖位置 windows: npm config set cache “D:\nodereps\npm-cache” npm config set prefix
“D:\nodereps\npm_global” mac os: npm config set cache
“/Users/chenyannan/dev/nodereps” npm config set prefix
“/Users/chenyannan/dev/nodereps”

   7.验证nodejs环境配置 npm config ls
; userconfig /Users/chenyannan/.npmrc
cache = "/Users/chenyannan/dev/nodereps"
prefix = "/Users/chenyannan/dev/nodereps"
registry = "https://registry.npm.taobao.org/"

14.2、安装脚手架

#0.卸载脚手架
npm uninstall -g @vue/cli //卸载3.x版本脚手架
npm uninstall -g vue-cli //卸载2.x版本脚手架

#1.Vue Cli官方网站
https://cli.vuejs.org/zh/guide/

#2.安装vue Cli
npm install -g vue-cli

14.3、第一个vue脚手架项目

# 1.创建vue脚手架第一个项目
	vue init webpack 项目名
# 2.创建第一个项目
	hello     ------------->项目名
    -build  ------------->用来使用webpack打包使用build依赖
    -config ------------->用来做整个项目配置目录
    -node_modules  ------>用来管理项目中使用依赖
    -src					 ------>用来书写vue的源代码[重点]
    	+assets      ------>用来存放静态资源 [重点]
      components   ------>用来书写Vue组件 [重点]
      router			 ------>用来配置项目中路由[重点]
      App.vue      ------>项目中根组件[重点]
      main.js      ------>项目中主入口[重点]
    -static        ------>其它静态
    -.babelrc      ------> 将es6语法转为es5运行
    -.editorconfig ------> 项目编辑配置
    -.gitignore    ------> git版本控制忽略文件
    -.postcssrc.js ------> 源码相关js
    -index.html    ------> 项目主页
    -package.json  ------> 类似与pom.xml 依赖管理  jquery 不建议手动修改
    -package-lock.json ----> 对package.json加锁
    -README.md         ----> 项目说明文件

# 3.如何运行在项目的根目录中执行
		npm start 运行前端系统

# 4.如何访问项目
		http://localhost:8081    

# 5.Vue Cli中项目开发方式
	 注意: 一切皆组件   一个组件中   js代码  html代码  css样式
	 
	 	1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
	 	2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件

15.在脚手架中使用axios

15.1 安装axios

# 1.安装axios
	npm install axios --save-dev

# 2.配置main.js中引入axios
	import axios from 'axios';

	Vue.prototype.$http=axios;

# 3.使用axios
	在需要发送异步请求的位置:this.$http.get("url").then((res)=>{}) this.$http.post("url").then((res)=>{})

16、vue项目

16.1 结合bootstrap，springboot（无脚手架）

首页代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理界面</title>
    <link rel="stylesheet" href="static/bootvue/css/bootstrap.min.css"/>
</head>
<body>
<script type="text/javascript" src="static/bootvue/js/vue.min.js"></script>
<script type="text/javascript" src="static/bootvue/js/axios.min.js"></script>
<div id="app">
<div class="container-fluid">
    <nav class="navbar navbar-default">


        <div class="navbar-header">
            <a class="navbar-brand" href="#">用户管理系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">欢迎：xxx</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->


        <!--表格-->

        <!--搜索-->
        <div class="row">
            <div class="clo-md-8 col-md-offset-1">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">name</label>
                        <input type="text" v-model="searchName" class="form-control" id="exampleInputName2" >
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail2">phonenumber</label>
                        <input type="text" v-model="searchCode" class="form-control" id="exampleInputEmail2" >
                    </div>
                    <button type="submit" @click.prevent="search1" class="btn btn-success">搜索</button>
                </form>
            </div>

            <div class="col-md-8 "style="margin-top:20px;">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">用户面板</div>

                    <!-- Table -->
                    <table class="table table-bordered table-hover table-striped">
                        <tr>
                            <th>Id</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>薪资</th>
                            <th>电话号码</th>
                            <th>操作</th>
                        </tr>
                        <tbody>
                        <tr v-for="user,index in users ">
                            <td>{{user.id}}</td>
                            <td>{{user.name}}</td>
                            <td>{{user.age}}</td>
                            <td>{{user.salary}}</td>
                            <td>{{user.phonenumber}}</td>
                            <td ><button class="btn btn-danger" type="button" @click="delete1(user.id)" >删除</button>&nbsp;&nbsp;<button class="btn btn-info" @click="xiugai(user.id)" >修改</button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-4">
                <form>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" v-model="user.name" placeholder="name">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" v-model="user.age" placeholder="age">
                    </div>
                    <div class="form-group">
                        <label for="salary">薪资</label>
                        <input type="text" class="form-control" id="salary" v-model="user.salary" placeholder="salary">
                    </div>
                    <div class="form-group">
                        <label for="phonenumber">电话号码</label>
                        <input type="text" class="form-control" id="phonenumber" v-model="user.phonenumber" placeholder="phonenumber">
                    </div>


                    <button type="button" @click="addMessage" class="btn btn-success">增加</button>
                    <button type="submit" @click="restmsg" class="btn btn-danger">重置</button>

                </form>
            </div>
        </div>
    </nav>
</div>
</div>
<script type="text/javascript">
    var xm=new Vue({
        el:"#app",
        data:{
            searchCode:"",//搜索框传值
            searchName:"",//搜索框传值
            users:[], //数据的赋值交给后端数据库
            user:{
               /* name:"",
                age:"",
                salary:"",
                phonenumber:""*/
            },//点击增加按钮，输入框的数据双向绑定,/*user:{name:"yaoyuhong"},*/
        },
        methods:{
            //模糊查询数据
            search1(){
                let _this=this;
                //发送请求获取数据
                axios.get("http://localhost:8088/findByLike?name="+this.searchName+"&phonenumber="+this.searchCode).then(function (response) {
                    //因为在axios中this发生了变化，所以需要保留
                    _this.users=response.data;
                }).catch(function (err){
                    console.log(err);
                });
            },

            /*修改信息*/
            xiugai(id){
                let _this=this;
                //发送请求获取数据
                axios.get("http://localhost:8088/findone?id="+id).then(function (response) {
                    //因为在axios中this发生了变化，所以需要保留
                    console.log(response.data);
                    _this.user=response.data;
                }).catch(function (err){
                    console.log(err);
                });
            },

            //删除数据
            restmsg(){
                let _this=this;
                _this.user={}
            },
            delete1(id){
                console.log(id);
                let _this=this;
                if(window.confirm("是否删除这个数据")){//发送请求获取数据
                    axios.get("http://localhost:8088/delete?id="+id).then(function (response) {
                        if(response.data.success==true){
                            //更新页面数据
                            _this.findall();
                        }else {
                            alert(response.data.msg);
                        }
                    }).catch(function (err){
                        console.log(err);
                    });
                }


            },
            //增加数据
            addMessage(){
                let _this=this;
                  //发送请求获取数据
                axios.post("http://localhost:8088/add", this.user).then(function (response) {
                    //因为在axios中this发生了变化，所以需要保留
                   if(response.data.success==true){
                     _this.findall();
                     _this.user={};
                   }
                }).catch(function (err){
                    console.log(err);
                });
            },
            //查询全部数据
            findall(){
                let _this=this;
                //发送请求获取数据
                axios.get("http://localhost:8088/user").then(function (response) {
                    console.log(response);
                    _this.users=response.data;
                }).catch(function (err){
                    console.log(err);
                });
            },
        },


          /*生命周期相关函数*/
            created(){
               this.findall();
            }


    })
</script>



</body>
</html>

后台sql语句：实现模糊查寻

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.yyh.baizhivueboot02.dao.IUserDao">
    <select id="findAll" resultType="User">
        select * from t_user;
    </select>
    <insert id="add" parameterType="User">
      insert into t_user(name,age,salary,phonenumber) values(#{name},#{age},#{salary},#{phonenumber});
  </insert>
    <delete id="delete" parameterType="int">
        delete from t_user where id=#{id}
    </delete>
    <!--查询一个-->
    <select id="findone" resultType="User" parameterType="int">
        select id,name,age,salary,phonenumber from t_user where id=#{id}
    </select>
    <!--根据id修改信息-->
    <update id="update1" parameterType="User">
        update t_user set name=#{name},age=#{age},salary=#{salary},phonenumber=#{phonenumber}
        where id=#{id}
    </update>
    <!--根据名字或者电话号码模糊查询-->
    <select id="findByLike" resultType="User">
        select id,name,age,salary,phonenumber from t_user
         <where>
             <if test="name!=''">
                 name like concat('%',#{name},'%')
             </if>
             <if test="phonenumber!=''">
                 or phonenumber like concat('%',#{phonenumber},'%')
             </if>
         </where>
    </select>
</mapper>

16.2 脚手架springboot搭建

16.2.1 使用RAP2编写前端接口

在这里插入图片描述
重要地方：

watch: { //用来监听路径发生变化
$route: {
handler: function(val, oldVal){
console.log(val);
if(val.path==’/user’){
this.findAll();
}
},
// 深度观察监听
deep: true
}
},

     this.$router.push("/user");//切换路由

17.Vue Cli脚手架项目打包和部署

# 1.在项目根目录中执行如下命令:
	  vue run build

		注意:vue脚手架打包的项目必须在服务器上运行不能直接双击运行

# 2.打包之后当前项目中变化
	 	在打包之后项目中出现dist目录,dist目录就是vue脚手架项目生产目录或者说是直接部署目录

# 3.

从此苏州|更江南

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue笔记（脚手架，axios,router，整合spring boot案例）

目录文章目录目录1、下载vue和vue案例2、v-text和差值表达式3、v-html4、vue事件5、v-if,v-bind,v-show,v-for5.1 v-show5.2 v-if5.3 v-bind5.4 v-for6、事件修饰符7、按键修饰符8. Axios9、Vue 生命周期1、下载vue和vue案例//开发版本:  <script src="https://cdn.jsdelivr.net/npm/vue
复制链接

扫一扫