实训笔记day2

实训笔记day2

1.vue的初步练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script src="vue.js"></script>
	<script>
		function Vue(options){
			debugger;
			window.onload=options.mounted;
		}
		var options={
			"mounted":function(){
				debugger;
				console.log("运行");
				}
		}
		debugger;
		var vue=new Vue(options)
	</script>
</html>

在如上代码中,引用了vue框架

”mounted“

  • 类型Function

  • 详细

    1.实例挂载后调用,这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。

    注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick:(来源vue官网)

    mounted: function () {
      this.$nextTick(function () {
        // 仅在整个视图都被渲染之后才会运行的代码
      })
    }
    

2.通过mounted调用函数(实训笔记)

注释:

{

**实例:**类似于创建一个对象,里面包含钩子函数,data,methods.components等

**钩子函数:**钩子函数是在一个事件触发的时候,在系统级捕获到了他,然后做一些操作。一段用以处理系统消息的程序。“钩子”就是在某个阶段给你一个做某些处理的机会。(来自网络,侵删)

1、是个函数,在系统消息触发时被系统调用

2、不是用户自己触发的

钩子函数的名称是确定的,当系统消息触发,自动会调用。例如react的componentWillUpdate函数,用户只需要编写componentWillUpdate的函数体,当组件状态改变要更新时,系统就会调用componentWillUpdate。(来自网络,侵删)

**理解(钩子函数):**当系统组件状态信息更新时,函数会自动调用自身来完成更新。

**挂载:**将组件渲染,并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。

**组件:**组件是可复用的 Vue 实例,如果网页中的某一个部分需要在多个场景中使用,那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。

DOM元素:

DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。
通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。(来自网络,侵删)

**理解:**DOM提供了实时动态更新数据的功能。

}

data

在vue中数据必须放在data里面。

“el”

类似于选择器,eg:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <div id=app></div>
	</body>
	<script src="vue.js"></script>
	<script>
		var options={
            "el":"#app",
            ......
        }
	</script>
</html>

通过"el"选择“id=app”的盒子

V-for

相当于JSP中的foreach,遍历vue中的数组

事件处理

insert remove

在该例子中所有的函数都放在“methods”中。

在button按钮中v-on:click的用法是点击按钮执行函数。

eg2:商品界面缩略界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="" name="" id="" value="" />
			<button v-on:click="insert">insert</button>
			<table border="" cellspacing="" cellpadding="">
				<tr v-for="item in items"><td>{{item.name}}</td></tr>
				
			</table>
		</div>
	</body>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var options={
			"el":"#app",
			"data":{
				"items":[
					{"name":"test"},
					],
					},
					"methods":{
						"insert":function(){
							alert("insert");
							},
				},
		}
		var vue=new Vue(options)
	</script>
</html>

eg3:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="" name="" id="itemName" value="" />
			<button v-on:click="insert">insert</button>
			<table border="" cellspacing="" cellpadding="">
				<tr v-for="item in items"><td>{{item.name}}</td></tr>
				
			</table>
		</div>
	</body>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var options={
			"el":"#app",
			"data":{
				"items":[
					{"name":"test"},
					],
					},
					"methods":{
						"insert":function(){
							alert("insert");
							//1.找到输入框
							var input=document.getElementById("itemName")
							//2.取值
							var name=input.value;
							//3.创建对象
							var items={"name":name}
							//4.把对象放到data中的items数组中,界面自动更新
							this.items.push(items)
							},
				},
		}
		var vue=new Vue(options)
	</script>
</html>

对于eg3,在eg2的例子上添加了如下代码:

"methods":{
						"insert":function(){
							alert("insert");
							//1.找到输入框
							var input=document.getElementById("itemName")
							//2.取值
							var name=input.value;
							//3.创建对象
							var item={"name":name}
							//4.把对象放到data中的items数组中,界面自动更新
							this.items.push(item)
							},
				},


代码var items={“name”:name}表示创建一个数组对象,不一定要用“items”,可以用其他的关键词代替。但是由于在eg2中,“data”中数组”items“中的值是”name“,所以引号里面必须填name,而第二个name是表示值。

this.items.push(items)表示把对象放到data中的items数组中,界面自动更新(数据绑定技术,在vue中申请一个数组,数组变界面自动变)。

2.完整案例

2.1需求

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-STppcJbC-1633870302438)(C:\Users\幼儿园老大\Desktop\1.png)]

2.2数据库设计

1 user表

id ,username,password

1, root ,root

2, category分类表

id,name

1,手机

2,电脑

3,item商品表

id,name,price,image,desc,categoryId

1,mate10,900,1.jpg,mate10,1

4,admin管理员表

id,adminName,adminPassword

1,a ,a

2.3 用逆向工程生成sql,接口,实体类

1,eclipse先删除2,解压generator原始.rar

3,eclipse–>import

4,修改generatorConfifig.xml,修改数据库名,密码,修改包名,table

2.4创建mall项目

2.4.1查询

1,解压webDemo.rar,改名成mall

2,eclipse删除所有项目,import

3,在pom.xml中添加依赖

4,在资源管理中从generator拷贝src文件夹到mall的src/main/java

5,拷贝application.yml,从微信下载application(1).yml,改名成application.ym,

放到src/main/resource

6,打开WebDemoAppliation,添加@MapperScan()

7,创建controller包,创建TestController,中使用UserMapper查询成功

@RequestMapping("/testOrder")
public List<User> testOrder(){
    UserExample userExample=new UserExample();
    //userExample是逆向工程生成的,作用是排序
    userExample.setOrderByClasuse("id asc");
    //排序,asc是升序排列,desc是降序排列
    List<User> userList=userMapper.selectByExample(userExample);
    //定义一个集合,集合里面放的user
    //.selectByExample的作用是查询
    return userList;
}

8,找到WebDemoAppliation,run as 控制台显示tomcat start on port

9,浏览器中输入url

2.4.2用户注册应答

在com.tedu.webDemo.controller包下创建一个UserController类

实现用户注册的服务器简单应答

代码如下:

package com.tedu.webDemo.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.tedu.webDemo.mapper.UserMapper;

@RestController
public class UserController {
	@Autowired
	UserMapper userMapper;
	
	@RequestMapping("/user/register")
	public String register(String username,String password) {
		System.out.println("username"+username+",password"+password);
		return "注册成功";
	}
}

在该代码段中

public String register(String username,String password) {
		System.out.println("username"+username+",password"+password);
		return "注册成功";
	}

定义一个类传入参数,如果参数传入成功,则返回“注册成功”。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值