vue编写后台增删改查
功能点：ajax查询分页，搜索，时间控件，编辑，全选，ajax删除等
vue.js是最近两年很火的前端框架，之前写了几年的javascript和jquery，经历了javascript的繁缛到jquery的简洁快速强大，现在是该更熟练vue了(陆陆续续的了解熟悉vue的文档和语法)实际的去操作vue，我是后端主程就从自己电脑里的后端系统的增删改查来练习，感觉vue的思想是数据绑定，难点可能是各种组件吧。我本机vue.js版本是 2.9.6(cmd 。。。vue -V)，环境的搭建大家可以自己搞搞，后台是用YII框架写的拿其中一个模块来练手，还有几套TP框架写的后台在这里就不写了；
1.分页搜索列表页面：php代码就不写了(ajax获取，json返回)，，效果如下：
搜索：
代码如下：
<?php
/**
* Created by PhpStorm.
* User: haibo
* Date: 2019/04/12
* Time: 11:50
*/
use backend\assets\AppAsset;
use \yii\helpers\Html;
AppAsset::addScript($this, '@web/js/vue-2.5.16/vue.js');
AppAsset::addScript($this, '@web/js/layer/layer.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/bootstrap-paginator.min.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/qunit-1.11.0.js');
AppAsset::addScript($this, '@web/js/art_template/template-web.js');
AppAsset::addScript($this, '@web/js/laydate/laydate.js');
AppAsset::addScript($this, '@web/js/clipboard.min.js');
$preUrl = \Yii::$app->urlManager->createUrl(['fx-fans/index']);
$this->title = Html::a('分销管理 》 分销粉丝管理', $preUrl);
?>
<style>
.user-list{
/*height: 96px;*/
}
.col-xs-1 { width: 4% !important; }
.col-md-1 { width: 6% !important; }
</style>
<div id="app">
<div class="row">
<form class="form-inline">
<div class="col-md-2">
<div class="form-group">
<label for="nickname">昵称</label>
<input type="text" class="form-control" id="nickname" placeholder="昵称或姓名">
</div>
</div>
<div class="col-md-2">
<div class="form-group ml-10">
<label for="user_id">ID</label>
<input type="text" class="form-control" id="user_id" placeholder="用户id">
</div>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" v-on:click="search">搜索</button>
</div>
</form>
</div>
<div class="row thead mt-15">
<div class="col-xs-2">分销员昵称(分销员id)</div>
<div class="col-md-1">分销等级</div>
<div class="col-xs-2">方案名</div>
<div class="col-xs-2">mama_openid</div>
<div class="col-xs-2">加入时间</div>
<div class="col-md-1">永久有效粉丝数</div>
<div class="col-md-1">操作</div>
</div>
<div id="container" class="mt-1">
<div id="user-list" class="user-list" style="height:40px;" v-for="(item,index) in user_list" >
<div v-bind:class="['row','data-list',(index % 2) ==1 ? 'data-list-single' : '']">
<div class="col-xs-2">{{ item.nick_name }}({{ item.user_id }})</div>
<div class="col-md-1">{{ item.level_name }}</div>
<div class="col-xs-2">{{ item.programme_name }}</div>
<div class="col-xs-2">{{ item.mama_openid }}</div>
<div class="col-xs-2">{{ item.join_fx_time }}</div>
<div class="col-md-1">{{ item.fansnums }}</div>
<div class="col-md-1">
<a v-bind:href="findFansUsers + item.user_id" class="btn btn-xs btn-primary">粉丝用户</a>
<!--
||
<a v-bind:href="findFansUsersList + item.user_id" class="btn btn-xs btn-primary">测试</a>
-->
</div>
</div>
</div>
</div>
<div id="Paginator" style="text-align: center"> <ul id="pageLimit"></ul> </div>
</div>
<script>
$(function () {
var app_test = new Vue({
el:'#app',
data:{
user_list:[],
params:{
pageSize: 2,
offset: 0,
currentPage: 1,
total: 0,
},
current_user_id:0,
findFansUsers:'<?php echo Yii::$app->urlManager->createUrl(['fx-fans/fans-users']).'?user_id=';?>',
findFansUsersList:'<?php echo Yii::$app->urlManager->createUrl(['fx-fans/fans-users-list']).'?user_id=';?>'
},
created() {
//this.init()
},
mounted() {
this.init()
},
methods:{
init: function () {
this.pre_init()
},
pre_init: function () {
var self = this
var params = self.params
async_service_call(function (ret) {
self.user_list = ret.data
self.params.total = ret.total
self.showPage()
},"<?php echo \Yii::$app->urlManager->createUrl(['fx-fans/ajax-get-user-list']); ?>", 'GET',
{limit:params.pageSize, offset:params.offset, nickname:params.nickname, user_id:params.user_id})
},
search: function () {
this.params.offset = 0;
this.params.nickname = $('#nickname').val();
this.params.user_id = $('#user_id').val()
this.pre_init()
},
showPage: function () {
var self = this
var params = self.params
$('#pageLimit').bootstrapPaginator({
currentPage: params.currentPage,
totalPages: (params.total % params.pageSize) == 0?(params.total/params.pageSize):(params.total/params.pageSize)+1,
bootstrapMajorVersion: 3,
alignment:"right",
numberOfPages:10,
itemTexts: function (type, page, current) {
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}
},
onPageClicked: function(event, originalEvent, type, page){
params.currentPage = page
params.offset = (params.currentPage-1)*params.pageSize;
async_service_call(function (ret) {
params.total = ret.total
self.params.total = ret.total
self.user_list = ret.data
}, '<?php echo \Yii::$app->urlManager->createUrl(['fx-fans/ajax-get-user-list']); ?>', 'GET',
{limit:params.pageSize, offset:params.offset, nickname:params.nickname, user_id:params.user_id})
}
});
}
},
filters:{}
});
})
</script>
用到是YII框架，数据双向绑定，循环，判断，ajax等，语法大家可以去看一下教程；
单个用户的下的粉丝列表：ajax列表分页，搜索等
搜索，全选(删除)，删除，编辑等
代码如下：
<?php
/**
* Created by PhpStorm.
* User: haibo
* Date: 2019/04/15
* Time: 11:50
*/
use backend\assets\AppAsset;
use \yii\helpers\Html;
AppAsset::addScript($this, '@web/js/vue-2.5.16/vue.js');
AppAsset::addScript($this, '@web/js/layer/layer.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/bootstrap-paginator.min.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/qunit-1.11.0.js');
AppAsset::addScript($this, '@web/js/art_template/template-web.js');
AppAsset::addScript($this, '@web/js/laydate/laydate.js');
AppAsset::addScript($this, '@web/js/clipboard.min.js');
$preUrl = \Yii::$app->urlManager->createUrl(['fx-fans/index']);
$this->title = Html::a('分销管理 》 分销粉丝管理 》 粉丝管理', $preUrl);
?>
<style>
.user-list{
/*height: 96px;*/
}
.col-xs-1 { width: 4% !important; }
.col-md-1 { width: 6% !important; }
</style>
<div id="app">
<div class="row">
<form class="form-inline">
<input type="hidden" class="form-control" id="parent_id" value="<?= $parent_id ?>">
<div class="col-md-2">
<div class="form-group ml-10">
<label for="user_id">ID</label>
<input type="text" class="form-control" id="user_id" placeholder="粉丝用户id">
</div>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary" v-on:click="search">搜索</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" v-on:click="delfans">删除</button>
</div>
</form>
</div>
<div class="row thead mt-15">
<div class="col-md-1">
<!--<input type="checkbox" v-model='checked' v-on:click='checkedAll'> 全选{{checked}} -->
<input id="quan" type="checkbox" @click="checkAll($event)"> 全选
</div>
<div class="col-xs-2">粉丝ID(昵称)</div>
<div class="col-xs-2">分销员ID(昵称)</div>
<div class="col-md-1">是否永久锁粉</div>
<div class="col-md-1">是否锁粉降级</div>
<div class="col-xs-2">创建时间</div>
<div class="col-xs-2">修改时间</div>
<div class="col-md-1">操作</div>
</div>
<div id="container" class="mt-1">
<div id="user-list" class="user-list" style="height:40px;" v-for="(item,index) in user_list" >
<div v-bind:class="['row','data-list',(index % 2) ==1 ? 'data-list-single' : '']">
<div class="col-md-1" >
<input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkData' :value="item.id">
</div>
<div class="col-xs-2">{{ item.children_name_id }}</div>
<div class="col-xs-2">{{ item.parent_name_id }}</div>
<div class="col-md-1" v-if="item.is_permanent == 1">永久</div>
<div class="col-md-1" v-else>普通</div>
<div class="col-md-1" v-if="item.is_unlock == 1">是</div>
<div class="col-md-1" v-else>否</div>
<div class="col-xs-2">{{ item.createtime }}</div>
<div class="col-xs-2">{{ item.updatetime }}</div>
<div class="col-md-1">
<a v-bind:href="'./fans-users-edit?child_id='+item.children_id+'&parent_id='+item.parent_id" class="btn btn-xs btn-primary">编辑</a>
</div>
</div>
</div>
</div>
<div id="Paginator" style="text-align: center"> <ul id="pageLimit"></ul> </div>
</div>
<script>
$(function () {
var app_test = new Vue({
el:'#app',
data:{
user_list:[],
checkData: [],
params:{
pageSize: 20,
offset: 0,
currentPage: 1,
total: 0,
fans_id: 0
},
current_user_id:0,
checked: false, //全选框
checkList: []
},
created() {
//this.init()
},
mounted() {
this.init()
},
methods:{
init: function () {
this.pre_init()
},
pre_init: function () {
var self = this
var params = self.params
self.params.parent_id = $('#parent_id').val()
self.params.fans_id = $('#user_id').val()
async_service_call(function (ret) {
self.user_list = ret.data
self.params.total = ret.total
self.checkData = []
self.showPage()
},"<?php echo \Yii::$app->urlManager->createUrl(['fx-fans/ajax-get-fans-list']); ?>", 'GET',
{limit:params.pageSize, offset:params.offset, parent_id:params.parent_id, fans_id:params.fans_id})
},
search: function () {
this.params.offset = 0;
this.params.parent_id = $('#parent_id').val();
this.params.fans_id = $('#user_id').val();
this.pre_init();
},
showPage: function () {
var self = this
var params = self.params
$('#pageLimit').bootstrapPaginator({
currentPage: params.currentPage,
totalPages: (params.total % params.pageSize) == 0?(params.total/params.pageSize):(params.total/params.pageSize)+1,
bootstrapMajorVersion: 3,
alignment:"right",
numberOfPages:10,
itemTexts: function (type, page, current) {
switch (type) {
case "first": return "首页";
case "prev": return "上一页";
case "next": return "下一页";
case "last": return "末页";
case "page": return page;
}
},
onPageClicked: function(event, originalEvent, type, page){
params.currentPage = page
params.offset = (params.currentPage-1)*params.pageSize;
async_service_call(function (ret) {
params.total = ret.total
self.params.total = ret.total
self.user_list = ret.data
}, '<?php echo \Yii::$app->urlManager->createUrl(['fx-fans/ajax-get-fans-list']); ?>', 'GET',
{limit:params.pageSize, offset:params.offset, parent_id:params.parent_id})
}
});
},
checkAll(e){ // 点击全选事件函数(参考http://www.php.cn/js-tutorial-391119.html)
var checkObj = document.querySelectorAll('.input-checkbox'); // 获取所有checkbox项
if(e.target.checked){ // 判定全选checkbox的勾选状态
for(var i=0;i<checkObj.length;i++){
if(!checkObj[i].checked){ // 将未勾选的checkbox选项push到绑定数组中
this.checkData.push(checkObj[i].value);
}
}
}else { // 如果是去掉全选则清空checkbox选项绑定数组
this.checkData = [];
}
},
//批量删除粉丝
delfans: function () {
console.log(this.checkData);
if(this.checkData.length <=0 ){
alert("请先选择粉丝");
return false;
}
var str = JSON.stringify(this.checkData);
layer.confirm('确认删除这些粉丝吗?', {icon: 1, title:'提示'}, function(){
async_service_call(function (ret) {
if(ret.code < 1){
layer.msg('好像有问题');
}else{
layer.msg('success');
}
}, '<?php echo Yii::$app->urlManager->createUrl(['fx-fans/ajax-del-fans']);?>',
'GET',
{"user_ids":str})
})
},
},
watch: { // 监视双向绑定的数据数组
checkData: {
handler(){ // 数据数组有变化将触发此函数
if(this.checkData.length >= 1){
document.querySelector('#quan').checked = true;
}else {
document.querySelector('#quan').checked = false;
}
},
deep: true // 深度监视
}
},
});
})
</script>
全选删除 确认框。
编辑信息页面 效果：
代码：
<?php
/**
* Created by PhpStorm.
* User: haibo
* Date: 2019/04/12
* Time: 17:03
*/
use backend\assets\AppAsset;
use yii\helpers\Html;
AppAsset::addScript($this, '@web/js/vue-2.5.16/vue.js');
AppAsset::addScript($this, '@web/js/layer/layer.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/bootstrap-paginator.min.js');
AppAsset::addScript($this, '@web/js/bootstrap-paginator/qunit-1.11.0.js');
AppAsset::addScript($this, '@web/js/laydate/laydate.js');
$preUrl = \Yii::$app->urlManager->createUrl(['/fx-fans/fans-users-list']);
$this->title = Html::a('测试>>粉丝编辑', $preUrl);
?>
<div id="app">
<div class="row mt-15">
<div class="col-md-1">
<label>锁粉类型：</label>
</div>
<div class="col-md-3">
<input type="radio" value="0" v-model="fansInfo.is_permanent">普通粉丝
<input type="radio" value="1" v-model="fansInfo.is_permanent">永久粉丝
</div>
<div class="col-md-3"></div>
</div>
<div class="row mt-15">
<div class="col-md-1">
<label>是否降级锁粉：</label>
</div>
<div class="col-md-3">
<input type="radio" value="0" v-model="fansInfo.is_unlock">否
<input type="radio" value="1" v-model="fansInfo.is_unlock">是
</div>
<div class="col-md-3"></div>
</div>
<div class="form-group mt-15">
<label for="name">锁粉人名称:</label>
<input type="email" class="form-control" value="" v-model="fansInfo.parent_name" placeholder="请输锁粉人名称">
</div>
<div class="form-group mt-15">
<label for="name">被锁粉人名称:</label>
<input type="email" class="form-control" value="" v-model="fansInfo.child_name" placeholder="请输被锁粉人名称">
</div>
<label class="mt-15">开课时间:</label>
<input type="text" id="inputStartTime" value="" v-model="fansInfo.create_time" name="create_time" placeholder="创建时间" class="form-control" autoComplete="off"/>
<div class="form-group mb-60 text-align-center">
<button type="button" class="btn btn-primary mt-15" v-on:click="groupSubmit">提交</button>
</div>
</div>
<script>
$(function () {
var app = new Vue({
el:'#app',
data:{
fansInfo:{
parent_id: 0,
parent_name:'',
child_id:0,
child_name:'',
is_permanent:1,
is_unlock:0,
create_time:''
}
},
mounted:function () {
this.init()
this.inputStartTime()
//this.groupSubmit()
},
methods:{
init: function () { //编辑显示数据(赋值)
var fans = '<?php echo $fans; ?>'
if(fans.length > 0){
this.fansInfo = JSON.parse(fans);
}
},
groupSubmit:function () {
var data = this.fansInfo
async_service_call(function (ret) {
if(ret.code < 1){
alert(ret.message)
return
}
layer.msg(ret.message, function () {
history.back()
})
}, '<?php echo Yii::$app->urlManager->createUrl(['fx-fans/ajax-save-fans'])?>', 'POST', {fansInfo:data})
},
inputStartTime:function () {
var fans = this.fansInfo
laydate.render({
elem: '#inputStartTime',
done: function(value, date, endDate){
fans.create_time = value
}
})
}
},
filters:{}
})
})
</script>
感觉vue的确比jquery方便很多，表单输入框不需要属性name直接数据绑定，数据赋值和判断的写法，写的比较肤浅，还在努力学习中(学习更牛逼的写法如组件等)，后续练习心得会博客跟进，如有问题还请大家多多指教，谢谢！
上一篇： vue编写后台增删改查