CGB2106-day05

最新推荐文章于 2023-11-23 15:05:54 发布

泡老师大迷弟

最新推荐文章于 2023-11-23 15:05:54 发布

阅读量116

点赞数

分类专栏： CGB学习文章标签： spring

本文链接：https://blog.csdn.net/PengK_aha/article/details/119903467

版权

CGB学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1. SpringMVC参数传递

1.1 简单参数接收

1.1.1 需求说明

根据id查询用户信息 http://localhost:8090/findUserById?id=1

1.1.2 编辑UserController

 /**
     *
     * 不同类型的请求注解说明:
     *  @PostMapping("")
     *  @PutMapping("")
     *  @DeleteMapping("")
     *  参数说明:
     *     1.参数名称必须与URL中的名称一致.
     *     2.SpringMVC可以根据用户的需求,自动的实现类型的转化
     *      底层实现: springmvc所有的参数默认都是String类型
     *      根据用户参数的类型,自动实现转化.
     *
     * URL地址:  http://localhost:8090/findUserById?id=1
     * 请求类型:  GET/DELETE  /POST/PUT
     * 参数: id=1
     * 返回值结果: User对象的json串
     *
     */
    //@RequestMapping(value = "/findUserById",method = RequestMethod.GET)
    @GetMapping("/findUserById")     //只允许接收get类型
    public User findUserById(Integer id){

        return userService.findUserById(id);
    }

1.1.3 编辑UserServiceImpl

 @Override
    public User findUserById(Integer id) {

        return userMapper.selectById(id);
    }

1.2 对象参数接收

1.2.1 需求

案例: 根据name=“王昭君” sex=女查询用户数据?
URL: http://localhost:8090/findUserByNS?name=王昭君&sex=女

1.2.2 编辑UserController

 /**
     * 规则: SpringMVC 可以利用对象的方式接收
     * 底层实现: 参数name="xxx" 拼接set形成setName,之后检查对象中
     * 是否有对应的setName(), 如果匹配该方法,则为对象赋值.
     * 注意事项: 参数名称最好以属性名称一致
     *
     * URL地址: http://localhost:8090/findUserByNS?name=王昭君&sex=女
     * 参数：  name=xxx&sex=xx
     * 返回值：List<User>
     */
    @GetMapping("/findUserByNS")
    public List<User> findUserByNS(User user){

        return userService.findUserByNS(user);
    }

1.2.3 编辑UserServiceImpl

//MP 可以根据对象中不为null的属性拼接where条件
    @Override
    public List<User> findUserByNS(User user) {

        QueryWrapper<User> queryWrapper = new QueryWrapper<>(user);
        return userMapper.selectList(queryWrapper);
    }

1.3 RestFul参数接收

1.3.1 RestFul介绍

REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。
定义: RESTFul 是一种请求的规则(语法/定义)

1.3.2 RESTFul说明

Get请求: http://localhost:8090/findUserByNS?name=王昭君&sex=女
信息: 1.查询请求
2.参数直观 name=xxx
3.请求的结构冗余. 不合适多个参数的写法.

请求优化:
http://localhost:8090/user/王昭君/女
优势:
1. 用户不能了解请求的意图规定:请求方法名称不能出现 “动词”,只能写名词.
2. 参数保密, 只有后端服务器清楚参数的意义.
3. 请求字节传输量少简洁.
注意事项:
1. URL地址中参数与参数之间使用 /分隔.
2. 请求的参数的位置一旦固定,不可轻易修改.
3. 用户发请求时,就应该按照restFul的结构执行.
4. restFul请求一般以get请求为主. put/delete/post

1.3.3 RESTFul案例

1.3.3.1 需求

查询 name=“貂蝉” age> 10 岁的用户.
URL: http://localhost:8090/user/貂蝉/10

1.3.3.2 编辑UserController

/**
     * 后端服务器接收规则:
     *     1.参数与参数之后使用 /分隔
     *     2.参数的位置一旦确定,一般不变.
     *     3.接收的参数使用 {形参变量}
     *     4.使用@PathVariable 接收
     *     5.如果参数有多个建议使用对象接收  参数必须与属性一致,SpringMVC自动封装
     * 注意事项: 如果名称不统一,则需要转化 具体如下:
     *          @PathVariable("name") String username
     *
     * url: http://localhost:8090/user/貂蝉/10
     * 参数: name/age
     * 返回值: List<User>
     */

    @GetMapping("/user/{name}/{age}")
    public List<User> findUserByNA(User user){

        return userService.findUserByNA(user);
    }




   /*
    说明: restFul写法1
    @GetMapping("/user/{name}/{age}")
    public List<User> findUserByNA(@PathVariable String name,
                                   @PathVariable Integer age){
        System.out.println(name);
        System.out.println(age);

        return null;
    }*/

1.3.3.3 编辑UserServiceImpl

 //规则: 字段与属性的逻辑运算符为 '=号'时使用实体(user)对象封装
    //查询 name="貂蝉" age> 10 岁 的用户.
    @Override
    public List<User> findUserByNA(User user) {
        QueryWrapper<User> queryWrapper = new QueryWrapper();
        queryWrapper.eq("name",user.getName())
                    .gt("age",user.getAge());
        return userMapper.selectList(queryWrapper);
    }

1.3.4 同名提交问题

1.3.4.1 需求

用户查询id=1,3,4,5的数据. 如果有同名参数一般采用 ',号 ’ 分隔
URL: http://localhost:8090/getUserByIds?ids=1,3,4,5

1.3.4.2 编辑UserController

 /**
     * 规则: 如果参数使用,号分隔,则SpringMVC可以自动的转化为数组.
     * 查询多个用户
     * URL: http://localhost:8090/getUserByIds?ids=1,3,4,5
     * 参数: ids = 1,3,4,5
     * 返回值: List<User>
     */
    @GetMapping("/getUserByIds")
    public List<User> getUserByIds(Integer[] ids){

        return userService.getUserByIds(ids);
    }

1.3.4.3 编辑UserServiceImpl

 @Override
    public List<User> getUserByIds(Integer[] ids) {

        List<Integer> idList = Arrays.asList(ids);
        return userMapper.selectBatchIds(idList);
    }

2 VUE课题笔记

2.1 VUE 入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
		<!--1. 导入js类库 -->
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!--基本语法
		  1.导入JS类库
		  2.指定VUE渲染区域
		  3.实例化VUE对象
		  4.数据取值-->
		  <div id="app">
			  <!-- 规则说明：
					1.{{msg}} 当页面没有渲染成功时，以原标签展现
					2.v-text  当页面没有渲染完成，则不予展现
					3.v-html  将html代码片段 渲染展现
					-->
					
			  <h1>{{msg}}</h1>
			  <!-- 1.v-text -->
			  <h1 v-text="msg"></h1> 
			  <!-- 2.v-html -->
			  <div v-html ="div"></div>
		  </div>
		  
		
		<!--2.创建vue对象  -->
		<script>
			/*关于js中变量定义说明：
				1.var 没有作用域的概念，容易出现安全性的问题 成员变量
				2.let 作用与var类似，有作用域的概念 局部变量
				3.const 定义常量*/
			const app = new Vue({
				el:"#app",
				data:{
					msg:"vue入门案例",
					div: "<h3>我是一个 标题标签</h3>"
				}
			})
		</script> 
			
		
	</body>
</html>

2.2 var/let/const说明

关于JS中变量定义说明:
1.var 没有作用域的概念容易出现安全性问题. 成员变量
2.let 作用于var类似, 有作用域的概念局部变量
3.const 定义常量

2.3 v-text/v-html说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<div id="app">
			<!-- 规则说明:  
				1.{{msg}} 当页面没有渲染成功时.以原标签展现.
				2.v-text  当页面没有渲染完成,则不予展现.
				3.v-html  将html代码片段 渲染展现
			 -->
			<h1>{{msg}}</h1>
			<!-- 1.v-text  -->
			<h1 v-text="msg"></h1>
			<!-- 2.v-html -->
			<div v-html="div"></div>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: "vue入门案例 哈哈哈哈",
					div: "<h3>我是一个标题标签</h3>"
				}
			})
		</script>
	</body>
</html>

2.4 双向数据绑定

2.4.1 页面demo

2.4.2 MVVM思想:

M: model 数据层
V: view 视图层
VM: 视图数据的控制层

流程:
1. Model变化, 虚拟DOM操作内存数据变化. 所以页面变化.
2. View变化, 虚拟DOM操作内存数据变化, 数据变化.

2.5 事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 事件绑定的语法:
				v-on:click="简单的计算"
				v-on:click="点击事件"
			 -->
			
			展现数据: {{num}}
			<button v-on:click="num++">自增</button>
			<!-- <button v-on:click="addNum">自增函数</button> -->
			<button @click="addNum">自增函数</button>
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num: 100
				},
				methods: {
					addNum: function(){
						this.num ++
					}
				}
			})
		</script>
	</body>
</html>

2.6 分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求: 用户可以手动的输入成绩.
				       根据成绩,自动计算等级.	
				 等级规范:
						>=90  优秀
						>=80  良好
						>=70  中等
						否则  继续努力
				 命令: 
						1.v-if       如果判断为true 则展现元素
						2.v-else-if  如果不满足v-if,检查是否满足v-else-if
						3.v-else     上述都不满足  才展现.
			 -->
			请输入成绩: <input type="text" v-model="score"/><br>
			等级: 
				<h3 v-if="score >=90">优秀</h3>
				<h3 v-else-if="score >=80">良好</h3>
				<h3 v-else-if="score >=70">中等</h3>
				<h3 v-else>继续努力</h3>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					score: 0
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>

2.7 循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 指令: v-for 展现的标签 -->
			<!-- 案例1: 以循环方式输出爱好 -->
			<div id="demo1">
				<!-- 如果只有一个参数,则value表示数据 -->
				<p v-for="value in hobby" v-text="value"></p>
			</div>
			<hr />
			
			<!-- 案例2: 以循环方式输出爱好 展现下标
				 arg1: value的值的数据
				 arg2: 下标的数据.
			 -->
			<div id="demo2">
				<p v-for="arg1,arg2 in hobby">
					<span v-text="arg2+1"></span>
					----
					<span v-text="arg1"></span>
				</p>
			</div>
			<hr />
			
			<div id="demo3">
				<table border="1px" width="90%">
					<tr align="center">
						<td>编号</td>
						<td>名称</td>
						<td>年龄</td>
					</tr>
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
					</tr>
				</table>
			</div>
			<hr />
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					hobby: ["敲代码","改BUG","钻研技术"],
					userList: [{id:100,name:"泰森",age:60},
							   {id:101,name:"嘴炮",age:40},
							   {id:102,name:"泰坦巨猿",age:300000},
							  ],
				},
				methods: {
				}
			})
		</script>
	</body>
</html>