功能点: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返回),,效果如下:
/**
* 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);
?>
.user-list{
/*height: 96px;*/
}
.col-xs-1 { width: 4% !important; }
.col-md-1 { width: 6% !important; }
$(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:'urlManager->createUrl(['fx-fans/fans-users']).'?user_id=';?>',
findFansUsersList:'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()
},"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
}, 'urlManager->createUrl(['fx-fans/ajax-get-user-list']); ?>', 'GET',
{limit:params.pageSize, offset:params.offset, nickname:params.nickname, user_id:params.user_id})
}
});
}
},
filters:{}
});
})
用到是YII框架,数据双向绑定,循环,判断,ajax等,语法大家可以去看一下教程;
单个用户的下的粉丝列表:ajax列表分页,搜索等
/**
* 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);
?>
.user-list{
/*height: 96px;*/
}
.col-xs-1 { width: 4% !important; }
.col-md-1 { width: 6% !important; }
全选
$(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()
},"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
}, '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 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'); } }, '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 // 深度监视 } }, }); }) 编辑信息页面 效果:
/** * 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); ?> 普通粉丝 永久粉丝 否 是
$(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 = ''
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()
})
}, '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:{}
})
})
感觉vue的确比jquery方便很多,表单输入框不需要属性name直接数据绑定,数据赋值和判断的写法,写的比较肤浅,还在努力学习中(学习更牛逼的写法如组件等),后续练习心得会博客跟进,如有问题还请大家多多指教,谢谢!