A-A+

使用vuejs实现简单的增删改查

2016年12月22日 Javascript, Linux, 运维开发 暂无评论 阅读 194 views 次

 

新建vueproject 文件夹,安装好nodejs,

然后装下bulma bootstrap vuejs(直接引入CDN,或者下载JS文件也行)

    npm install -g bulma  #宝马css
    npm install -g bootstrap  #大家都懂的
    npm install -g vue
    npm install -g qs     #处理字符串序列化之类的~
    npm install -g axios  #ajax请求

 

新建index.html 引入CSS和JS:

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/\
bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="node_modules/bulma/css/bulma.css">
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i> 
       Vue Events </a>
    </div>
  </nav>
  <!-- APP -->
  <div class="container" id="app">
  </div>
  <!-- JS -->
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="node_modules/axios/dist/axios.min.js"></script>
    <script src="node_modules/qs/dist/qs.js"></script>
  <script src="app.js"></script>
</body>
</html>

新建api文件夹和 app.js文件。再目录下执行nmp install,目录如下:

-vueprojuect
--api
----db.php
----delete.php
----get.php
----post.php
----update.php
--node_modules
----bulma
----bootstrap
----vue
----qs
----axios

app.js:

Vue.component('modal',{
	template:`
		<div class="modal is-active">
		  <div class="modal-background"></div>
		  <div class="modal-card">
		    <header class="modal-card-head">
		      <p class="modal-card-title">
					<slot name="header"></slot>
		      </p>
		      <button class="delete" @click="$emit(\'close\')"></button>
		    </header>
		    <section class="modal-card-body">
		      <!-- Content ... -->
				<slot>
					Default Content

				</slot>
		    </section>
		    <footer class="modal-card-foot">
		      <slot name="footer">
			    <a class="button is-primary" @click="$emit(\'close\')">Okey</a>
		      </slot>
		    </footer>
		  </div>
		</div>
	`
});

new Vue({
	el:"#app",
	data:{
		event:{name:'',description:'',date:''},
		events:[],
		showModal:false,
	},
	created:function(){
		var vm = this;
		axios.get('api/get.php')
		.then(function(response){
			if(response.data.length > 0) {
				vm.events=response.data;
			}
			else{
				vm.events=[];
			}	 
		  });  	  	 
	},
	
	methods:{
		seeModal:function(event){
			this.event = event;
			this.showModal=true;
		},
		hiddenModal:function(){
			this.showModal=false;
			this.event='';
		},
		addEvent:function(event){
			 var data = Qs.stringify(event);
			 var vm = this;
			 var cf = confirm("确认增加日志?");
			 if(cf){
			 	axios.post('api/post.php', data)
				  .then(function (response) {
				    console.log(response.data);
				  })
				  .catch(function (error) {
				    console.log(error);
				  });
				  vm.events.push(event);
				  vm.event='';
			 }
			 
		},
		deleteEvent:function(event){
			var cf = confirm("确认要删除日志?");
			if(cf){
				var index=this.events.indexOf(event);
				this.events.splice(index,1);
				axios.post('api/delete.php',Qs.stringify({id:event.id}))
				.then(function (response) {
			    	console.log(response.data);
				  })
			}

		},
		upevent:function(event){
			axios.post('api/update.php',Qs.stringify(event))
			.then(function (response) {
			    console.log(response.data);
			  })
			this.hiddenModal();
		},
	}
});

完整的HTML为:

<!DOCTYPE html>
<html>
<head>
	<title>Vue</title>
	<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css\
/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="node_modules/bulma/css/bulma.css">
	<style>
		h4 {
			margin-bottom: 10px;
			}
	</style>
</head>
<body>
	<!-- navigation bar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i> 
       记事本 </a>
    </div>
  </nav>
  <!-- main body of our application -->
  <div class="container" id="app">
    <!-- add an event form -->
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3>新增日志</h3>
        </div>
        <div class="panel-body">
		 <div class="form-group">
		 	标题<span class="text-danger" v-if="!event.name">(*)</span>
		    <input class="form-control" v-model="event.name" >
		  </div>

		  <div class="form-group">
		  内容<span class="text-danger" v-if="!event.description">(*)</span>
		    <textarea class="form-control"  v-model="event.description"></textarea>
		  </div>
		  <div class="form-group">
		  时间<span class="text-danger" v-if="!event.date">(*)</span>
		  <input type="date" class="form-control"  
                        placeholder="" v-model="event.date">
		  </div>
		  <button v-if="event.name && event.description &&event.date" 
                           class="btn btn-primary" @click="addEvent(event)">增加</button>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="list-group" v-for="event in events" >
			<h4>
				<a @click="seeModal(event)"  >{{ event.name  }}</a>
				<button class="btn btn-xs btn-danger pull-right"
                                  @click="deleteEvent(event)">Delete</button>
			</h4>
			<h5>
				{{ event.description }}
			</h5>
			<h5 class="pull-right">
				{{ event.date }}
			</h5>
			<hr>
      </div>
    </div>
		<modal  v-if="showModal" @close="hiddenModal" title="修改" >
	    	<template slot="header">修改event</template>
	        <div class="form-group">
			    <input class="form-control" v-model="event.name"> 
			  </div>
			  <div class="form-group">
			    <textarea class="form-control" v-model="event.description">
                            </textarea>
			  </div>
			  <div class="form-group">
			    <input type="date" class="form-control" v-model="event.date">
			  </div>
			  <template slot="footer">
			  	 <a class="button is-primary" @click="upevent(event)">
                                  保存</a>
			     <a class="button" @click="hiddenModal" >取消</a>
			  </template>
		</modal>
  </div>
  <!-- JS -->
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="node_modules/axios/dist/axios.min.js"></script>
    <script src="node_modules/qs/dist/qs.js"></script>
  <script src="app.js"></script>
</body>
</html>

创建数据库:

CREATE TABLE `events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8_bin DEFAULT NULL,
  `description` text COLLATE utf8_bin,
  `date` date DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=42 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

api/db.php:

<?php
class db{
	private $host='localhost';
	private $username='root';
	private $password='root';
	private $database='awkxy';
	public function connect(){
		$c = mysqli_connect($this->host,$this->username,\
                                      $this->password,$this->database);
		return $c;
	}
	public function list($sql){
		$c = $this->connect();
		$rs = $c->query($sql);
		$data = '';
		while($row = mysqli_fetch_object($rs)){
			$data[]= $row;
		}
		return $data;
	}
	public function query($sql){
		$c = $this->connect();
		$rs = $c->query($sql);
	}
	public function delete($id){
		$c = $this->connect();
		$c->query("delete from events where id = '$id' ");
	}
}
	

api\get.php:

<?php
	include("db.php");
	$c = new db;
	$data = $c->list("select * from events");
	echo json_encode($data);
?>

api\post.php:

<?php
include("db.php");
$c = new db;
$data = $_POST;
$data = '"'.implode('","',$data).'"';
// echo $data;
$sql = "insert into events values (null,".$data.")";
$res = $c->query($sql);
echo "add success!";
?>

api\update.php

<?php
include("db.php");
$c = new db;
$data = $_POST;
// echo $data;
$sql = "update events set name='".$data["name"]."',
			description='".$data["description"]."',
			date='".$data["date"] ."' where id = ".$data["id"];
// echo $sql;
$res = $c->query($sql);
echo "update success!";
?>

api\delete.php

<?php
include("db.php");
$c = new db;
$id= $_POST['id'];
$res = $c->delete($id);
echo "delete success!";
?>

 

标签:

给我留言