前端h5调用仅供参考-CFANZ编程社区

前端h5调用仅供参考
看到这个博主的博客
自己用vue写了一下，仅供小白参考
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<el-row>
				<el-input v-model="inputVa" placeholder="请输入内容" style="width: 300px;" clearable></el-input>
				<el-button @click="chazhao">查询</el-button>
			</el-row>
			<el-row>
				<el-table :data="dataList" stripe style="width: 100%">
					<el-table-column prop="female" label="女生说的话" align="center">
					</el-table-column>
					<el-table-column   prop="male" label="话术列表"  >
						<template slot-scope="scope">
							 <span v-for="(i,index) in scope.row.male" :key="index">
							              {{index+1}}.{{i}}
							              <br/>
							      </span>
						</template>	
					</el-table-column>
				</el-table>
			</el-row>
		</div>

	</body>

	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					inputVa: '',
					dataList: [],
				}
			},
			methods: {
				chazhao() {
					if (this.inputVa == '') {
						this.$message.error('空了哦，铁汁！');
						return false;
					}
					axios({
						method: 'POST',
						url: 'https://www.lxx-medicine.link/open/getLoveChat',
						headers: {
							'Content-Type': 'application/json'
						},
						// 在请求之前对data传参进行格式转换
						transformRequest: [function(data) {
							data = JSON.stringify(data)
							return data
						}],
						params: {},
						// 这里是传递的参数
						data: {
							"count": 100,
							"key": this.inputVa,
							"page": 1
						}
					}).then(res => {
						this.dataList = res.data.data
					}).catch(req => {
						console.log(req);
					});
				}
			}
		})
	</script>

</html>
0 条评论