vue向后台请求数据的配置和方法
一、与后台连接端口的配置新建一个vue项目之后,向后台请求端口连接,作如下配置:项目目录下的config,打开 index.js下面的红色标识处需要重新配置相关参数,如下:target: 'http://localhost:9085/',这里的端口号对应后台启动的端口号;proxyTable: {'/api/*': {...
·
一、与后台连接端口的配置
新建一个vue项目之后,向后台请求端口连接,作如下配置:
项目目录下的config,打开 index.js
下面的红色标识处需要重新配置相关参数,
如下:
target: 'http://localhost:9085/', 这里的端口号对应后台启动的端口号;
proxyTable: {
'/api/*': {
target: 'http://localhost:9085/',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
},
},
},
二、使用 fetch 请求后台接口,获取数据信息
1. 首先在vue项目utils 工具包下创建fetch.js 文件,内容如下:
import axios from 'axios';
import {
Message
} from 'element-ui';
export default function defaultFetch() {}
export async function fetch(options) {
try {
let instance = await axios.create({
timeout: 20000, // 超时
headers: {
// 'X-touchspring-Token': store.state.user.token,
'Content-Type': 'application/x-www-form-urlencoded',
},
});
let result = await instance(options);
result = result.data;
console.log(result);
if (result.code === 1200 || result.code === 2000) {
return result;
} else {
Message({
message: result.message,
type: 'error',
showClose: true,
duration: 2 * 1000,
});
}
} catch (err) {
console.log(err)
}
}
2. 在src 下新建一个 api 文件夹,创建一个 js 文件,(名字自己随意)如:indoorMap.js ;
在里面可以编辑各种向后台请求接口的方法:增删查改等···
实现方法indoorMap.js 需引入fetch ,qs,两个文件; qs.stringify() 实现 json 数据的格式化为字符串
import { fetch } from "../utils/fetch";
import qs from 'qs';
/**
* 查询所有室内地图信息
*/
export function findAllIndoorMap() {
return fetch({
/*url与后台映射地址匹配; method 与映射的方法匹配-->包括 GetMapping PostMapping
* PutMapping DeleteMapping 等注解方法
*/
url: '/api/indoorMaps',
method: 'get',
});
}
/**
* 根据mapId查询indoorMap
*/
export function findIndoorMapByMapId(mapId) {
return fetch({
url: `/api/indoorMaps/${mapId}`,
method: 'get',
});
}
/**
* 根据id查询indoorMap
*/
export function findIndoorMapById(id) {
return fetch({
url: `/api/indoorMapsIds/${id}`,
method: 'get',
});
}
/**
* 添加
*/
export function insertIndoorMap(indoorMap) {
return fetch({
url: '/api/indoorMaps',
method: 'post',
data: qs.stringify(indoorMap),
});
}
/**
* 更新
*/
export function updateIndoorMap(indoorMap) {
return fetch({
url: '/api/indoorMaps',
method: 'put',
data: qs.stringify(indoorMap),
});
}
3. 界面中实现与后台数据库进行增删查改功能
首先在 script 中引入 indoormap.js 文件中的需要的方法,import 引入
代码横线处为引用方式 const result = ;
<script>
import {insertIndoorMap,updateIndoorMap,findAllIndoorMap,findIndoorMapById,} from "../api/indoorMap";
import { formatDate } from '../utils/dateConvert';
/**
* 弹窗提交数据
*/
async function submitData() {
delete this.form.data.createAt;
delete this.form.data.updateAt;
-------------------------------------------------------------------------------------
const result = (this.form.data.id) ? await updateIndoorMap(this.form.data) : await insertIndoorMap(this.form.data);
const messages = (this.form.data.id) ? '更新成功' : '添加成功';
if (result.code === 1200) {
this.$message({
message: messages,
type: 'success',
});
this.initData();
this.dialogVisible = false;
} else {
this.$message({
message: '添加失败',
type: 'fail',
});
this.dialogVisible = false;
}
}
/**
* 编辑按钮
*/
function editIndoorMap() {
if (this.isSelectCurrentRow === true) {
this.dialogVisible = true;
this.dialogTitle = "编辑楼层信息";
} else {
this.$message({
message: '请选中记录!',
type: 'error',
});
}
}
/**
* 添加操作
*/
function addIndoorMap() {
this.dialogTitle = '添加楼层信息';
this.dialogVisible = true;
}
/**
* 处理关闭弹窗
*/
function handleClose() {
this.form.data = {};
this.dialogVisible = false;
}
/**
* 初始化数据列表
* @returns {Promise.<void>}
*/
async function initData() {
-------------------------------------------------------------------------------------
const result = await findAllIndoorMap();
if (result.code === 1200) {
this.tableData = [];
result.data.indoorMaps.forEach((im) => {
let createAt = formatDate1(im.createAt);
let updateAt = formatDate1(im.updateAt);
let indoorMap = im;
indoorMap.createAt = createAt;
indoorMap.updateAt = updateAt;
this.tableData.push(indoorMap);
});
}
}
/**
* 选中某行数据
* @param row
* @returns {Promise.<void>}
*/
async function rowClick(row) {
this.isSelectCurrentRow = true;
let id = row.id;
if (id !== null) {
-------------------------------------------------------------------------------------
const result = await findIndoorMapById(id);
if (result.code === 1200) {
this.form.data = result.data.indoorMaps;
console.log("-图片地址-" + result.data.indoorMaps.image);
}
}
}
function cancelButton() {
this.form.data = {};
this.dialogVisible = false;
}
export default {
data() {
return {
tableDisable: true,
hideButton: true,
tableData: [],
totalDataCount: 1,
pageCount: 5,
pageSize: 1,
doType: '',
dialogTitle: '',
dialogVisible: false,
labelPosition: 'left',
form: {
data: {
id: '',
mapId: '',
image: '',
width: '',
height: '',
createAt: '',
updateAt: '',
},
},
};
},
methods: {
initData,
rowClick,
handleClose,
submitData,
handleImageSuccess,
addIndoorMap,
editIndoorMap,
formatDate1,
cancelButton,
hideTable() {
this.tableDisable = !this.tableDisable;
this.hideButton = !this.hideButton;
},
},
created() {
this.initData();
},
};
</script>
三、后台接口
controller 层 对应接口的编写和 Maping接口
/**
* 查询当前项目所有室内地图
*
* @return .
*/
@GetMapping("indoorMap/{projectId}")
public ResultData findAllIndoorMap(@PathVariable("projectId") String projectId) {
List<IndoorMapDto> indoorMapList = indoorMapDao.findByProjectId(projectId);
if (indoorMapList != null) {
return ResultData.ok().putDataValue("indoorMaps", indoorMapList);
} else {
return ResultData.notFound();
}
}
/**
* 根据mapId查询indoorMap
*
* @return .
*/
@GetMapping("{mapId}/indoorMaps")
public ResultData findIndoorMapByMapId(@PathVariable("mapId") String mapId) {
IndoorMap indoorMap = indoorMapDao.findByMapId(mapId);
if (indoorMap != null) {
return ResultData.ok().putDataValue("indoorMaps", indoorMap);
} else {
return ResultData.notFound();
}
}
/**
* 根据id查询indoorMap
*
* @return .
*/
@GetMapping("indoorMaps/{id}")
public ResultData findIndoorMapById(@PathVariable("id") String id) {
IndoorMap indoorMap = indoorMapDao.findById(id);
if (indoorMap != null) {
return ResultData.ok().putDataValue("indoorMaps", indoorMap);
} else {
return ResultData.notFound();
}
}
/**
* 保存
*
* @return .
*/
@PostMapping("indoorMaps")
public ResultData saveIndoorMap(IndoorMap indoorMap) {
if (indoorMap != null) {
//判断mapId是否一样
indoorMap.setId(IdWorker.nextId());
indoorMap.setCreateAt(new Date());
indoorMap.setUpdateAt(new Date());
int res = indoorMapDao.insertIndoorMap(indoorMap);
if (res == 1) {
return ResultData.ok().putDataValue("indoorMaps", indoorMap);
} else {
return ResultData.serverError();
}
} else {
return ResultData.notFound();
}
}
/**
* 更新修改
*
* @return .
*/
@PutMapping("indoorMaps")
public ResultData updateIndoorMap(IndoorMap indoorMap) {
if (indoorMap != null) {
indoorMap.setUpdateAt(new Date());
int res = indoorMapDao.updateIndoorMap(indoorMap);
if (res == 1) {
return ResultData.ok().putDataValue("indoorMaps", indoorMap);
} else {
return ResultData.serverError();
}
} else {
return ResultData.notFound();
}
}
更多推荐
已为社区贡献8条内容
所有评论(0)