实训笔记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中的数组
事件处理
在该例子中所有的函数都放在“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 "注册成功";
}
定义一个类传入参数,如果参数传入成功,则返回“注册成功”。