跨域问题解决，在public/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.html
<!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: '',
tableChecked: [], //被选中的记录数据-----对应“批量删除”传的参数值
ids: [], //批量删除id
}
},
//初始化数据
created: function() {
this.$http.get("{:url('admin/shoppings/getData')}").then(function(res) {
console.log(res.data.data.total)
this.tableData = res.data.data.data
this.page.total = res.data.data.total
}, function() {
console.log('请求失败处理');
});
},
methods: {
//添加跳转
add() {
window.location.href = 'add.html'
},
//批量删除存删除数据
handleSelectionChange(val) {
this.tableChecked = val
},
//批量删除
batchDelete(rows) {
console.log(rows)
var _this = this;
_this.$confirm('是否确认此操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
rows.forEach(element => {
console.log(element.id)
_this.ids.push(element.id)
})
console.log(this.ids)
this.$http.get("{:url('admin/shoppings/manyDel')}", {
params: {
ids: this.ids
}
}).then(function(res) {
this.getList()
this.$message({
showClose: true,
message: res.data.msg
});
}, function() {
console.log('请求失败处理');
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
//表格搜索
searchs() {
console.log(this.search)
this.$http.get("{:url('admin/shoppings/search')}?key=" + this.search).then(function(res) {
console.log(res.data.data)
if (res.data.code == 0) {
this.tableData = res.data.data.data
this.page.total = res.data.data.total
}
}, function() {
console.log('请求失败处理');
});
},
//改变是否显示
isShow(a) {
console.log(a)
var id = a.id
let show = a.show
if (show == 1) {
show = 0
} else {
show = 1
}
this.$http.get(`http://www.729.com/admin/shoppings/isShow?id=${id}&show=${show}`).then(function(res) {
this.$set(a, 'show', show)
}, function() {
console.log('请求失败处理');
});
},
//每行颜色的变化
tableRowClassName({
row,
rowIndex
}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
},
handleClick(row, state, index) {
if (state == 1) {
localStorage.setItem('id', row.id)
window.location.href = 'edit.html'
}
//删除单个
if (state == 2) {
if (row.show == 1) {
this.$message({
showClose: true,
message: '展示中不能删除'
});
} else {
this.$http.get("{:url('admin/shoppings/del')}?id=" + row.id).then(function(res) {
this.tableData.splice(index, 1);
this.$message({
showClose: true,
message: res.data.msg
});
}, function() {
console.log('请求失败处理');
});
}
}
console.log(row);
}
//每页显示几个进行请求
,
handleSizeChange(val) {
this.$http.get("{:url('admin/shoppings/getData')}?pagesize=" + val).then(function(res) {
console.log(res.data.data.total)
this.tableData = res.data.data.data
this.total = res.data.data.total
}, function() {
console.log('请求失败处理');
});
},
//翻页操作请求后台
handleCurrentChange(val) {
var page = val
var url =''
//判断是否是搜索翻页
if(this.search){
url="{:url('admin/shoppings/search')}?key="+this.search+"&page="+page
}else{
url="{:url('admin/shoppings/getData')}?page=" + page
}
this.$http.get(url).then(function(res) {
console.log(res.data.data.total)
this.tableData = res.data.data.data
this.total = res.data.data.total
}, function() {
console.log('请求失败处理');
});
},
//重新获取数据
getList() {
this.$http.get("{:url('admin/shoppings/getData')}?page=1").then(function(res) {
console.log(res.data.data.total)
this.tableData = res.data.data.data
this.page.total = res.data.data.total
}, function() {
console.log('请求失败处理');
});
}
},
})
</script>
</html>add.html
<!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>
<body>
<div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="新闻名称" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="是否显示" prop="show">
<el-switch v-model="ruleForm.show"></el-switch>
</el-form-item>
<el-form-item label="上传封面" prop="img">
<el-upload action="http://www.week2.com/day11/index/upload" list-type="picture-card" :on-preview="handlePictureCardPreview"
:on-remove="handleRemove" ref="upload" :limit="1" name="img" :on-success="onSuccess" :on-success="onSuccess">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<el-input type="hidden" v-if="show" v-model="ruleForm.img"></el-input>
</el-form-item>
<el-form-item label="新闻内容" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</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 {
show: false,
ruleForm: {
title: '',
show: false,
desc: '',
img: ''
},
rules: {
name: [{
required: true,
message: '请输入新闻名称',
trigger: 'blur'
}],
desc: [{
required: true,
message: '请填写新闻内容',
trigger: 'blur'
}]
},
dialogImageUrl: '',
dialogVisible: false
}
},
methods: {
//图片移除
handleRemove(file, fileList) {
console.log(file, fileList);
},
//图片预览
handlePictureCardPreview(file) {
console.log(231)
console.log(file.url)
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 图片上传成功后，后台返回图片的路径
onSuccess: function(res) {
console.log(res.data);
if (res.code == 0) {
this.ruleForm.img = res.data;
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.ruleForm)
if(this.ruleForm.show){
this.ruleForm.show=1
}else{
this.ruleForm.show=0
}
this.$http.post('http://www.week2.com/day11/index/adddos',
this.ruleForm, {
emulateJSON: true
}).then((res) => {
console.log(res)
if(res.data.code == 0){
this.$message({
showClose: true,
message: res.data.msg
});
window.location.href='index.html'
}
}, (res) => {
console.log('error submit!!')
});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
})
</script>
</html>edit.html
<!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>
<body>
<div id="app">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="新闻名称" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="是否显示" prop="show">
<el-switch v-model="ruleForm.show"></el-switch>
</el-form-item>
<el-form-item label="上传封面" prop="img">
<el-upload action="http://www.week2.com/day11/index/upload" list-type="picture-card" :on-preview="handlePictureCardPreview"
:on-remove="handleRemove" ref="upload" :limit="1" name="img" :on-success="onSuccess" :on-success="onSuccess">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<el-input type="hidden" v-if="show" v-model="ruleForm.img"></el-input>
</el-form-item>
<el-form-item label="新闻内容" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</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 {
show: false,
ruleForm: {
id: '',
title: '',
show: true,
desc: '',
img: ''
},
rules: {
name: [{
required: true,
message: '请输入新闻名称',
trigger: 'blur'
}],
desc: [{
required: true,
message: '请填写新闻内容',
trigger: 'blur'
}]
},
dialogImageUrl: '',
dialogVisible: false,
fileList: ''
}
},
//初始化填充数据
created: function() {
var id = localStorage.getItem('id')
this.$http.post('http://www.week2.com/day11/index/edit', {
id: id
}, {
emulateJSON: true
}).then((res) => {
console.log(res)
if (res.data.code == 0) {
if (res.data.data.show == 1) {
res.data.data.show = true
} else {
res.data.data.show = false
}
this.fileList = res.data.data.img
this.ruleForm = res.data.data
}
}, (res) => {
console.log('error submit!!')
});
console.log(id)
},
methods: {
//图片上传
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 图片上传成功后，后台返回图片的路径
onSuccess: function(res) {
console.log(res.data);
if (res.code == 0) {
this.ruleForm.img = res.data;
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.ruleForm)
if (this.ruleForm.show) {
this.ruleForm.show = 1
} else {
this.ruleForm.show = 0
}
this.$http.post('http://www.week2.com/day11/index/editdo',
this.ruleForm, {
emulateJSON: true
}).then((res) => {
console.log(res)
if (res.data.code == 0) {
this.$message({
showClose: true,
message: res.data.msg
});
window.location.href = 'index.html'
}
}, (res) => {
console.log('error submit!!')
});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
})
</script>
</html>控制器.php文件
<?php
declare (strict_types = 1);
namespace app\admin\controller;
use app\admin\model\shopping;
class shoppings
{
//重新获取数据
public function getData()
{
$pagesize = input('pagesize',5);
$data = shopping::paginate($pagesize)->toArray();
return ['code'=>0,'data'=>$data,'msg'=>'成功'];
}
//删除单条
public function del()
{
$id = input('id');
$res = shopping::destroy($id);
if ($res){
return ['code'=>0,'data'=>$id,'msg'=>'删除成功'];
}
}
//改变是否展示的状态
public function isShow()
{
$id = input('id');
$show= input('show');
$res = shopping::where('id',$id)->update(['show'=>$show]);
if ($res){
return ['code'=>0,'data'=>'','msg'=>'修改成功'];
}else{
return ['code'=>1,'data'=>'','msg'=>'修改失败'];
}
}
//批量删除
public function manyDel()
{
$ids= input('ids');
$res = shopping::destroy($ids);
if ($res){
return ['code'=>0,'data'=>'','msg'=>'批量删除成功'];
}
}
//高亮搜索
public function search()
{
$key = input('key');
$data = shopping::where('title','like','%'.$key.'%')->paginate(5);
if ($data){
$data =$data->toArray();
foreach ($data['data'] as &$v){
$v['title']=preg_replace("/$key/i", "<span style='color: red;'><b>$key</b></span>", $v['title']);
}
unset($v);
return ['code'=>0,'data'=>$data,'msg'=>'搜索成功'];
}else{
return ['code'=>1,'data'=>'','msg'=>'无此数据'];
}
}
//图片上传
public function upload(){
$file = request()->file('img');
$savename = \think\facade\Filesystem::disk('public')->putFile( 'img', $file);
$savename = "http://www.week2.com/".$savename;
return json(['code'=>0,'data'=>$savename,'msg'=>'搜索成功']);
}
//内容添加
public function adddos()
{
$params = request()->param();
$res = shopping::create($params);
if ($res){
return json(['code'=>0,'data'=>'','msg'=>'添加成功']);
}
}
//获取修改内容
public function edit()
{
$id = request()->param('id');
$data = shopping::where('id',$id)->find()->toArray();
return json(['code'=>0,'data'=>$data,'msg'=>'添加成功']);
}
//修改对应内容
public function editdo()
{
$params = request()->except(['id']);
$id = request()->param('id');
$res = shopping::where('id',$id)->update($params);
if ($res){
return json(['code'=>0,'data'=>'','msg'=>'修改成功']);
}
}
}
效果图
507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
