将之前的todolist项目重构，使用axios调用接口获取数据，通过接口数据渲染页面，下面就是代码的具体实现，我将注解都写在了代码中。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body >
<section class="todoapp" id="todoapp">
<header class="header">
<!-- data中的数据title -->
<h1>{{title}}</h1>
<!-- 键盘enter键按下时触发add事件,绑定自定义标签v-fouce -->
<input class="new-todo" @keyup.enter="add($event)" v-fouce placeholder="What needs to be done?" autofocus>
</header>
<!-- 数据源没数据时不显示该页面 -->
<div v-if="list.length">
<section class="main">
<!--点击全选的按钮时，触发选中全部selectAll事件-->
<input id="toggle-all" @click="selectAll($event)" class="toggle-all" type="checkbox">
<label for="toggle-all">选中全部</label>
<ul class="todo-list">
<!--循环遍历list数组 ， 点击时触发statu事件，当list中的status为true时添加completed类。-->
<li v-for="(val,key) in list" v-if="val.shows" @click="statu(key,val.id)" v-bind:class="{completed:val.status}">
<div class="view">
<!--数据绑定改list数组的status-->
<input class="toggle" type="checkbox" v-model="val.status">
<label >{{val.username}}</label>
<!--点击删除按钮-->
<button @click="del(key,val.id)" class="destroy"></button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
</ul>
</section>
<footer class="footer">
<span class="todo-count"><strong>{{getDo()}}</strong> item left</span>
<ul class="filters">
<li>
<a class="selected" href="#/" @click="all()" >All</a>
</li>
<li>
<a href="#/active" @click="active()">Active</a>
</li>
<li>
<a href="#/completed" @click="completed()" >Completed</a>
</li>
</ul>
<button @click="delCompleted()" class="clear-completed">Clear completed</button>
</footer>
</section>
</div>
<footer class="info">
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="node_modules/todomvc-common/base.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
(function(Vue){
new Vue({
el:'#todoapp',
//定义数据
data:{
//标题
title:'wyq_Todo_Test',
//list数据源
list:[],
},
//自定义私有标签v-fouce,获取焦点
directives:{
fouce:{
// 当被绑定的元素插入到 DOM 中时
inserted:function(el){
//获取焦点
el.focus();
}
}
},
//方法
methods:{
//新增数据时。
add:function(ev){
//传递触发事件的的元素
var input = ev.target;
//获取input的value
value=input.value.trim();
if(value == ""){
return;
}
//组装数据
data ={
username:value,
status:0,
shows:1,
}
//axios调用接口新增数据
let url = "http://CI.com/api";
axios.post(url,data).then((res) => {
//新增成功
if(res.data.code == 200){
//list中添加该数据
this.list.push(data);
}
})
//将input的value赋为空
input.value = '';
},
//全选
selectAll:function(ev){
//获取点击的元素
var input = ev.target;
// 循环所有数据为状态重新赋值
// 因为每个元素的选中状态都是使用 v-model 的双向数据绑定，
// 因此 数据发生改变，状态即改变，状态改变，数据也会改变
for(let i=0;i<this.list.length;i++){
this.list[i].status = input.checked;
}
},
//删除任务参数为键值和id
del:function(key,id){
//调用接口
let url = "http://CI.com/api/"+id
axios.delete(url).then((res)=>{
//删除成功
if(res.data.code == 200){
//list中删除数据
this.list.splice(key,1)
}
})
},
//删除全部完成的数据
delCompleted:function(){
//只保留未完成的任务
this.list = this.list.filter((v)=> v.status == false)
},
//获取全部未完成任务的数量
getDo:function(){
return this.list.filter((v)=>v.status == false).length;
},
//点击修改状态
statu(key,id){
let url = "http://CI.com/api/"+id;
//获取当前键值的status状态
var status = this.list[key].status;
//状态取反
var status1 = !status;
//调用接口
axios.post(url,{'status':status1}).then((res)=>{
if(res.data.code == 200){
//成功修改list的状态
this.list[key].status = status1;
}
})
},
},
//获取#todoapp之前执行该代码
mounted:function(){
let url = "http://CI.com/api";
//通过url获取数据赋值给list
axios.get(url).then((res)=>{
this.list = res.data.data;
})
},
})
})(Vue)
接口代码：
<?php
/**
* Created by PhpStorm.
* User: wyq
* Date: 2021/8/3
* Time: 16:00
*/
class Api extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('admins_model');
$this->load->helper('common_helper');
}
/*
* 获取全部数据 get请求
*/
public function index(){
$data = $this->admins_model->findAll();
foreach ($data as $k => &$v){
if ($v['status'] == 1){
$v['status'] = true;
}else{
$v['status'] = false;
}
if ($v['shows'] == 1){
$v['shows'] = true;
}else{
$v['shows'] = false;
}
}
success($data);
}
/*
* 获取单个数据 get请求
*/
public function view($id){
$data = $this->admins_model->findOne($id);
success($data);
}
/*
* 新增一条数据
*/
public function add(){
$post = file_get_contents('php://input');
$data = json_decode($post,true);
$data = $this->admins_model->add($data);
if ($data){
success($data);
}else{
fail($data);
}
}
/*
* 修改一条数据
*/
public function edit($id){
$post = file_get_contents('php://input');
$data = json_decode($post,true);
if ($data){
//修改页面逻辑
$data['id'] = $id;
$res = $this->admins_model->dell($data);
if ($res){
success($res);
}else{
fail($res);
}
}else{
//修改页面战术PUT请求
$data = $this->admins_model->findOne($id);
success($data);
}
}
/*
* 删除一条数据
*/
public function delete($id){
$res = $this->admins_model->del($id);
success($res);
}
}
这样就是实现了一个基本的增、删、改、查，具体还有一些其他功能我没有实现，等有时间再具体实现。
469
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
