功能点：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直接数据绑定，数据赋值和判断的写法，写的比较肤浅，还在努力学习中(学习更牛逼的写法如组件等)，后续练习心得会博客跟进，如有问题还请大家多多指教，谢谢！
相关推荐
在本项目中，"springboot+vue+elementui实现增删改查和分页查询"是一个基于现代Web技术栈的简单但实用的应用示例。它整合了Spring Boot、Vue.js和Element UI，这三个组件分别在后端、前端和UI设计方面发挥关键作用，...
Vue 增删改查的简单操作 Vue 是一个流行的前端框架，提供了很多强大的功能来帮助开发者快速构建应用程序。在这个资源中，我们将详细介绍 Vue 增删改查的简单操作，包括展示数据、增加和删除功能、修改功能等。 一...
在本项目中，“H5+vue+vditor+bootstrap-treeview”主要涉及了现代Web开发中的几个关键技术和库，用于实现一个完整的文档管理系统的增删改查功能。下面将详细介绍这些技术及其在项目中的应用。 1. **HTML5 (H5)**：...
在IT行业中，RepeaterPro通常是指一个用于数据展示和操作的控件，它在Web开发领域，特别是ASP.NET框架中...RepeaterPro增删改查的实践涉及到前端交互设计、服务器端逻辑编写和数据库操作，是Web开发中的基本技能之一。
本项目聚焦于Spring、Spring MVC和JDBC Template的集成应用，用于实现数据库的增删改查操作。这是一套常见的企业级应用开发模式，对于理解和掌握Java Web开发至关重要。 首先，Spring框架是一个开源的应用框架，它...
SSM前后台分离技术增删改查项目是一个典型的Java Web应用程序示例，它结合了Spring、SpringMVC和MyBatis三个核心框架，用于构建高效、灵活的企业级应用。在这个项目中，开发者不仅实现了基本的数据操作功能，如增、...
在这个项目中，我们探讨的是如何在Java环境中，利用JSP（JavaServer Pages）和Servlet技术构建一个可视化的树形结构，并实现增删改查及刷新等基本功能。以下是对这个项目的详细解释： 1. **树形结构基础**： - 树...
3. **编写服务（Service）**：在Spring中定义Service接口，包含增删改查的方法，这些方法将调用Mapper接口进行实际的数据操作。 4. **实现控制器（Controller）**：SpringMVC的Controller接收HTTP请求，调用Service...
在本项目中，我们利用Spring Boot、JPA（Java Persistence API）、MySQL数据库和Vue.js前端框架，构建了一个基本的Web应用程序，实现了数据的增删改查（CRUD）功能。以下将详细介绍这些技术及其在项目中的应用。 1....
例如，通过输入框填写数据，选择操作按钮，然后由后台的 `sqlite.js` 处理这些请求，完成数据库的增删查改。通过这样的方式，开发者可以更好地理解如何在 `UNI-APP` 中利用 SQLite 实现本地数据管理，这对于构建功能...
"oa.zip_OA做增删改查"这个压缩包文件可能包含了一个基本的OA系统的实现，主要专注于核心的数据管理功能，即增删改查（CRUD：Create, Read, Update, Delete）。下面将详细介绍这些功能以及与之相关的知识点。 **1. ...
8. **接口设计与Mock Server**: 后台管理模板需要与后端接口进行通信，实现数据的增删改查功能。在开发阶段，可以使用Mock Server模拟接口返回数据，以便前端独立开发。 9. **Element Plus UI库**: Element Plus是...
在本文中，我们将深入探讨如何在uni-app框架中实现表格的增删改查功能。uni-app是一个基于Vue.js开发的多端合一的应用框架，能够帮助开发者编写一次代码，发布到多个平台，包括iOS、Android、H5以及小程序等。表格是...
在本项目中，我们结合了Spring Boot、MyBatis、Vue.js和ElementUI来构建一个功能完备的数据管理应用，实现了基本的数据增删改查功能。首先，我们需要了解这些技术的核心特性以及它们如何协同工作。 Spring Boot是...
以上就是“Spring MVC下的增删改查 登录功能 下拉框”这一项目涉及的主要技术点和实践过程，涵盖了后端开发、前端交互和数据库操作等多个层面。通过这样的实践，开发者可以掌握Web应用开发的基本流程和关键技术。
在这个“员工管理系统ssm简单页面增删改查操作”项目中，我们将探讨如何利用SSM框架实现对员工信息的基本操作。 首先，Spring作为核心容器，负责管理应用的组件，包括Bean的生命周期管理和依赖注入。在项目中，员工...
本项目是一个基于SpringBoot构建的简单日程管理系统，实现了基本的增删改查（CRUD）功能，对于初学者或者希望快速搭建后台服务的开发者来说，是一个很好的实践案例。 1. **SpringBoot核心特性** - 自动配置：...
该毕业设计项目是一个基于GIS（地理信息系统）的网站后台管理员系统，主要目的是为了管理客户端页面，实现对页面内容的增删改查等操作。这个系统采用现代化的前端技术栈，包括Vue.js作为主要的前端框架，JavaScript...
综上所述，这个后台管理系统融合了 Python Django 的强大后端功能与 Vue.js 的高效前端渲染，通过 RESTful API 实现前后端分离，实现了用户管理与用户组管理的增删改查功能，具备良好的可扩展性和可维护性。...
Vue.js的axios库可以方便地发起HTTP请求，与SpringBoot的RESTful API对接，进行数据的增删改查操作。 除此之外，项目可能还会涉及到错误日志记录、单元测试、持续集成/持续部署（CI/CD）等最佳实践，以保证代码质量...