-
2020-12-03 15:51:58
目前前后端交互,一般通过http协议、websocket协议来实现。
HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW.Word Wide Web)服务器传输超文本到本地浏览器的传送协议。
HTTP协议包括客户端和服务端两个实体,客户端发送请求给服务端,服务端返回响应给客户端,在HTTP协议中数据称为资源,可以是html文档,图片,也可以是普通文本
资源是通过URL定位的,当客户端需要访问服务器资源时,首先需要知道资源的URL,比如打开一个网站,URL的组成部分如下图:
一、请求:
GET /comments?postId=1 HTTP/1.1Host: 11.12.108.32:8090Connection: keep-aliveAccept: application/json, text/javascript, */*; q=0.01dataType: jsonUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36Referer: http://11.12.108.32:8090/views/index.htmlAccept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,de;q=0.8id=1603348193982
请求行:
GET /comments?postId=1 HTTP/1.1
请求头:
Host: 11.12.108.32:8090Connection: keep-aliveAccept: application/json, text/javascript, */*; q=0.01dataType: jsonUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36Referer: http://11.12.108.32:8090/views/index.htmlAccept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,de;q=0.8
请求数据:
postId=1
二、响应
HTTP/1.1 200Server: nginx/1.10.3Date: Mon, 30 Nov 2020 10:55:29 GMTContent-Type: application/json;charset=UTF-8Transfer-Encoding: chunkedConnection: keep-alivevary: accept-encodingContent-Encoding: gzip{ "code": 1, "message": "请求成功", "data": {"name":"张三","age":"26"},}
状态行:
HTTP/1.1 200
消息报头
Server: nginx/1.10.3Date: Mon, 30 Nov 2020 10:55:29 GMTContent-Type: application/json;charset=UTF-8Transfer-Encoding: chunkedConnection: keep-alivevary: accept-encodingContent-Encoding: gzip
响应消息
{ "code": 1, "message": "请求成功", "data": {"postId":1,"name":"id labore","email":"Elise@gaid.com"},}
三、状态码:
状态码 说明 1xx 信息 2xx 成功 3xx 重定向 4xx 客户端错误 5xx 服务端错误 常见的状态码
状态码 提示文案 说明 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求 200 OK 请求成功 302 Found 所请求的页面已经临时转移至新的 url 304 Not Modified 服务器告诉客户,原来缓冲的文档还可以继续使用 400 Bad Request 服务器未能理解请求,一般来说就是发的请求有问题 401 Unauthorized 请求未经授权 403 Forbidden 服务器收到请求,但是拒绝提供服务 404 Not Found 请求资源不存在 500 Internal Server Error 服务器发生不可预期的错误 502 Bad Gateway 网关错误 503 Server Unavailable 服务器临时过载或宕机 504 Gateway Timeout 网关超时 四、请求方法:
HTTP1.0及之前定义了三种请求方式:GET、POST和HEAD方法
HTTP1.1新增了五种请求方法:OPTIONS、PUT、DELETE、TRACE和CONNECT方法
get一般用于获取资源,请求的参数会被拼接到url上
post 一般用于表单提交,上传,保存等
put向指定资源位置上传其最新内容
delete请求服务器删除Request-URL所标识的资源
options用来查询针对请求URI指定的资源支持
head与GET方法一样,只是不返回报文主体部分。用于确认URL的有效性以及资源更新的日期时间等
connect要求在与代理服务器通信时建立隧道,实现用隧道协议进行TCP通信
trace回显服务器收到的请求,主要用于测试或诊断
五、Content-Type请求的字符编码
文本:text/plain、text/html、text/css、text/javascript
图片:image/jpeg、image/png、image/gif、image/svg+xml
音视频:audio/mp4、video/mp4
application/json
application/x-www-form-urlencoded
multipart/form-data
application/xml
六、Accept:接收的报文类型
类型候选和Content-Type一样,可以有多个值。多个值代表支持这些类型,并指定了得到类型的优先级。*/*表示任意类型
jquery的dataType其实设置的就是这个属性
Accept: application/json, text/plain, */*Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9,de;q=0.8
更多相关内容 -
Vue前后端数据交互与显示
2020-12-19 10:20:31该技术是Web开发必备,是前后端交互的纽带。难点在于获取后端数据并且防止数据联动。二、 技术详述1. 从接口获取后端数据(1) 仔细查看后端所传数据的类型。主要是区分数组和单个数据。查看后端的请求方式,区分post...一、技术概述
将后端所计算的数据呈现在前端页面的相应位置并根据用户点击操作改变相应的数据和界面,再传值给后端。该技术是Web开发必备,是前后端交互的纽带。难点在于获取后端数据并且防止数据联动。
二、 技术详述
1. 从接口获取后端数据
(1) 仔细查看后端所传数据的类型。主要是区分数组和单个数据。查看后端的请求方式,区分post或者get。
(2) 首先,在data中return一个xxxData:[]数组或一个变量xxxData:来接收后端传来的数据。
(3) 在方法中定义一个请求函数,比如我们这里函数名定义为update。请求函数中最主要的为请求语句通过api获取后端数据。
{params:this.xxx}中填写的是所携带的参数。
当get时,params作为一个关键字,总领所有携带参数的传递,例如传递参数的名字为id,值为data中已声明的值myId,那么在get请求语句中可以写成:
update(){
this.$http.get(baseURL+`api/条件`,{params:{id:this.myId}}).then(function(res){
this.memberData = res.body;
});
},
当post时,可以不加params关键字。直接写成:
update(){
this.$http.get(baseURL+`api/条件`,{id:this.myId}).then(function(res){
this.memberData = res.body;
});
},
返回的参数在then之后的匿名函数里。
这里baseURL是项目的路径,如果项目部署在服务器上面一般格式为www.XXX.com/项目名,之后的api是后端封装的api接口。
api/条件这个条件中往往会出现前端定义的变量,在传值时若将其直接写入便会成为接口地址的一部分。要想让其代表它内在的值,则使用${}取值。例如:
console.info(`大家好,我叫${name},今年${age}岁了`)
// 等价于
console.info('大家好,我叫' + name + ',今年' + age + '岁了')
(4) 此时这个请求操作是没有调用,是默认执行的,所以要在mounted里面实时执行。
整体代码呈现例如:
export default {
data(){
memberData[],//等待存放后端数据的接收数组
},
mounted(){
this.update();//在html加载完成后进行,相当于在页面上同步显示后端数据
},
methods:{
update(){
this.$http.get(`/api/project/${this.$store.state.project.id}`, {
project_id:this.$store.state.project.id,
}).then(doc => {
var code = doc.data.status;
var msg = doc.data.msg;
if (code == 0){//请求成功,可以根据不同的状态码返回值做出相应的动作
this.memberData = doc.data.data.member//本数组存入后端数
}
})
},
},
};
在以上例子中,doc接收返回的参数,以doc.data开头获取。其中后端传送的数据又具有data结构,所以又再次.data,深入再次获取其中的member数据。
注意:在我刚开始学习获取数据的时候,将请求URL错用单引号(')引用。这里是使用反单引号(`)。
在使用vue编程中,组件里面绑定的事件如果有传入事件名称字符串/字符串参数,这个时候光用单双引号会出现string is undefined,这个时候我们就需要用到反单引号。
对比后端项目文档:
2. 前端向后端传值的交互
前端向后端传值和之前提到的携带参数的概念一样,是同样的方法。但是不同点在于这是以前端向后端传参为主的交互,所以携带参数很多的情况下,容易造成代码过长,阅读书写繁琐的问题。这就可以建立中间变量结构,统一传值,这时携带参数只需要填写一个。例如:
var obj = {//将所有携带参数放在一起
project_id:this.$store.state.project.id,
id:this.id,
finish:checked,
name:this.flowName
}
this.$http.post(`/api/project/${this.$store.state.project.id}/task/update`, obj)//直接传值的合集
.then(doc => {
var code = doc.data.status;
var msg = doc.data.msg;
if (code == 0){
this.update()//更新后端数据后自动刷新前端,随着更改外观
}
else{
this.$alert(msg,'false')
}
});
3. 显示获取到的数据
相对于获取数据而言,显示数据就显得简单许多了。
首先后端传来的数据肯定是很多层结构或者是一个集合,所以在用一个大数组接受后台数据的同时,在data return中要声明几个自己需要显示的具体的变量,后台数据要分清楚存入前端变量中才能被前端所使用。将数组中的数据再次分离。例如:
getTaskData:function(){
this.$http.get(`/api/project/${this.$store.state.project.id}/task/info?id=${this.messageId}`,//根据后端提供的URL,其中?后跟参数要注意写法${}
{params:{project_id:this.$store.state.project.id,task_id:this.messageId}})
.then(doc=>{
if(doc.data.data){//当有数据传来时才可获取。若是为空,则在传来的data下再次.xxx寻找结构中的子变量则会出错。
this.taskData=doc.data.data;//所谓的整体大数组,包含了所有传来的数据
this.defaultChecked=this.taskData.finish;//细分传来的数据结构并放入已声明过的变量
this.taskRemarks=this.taskData.remarks;
}
else
this.taskData=null;
}).catch(err=>{//处理错误的写法
this.$alert("未知错误", "false"); //服务器还没搭起来
})
},
在第一次接触接收数据时我就有个疑问,一直不知道类似于这样的“子数据”怎么获取:
获得了具体的数据之后,想要显示在html里。一般来说,将变量或者其代表的信息显示在网页上大多是插入在html标签中,变量作为属性值就要使用v-bind来实现。v-bind就是用于绑定数据和元素属性的。例如:
想要实时更新href属性值则需要绑定自定义的变量上去,而在双引号中的变量都会被当作字符串。这时我们需要用v-bind实现。绑定之后,对应的值要去vue的数据里面找。当我们在控制台改变url时,对应也会变化。相同的,我们还可以绑定图片src属性、class属性。
//这里url是在data中return的自定义变量,存储链接字符串
//url:"MyHome.com",
OK
//简写为(我简记为在需要变量名作为属性的时候,在属性前加冒号)
OK
我在刚开始想实时变化页面显示数据的时候,即根据后端传来的数据更改页面显示标签属性的时候,错误使用dom控制元素显示。因为之前没有接触过Vue,所以我对于界面元素的更改的意识停留在 “document.getElementById('xxx').=xxx” 的阶段,这样做起来代码很繁琐,效率也低,增加了代码的耦合性。
4. 防止数据联动
在任务面板的模块,为要根据不同的点击显示不同的任务详情就要传递每个任务唯一的id。而在显示详情后有更改信息的功能,在这随意的更改可能会影响其他任务的信息,造成信息错乱。主要原因是刚开始我们监听了所有组件的更改,例如这段代码在更改任务紧急程度的时候调用:
onFlowPri(pri){
this.taskpriority = pri
this.$http
.post(`/api/project/${this.$store.state.project.id}/task/update`, {//当紧急程度一变化的时候就向后端传输数据,仅一项变化,更改的却是全部数据,这时传输其他旧数据就会遇到问题
project_id:this.$store.state.project.id,
id:this.id,
remarks:this.flowMarks,
name:this.flowName,
finish:this.finish,
priority:pri,
})
.then(doc => {
var code = doc.data.status;
var msg = doc.data.msg;
if (code == 0){
this.update()
}else{
this.$alert(msg,'false')
}
});
},
而在用户是否保存不得而知的时候太早的传输更改数据,积极的监听会造成错误。增加了代码的繁琐程度。尤其是和用户交互的数据足够多的时,会造成混乱。好的方式应在用户选择确认保存后再将整体表格中要求填写的数据移交给后端,这样一次性的传输保证了数据的准确性。
三、技术问题
1. 界面自动刷新
问题描述:在用户改变某些功能性质时,界面所表现出来的数据或者组件不能实时变化,即需要用户手动刷新整个页面。
解决方法:首先界面的加载是要靠mounted方法中定义的获取后台数据的方法(在这里一般将该方法命名为update)显示。作为钩子函数,它向后端请求,拿回数据,配合路由器钩子做一些事情。主要是依靠api拿数据 ,在mounted和改变的时候直接调用update就可以。即在用户点击事件发生之后在相应事件的位置调用update重新从后台获取新数据。
2. 获取数据数组出错
问题描述:后端传入前端的是一个数组,前端接收到自己的数组之后,二次使用push新的元素进入时报错。
问题表面看起来很简单找出原因,是因为我所push的数组不被承认为数组。但是我反复检查过确实在data中接收数据类型被声明为数组。这个报错也找不到具体的位置,它报错全是从runtime运行时缓存读的,一个源文件都没映射到。是个玄学问题。
解决方法:选定项目。就是这么简单。我们的产品是要通过选择项目来向后台传送数据的,即项目ID。所以在报错信息不明确的时候要尝试发现有无信息没读到的问题。
3. 传值显示值(针对时间)
问题描述:前后端数据交互中比较绕的问题就是时间作为DateTime类型传值的时候的数据类型转换。以及在使用时间选择器的时候将组件中的时间显示为所传值的时间。
如图设置时间位置所显示的时间是错误的,而控制台输出的是从后台传入的正确时间。即时间无法实时在时间选择框中显示。
从设置时间等时间选择框中更改时间并把其传入到后端时,会有类型不匹配的问题。即String和DateTime的转换。
解决方法:在时间选择器的属性中加入:value属性并以moment约束要显示的时间变量例如:
:value="[moment(taskDetails.t_begin), moment(taskDetails.t_end)]"
时间格式化组件moment的使用:需要在script中导入组件,并在methods中声明moment。
若要将时间数据传回后端的话需要将String类型的数据转换,即需要声明定义一个toDateTime函数:
function toDateTime(time) {
var date = new Date(time);
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
strDate = Y+M+D+h+m+s;
return strDate;
}
在传值的时候直接规范化。
四、 总结
Vue中数值传送是比较简单的部分,主要是准备好等待接收的变量,保证数据成功被载入,数据的类型问题也要注意,要仔细核对后端寄来的数据。Vue的前后端交互都是有较简单实用的模板来实现的,所以很好掌握。
显示数据的时候要参透不同组件的展示方式,有的利用item循环展示,有的直接引用,更多是用v-bind来实现变量影响显示。
本次项目开发中,任务面板的开发和代码的编写是很复杂的,容易混淆,因为有多个弹出窗口以及面板,上面用户所填写的内容还有从后台接收所显示的内容都是不同的,它们之间的数据联动是很可怕的,稍不注意就容易一个新面板数据的填写覆盖掉以前已显示的旧数据。尤其对于表单一类需要用户参与填写的组件来说,需要实时监控每个可能交互的子组件,但是千万要注意不一定是每个子组件都需要有及时的反馈,不然产生的不必要的关联动作有可能会影响到最后信息的存储。尤其是带有取消的表单,即需要一键归零,过早的产生相应动作会适得其反。
五、 参考
-
SpringBoot与Vue前后端数据交互的实现问题
2021-07-31 11:06:58题主这里使用的是vue的vue.config.js配置文件来实行跨域问题的解决,详细配置文件如下: 这里放上代码:总目录下创建 vue.config.js这一文件,代码如下: // vue.config.js 配置说明 //官方vue.config.js 参考...题主这里使用的是vue的vue.config.js配置文件来实行跨域问题的解决,详细配置文件如下:
这里放上代码:总目录下创建 vue.config.js这一文件,代码如下:
// vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这里只列一部分,具体配置参考文档 module.exports = { // 部署生产环境和开发环境下的URL。 // 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上 //例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。 //baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/", publicPath: process.env.NODE_ENV === "production" ? "./" : "/", // outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致) outputDir: "mycli3", //用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下) assetsDir: "assets", //指定生成的 index.html 的输出路径 (打包之后,改变系统默认的index.html的文件名) // indexPath: "myIndex.html", //默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) filenameHashing: false, // lintOnSave:{ type:Boolean default:true } 问你是否使用eslint lintOnSave: true, //如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置 // lintOnSave: process.env.NODE_ENV !== 'production', //是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false) // runtimeCompiler: false, /** * 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。 * 打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件 * map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 * 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。 * */ productionSourceMap: false, // 它支持webPack-dev-server的所有选项 devServer: { host: "localhost", port: 8081, // 端口号 https: false, // https:{type:Boolean} open: true, //配置自动启动浏览器 // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理 // 配置多个代理 proxy: { "/api": { target: "http://localhost:5001",// 要访问的接口域名 ws: true,// 是否启用websockets changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题 pathRewrite: { '^/api': '' //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可 } } } } };
2.proxy中target是后端的端口地址格式一定要正确"http://localhost:端点这种.
下面放上我的前端vue代码:
login(){ console.log('用户名='+this.loginForm.username,'密码='+this.loginForm.password) this.$http.post("api/user/select", this.loginForm,).then(function (res) { console.log(JSON.stringify(res)) console.log(JSON.stringify(res.status)) console.log(JSON.stringify(res.body)) this.$message({ offset: 60, message: "登录成功", type: "success", duration: 600, }); // 将登录成功之后的 token,保存到客户端的 sessionStorage 中 window.sessionStorage.setItem("token", res.data.token); window.localStorage.setItem( "user_name", this.loginForm.username, ); if (res.status === 200) { setTimeout(() =>{ this.$router.push({path:"/Home"}); },3000); } else { window.alert("账号或密码不正确!") } }).catch(res => { console.log(res.msg) } )
这里使用的是function函数作为返回值的接受对象所以接受到的参数如下
{"url":"api/user/select","ok":true,"status":200,"statusText":"OK","headers":{"map":{"connection":["close"],"content-type":["application/json"],"date":["Sat, 31 Jul 2021 03:02:40 GMT"],"transfer-encoding":["chunked"],"x-powered-by":["Express"]}},"body":[{"username":"007","password":"007","status":"200","clms_role":"员工","state":"0","userid":10}],"bodyText":"[{\"username\":\"007\",\"password\":\"007\",\"status\":\"200\",\"clms_role\":\"员工\",\"state\":\"0\",\"userid\":10}]"}
我们直接res.数据就能够拿出来数据.
PS:如果你的后端接口地址不正确的话那么是读取不到后端的值的,读取到后端的值我们就可以进行后面的操作.
附上查询表格的代码
initCartable(){ // get方式不支持json数据 var that=this; this.$http.post("api/user/all",).then(function(resp){ console.log(JSON.stringify(resp.data.success)) console.log(JSON.stringify(resp.data)) console.log(resp) console.log(JSON.stringify(resp)) that.tableData=resp.body this.message.success(resp.data.success); });
4.关于后端idea的使用创建
与传统的springboot后端相比,我抛弃了service层的调用,只使用了mapper层来银蛇查询和xml文件.
这里是按照cloud分布式的创建来实现的,附上我的mapper层代码
mapper.xml层代码
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.xyh.client.mapper.Usermapper"> 这里是我自己创建的两个实体类 <resultMap id="User" type="com.xyh.client.pojo.entiy.User" autoMapping="true"> <id property="clms_id" column="clms_id"/> <result property="username" column="username"/> <result property="password" column="password"/> <result property="status" column="status"/> <result property="clms_role" column="clms_role"/> <result property="state" column="state"/> </resultMap> <resultMap id="All" type="com.xyh.client.pojo.entiy.All" autoMapping="true"> <id property="clms_id" column="clms_id"/> <result property="clms_carname" column="clms_carname"/> <result property="username" column="username"/> <result property="password" column="password"/> <result property="clms_carmoney" column="clms_carmoney"/> <result property="clms_type" column="clms_type"/> <result property="clms_role" column="clms_role"/> <result property="status" column="status"/> <result property="state" column="state"/> </resultMap> <select id="selectclms_car" resultMap="User"> select clms_id,username,password,status,clms_role,state from clms_car where username=#{username} and password=#{password} </select> <select id="selectclms" resultMap="All"> select * from clms_car </select> </mapper>
3.controller层代码:
package com.xyh.client.controller; import com.xyh.client.mapper.Usermapper; import com.xyh.client.pojo.entiy.All; import com.xyh.client.pojo.entiy.User; import com.xyh.client.pojo.vo.Loginvo; import com.xyh.client.service.Userservice; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.List; @RestController @RequestMapping("/user") public class UserController { @Autowired private Usermapper usermapper; @PostMapping ("/select") public List<User> selectclms_car(@RequestBody Loginvo loginvo){ // Loginvo loginvo1=new Loginvo("001","001"); List<User> users= usermapper.selectclms_car(loginvo); System.out.println(users.toString()); return users; } @PostMapping ("/all") public List<All> selectclms(){ List<All> users= usermapper.selectclms(); System.out.println(users.toString()); return users; } }
前端调用查询到的结果如下:
这是我的application.properties
server.port=5001 spring.application.name=clms-clint spring.datasource.druid.username=root spring.datasource.druid.password=123456 spring.datasource.druid.url=jdbc:mysql://localhost:3306/clms?serverTimezone=Asia/Shanghai&characterEnconding=utf8 spring.datasource.druid.driver-class-name=com.mysql.cj.jdbc.Driver # 初始化连接池个数 spring.datasource.druid.initial-size=5 # 最小连接池个数——》已经不再使用,配置了也没效果 spring.datasource.druid.min-idle=2 # 最大连接池个数 spring.datasource.druid.max-active=20 # 配置获取连接等待超时的时间,单位毫秒,缺省启用公平锁,并发效率会有所下降 spring.datasource.druid.max-wait=60000 # 配置间隔多久才进行一次检测,检测需要关闭的空闲连接,单位是毫秒 spring.datasource.druid.time-between-eviction-runs-millis=60000 # 配置一个连接在池中最小生存的时间,单位是毫秒 spring.datasource.druid.min-evictable-idle-time-millis=300000 #注册中心的配置 spring.cloud.nacos.server-addr=localhost:8848 #mybatis日志文件以及映射文件 mybatis-plus.mapper-locations=classpath*:/mapper/**/*.xml logging.level.com.xxx.system.mapper=debug #公钥私钥文件路径 xxx.key.pubKeyPath=E:\\auth_key\rsa_key.pub xxx.key.priKeyPath=E:\\auth_key\rsa_key
实现数据交互了就可以访问后端的数据了。上我的项目界面:
1.
2.
3.
4.
今天的代码就先到这里了我们明天再见!
-
vue.js前后端数据交互之提交数据操作详解
2020-10-18 14:02:21主要介绍了vue.js前后端数据交互之提交数据操作,结合实例形式较为详细的分析了vue.js前后端数据交互相关的表单结构、约束规则、数据提交等相关操作技巧与注意事项,需要的朋友可以参考下 -
VUE前后端分离之数据交互(简单项目作为演示)
2022-03-11 09:36:39进入前端vue项目,进入内部或外部终端 输入如下代码并安装 cnpm install axios --save cnpm install qs --save 安装好之后可以在package.json中看到添加的依赖 在main.js中引入添加的依赖(main,js中存储...
提示:这里重点演示前端如何访问后端,对于前、后端的建立不作为重点
一、添加后端访问依赖
-
进入前端vue项目,进入内部或外部终端
-
输入如下代码并安装
cnpm install axios --save cnpm install qs --save
-
安装好之后可以在package.json中看到添加的依赖
-
在main.js中引入添加的依赖(main,js中存储组件的公共依赖,在此文件中添加依赖后无需再在各组件文件里单独添加依赖)
- 引入依赖
- 设置别名
- 在组件文件中通过 this.$axios.xxx 等即可使用依赖
- 引入依赖
二、建立后端
后端的建立可参考基于 Spring Mvc 一个简单项目的基本流程 <用户注册功能>(校正版)的第一、二步,建立符合自己前端的后端。
处理跨域问题 :前后端分离开发后,前后端的访问最主要的问题即跨域,即对于http的请求,为了安全,禁止ip地址和不同端口的程序项目访问,准确说仅可以访问但不响应。由于采用SpringBoot,所以通过在控制器中添加注解来解决。
三、配置前端
直接上前端的JS处代码
<script> export default{ name:'Users', data() { return { emp:{ ename:'', loSal:'', hiSal:'', deptno:'', }, depts:[], emps:[], pageNum:1,//当前页 pageTotle:0 ,//总条数 pageSize:4 //每页显示几条 } }, methods:{ // 定义页面加载方法(例如搜索按钮触发该事件) init(){ // ###打包参数### this.emp.pageNum=this.pageNum;//JS中变量可以动态自动添加,可以不实现定义emp.pageNum this.emp.pageSize=this.pageSize; // 把json对象转为字符串 var param=this.$qs.stringify(this.emp);// 将emp数据转为字符串,作为参数上传 // ###参数传递、结果接收### this.$axios // 将参数上传到后台的服务器端口8088、访问路径/vue、以及控制器与方法的RequestMapping路由 .post("http://localhost:8088/vue/emp/findByParam",param) //参数传递 .then(rst => { // 结果接收 console.log(rst);//如果获取了结果就在控制台打印 // vue前端将返回的后端返回的结果用data封装,而rst是包含了data以及其他参数的总结果集合 this.emps = rst.data.list; this.pageTotle = rst.data.total; }).catch(ex => { console.log(ex);//如果没获取结果,就打印错误 }); }, // 定义Search方法 search(){ // 即页面加载方法 this.init() } } } </script>
重点在于参数的目的地是 “http://localhost:8088/vue/emp/findByParam” ,这串链接的来源如下:
http://localhost:8088/vue
/emp/findByParam
-
-
vue前后端交互
2021-08-14 13:51:18前后端交互接口调用方式一、promise1.优点2.异步编程二、fetch1.特性2.语法结构3.fetch使用1.常用配置选项2.代码形式4.fetch响应结果三、axios1.基本特性2.基本用法3.常用API4.参数传递1.get方法传递参数2.post方式... -
Vue+SpringBoot前后端分离教程四:前后端数据交互之Axios
2022-04-30 22:26:24前后端数据交互之Axios一、Axios的安装二、封装Request请求三、前后端数据交互测试 一、Axios的安装 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 库,在vue中相较于Ajax有许多优点,我们接下来就直接介绍... -
(十)Vue前后端交互:axios
2022-04-18 12:38:08Vue前后端交互,axios,github用户搜索案例 -
详解vue前后台数据交互vue-resource文档
2020-12-09 00:41:14Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新。 Vue通过插件的形式实现了基于AJAX,JSPNP等技术的服务端通信。 vue-resource是一个通过XMLHttpRequrest或JSONP... -
vuejs前后端数据交互之从后端请求数据的实例
2020-10-18 05:55:20今天小编就为大家分享一篇vuejs前后端数据交互之从后端请求数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue前后端交互axios用法
2021-08-18 14:06:14data属性名固定的,用于获取后台响应的数据 console.log(ret.data) ) 可以通过params直接传参get方法,比较方便,也可以用delete axios.get('/adata'),{ params:{ id:123 .then(ret=>{ data属性名固定的... -
springboot/vue前后端交互(后台传数据到前台)
2022-05-28 12:11:17继续上面两篇博客(后台需添加了跨域配置),后台接口已经写好,前端vue使用element-plus,axios实现数据交互 后台跨域配置,新建一个文件CorsConfiguration: import org.springframework.context.... -
三、vue前后端交互(轻松入门vue)
2020-06-12 16:26:51Vue前后端交互六、Vue前后端交互1. 前后端交互模式2. Promise的相关概念和用法Promise基本用法**then参数中的函数返回值**基于Promise处理多个Ajax请求demoPromise常用API3. fetch进行接口调用fetch基本用法fetch... -
Vue前后端交互~非常详细哦~
2021-01-25 21:28:42能够说出什么是前后端交互模式 能够说出Promise的相关概念和用法 能够使用fetch进行接口调用 能够使用axios进行接口调用 能够使用async/await方式调用接口 能够基于后台接口实现案例 目录 前后端交互模式 Promise... -
Springboot和Vue简单的前后端数据交互
2020-07-17 17:12:22使用axios来进行数据交互。 1.SpringBoot环境搭建 准备一个简单的SpringBoot工程并且可以访问数据库返回数据。这里省略。。。 @Controller @RequestMapping("account") public class AccountController { @... -
Vue前后端数据交互,Post请求,后端用对象接收数据
2022-04-01 11:18:48Vue前后端数据交互,Post请求,后端用对象接收数据 前端axios发送请求 封装 request.js import axios from 'axios' export function request(config) { const instance = axios.create({ //地址 baseURL: '... -
vue最简单的前后端交互示例详解
2020-12-09 21:01:42一、学习 vue 面临的问题 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧。都说 vue 的官方教程写得好,所以我...官方教程一开始就讲怎么绑定页面上的元素和 JavaScript 中的数据,而且是双向绑定, -
spring boot与VUE的前后端交互
2020-08-11 15:53:43默认认为会了简单的spring boot知识和vue知识 1、前端 先安装好vue cli,没有的点这里 2、后端 后端IDEA安装vue.js插件就OK了 二、创建前端VUE项目 就进入CMD,挑个好路径,输入vue ui 然后打开IDEA,导入文件就... -
vue+Springboot 前后端数据交互(1)
2019-07-25 07:28:56最近使用 vue 的 axios 往后端发送数据,结果一直报错,尝试了多种方法 如果vue项目没有打包放在 springboot 项目下的话,需要开启跨域支持 在 vue 项目里 config 目录下的 index.js 文件,找到 proxyTable 加上 ‘/... -
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2020-10-16 12:20:46主要介绍了Vue-CLI项目-axios模块前后端交互的使用详解(类似ajax提交),本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 -
记录flask和vue的前后端交互
2022-07-18 09:48:50python使用flask作为后端,前端使用vue框架搭建界面,使用axios方法实现前后端数据交互 -
vue 前后端数据交互问题解决
2019-10-06 05:28:29先在vue项目中配置好路由组件路由 然后写相应组件 2 后端 写接口赔路由 ...第三 解决跨域问题 处理数据交互 这样前端就拿到了数据 转载于:https://www.cnblogs.com/tangda/p/10987082.html... -
Element+axios+vue前后端增删交互
2022-01-26 14:21:24添加组件和修改功能只再body中的div 和 script中的new Vue代码块中进行,并且要注意绑定~~ Element官网 Element给出的代码是一整块,需要自己区分哪个是组件,哪个是依赖,哪个是控制,分别放入哪个位置 <!... -
Django与Vue的前后端交互
2021-12-11 20:29:52目录需求使用技术重难点 需求 使用技术 前后端不分离 重难点 xxx xxx -
使用django和vue进行数据交互的方法步骤
2020-09-18 11:48:06主要介绍了使用django和vue进行数据交互的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
vue+django前后端数据交互
2022-02-20 19:58:04解决: 当前端有数据data要传给后端的时候是POST请求,POST请求的时候url最后面要有’/’!!!!!!!!!!!!!!! 崩溃了家人们。。。。。 总结 GET请求的URL最后不加“/”,POST请求的URL最后要以“/”结束... -
vue.js与后台数据交互的实例讲解
2020-10-18 06:27:53今天小编就为大家分享一篇vue.js与后台数据交互的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧