Hbuilder X 前端获取后端数据

1.创建appUser.js文件

// 如果没有通过拦截器配置域名的话，可以在这里写上完整的URL(加上域名部分)
let getAppUserUrl = '/user/getAppUser';// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
const install = (Vue, vm) => {// 此处使用了传入的params参数，一切自定义即可let getAppUser = (params = {}) => vm.$u.post(getAppUserUrl, params);// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下vm.$u.apiAppUser = {getAppUser};
}export default {install
}

2.在mian.js中引入appUser.js文件并且use

// http接口API抽离，免于写url或者一些固定的参数
import httpApi from '@/common/api/appUser.js'
Vue.use(httpApi, app)
app.$mount()

3.vue文件书写前端获取界面

<template><view class="content"><view class=""><u-button @click="btnClick" data-name="3333" :loading="btnStyle.loading" :plain="btnStyle.plain" :shape="btnStyle.shape" :size="btnStyle.size" :ripple="btnStyle.ripple":hairLine="btnStyle.hairLine" :type="btnStyle.type">获取后台用户数据</u-button></view><view class="text-area"><text class="title">{{appUser}}</text></view><view class="link-demo"></view></view>
</template><script>export default {data() {return {title: '后端返回用户信息',appUser: {userName: '初始化信息'},btnStyle: {hairLine: true,type: 'default',size: 'default',shape: 'square',plain: false,ripple: false,loading: false,},zcarRegist: {registName: '获取信息'},hotelUser: {registName: '获取信息'}}},onLoad() {},methods: {btnClick () {this.$u.apiAppUser.getAppUser().then(req => {console.log('获取用户信息', req)if (req) {this.appUser = req}})},}}
</script><style lang="scss" scoped>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40rpx;}.logo {height: 200rpx;width: 200rpx;margin-top: 100rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 28rpx;color: $u-content-color;}.link-demo {margin-top: 80rpx;}
</style>

4.后端服务层

package com.smzz.modules.app.service;import org.springframework.stereotype.Service;import com.smzz.modules.app.domain.ZcarRegist;@Service
public class ZcarRegistService {public static ZcarRegist getZcarRegist () {    //初始化ZcarRegist zcarRegist = new ZcarRegist();  //new一个对象/** 赋值*/zcarRegist.setZcarType("奥迪");zcarRegist.setZcarStyle("SUV");zcarRegist.setZcarPut((float) 1.0);zcarRegist.setZcarPai("自动挡");zcarRegist.setZcarSafe("商业险");zcarRegist.setZcarStyle("SUV");zcarRegist.setZcarPay((float) 220);zcarRegist.setZcarArea("乌鲁木齐");zcarRegist.setZcarSet((long) 7);return zcarRegist; }
}

Hbuilder X 前端获取后端数据相关推荐

2020-2-15技术积累-时间插件-前端获取后端数据生成表格
1.一种时间插件的用法 WdatePicker使用方法 https://blog.csdn.net/wuyan1001/article/details/78561363 https://blog.cs ...
剖析遍历抓取的html标签数据,Jquery遍历数组(包括获取后端数据后的操作)和遍历标签(class名)...
//遍历数组(获取后端数据如何遍历操作) var status = 1; //自定义状态 $('.tables-detail').html(""); //调用ajax ...
【学习笔记】Web前端到后端数据的交互
[学习笔记]Web前端到后端数据的交互
python的前端和后端_python前端和后端数据交互，tornado框架入门，初学小试牛刀！...
Python前端和后端是如何交互的,怎么用tornado框架快速搭建前端和后端数据交互? 前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前 ...
【前后端记录】前端接收后端数据并用div元素渲染 ,mybatis修改用户数据。
一个很小的点但折腾了很久,为了把后端的数据解析出来查了很多资料,原功能是想显示登录的用户信息,但进行token认证和security整合过于麻烦,直接建了一个数据表来显示至页面. 效果是这样: 当然, ...
前端获取后端传来的session_用java编写一个web程序，登陆后，把用户信息放在session中，前端怎样获取session的值？...
客户端获取服务器端数据的方式,无非两种: 1. 模板类似的jsp,thymeleaf之类的,原理就是后台在输出html文本的时候直接把模板里的表达式替换.如果使用jsp就用EL和JSTL表达式,th ...
MVC框架中的前端与后端数据传递及实例
一.MVC框架 MVC代表Model.View.Controller,即模型.视图.控制器.其中: View(视图):就是人机交互界面,可以给用户显示业务逻辑数据,同时也可以接收用户输入的数据. M ...
java后端与前端的交互_前端和后端数据交互的基本知识和常见方式
一.首先了解前端,后端,数据三者的关系. 1.前端常常是是html,css,js三者的构成的页面的总称.运行在客户端.以浏览器为例. 2.后端常常是后端语言.比如php,java等写的一些脚本.来操作 ...
前端和后端数据交互的基本知识
一.首先了解前端.后端.数据三者的关系 1) 前端通常是html,css,js三者构成的页面的总称.运行在客户端.以浏览器为例. 2) 后端是指后端程序.比如java,php等编写的一些服务.用来操作 ...

Hbuilder X 前端获取后端数据

Hbuilder X 前端获取后端数据

Hbuilder X 前端获取后端数据相关推荐

最新文章

热门文章