restful vue.js生命周期 ajax

最新推荐文章于 2021-11-21 15:16:40 发布

T-影

最新推荐文章于 2021-11-21 15:16:40 发布

阅读量93

点赞数

分类专栏：笔记文章标签： restful java

本文链接：https://blog.csdn.net/weixin_60590058/article/details/120544223

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

restful方式知识点

RestFul语法:
1.用户url编辑
1.1 参数与参数之间使用/分割.
1.2 restFul结构顺序一旦确定,不能随意更改
1.3 如果使用restFul结构,请求路径中不能出现动词.隐藏目的.
2.用户规范:
由于restFul结构请求路径都是名词,所以不能区分业务逻辑.
所以采用请求类型,严格区分业务需求.
2.1 GET 查询操作
2.2 POST 新增操作/form表单提交
2.3 PUT 修改操作
2.4 DELETE 删除操作
3.参数接收
1.参数与参数之间使用/分割.
2.参数必须使用{xxx}包裹
3.使用特定的注解@PathVariable(“name”) String name 接收参数
4.如果接收参数的名称与对象中的属性名称一致,则可以使用对象接收

restful:如果参数名称与对象中的属性名称一致，可以直接用对象接收
不用使用@PathVariable(" ")注解

    //URL:http://localhost:9000/user/貂蝉/18/227
    //解析: URL:http://localhost:9000/user/{name}/{age}/{id}
//    @GetMapping("user/{name}/{age}/{id}")
//    public String updateUser(@PathVariable("name") String name,
//                           @PathVariable("age") Integer age,
//                           @PathVariable("id") Integer id){
//        User user = new User();
//        user.setName(name).setAge(age).setId(id);
//        userService.updateUser(user);
//        return "已更新";
//    }
    @GetMapping("user/{name}/{age}/{id}")//restful:如果参数名称与对象中的属性名称一致，可以直接用对象接收
    public String updateUser(User user){
        userService.updateUser(user);
        return "已更新";
    }

简单sql语句可以直接在mapper中使用注解方式写

package com.jt.mapper;

import com.jt.pojo.User;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import java.lang.reflect.Array;
import java.util.List;

public interface UserMapper {
    List<User> findAll();

    User findById(Integer id);

    User findUserByNA(User user);

    List<User> findUserLike(String name);

    List<User> findUserByIds(int[] ids);

    List<User> findUser2(User user);
//    @Select("查询语句")
//    @Update("更新语句")
//    @Delete("删除语句")
//    @Insert("新增语句")
    void updateUser(User user);
}

前端：vue.js

生命周期
初始化阶段：beforeCreate,Created,beforeMount,mounted
修改更新阶段：beforeUpdate,updated
销毁阶段：beforeDestroy，destroyed

生命周期函数难点讲解(了解)
beforeCreate
官网说明: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
解析: VUE对象被JS刚解析之后,实例化成功. 内部的属性暂时都为null.

created
官方说明: 在实例创建完成后被立即调用
解析: VUE对象开始加载其中的属性和属性的值,当加载完成,对象实例化成功!!! 仅限于创建不执行业务操作.

beforeMount
官方说明: 在挂载开始之前被调用：相关的 render 函数首次被调用。
解析: vue对象中 el: “#app”, 通过app指定的ID,将指定的区域交给Vue对象进行管理.

mounted
官方说明: 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
解析: 当对象创建完成之后,并且指定区域开始 “渲染”,将区域中的标签/表达式进行解析加载. 当数据加载成功之后,这时mounted执行完成.这时

<!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>

ajax引擎

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1>获取请求数据</h1>
		<script src="../js/axios.js"></script>
		<script>
			/**获取后台服务器的业务数据
			 * http://localhost:9000/findById?id=1
			 * 参数说明：
			 * url:ajax的请求的地址
			 * 参数：ajax请求的参数
			 * then:封装回掉函数的关键字
			 * 后端服务器需要加注解：@CrossOrigin放行js
			 * */
			 let url='http://localhost:9000/findById?id=3'
			 axios.get(url)
				  .then(function(promise){
					console.log(promise.data)
				})
		</script>
	</body>
</html>

ajax请求案例

注意后端需要加@CrossOrigin注解
作业1：根据ID查询用户信息

 let url = 'http://localhost:9000/ajax/findById?id=1'
			 axios.get(url)
				  .then(function(promise){
					  console.log(promise.data)
				  })

作业2：根据age/sex查询用户信息

 let url2 = 'http://localhost:9000/ajax/findByAS'
			 let user = {
				 age: 100,
				 sex: '男'
			 }
			 axios.get(url2,{params : user})
				  .then(function(promise){
					  console.log(promise.data)
				  })