java第三阶段第七天--CureGuy

于 2021-09-29 08:35:36 发布
阅读量246 收藏
点赞数 2
分类专栏： java后端开发框架 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43234692/article/details/120541264
版权

目录

1 、SpringMVC简单的参数传值

2 、vuedemo案例

2.1 、入门案例--事件绑定

2.2 、循环案例

2.3 、vue生命周期函数

2.4 、前后端调用Axios

2.4.1 、Ajax

3 、vue客户端

1 、SpringMVC简单的参数传值

    /**
     * URL:http://localhost:8090/mvc?name="李四"
     *
     * @return
     */
    @GetMapping("/mvc")
    public Object testDemo(String name) {

        return "参数名称:" + name;
    }

对象接受数据

    /**
     * URL:http://localhost:8090/mvc?name="李四"&age=18&sex="女"
     * 说明: 如果使用对象的方式进行接收,则必须有Setxx方法.
     * @return
     */
    @GetMapping("/mvc")
    public Object testDemo(User user){

        return "参数名称:"+user;
    }

对象的引用赋值（几乎用不到）

SQL日志展现：

#SQL日志显示
logging:
  level:
    com.jt.mapper: debug

2 、vuedemo案例

2.1 、入门案例--事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello 入门案例</title>
	</head>
	<body>
		<!-- 使用步骤：
			1.导入js.文件
			2.准备根标签
			3.创建vue对象，实现挂载
			4.定义属性实现动态数据取值
			 知识补充: new Vue({}) 函数式编程

		 -->
		
		<div id="app">
			<h1>双向数据绑定测试</h1>
			<!-- {{插值表达式}} -->
			<h3>{{ hello }}</h3>
			<h3>{{ number }}</h3>
			<button v-on:click="addNum" >点我增加</button>
		</div>
		
		
		<!-- 引入js -->
		<!-- 
		var  无作用域  全局变量
		let  有作用域
		const  定义常量
			  -->
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				//element 元素
				el: "#app",
				data: {
					hello: "helloVue",
					number:100
				},
				methods:{
					addNum(){
						this.number ++
					}
				}
			})
		</script>
	</body>
</html>

2.2 、循环案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构数据</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 插值表达式如果渲染不完全会展现{{}} -->
			<span v-for="item in hobby">{{item}}</span>
			<!-- 使用v-text优化属性 -->
			<span v-for="item in hobby" v-text="item"></span>
			<!-- 展现数组下标 -->
			<span v-for="(item,index) in hobby" v-text="index"></span>
			
			<!-- 循环遍历数组对象 :key用来区分遍历的节点信息 -->
			<div v-for="item in users" :key="item.id">
					<span v-text="item.id"></span>
					<span v-text="item.name"></span>
			</div>
			
			<!-- 遍历对象 获取对象的key-value-index索引 -->
			<div v-for="(key,value,index) in user">
				<span v-text="key"></span>
				<span v-text="value"></span>
				<span v-text="index"></span>
			</div>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					hobby: ['吃','喝','玩','乐'],
					users: [{
						id: 100,
						name: '王昭君'
					},{
						id: 101,
						name: '安琪拉'
					}],
					user: {
						id: 1,
						name: '张三',
						age: 18
					}
				}
			})
		</script>
	</body>
</html>

2.3 、vue生命周期函数

        生命周期函数是vue针对与用户提供的扩展的功能，如果我们编辑了生命周期函数，则vue对象自动调动执行，无需手动调动。

种类：（一共八类）

1.初始化阶段：beforeCreate  created  beforeMount  mounted（vue对象真正实例化）

2.vue对象的使用/修改阶段： beforeUpdate  updated  

3.vue对象销毁阶段：beforeDestroy  destroyed

解析八个种类：

beforeCreate  在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

解析：vue对象被js刚解析之后，实例化成功内部的属性都是空。

created  在实例创建完成后被立即调用

解析：VUE对象开始加载其中的属性和属性的值,当加载完成,对象实例化成功!!! 仅限于创建不执行业务操作。

beforeMount  在挂载开始之前被调用：相关的 render 函数首次被调用

解析：对象中的el:"#app"  ,通过app指定的ID，将指定的区域交给vue对象进行管理。

mounted  实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。   

 解析：当对象创建完成之后,并且指定区域开始 “渲染”,将区域中的标签/表达式进行解析加载. 当数据加载成功之后,这时mounted执行完成.这时用户可以看到解析后的页面。

beforeUpdate  数据更新时调用，发生在虚拟 DOM 打补丁之前

updated  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

beforeDestroy  实例销毁之前调用。在这一步，实例仍然完全可用

destroyed  实例销毁后调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue生命周期函数</title>
	</head>
	<body>
		
		<div id="app">
			<h3 v-text="msg"></h3>
			<button @click="destroy">销毁</button>
		</div>
		
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					msg: "vue生命周期"
				},
				
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("beforeCreate")
				},
				//在实例创建完成后被立即调用
				created(){
					console.log("created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount(){
					console.log("beforeMount")
				},
				//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
				mounted(){
					console.log("mounted")	
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("beforeUpdate")
				},
				//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
				updated(){
					console.log("updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用
				beforeDestroy(){
					console.log("beforeDestroy")	
				},
				//实例销毁后调用。
				destroyed(){
					console.log("destroyed")
				},
				methods:{
					destroy(){
						this.$destroy()
					}
				}
			})
		</script>
	</body>
</html>

2.4 、前后端调用Axios

2.4.1 、Ajax

Ajax特点：局部刷新，异步访问（请求）

同步说明：

        特点：一个线程依次加载执行，如果数据没有加载完成则其他数据处于等待的状态.

异步说明：

Ajax 为啥可以异步？（设计原理：Ajax 引擎   ）

Ajax引擎：

  1. 用户发起请求,交给Ajax引擎进行处理, 用户可以执行其它的操作.
  2. Ajax引擎接收到用户请求之后, 发起Http请求访问目标服务器.
  3. 后台服务器将数据返回给Ajax引擎.
  4. Ajax引擎 将最终获取的数据 通过回调函数的方式 交给用户处理.

 

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@CrossOrigin
@RestController
@RequestMapping("/axios")
public class AxiosController {
    @Autowired
    private UserService userService;
    @GetMapping("findUserById")
    public User findUserById(Integer id){
        return userService.findUserById(id);
    }
    /**
     * 根据age和sex查询数据
     * URL地址:http://localhost:8090/axios/findUserByAS?age=18&sex=%E5%A5%B3
     * 请求类型: get
     * 参数: age/sex
     * 返回值: list<User>
     */
    @GetMapping("/findUserByAS")
    public List<User> findUserByAS(User user){
        return userService.findUserByAS(user) ;
    }
}


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1>ajax</h1>
		<script src="../js/axios.js"></script>
		
		<script>
			/**
						 *  作业1 
						 * 	url地址: http://localhost:8090/axios/findUserById?id=1
						 *  参数:    id=1
						 *  返回值:  console.log输出  
						 */
		let url1 = "http://localhost:8080/axios/findUserById?id=1"
		axios.get(url1)
		.then(function(promise){
		console.log(promise.data)
		 })
			
			// let url="http://locahost:8080/getUser"
			// axios.get(url)
			// 	 .then(function(promise){
			// 		 console.log(promise.data)
			// 	 })
			
	// 		let url1="http://locahost:8080/findUserById?id=1"
	// axios.get(url1)
	// .then(function(promise){
	// 	console.log(promise.data)
	// })
	/**
				 *  作业2:  根据age/sex查询用户信息
				 * 	url地址: http://localhost:8090/axios/findUserByAS
				 *  参数:    id=1
				 *  返回值:  console.log输出  
				 *  知识点:  根据对象传递参数时,使用params关键字
				 */
	let url2="http://localhost:8080/axios/findUserByAS"
	
	let user = {age : 18, sex : "女"}
	axios.get(url2,{params : user}).then(function(promise){
		console.log(promise.data)
	})
	
		</script>
		
		
		
		
		
		
		
		
		
		
	</body>
</html>

3 、vue客户端

下载版本符合的node.js，查询版本

 检查npm版本

 切换npm库

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

检查镜像配置

npm config list

 下载vue客户端（如果下载出现error尽量多下几次）

npm install -g @vue/cli --force

启动vue客户端

vue ui

创建vue项目

选择手动的预设 

 

 选择ESLint+ StandardConfig

 项目创建完成

导入一个项目：

运行项目：

执行APP：

 

最终展示页面：

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值