1.MVC思想说明

2. VUE基本用法

2.1 表单双向数据绑定

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单双向数据绑定</title></head><body><div id="app"><!-- 问题: 表单中的哪些标签可以使用双向数据绑定双向数据绑定说明: 用户可以录入的标签.答案: 1.文本框 2.单选框 3.多选框 4.下拉框  5.文本域--><form action="http://baidu.com"><div>用户名: <input type="text" v-model="username"/></div><div>性别: <input type="radio" value="男" name="sex"   v-model="sex"/>男<input  type="radio" value="女" name="sex" v-model="sex"/>女</div><div>爱好: <input type="checkbox" name="hobby" value="敲代码" v-model="hobby"/>敲代码<input type="checkbox" name="hobby" value="打游戏" v-model="hobby"/>打游戏<input type="checkbox" name="hobby" value="打豆豆" v-model="hobby"/>打豆豆</div><div><!-- VUE的点击事件中有一个属性,可以取消标签的默认行为@click.prevent常用场景: 1. form标签  阻止 action 提交2. a标签     阻止 href   属性跳转--><input type="submit" value="提交" @click.prevent="formBtn"/></div></form></div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {username: 'aaaa',sex: '女',hobby: ['敲代码']},methods: {formBtn(){alert("点击按钮 ajax提交数据")}}})</script></body>
</html>

2.2 常用双向数据绑定属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单双向数据绑定</title></head><body><div id="app"><!--1.v-model.number 将输入的内容转化为数值类型  -->年龄: <input type="number" v-model.number="ageTest"/><button @click="addNum">加法</button><br><!--2.去除多余的空格  -->用户名: <input type="text" v-model.trim="username" />用户输入的长度 {{username.length}}<br><!-- 3.懒加载方式 用户离焦触发 -->信息: <input type="text" v-model.lazy="msg" /> {{msg}}</div><script src="../js/vue.js"></script><script>const app = new Vue({el: "#app",data: {ageTest: '',username: '',msg: ''},methods: {addNum(){this.ageTest = this.ageTest + 1}}})</script></body>
</html>

2.3 VUE生命周期

2.3.1 如何理解生命周期

说明: VUE中有一整套完整的VUE对象创建/使用/销毁的流程. 如果用户需要在某个特定的点有特殊的需求,可以对VUE对象进行扩展!

2.3.2 生命周期流程

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试vue生命周期函数</title></head><body><!-- 知识梳理:1.生命周期函数的方法名称 必须固定.2.生命周期函数是VUE对象特有的函数.应该放到根目录下.3.当页面渲染成功之后, 一共执行了4个生命周期方法.第一类: VUE对象的创建.beforeCreate:对象创建前调用created: VUE对象已经创建完成之后调用    第二类: VUE对象的挂载(渲染)beforeMount:  el : "#app",VUE对象在找到@APP标签之前先执行该函数.mounted: 当挂载完成(渲染完成),用户可以看到页面数据之后调用该函数4. 用户修改阶段:第三类:beforeUpdate: 当用户修改数据 点击"回车" 之后调用该函数过渡: 数据已经被修改updated: 数据已经被修改之后调用该函数5. 销毁阶段:销毁函数,VUE对象默认不会调用. 可以通过函数由用户调用beforeDestroy: 在销毁方法执行前destroyed:     标志着VUE对象已经销毁.--><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生命周期"},methods:{},//在实例初始化之后，数据观测 (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>

3 VUE 前后端调用

3.1 前后端调用流程

3.2 Ajax

3.2.1 Ajax介绍

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 [3]

特点:
局部刷新,异步访问

3.2.2 Ajax异步原理

请求同步说明:
用户向服务器发起请求,如果服务器正忙,这时程序处于等待的状态.这时页面处于加载 ,同时用户不能操作.
为了让用户的体验更好,则一般采用异步.

异步调用的原理:

步骤:
1. 用户发起Ajax请求, Ajax内部机制,将请求交给Ajax引擎处理.
2. Ajax引擎接收到用户的请求之后,重写发起一个新的请求.访问后端服务器.
3. 当服务器端接收到了 Ajax请求之后,完成业务处理.之后将数据响应给Ajax引擎.
4. Ajax引擎通过事先约定好的回调函数, 将服务器数据交还给用户.
5.用户在请求的过程中,可以完成自己的任务.
注意事项: 多个Ajax的请求不关注顺序.

3.3 Axios 入门案例

3.3.1 编辑页面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Axios入门案例</title></head><body><h1>Ajax请求练习</h1><!-- 使用步骤:1.导入JS函数类库2.发起Ajax请求,之后业务处理.--><script src="../js/axios.js"></script><script>/* axios请求方式1.请求类型1. get  执行查询业务2. post 执行form表单提交(登录/新增)3. put  执行修改操作 4. delete 执行删除业务时.2. axios语法axios.get("url地址信息","参数信息").then(function(args){})3. 关于args参数说明axios为了统筹请求状态.将所有的数据封装为promise对象*//* 案例1: 利用axios获取后台用户列表信息url: http://localhost:8090/findAll */axios.get("http://localhost:8090/findAll").then(function(promise){console.log(promise)console.log(promise.data)})</script></body>
</html>

3.3.2 开启跨域

3.3.3 编辑UserController

3.3.4 编辑UserServiceImpl

4. Axios 请求案例

4.1 GET-带参数(方式1)

4.1.1 编辑页面html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>前后端调用</title></head><body><h1>前后端调用</h1><script src="../js/axios.js"></script><script>/* 需求1: 查询id=1的用户GET方式1: 动态拼接参数的写法 url: http://localhost:8090/axios/getUserById?id=1*/let url1 = "http://localhost:8090/axios/getUserById?id=1"axios.get(url1).then(promise => {console.log(promise.data)})</script></body>
</html>

4.1.2 编辑AxiosController

@RestController
@CrossOrigin
@RequestMapping("/axios")
public class AxiosController {@Autowiredprivate UserService userService;/*** URL: http://localhost:8090/axios/getUserById?id=1* 参数: id=1* 返回值: User对象*/@GetMapping("/getUserById")public User getUserById(Integer id){return userService.findUserById(id);}}

4.1.3 编辑AxiosService

4.2 GET-带参数(restFul格式)

4.2.1 编辑页面HTML

/* GET方式2: 利用restFul查询数据需求:     查询sex=女 age>18原因: restFul结构越来越受欢迎,则拼接restFul结构 变得繁琐.模板字符串:  语法: 一对反引号  ``取值: ${key} 形式取值优势: 保留代码的格式*/let sex2 = "女"let age2 = 18//let url2 = "http://localhost:8090/axios/user/"+sex2+"/"+age2let url2 = `http://localhost:8090/axios/user/${sex2}/${age2}`axios.get(url2).then(promise => {console.log(promise.data)})

4.2.2 编辑AxiosController

4.2.3 编辑UserServiceImpl

4.2.4 页面效果展现

4.3 GET-带参数(对象写法)

4.3.1 编辑html页面

/*** GET方式3: 利用对象实现参数传递* 需求3: 查询 name="王昭君" sex=女 age=19* 参数语法:*     数据结构: {}*   关键字key(固定写法): params *   value: 用户需要传递的值*/let user = {name: '王昭君', sex: '女',age: 19}let url3 = "http://localhost:8090/axios/getUser"axios.get(url3,{params : user}).then(promise => {console.log(promise.data)})

4.3.2 编辑AxiosController

4.3.3 编辑UserServiceImpl

4.3.4 页面效果展现

CGB2106-Day06相关推荐

js中while死循环语句_Java系列教程day06——循环语句
day06--循环语句提纲: 1.循环结构 2.while循环 3.do-while循环 4.for循环 5.break语句 6.continue语句 7.循环嵌套 8.作业一.循环结构 1.1 ...
Python菜鸟入门：day06元组与字典
写在前面: 此博客仅用于记录个人学习进度,学识浅薄,若有错误观点欢迎评论区指出.欢迎各位前来交流.(部分材料来源网络,若有侵权,立即删除) 传送门: day01基础知识 day02知识分类 day03 ...
day06【后台】两套分配
day06[后台]两套分配 1.权限控制权限控制机制的本质就是"用钥匙开锁" 2.给Admin分配Role 2.1.思路通过页面操作把 Admin 和 Role 之间的关联关系 ...
PYTHON1.day06
day05回顾循环语句 for 语句 for 变量列表 in 可迭代对象: 语句块1 else: 语句块2 ...
Python自动化开发课堂笔记【Day06】 - Python基础（模块）
正则模块常用正则表达式列表(盗图一张:-P) 1 import re 2 3 print(re.findall('\w','abc123d_ef * | - =')) 4 print(re.find ...
day06 Elasticsearch搜索引擎2
day06 Elasticsearch搜索引擎2 1.DSL查询文档 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL(Domain Specific Language)来 ...
PAT甲级刷题记录-(AcWing)-(Day06树 8题)
PAT甲级刷题记录-(AcWing)-(Day06树 8题) 课程来源AcWing 其中AcWing中的题目为翻译好的中文题目今日刷题列表 1110 Complete Binary Tree 111 ...
day06数组-一维数组二维数组
数组: 数组到底是什么呢?有什么特点呢?通过上面的分析:我们可以得到如下两句话: 1.数组是存储同一种数据类型多个元素的集合.也可以看成是一个容器. ...
C语言学习基础(day06)(达内)
day06 while 循环和 do 循环 . 缓冲区 . 一维数每日英语: index:索引号,偏移量 array:数组 size:大小回顾: 1. 数据类型转换隐式转换:小转大,有转无,整转 ...
Python学校Day06
Python学习Day06 列表的加法和乘法 >>> #列表的加法 >>> s = [1,2,3] >>> t = [4,5,6] >> ...

CGB2106-Day06