开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 实训笔记day2 -> 正文阅读

[JavaScript知识库]实训笔记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 "注册成功";
	}

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

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-10-11 17:25:59 更:2021-10-11 17:27:56

360图书馆购物三丰科技阅读网日历万年历 2024年5日历

-2024/5/18 19:17:59-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码