php基于element实现增删改查

bucketNiuNiu

于 2021-07-29 20:59:58 发布

阅读量373

点赞数

分类专栏：后端 vue 文章标签： php html5 vue.js elementui

本文链接：https://blog.csdn.net/qq_36596869/article/details/119220454

版权

这篇博客详细介绍了如何使用PHP与ElementUI组件库配合，解决跨域问题，实现数据的添加、删除、修改和查询功能。通过在index.php中设置相应代码来处理跨域，同时展示了add.html、edit.html的页面结构以及对应的PHP后端处理代码。最后，给出了完成这些功能后的实际效果截图。

摘要由CSDN通过智能技术生成

跨域问题解决，在index.php中添加如下代码

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE");
header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Accept-Language, Origin, Accept-Encoding");

index.php代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>
	<style>
		.el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
	<body>
		<div id="app">
			<el-button @click="batchDelete(tableChecked)" type="primary" size="big">批量删除</el-button>
			<el-button @click="add" type="primary" size="big">添加</el-button>

			<el-table :data="tableData" style="width: 100%" :key="Math.random()" @select="handleSelectionChange" :row-class-name="tableRowClassName">
				<el-table-column type="selection">
				</el-table-column>
				<el-table-column prop="id" label="ID" width="180">
				</el-table-column>
				<el-table-column prop="title" label="标题" width="180">
					<template slot-scope="scope">
						<span class="col-cont" v-html="scope.row.title"></span>
					</template>
				</el-table-column>

				<el-table-column prop="img" label="封面">
					<template slot-scope="scope">
						<el-image style="width: 100px; height: 100px" :src="scope.row.img">
						</el-image>
					</template>
				</el-table-column>

				<el-table-column prop="show" label="是否展示">
					<template slot-scope="scope">
						<span @click="isShow(scope.row)" style="color:blue;cursor:pointer">
							<span v-if="scope.row.show==0">不展示</span>
							<span v-if="scope.row.show==1">展示</span>
						</span>
						<el-switch
						  v-model="scope.row.show"
						  active-color="#13ce66"
						  inactive-color="#ff4949">
						</el-switch>
					</template>
				</el-table-column>

				<el-table-column fixed="right">
					<template slot="header" slot-scope="scope">
						<el-input v-model="search" @change="searchs()" size="mini" placeholder="输入关键字搜索" />
					</template>
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row,1,scope.$index)" type="text" size="small">编辑</el-button>
						<el-button @click="handleClick(scope.row,2,scope.$index)" type="text" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.currentPage4"
			 :page-sizes="page.pagesizes" :page-size="page.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
			</el-pagination>
		</div>
	</body>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					isRouterAlive: true,
					tableData: '',
					page: {
						total: 3,
						pagesize: 5,
						currentPage4: 1,
						pagesizes: [5, 10, 15]
					},
					search: '',
					tab

最低0.47元/天解锁文章

bucketNiuNiu

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
php基于element实现增删改查

跨域问题解决，在index.php中添加如下代码header("Access-Control-Allow-Origin:*");header("Access-Control-Allow-Methods:GET, POST, OPTIONS, DELETE");header("Access-Control-Allow-Headers:DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Con
复制链接

扫一扫

专栏目录