功能点：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增删改查的简单操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用vue最新脚手架搭建环境，编写界面，使用axios请求接口，渲染界面,实现页面登录注册，数据的增删改查
2.实现了增删改查的功能，而且是一对多的。 3.后台使用了EF进行操作数据库，EF使用的是codeFirst 4.实现了分页的功能。 5.另外，本项目无论是前台还是后台都对代码进行了注释，使得项目非常容易理解，花了很长时间做...
开箱即用的基于配置的后台管理解决方案，最少的编写代码，通过配置文件即可实现：增，删，改，查，翻页 的功能。 它基于 vue 和 element和MongoDB。它使用了最新的前端技术栈，动态路由，权限验证，提炼了典型的业务...
生成后台管理页面的增删改查，只需要编写业务逻辑的代码，生成的代码。 生成的接口灵活可满足95%的基本的增删改查需求 集成了swagger文档支持，方便编写API接口文档 代码生成文档自动生成 集成了阿里连数据库监控...
dao数据访问层，存放对数据库的增删改查操作DAO.js提供的公共访问数据库的方法 models存储特定数据库ORM模型文件 modules当前项目模块 authorization.js API权限验证模块 database.js数据库模块（数据库加载基于...
写好实体类后启动项目，即可自动建表，可在前端页面生成实体类相关的代码，生成后分别放到前该项目里，重启项目，此实体的增减改查功能已完善，然后开始真正业务代码的编写。参考文档视频教程正在录制中...
附带代码生成器功能,增，删，改，查，无需写一行代码，包括一对多，多对多，多表同时操作，后端和前端的代码都能全部生成,可直接在代码生成界面上 选择生成页面上不同的组件，已封装好了树形选择组件，弹窗选择组件...
- `dao` 数据访问层，存放对数据库的增删改查操作 - `DAO.js` 提供的公共访问数据库的方法 - `models` 存放具体数据库 ORM 模型文件 - `modules` 当前项目模块 - `authorization.js` API权限验证模块 - `database...
安装包7MB大小，拥有一键生成代码功能、无需写页面快速增删改查、资源管理、权限管理、通用的会员模块、系统分类、多语言配置、基础配置、系统日志、钩子事件、应用插件扩展功能，在线安装卸载升级应用插件。...
dao数据访问层，存放对数据库的增删改查操作DAO.js提供的公共访问数据库的方法 models存储特定数据库ORM模型文件 modules当前项目模块 authorization.js API权限验证模块 database.js数据库模块（数据库加载基于...
3.采用SQL数据库，对应实体类，管理各种所需要的信息，完成增删改查操作，采用Mybatis-plus完成数据库操作 4.采用面向对象方法对软件系统进行分析与设计，完成低耦合的时间管理系统。 5.采用前后端分离的技术，前端...
关爱地球网 开发语言 本网站分为前台和后台，前台主要...（3）后台管理员可以发布蓝星星任务，对报名蓝星星的成员进行审核和增删改查，并对用户发表的我眼中的地球和任务报告以及发表的文章等进行审核并修改和删除等。
关爱地球网 开发语言 本网站分为前台和后台，前台主要...（3）后台管理员可以发布蓝星星任务，对报名蓝星星的成员进行审核和增删改查，并对用户发表的我眼中的地球和任务报告以及发表的文章等进行审核并修改和删除等。
- 提供CrudService接口，对增删改查进行封装，代码更简洁 - 页面交互使用Vue2.x，极大的提高了开发效率 - 完善的部门管理及数据权限，通过注解实现数据权限的控制 - 完善的XSS防范及脚本过滤，彻底杜绝XSS攻击 - ...
一套基于TS的增删改改查系统，前端语言Vue3.0，React，Angular，使用某种语言节点+表达式，采用了MySQL，MongoDB，SQLite编写的数据库。 一个基于TS的添加，删除，修改和查询系统，前端语言vue3.0，react，angular，...
提供代码生成器，基本增删改查无需编写，可快速完成开发任务。 后台接口RESTful 风格，支持前后端分离 特征 后台接口RESTful 风格，支持前后端分离，可与app公用一套接口 采用RBAC的权限控制，支持数据权限（用法见...
前台： ...2.用户答题模块：（1）点击开始答题，随机生成c程序试卷（满分100分）（2）选择题（10道，每道...2题库管理：初始题库（选择题30道，程序改错题6道，其他题型都3道，共三套题），题库的增删改查（附带答案解析）
DBM是一个数据源管理系统，包含数据源管理，开放授权两个模块，数据源管理指关系型数据的一键导入，按需筛选，指定转换等功能，开放授权指数据拥有者给用户开放数据的增，删，改，查等操作权限。部署或使用此系统...
试卷列表：试卷的增删改查，新增包含选择学科、试卷类型、试卷名称、考试时间，试卷内容包含添加大标题，然后添加题目到此试卷中，组成一套完整的试卷 题目列表：题目的增删改查，目前题型包含单选题、多选题、判断...