實現一個簡單的博客系統
數據庫：
CREATE TABLE `blog` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '表id',
`title` varchar(255) DEFAULT NULL COMMENT '博客標題',
`author` varchar(255) DEFAULT NULL COMMENT '作者',
`classify` varchar(255) DEFAULT NULL COMMENT '文章分類',
`content` text COMMENT '文章內容',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='博客表';
程序代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
a{
color: #000;
text-decoration: none;
}
.header{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background: #cccccc;
}
.header a{
margin: 0 10px;
display: inline-block;
height: 50px;
padding: 0 20px;
}
.active{
color: #ffffff;
background: #ff0000;
}
.blog-list,.blog-add{
width: 80%;
margin:auto;
}
.list-item{
border: 1px solid #cccccc;
margin: 10px;
padding: 10px;
}
.modify a{
color: blue;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="app">
<blog-header></blog-header>
<router-view></router-view>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script src="js/vue-resource.js" type="text/javascript"></script>
<script src="js/vue-router.js" type="text/javascript"></script>
<script>
var url = "http://localhost:3000";
var header = {
template:'<div class="header">' +
'<router-link to="/blogList" active-class="active">博客列表</router-link>' +
'<router-link to="/blogAdd" active-class="active">添加博客</router-link>' +
'</div>'
};
var blogList = {
data:function(){
return {
blogs:[]
}
},
template: '<div class="blog-list">' +
'<div class="list-item" v-for="(blog,index) in blogs" :key="index">' +
'<h2>{{blog.title}}</h2>' +
'<p><span>{{blog.author}}</span> - <span>{{blog.classify}}</span></p>' +
'<p>{{blog.content}}</p>' +
'<p class="modify">' +
'<router-link :to="\'/blogUpdate/\'+blog.id">修改</router-link>' +
'<a href="javascript:;" @click="delBlog" :data-id="blog.id">刪除</a>' +
'</p>' +
'</div>' +
'</div>',
created:function(){
this.getBlogList();
},
methods:{
delBlog:function (event) {
var id = event.target.dataset.id;
if(confirm("確定要刪除嗎？")){
this.$http.get(url+"/api/delBlog",{params:{id:id}}).then((res)=>{
var result = res.data;
if(result.err_code==200){
alert("刪除成功");
this.getBlogList();
}
})
}
},
getBlogList:function () {
this.$http.get(url+"/api/getBlog").then((res)=> {
var result = res.data;
if(result.err_code==200){
this.blogs = result.message;
}
})
}
}
};
var blogAdd = {
data:function(){
return {
blog:{
title:"",
author:"",
classify:"",
content:""
}
}
},
template:'<div class="blog-add">' +
'<form @submit.prevent>' +
'<p>' +
'<label for="title">博客標題：</label>' +
'<input type="text" v-model="blog.title">' +
'</p>' +
'<p>' +
'<label for="author">博客作者：</label>' +
'<input type="text" v-model="blog.author">' +
'</p>' +
'<p>' +
'<label>博客分類：</label>' +
'<select v-model="blog.classify">' +
'<option value="" disabled>請選擇分類</option>' +
'<option>html</option>' +
'<option>java</option>' +
'<option>vue</option>' +
'</select>' +
'</p>' +
'<p>' +
'<label for="content">文章內容：</label>' +
'<textarea v-model="blog.content" cols="50" rows="3"></textarea>' +
'</p>' +
'<p><button @click="addBlog">提交</button></p>' +
'</form>' +
'</div>',
methods:{
addBlog:function () {
this.$http.post(url+"/api/addBlog",this.blog,{emulateJSON: true}).then((res)=>{
var result = res.data;
if(result.err_code==200){
alert("添加博客成功！");
this.blog = {
title:"",
author:"",
classify:"",
content:""
}
}
})
}
}
};
var blogUpdate = {
data:function(){
return {
blog:{}
}
},
template:'<div class="blog-add">' +
'<form @submit.prevent>' +
'<p>' +
'<label for="title">博客標題：</label>' +
'<input type="text" v-model="blog.title">' +
'</p>' +
'<p>' +
'<label for="author">博客作者：</label>' +
'<input type="text" v-model="blog.author">' +
'</p>' +
'<p>' +
'<label>博客分類：</label>' +
'<select v-model="blog.classify">' +
'<option value="" disabled>請選擇分類</option>' +
'<option value="html">html</option>' +
'<option value="java">java</option>' +
'<option value="vue">vue</option>' +
'</select>' +
'</p>' +
'<p>' +
'<label for="content">文章內容：</label>' +
'<textarea v-model="blog.content" cols="50" rows="3"></textarea>' +
'</p>' +
'<p><button @click="updateBlog">提交</button></p>' +
'</form>' +
'</div>',
created:function () {
//根據路由參數獲得文章id
var id = this.$route.params.id;
this.$http.get(url+"/api/getBlogById",{params:{id:id}}).then((res)=>{
var result = res.data;
if(result.err_code==200){
this.blog = result.message[0];
}
});
console.log(this.$route.params.id)
},
methods: {
updateBlog:function () {
this.$http.post(url+"/api/updateBlog",this.blog,{emulateJSON: true}).then((res)=>{
var result = res.data;
if(result.err_code==200){
alert("修改成功");
}
})
}
}
};
var router = new VueRouter({
routes:[
//路由重定向 redirect,用於頁面剛打開
{path:'/',component:blogList,redirect:'/blogList'},
{path:'/blogList',component:blogList},
{path:'/blogAdd',component:blogAdd},
{path:'/blogUpdate/:id',component:blogUpdate}
]
});
var app = new Vue({
el:"#app",
components:{
'blog-header':header
},
router:router
})
</script>
</body>
</html>
注意：我們還是要去創建一個node.js的server,才能實現博客的增刪改查。
QQ：732005030
掃碼加微信
