CGB2107-Day07-实现前后端调用
2024-05-15 06:51:06
CGB2107-Day07-实现前后端调用
1. 框架整理
1.1 展现Sql日志
#语法: 1.key:(空格)value结构
# 2.注意层级缩进
server:port: 8090#整合1.数据源
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=trueusername: rootpassword: root#关于密码0 开头的说明#password: "0123456"#SpringBoot整合mybatis
mybatis:#指定别名包type-aliases-package: com.jt.pojo#加载指定的xml映射文件mapper-locations: classpath:/mybatis/mappers/*.xml#开启驼峰映射configuration:map-underscore-to-camel-case: true#Sql日志文件打印
logging:level:com.jt.mapper: debug
1.2 SpringMVC参数传递说明
1.2.1 简单参数传值
说明: 利用MVC可以直接将参数写到方法中,可以直接获取.
/*** URL:http://localhost:8090/mvc?name="李四"* @return*/@GetMapping("/mvc")public Object testDemo(String name){return "参数名称:"+name;}
123456789
1.2.2 对象接收数据
说明: 如果用户传递的数据有多个, 则可以使用对象接收.
/*** URL:http://localhost:8090/mvc?name="李四"&age=18&sex="女"* 说明: 如果使用对象的方式进行接收,则必须有Setxx方法.* @return*/@GetMapping("/mvc")public Object testDemo(User user){return "参数名称:"+user;}
12345678910
1.2.3 对象的引用赋值
问题: 如果前端出现了同名提交的参数问题.则直接影响后台数据接收.所以前端参数要求不能出现重名属性.
解决方案: 利用对象的引用赋值.
<input type="text" name="name" value="二郎神"/><input type="text" name="age" value="3000"/><input type="text" name="dog.name" value="啸天犬"/><input type="text" name="dog.age" value="1800"/>
1.封装User对象
public class User {private Integer id;private String name;private Integer age;private Dog dog; //对象的引用}public class Dog {private Integer id;private String name;private Integer age;}
1.3 RESTFul业务说明
1.3.1 编辑UserController方法
/*** 作业:* 5. 更新操作 利用restFul的结构, 根据Id修改数据,修改name/age* URL:http://localhost:8090/user/貂蝉/18/227 PUT* 查询: http://localhost:8090/user/18 GET* 解析: URL:http://localhost:8090/user/{name}/{age}/{id}** RestFul语法:* 1.用户url编辑* 1.1 参数与参数之间使用/分割.* 1.2 restFul结构顺序一旦确定,不能随意更改* 1.3 如果使用restFul结构,请求路径中不能出现动词.隐藏目的.** 2.用户规范:* 由于restFul结构请求路径都是名词,所以不能区分业务逻辑.* 所以采用请求类型,严格区分业务需求.* 2.1 GET 查询操作* 2.2 POST 新增操作/form表单提交* 2.3 PUT 修改操作* 2.4 DELETE 删除操作** 3.参数接收* 1.参数与参数之间使用/分割.* 2.参数必须使用{xxx}包裹* 3.使用特定的注解@PathVariable("name") String name 接收参数* 4.如果接收参数的名称与对象中的属性名称一致,则可以使用对象接收**/@GetMapping("/user/{name}/{age}/{id}")public Object restFul(User user){userService.update(user);return "数据更新成功!!!";}
1.3.2 编辑UserService
- 接口写法
public interface UserService {void update(User user);
}
1234
- 编辑业务实现类
@Overridepublic void update(User user) {userMapper.update(user);}
12345
1.3.3 编辑Mapper接口
//@Delete("xxxxx")//@Insert("sql语句")//@Select("查询操作的sql")@Update("update demo_user set name=#{name}, age=#{age} where id=#{id}")void update(User user);
12345
2. 前后端调用
2.1 VUE入门案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>VUE入门案例</title></head><body><h1>vue入门案例</h1><div id="app"><h3>获取数据: {{msg}}</h3></div><!-- 使用步骤:1.导入js.文件2.准备根标签3.创建vue对象,并且实现挂载.4.定义属性.实现数据动态取值知识补充: new Vue({}) 函数式编程关于变量说明:1. js中变量定义 早期 var 全局变量 没有作用域.2. let有作用域的概念3. const 常量定义 不允许修改--><script src="../js/vue.js"></script><script>//1.创建VUE对象const app = new Vue({//el: "#app",data: {msg: "您好VUE JS"}})</script></body>
</html>
2.2 VUE 生命周期函数(重点!!!)
2.2.1 生命周期函数图例
概念: 生命周期函数,是VUE针对与用户提供的扩展的功能.如果编辑了生命周期函数,则vue对象自动执行,无需手动调用.
生命周期函数种类:
- 初始化阶段 beforeCreate created beforeMount mounted VUE对象正在的实例化
- Vue对象的修改 beforeUpdate, updated
- 对象销毁 beforeDestroy destroyed
2.2.2 VUE生命周期函数案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试vue生命周期函数</title></head><body><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生命周期"},//在实例初始化之后，数据观测 (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(){//强制VUE对象执行销毁操作this.$destroy()}}})</script></body>
</html>
2.2.3 生命周期函数难点讲解(了解)
- beforeCreate
官网说明: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
解析: VUE对象被JS刚解析之后,实例化成功. 内部的属性暂时都为null. - created
官方说明: 在实例创建完成后被立即调用
解析: VUE对象开始加载其中的属性和属性的值,当加载完成,对象实例化成功!!! 仅限于创建不执行业务操作. - beforeMount
官方说明: 在挂载开始之前被调用：相关的 render 函数首次被调用。
解析: vue对象中 el: “#app”, 通过app指定的ID,将指定的区域交给Vue对象进行管理. - mounted
官方说明: 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
解析: 当对象创建完成之后,并且指定区域开始 “渲染”,将区域中的标签/表达式进行解析加载. 当数据加载成功之后,这时mounted执行完成.这时用户可以看到解析后的页面.
3 前后端调用Axios
3.1 Ajax
3.1.1 同步说明
同步特点: 一个线程成依次加载执行,如果数据没有加载完成则其他数据处于等待的状态.
3.1.2 异步说明
Ajax特点: 局部刷新,异步访问.
Ajax为什么可以异步: Ajax的设计原理-Ajax引擎
3.1.3 Ajax引擎
- 用户发起请求,交给Ajax引擎进行处理, 用户可以执行其它的操作.
- Ajax引擎接收到用户请求之后, 发起Http请求访问目标服务器.
- 后台服务器将数据返回给Ajax引擎.
- Ajax引擎 将最终获取的数据 通过回调函数的方式 交给用户处理.
3.2 Axios 案例练习
3.2.1 编辑页面JS
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>Ajax请求的测试</h1><!-- 1.引入JS --><script src="../js/axios.js"></script><!-- 2.axios入门 --><script>/*** 需求:获取后台服务器的业务数据* URL: http://localhost:8090/getUser* 参数说明:* url: ajax的请求的地址.* 参数: ajax请求的参数.*/let url = "http://localhost:8090/getUser"axios.get(url).then(function(promise){console.log(promise.data)})</script></body>
</html>
3.2.2 编辑后台UserController
4 Axios 作业练习
4.1 根据id查询数据
4.1.1 编辑页面html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Get请求练习</title></head><body><h1>Ajax项目前测试</h1><!-- 导入js jar包 --><script src="../js/axios.js"></script><script>/*** 总结: 前端Get请求参数传递的方式3种* 方式1: 通过?属性=属性值的方法拼接.* 方式2: 通过对象的方式实现数据传递.* 方式3: 利用restFul的结构实现参数传递.* * 作业1: 根据ID查询用户信息* 作业2: 根据age/sex查询用户信息*//*** 作业1 * url地址: http://localhost:8090/axios/findUserById* 参数: id=1* 返回值: console.log输出 */let url1 = "http://localhost:8090/axios/findUserById?id=1"axios.get(url1).then(function(promise){console.log(promise.data)})</script></body>
</html>
4.1.2 编辑AxiosController
package com.jt.controller;import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@CrossOrigin
@RequestMapping("/axios")
public class AxiosController {@Autowiredprivate UserService userService;/*** 根据ID查询用户信息* URL: http://localhost:8090/axios/findUserById?id=1*/@GetMapping("/findUserById")public User findUserById(Integer id){return userService.findUserById(id);}
}
4.2 根据name和age查询数据
4.2.1 编辑HTML页面
/*** 作业2: 根据age/sex查询用户信息* url地址: http://localhost:8090/axios/findUserByAS* 参数: id=1* 返回值: console.log输出 * 知识点: 根据对象传递参数时,使用params关键字*/let url2 = "http://localhost:8090/axios/findUserByAS"//封装对象let user = {age: 18,sex: "女"}axios.get(url2,{params : user}).then(function(promise){console.log(promise.data)})
1234567891011121314151617
4.2.2 F12 数据说明
4.2.3 编辑AxiosController
/*** 根据age和sex查询数据* URL地址:http://localhost:8090/axios/findUserByAS?age=18&sex=%E5%A5%B3* 请求类型: get* 参数: age/sex* 返回值: list<User>*/@GetMapping("/findUserByAS")public List<User> findUserByAS(User user){return userService.findUserByAS(user);}
123456789101112
4.2.4 编辑AxiosService
1.业务接口
- 编辑UserServiceImpl实现类
@Overridepublic List<User> findUserByAS(User user) {return userMapper.findUserByAS(user);}
12345
4.2.5 编辑AxiosMapper
4.2.6 页面效果展现
CGB2107-Day07-实现前后端调用相关推荐
- Hybris平台Web架构模式演变：前后端分离
"前后端分离"显然已不是什么新鲜的话题,表面上看是一场架构模式的变革,但实质上是为了解决以往传统的服务端MVC设计模式的一些诟病和痛点.前后端分离带来的全新的前后端协作方式能够让专 ...
- postman调用webservice接口_【分享】关于接口对前后端和测试的意义
1.什么是接口? 接口测试主要用于外部系统与系统之间以及内部各个子系统之间的交互点,定义特定的交互点,然后通过这些交互点来,通过一些特殊的规则也就是协议,来进行数据之间的交互. 2.接口都有哪些类型? ...
- postman调用webservice接口_接口对前后端和测试的意义
1.什么是接口? 接口测试主要用于外部系统与系统之间以及内部各个子系统之间的交互点,定义特定的交互点,然后通过这些交互点来,通过一些特殊的规则也就是协议,来进行数据之间的交互. 2.接口都有哪些类型? ...
- pc网站调用微服务器,【微服务】前后端分离-跨域问题和解决方案
跨域问题存在的原因 跨域问题的根本原因:因为浏览器收到同源策略的限制,当前域名的js只能读取同域下的窗口属性.什么叫做同源策略?就是不同的域名, 不同端口, 不同的协议不允许共享资源的,保障浏览器安全 ...
- vue和Java做数据交互_基于vue和springmvc前后端分离，json类接口调用介绍
基于vue和springmvc前后端分离,json类接口调用介绍 版本要求:spring-3.2.9.RELEASE.vue-2.9.2.axios-0.17.1,其中axios作为http clie ...
- vue调用接口修改密码_vue开发前后端分离前端如何调用后端接口？
对前后端分离如何调用接口这块感觉一直没怎么弄明白,但又不知如何说明,下面我模拟一个项目说明我的问题. 现在我们有个项目,前端用vue开发,后端php开发,后端测试地址为:localhost:8181, ...
- 自制预防校园暴力的智能监控系统：打通CentOS前后端，调用百度AI及服务器架构演进
本文是[小码哥李明杰老师]指导完成的山东大学引航计划公益人工智能科研实训项目. 自制预防校园暴力的智能监控系统 打通前后端 因为前端代码中请求的IP地址不对(是本机的),所以需要更改IP地址为Cent ...
- week06 12 我们准备数据 前端调用rpc 前后端联调一下
用postman发送请求 出现一个问题 我在return结果前 要将数据转换成字典 所以我们用json.dumps()后再json.load()回来 这样就避免了这个问题 因为数据结构的数据 比如li ...
- node、Mongo项目如何前后端分离提供接口给前端
node接口编写,vue-cli代理接口方法 通常前端使用的MocK 数据的方法,去模拟假的数据,但是如果有node Mongodb 去写数据的话就不需要在去mock 数据了,具体的方法如下. 首先 ...
最新文章
- 神策 2021 数据驱动大会，与“现代营销之父”科特勒的认知同行
- SAP Spartacus ComponentData的提前subscription
- [C/C++]关于C++11中的std::move和std::forward
- docker安装ping命令
- java层 native层_Java层的ServiceManager和Native层的ServiceManager的对应过程
- springMVC环境搭建
- 简单DNS服务器架设
- php跨域请求解决方案_解决TP接口跨域问题
- [BUG]Git Sever搭建与相关错误处理
- Service Manager流程，派BC_REPLY，唤醒FregServer流程，返回BR_TRANSACTION_COMPLETE，睡眠等待proc-gt;wait...
- HTML 基础之 学生信息表
- C#门诊收费管理系统设计(数据库+源码+文档)
- 抖音api开放平台对接_抖音视频API解析接口
- SQL Server 2012 下载和安装教程
- 自定义拖动条android,Android自定义滑动带（横条指示器）
- 启动IDEA时出现error launching idea failed to create jvm的解决办法
- layui表格宽度自适应
- FP6276兼容芯片可过EMI认证测试
- 关于解决 Failed to prepare partial IU:
- python可以用else作为变量名_在Python中可以使用if作为变量名。