SSM VUE Axios详解

目录
  • 如何展示Sql日志？？
  • SpringMVC里参数传递的说明
  • restful
    • 语法：
    • 用户规范：
    • 参数接收：
    • MyBatis简化sql的注解
  • 前后端调用
    • 1.Vue入门案例
    • 2.Vue生命周期
      • 概念
      • 种类（③+⑧）
    • 3.前后端调用 Axios
      • Ajax
      • 案例一：
      • 案例二：通过?属性=属性值的方法拼接
      • 案例三：通过对象的方式实现数据传递
  • 总结

如何展示Sql日志？？

在yml核心配置文件内配置信息

#Sql日志文件打印
logging:
  level:
    com.jt.mapper: debug

SpringMVC里参数传递的说明

简单参数传值：利用MVC将参数写到方法中，直接传值

对象接收数据：参数过多封装成对象

对象的引用赋值：重名参数传递 dog.name

restful

语法：

1.参数与参数之间用/分割

2.参数顺序一旦定义，不可更改

3.请求路径中不可出现动词 因为不可暴露操作意图，隐藏目的

用户规范：

采用不同请求类型区分业务需求

get 查询

post 新增/form提交

put 修改

delete 删除

参数接收：

1.参数与参数之间用/分割

2.参数使用{}包裹

3.参数格式 @PathVariable("name") String name

4.若参数过多，参数名称与对象中属性名称一致，可使用对象接收

    @RequestMapping("user/{name}/{age}/{id}")
    public Integer user(@PathVariable("name") String name,
                        @PathVariable("age") Integer age,
                        @PathVariable("id") Integer id){
        return userService.user(name,age,id);
    }
    /*对象接收方式*/
//    @RequestMapping("user/{name}/{age}/{id}")
//    public Integer userr(User user){
//        return userService.user(user);
//    }
<update id="user">
        update demo_user set name=#{name},age=#{age} where id =#{id}
    </update>

MyBatis简化sql的注解

@Insert() @sele() @Update() @Delete()

简化Sql，但是只适用于简单操作，注解与映射文件不可同时出现

前后端调用

1.Vue入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>

		<div id="app">
			<h1>获取数据：{{msg}}</h1>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					msg:"您好 VUE JS"
				}
			})
		</script>

	</body>
</html>

js中的变量

var无作用域，let有作用域，const定义常量

2.Vue生命周期

概念

是VUE针对用户提供的扩展的功能，生命周期函数是自动执行的

种类（③+⑧）

1.初始化阶段④

beforeCreate（创建Vue对象，属性暂时为null） Created（加载其中的属性值，仅限创建不执行，实例化成功）

beforeMount（解析el:"#app"，将指定区域/数据渲染区域交给Vue对象管理） Mouted（对象创建后，并且在指定区域开始渲染，解析表达式，执行成功之后，用户可可以看到解析后的页面）

2.对象使用阶段 VUE对象的修改②

beforeUpdate Updated

3.销毁阶段②

beforeDestroy Destroyed→VUE对象被销毁，不存在了

3.前后端调用 Axios

Ajax

特点：局部刷新，异步访问

同步与异步

Ajax设计原理：Ajax引擎

回调函数？？ 用来通知用户的

案例一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios练习</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<!-- http://localhost:8090/getUser -->
		<h1>Ajax入门案例</h1>
		<script>
			let url="http://localhost:8090/getUser"
			axios.get(url)
			       .then(function(promise){
				    console.log(promise.data)
			})
		</script>
	</body>
</html>

注意：需要在Controller层加注解@CrossOrigin！！！！！！！

案例二：通过?属性=属性值的方法拼接

需求：根据Id查询用户 url：url地址: http://localhost:8090/axios/findUserById

前端代码：

	let user = {
					age: 21,
					sex: "女"
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						params: user
					})
					.then(function(promise) {
						console.log(promise.data)
					})

案例三：通过对象的方式实现数据传递

需求：根据age/sex查询用户信息 url：http://localhost:8090/axios/findUserByAS

前端代码：

	let user = {
					age: 21,
					sex: "女"
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						params: user
					})
					.then(function(promise) {
						console.log(promise.data)
					})

总结

前端Get请求参数传递的方式3种

方式1: 通过?属性=属性值的方法拼接

方式2: 通过对象的方式实现数据传递

方式3: 利用restFul的结构实现参数传递.

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！

赞 (0)

相关推荐

  • vue 导航守卫和axios拦截器有哪些区别

    vue 导航守卫和axios拦截器有哪些区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时触发) 我们主要介绍的是可以验证用户登录状态的全局前置守卫,当一个导航触发时,全局前置守卫按照创建顺序调用.守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中. const router = new VueRouter({ ... })   router.beforeEac

  • Vue3配置axios跨域实现过程解析

    实现跨域共3个步骤: 1,vue3.0根目录下创建vue.config.js文件: module.exports = { devServer: { proxy: { '/api': { target: 'https://you.163.com/', //接口域名 changeOrigin: true, //是否跨域 ws: true, //是否代理 websockets secure: true, //是否https接口 pathRewrite: { //路径重置 '^/api': '' } }

  • vue axios拦截器常用之重复请求取消

    引言 上一篇介绍了axios的简单封装,知道了axios拦截器的应用场景和方法,今天来看一下对于响应时间过长且请求次数过高的情况拦截器如何处理. 取消请求的方法 Axios使用内部提供的CancelToken来取消请求 官网示例1:用CancelToken.source工厂方法创建 cancel token,像这样 const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/use

  • vue+SSM实现验证码功能

    源码:https://github.com/HannahLihui/StudentManager-SSM/tree/master/SSM-git/StudentManager-SSM-master 1.前端有一个img引入,这里this.src=this.src+'?'就会调用映射到后台的checkCode <el-form-item prop="code"> <img src="checkCode" alt="" width=

  • vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作

    我就废话不多说了,大家还是直接看代码吧~ Axios.all([request1, request2, request3]) .then( Axios.spread((area, acct, perms) => { console.log('全部加载完成') }) ) .catch(err => { console.log(err.response) }); 需要在当前路由引入axios import Axios from "axios"; 补充知识:vue,axios处理

  • ssm+vue前后端分离框架整合实现(附源码)

    前言 本文针对Spring+SpringMVC+Mybatis后台开发框架(基于maven构建)与vue前端框架(基于webpack构建)的项目整合进行介绍,对于ssm和vue单独项目的搭建不作为本文的重点,而着重介绍两者之间交互的要点. SSM 项目结构 说明 项目有service和web两个子项目组成,web依赖于service,其中web主要是control层内容,service则对应service层,而MyBatis内容放在了service项目中,spring配置文件放在了web项目中.

  • SSM VUE Axios详解

    SSM VUE Axios详解

    目录 如何展示Sql日志?? SpringMVC里参数传递的说明 restful 语法: 用户规范: 参数接收: MyBatis简化sql的注解 前后端调用 1.Vue入门案例 2.Vue生命周期 概念 种类(③+⑧) 3.前后端调用 Axios Ajax 案例一: 案例二:通过?属性=属性值的方法拼接 案例三:通过对象的方式实现数据传递 总结 如何展示Sql日志?? 在yml核心配置文件内配置信息 #Sql日志文件打印 logging: level: com.jt.mapper: debug

  • 使用eclipse + maven一步步搭建SSM框架教程详解

    使用eclipse + maven一步步搭建SSM框架教程详解

    SSM (SSM 框架集) SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架. 其中spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. SpringMVC分离了控制器.模型对象.分派器以及处理程序对象的角色,这种分离让它们更容易进行定制. MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架. 0.系统环境 1)Windows

  • vue组件详解之使用slot分发内容

    vue组件详解之使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-footer> </app> 当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到slot , 这个过程叫作内容分发( transclusion ). 注意两点: 1.< app>组件不知道它的挂载点会有什么内容.挂载点的内容是由<app >

  • Java SSM配置文件案例详解

    先对Spring SpringMVC和Mybatis单独进行配置,最后对三者进行整合配置 Spring 实际使用中,一般会使用注解+xml配置来实现spring功能,其中xml配置对上文进行总结,配置内容如下 <?xml version="1.0" encoding="UTF-8"?> <!--在使用spring 相关jar包的时候进行配置 每个jar包对应一个xmlns和schemaLocation路径--> <!--格式基本相关 只

  • 如何通过shell脚本自动生成vue文件详解

    如何通过shell脚本自动生成vue文件详解

    前言 最近在写nuxt项目时候每次新建页面都要去新建然后引入各种需要的依赖很是麻烦,所以想写一个脚本自动生成文件 省去手动新建 现写下实现方法 给大家参考 Mac下可直接运行 Windows下需要安装Cygwin类软件且配置环境变量后运行 使用方法 1.需要修改package.json 的scrpts 加一条create 或者自定义名字 主要是为了我们在terminal中输入指令后运行对应的脚本 package.json 2.在项目根目录新建一个template文件夹放自己的模板文件 文件内容根

  • 前端Vue项目详解--初始化及导航栏

    前端Vue项目详解--初始化及导航栏

    一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your cod

  • 如何换个角度使用VUE过滤器详解

    如何换个角度使用VUE过滤器详解

    前言 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求.然后就对vue中的filter一些用法结合源码好好的梳理了下.下边我们以一个日期格式化展开讨论. 1. 定义一个日期格式化函数 都9012了,我们就采用 ES Module的写法,在vue初始化的项目src的文件中新建一个filters文件夹,并在其中添加DateFmt.js文件,代码如下 export functio

  • vue组件文档（.md）中如何自动导入示例（.vue）详解

    症结(懒癌患者) 在写组件库文档的时候,会把示例代码粘贴到文档里,这样做有一个很恶心的地方:每次组件迭代或修改示例都需要重新修改文档中的代码片段.长年累月,苦不堪言. 猜想(狂想曲) 所以我想,可不可以把.vue文件里的template块和script块取出来,放入对应的.md文件中 比如在.md文件中 {{:xx.vue?type=(template|script)}} 便替换示例中对应的template|script块 # xx ## 示例代码 // {{:}} 定义变量规则模版(加个冒号防

  • 进入Hooks时代写出高质量react及vue组件详解

    进入Hooks时代写出高质量react及vue组件详解

    目录 概述 1.组件什么时候拆?怎么拆? 2.如何组织拆分出的组件文件? 3.如何用hooks抽离组件逻辑? 题外话:全局状态的管理 概述 vue和react都已经全面进入了hooks时代(在vue中也称为组合式api,为了方便后面统一称为hooks),然而受到以前react中类组件和vue2写法的影响,很多开发者都不能及时转换过来,以致于开发出一堆面条式代码,整体的代码质量反而不如改版以前了. hooks组件到底应该如何写,我也曾为此迷惘过一段时间.特别我以前以react开发居多,但在转到新岗

  • 详解如何运行vue项目

    在师兄的推荐下入坑vue.js ,发现不知如何运行GitHub上的开源项目,很尴尬.通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家. 可以看下我的github:https://github.com/padipata ,里面有我学习.工作写的一些vue项目. 言归正传~~ 首先,列出来我们需要的东西: node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm  npm的淘宝镜像 安装node.js从node.js官网下载

随机推荐