Vuejs——搭建个人博客（学习笔记）

Posted 2020-10-09 原易

1>环境搭建
node -v cnpm -v
cnpm install --global vue-cli
vue init webpack 项目名称 全部选N
cd到项目
cnpm install 安装项目依赖
npm run dev 运行
修改端口号——build文件夹下dev-server.js文件 var pory = 端口号
为项目创建组件
大致流程——在components文件夹下新建addFace.vue文件，拷贝hello.vue文件内容进去并删除多余信息，修改class名称，App.vue中先引入addFace，vue文件方式是import。。。 from。。。 以及在components中引用 ，之后再App.vue的template下注入addFace.vue的class

<template>
<div id="app">
<add-face></add-face>
</div>
</template>

<script>
import addFace from ‘./components/addFace‘

export default {
name: ‘app‘,
components: {
addFace
}
}
</script>

2>添加博客页面 post数据
首先在template中实现基本的布局

所有的input 都应该双向绑定数据 这里就需要用到v-model，并且需要在script的data中声明（data存放可变的数据） 就像这样
data () {
return {
book : {
title : "",
content : "",
checks : [],
booker : ""
},
bookers : [
"Yang",
"max",
"star"
],
submmited : false
}
},

既然我们已经通过v-model绑定了数据，那么如何应用它呢，这时候就需要用到{{}}
这是angular标准的双向绑定标识就像这样
<p> {{book.title}} </p>
这时候我们不免就要问了，那对于数组类型的数据我们怎么来拿到它呢
这时候就需要使用v-for来遍历它，
举个栗子：我们在book中定义了一个checks这么一个空数组（多用于多选框、比如所属标签）这样我们就可以自用户勾选选框的时候拿到对应的value值并存放在数组中
之后我们就可以通过v-for来拿到其中的数组（这里一般都需要用到ul>li）就像这样
<ul>
<li v-for="check in book.checks">
{{check}}
</li>
</ul>
接下来还有一种情况，如果我们需要指定内容的下拉框选项（比如作者）我们需要怎么办呢
其实也很简单，首先我们需要在data下定义一个数组来存储我们特定的选框信息，就像之前的bookers:[]，之后我们就可以通过v-for在option中遍历出来就像这样
<select v-model="book.booker">
<option v-for="booker in bookers">
{{booker}}
</option>
</select>

这样我们就已经将bookers的数据遍历到option中了并将选择的结果以{{booker}}的形式展示出来，但是这里的booker只能在option下使用，如何才能实现数据的双向绑定呢，这当然少不了v-model了，但是我们不可能v-model="booker"来使用它吧，浏览器会报错booker未定义，那么我们就在data中定义它一下，之后我们就可以拿到用户选择的值了 并像这样来使用它
<p>作者：{{book.booker}}</p>

表单提交的onclick事件
v-on:click.prevent="post"（这里的prevent是为了阻止浏览器刷新）点击会触发post方法，那么现在我们还没有这个方法，所以需要在data外,分割创建一个methods来存放方法
methods : {
post : function(){
this.$http.post("https://jsonplaceholder.typicode.com/posts",{
title : this.book.title,
content : this.book.content
})
.then(function(data){
console.log(data);
this.submmited = true;
})
}
}

这里我们需要用到http请求，那么我们就需要借助resource方法，但是我们还没有他，所以需要下载它
npm install vue-resource --save
现在我们已经下载好了，如果想使用就需要先在main.js中引用它
import VueResource from ‘vue-resource‘
Vue.use(VueResource)
此时我们就可以正常使用它的方法了
this.$http.post("需要post的地址").then(post之后的回调函数)

为了方便测试 网上已经有提供写好的
jsonplaceholder.typicode.com

如果我们需要控制表单提交后隐藏那么我们需要用到v-if
它同样需要一个布尔类型的变量控制是否显示，那么我们先在data外，分割并定义它
submmited : false
然后我们可以通过v-if给form添加事件 并在post的回调函数中控制布尔值得变化
<form v-if="!submmited">
<label for="">博客标题：</label>
<input type="text" v-model="book.title" required>
<label for="">博客内容：</label>
<textarea name="" id="" v-model="book.content"></textarea>
<div id="checkboxes">
<label for="">情感</label>
<input type="checkbox" value="情感" v-model="book.checks">
<label for="">心情</label>
<input type="checkbox" value="心情" v-model="book.checks">
<label for="">灵感</label>
<input type="checkbox" value="灵感" v-model="book.checks">
<label for="">回忆</label>
<input type="checkbox" value="回忆" v-model="book.checks">
</div>
<label for="">作者：</label>
<select v-model="book.booker">
<option v-for="booker in bookers">
{{booker}}
</option>
</select>
<button v-on:click.prevent = "post">
保存并上传
</button>
</form>

3>博客总览（展示页面） 请求数据get
为了将博客信息展示出来，我们需要先创建一个vue文件来实现它
将新建的vue页在APP.Vue中引用
接下来在新建的vue页中实现内容 template、script、style
这里值得说明的一点是style后面跟一个scope可以使style样式只作用于当前页
接下来我们需要将博客信息通过v-for遍历出来
那么我们怎么拿到博客信息呢，我们在data后，分割创建一个created方法并通过get请求到数据
那么我们请求到的数据应该放在哪里呢，我们在data里定义一个数组来接收，然后就可以正常的调用了
<template>
<div class="show-face">
<h1>博客总览</h1>
<div class="single-face" v-for="book in books">
<h3> {{book.title}} </h3>
<p> {{book.body}} </p>
</div>
</div>
</template>

<script>
export default {
name: ‘show-face‘,
data () {
return {
books : []
}
},
created(){
this.$http.get("https://jsonplaceholder.typicode.com/posts")
.then(function(data){
console.log(data.body);
this.books = data.body.slice(0,10);
})
}
}
</script>

<style>
.single-face{
border : 1px solid #444;
}
</style>

 

 

 

 

这里需要说明的一点是，如果需要请求本地的文件，json文件需要放在static中
4.1>自定义指令、钩子函数
接下来我们要说的的是自定义指令
自定义指令使用格式：v-指令名称 = "binding.value"
这里binding.value不是必填项，取决于你是否需要使用它，但是应该注意的一点是这里应该是字符串或[]/{}的形式，我们需要用‘‘来包裹它
那么我们怎么定义它呢
在main.js中声明它就好
vue.directive（‘指令名称’，{执行的内容}）
那么执行的内容有没有相应的格式呢
答案是有
bind（el,binding,vnode）{}
这里的el就是绑定了自定义事件的元素，我们可以直接通过el.style来控制它的样式
这里的binding是自定义元素的属性，我们可以通过binding.value来使用它 通过if判断语句
Vue.directive(‘rainbow‘,{
bind(el,binding,vnode){
el.style.color = "#" + Math.random().toString(16).slice(2,8);
}
})

Vue.directive(‘showface‘,{
bind(el,binding,vnode){
if(binding.value === "face"){
alert("1");
}else{

}

if(binding.arg = "show"){
alert("2");
}
}
})

4.2>搜索框 （搜索对应内容）
接下来我们需要实现搜索框的功能，
这就需要使用到过滤器，官方文档中给出的api是vue.filter

首先来说一下如何使用过滤器
我们需要在需要过滤的value后加一个|然后加上过滤器的名称
就像这样
<p> {{book.body | snippet}} </p>
那么我们如何得到过滤器呢
需要在main.js中声明
vue.filter(“过滤器名”,执行的函数)
就像这样
Vue.filter("snippet",function(value){
return value.slice(0,100) + "...";
})
这里的value是什么呢，就是需要被过滤的元素
（需要说明的一点是，也可以有局部过滤器
只需要在data中定义filters：{“过滤器名” ： function（value）}
能很明显的看出来这个是json的形式，所以可以有多个过滤器）

接下来我们是否需要一个搜索框input
既然有输入框，那么我们定义一个search来接收用户输入的内容，当然他需要定义在data中
接下来我们来实现筛选
在data后，分割一个方法来实现就像这样
computed: {
filterBook : function(){
return this.books.filter( (book) => {
return book.title.match(this.search);
} )
}
}
这里的books和book明显是显示数据是遍历的信息
这个方法的作用就是拿到用户输入的信息去和遍历的信息匹配，匹配上会显示出来
这里需要说明的一点是 经过这个方法之后，之前遍历的book in books就需要变成book in filterBook了
5.1>路由、 nav 点击跳转详情
接下来我们需要用到的是路由参数
首先我们来安装它
npm install vue-router --save
当然也少不了main.js中的引用和使用
就像这样
import VueRouter from ‘vue-router‘
Vue.use(VueRouter)
接下来我们就可以在main.js中创建路由了
就像这样
const router = new VueRouter({
routes : Routers ,
})
别急routes后面可以是一个对象然后我们通过path ： component来一一对应地址和模块
但是为了代码的优化 我们重新创建一个routes.js文件来做这件事
当然如果需要其他文件来实现我们需要在main.js中import它
就像这样
import Routers from ‘./routes‘

同样的我们还需要在routes.js中暴露它
就像这样
export default [
{path : "/",component : showFace},
{path : "/add",component : addFace},
{path : "/face/:id",component : singleFace},
]
和明显在routes.js中我们找不到对应的模块
那么我们需要引入它
就像这样
import addFace from ‘./components/addFace‘
import showFace from ‘./components/showFace‘
import singleFace from ‘./components/singleFace‘

export default [
{path : "/",component : showFace},
{path : "/add",component : addFace},
{path : "/face/:id",component : singleFace},
]

那么路由定义好了怎么使用它呢
我们需要在main.js的app板块下使用它
new Vue({
el: ‘#app‘,
template: ‘<App/>‘,
components: { App },
router : router
})

我们还需要在app.vue下的template中
<router-view></router-view>
此时我们可以通过手动修改地址展示不同的页面，但是你会发现在你手动切换地址的时候回自动加上一个#号，那么我们在定义路由时候加上一句
const router = new VueRouter({
routes : Routers ,
mode : "history"
})

最后我们来优化一下它
新建一个导航页面来实现点击跳转faceHeader.vue
当然我们如果想让他和app.vue产生管理就需要调用并使用它
就像这样
<script>
import addFace from ‘./components/addFace‘
import showFace from ‘./components/showFace‘
import faceHeader from ‘./components/faceHeader‘

export default {
name: ‘app‘,
components: {
addFace,
showFace,
faceHeader
}
}
</script>
同样的我们在faceHeader.vue中需要暴露它
就像这样
<script>
export default {
name : "face-header"
}
</script>

接下来我们在faceHeader中来添加导航
就像这样
<template>
<nav>
<ul>
<li>
<router-link to="/" exact>博客</router-link>
<router-link to="/add" exact>写博客</router-link>
</li>
</ul>
</nav>
</template>
router-link to 可以指向要显示的地址也可以用来设置样式
exact来解决样式一直存在的问题

5.2>路由参数、详情页
在router.js中我们先来看看如何应用
{path : "/face/:id",component : singleFace},
根据path传入的id来实现singleFace这个组件
那么我们还没有这个组件
没关系先import它 然后来创建一个文件singleFace.vue
然后在singleFace.vue中暴露它

接下来说一下思路
我们应该在另一个页面，也就是showFace.vue中拿到id值然后给他显示对应的页面
首先我们需要用到的值有id和需要显示的内容book，那么我们在data中定义它
那么我们如何来拿到book呢
通过this.$http.get().then(function(data){})
来拿到它
在get中拿到地址并拼接一个id
在.then回调函数中data接收到数据
像这样
<template>
<div id="single-face">
<h1> {{book.title}} </h1>
<article> {{book.body}} </article>
</div>
</template>

<script>
export default {
name : "single-face",
data() {
return{
id : this.$route.params.id,
book : {}
}
},
created(){
this.$http.get("https://jsonplaceholder.typicode.com/posts/" + this.id)
.then(function(data){
this.book = data.body;
})
}
}
</script>

<style>

</style>

此时我们已经实现手动修改地址显示不同页面
接下来我们需要优化它
在showFace.vue中
<div class="single-face" v-for="book in filterBook">
<router-link v-bind:to="‘/face/‘ + book.id">
<h3 v-rainbow> {{book.title}} </h3>
<p> {{book.body | snippet}} </p>
</router-link>
</div>
这里需要说明的是
router-link to="" 进行的是路由跳转
跳转的地址是个字符串所以要将地址和id拼接起来
如果要实现点击跳转需要v-bind绑定

6>借用firebase创建数据库 post数据至数据库
firebase中
新建项目 ——进入 —— 规则 ——改为true（是否可读、是否可写） —— 复制暴露出来的url——替换添加页面中的post目录并创建一个文件“url/post.json”——替换展示页面的get目录

此时传入的是对象而非数字，所以我们不能直接通过for遍历
那么我们将他传入数组中遍历
在show页面中的created方法 下 首先data.json（）然后return出去并在.then回调函数中data接收 那么在回调函数中可以for in 来遍历这个数组
同时的key也作为唯一标识 此时我们有了数据有了id 那么我们将数据存储在新定义的空数组中并赋值给books
created(){
this.$http.get("rm-uf6g20y9v9pnd25c7.mysql.rds.aliyuncs.com/posts.json")
.then(function(data){
return data.json();
})
.then(function(data){
var booksArray = [];
for(let key in data){
data[key].id = key;
booksArray.push(data[key]);
}
this.books = booksArray;
})
},

此时已经完成所有逻辑 只需要对样式进行编辑即可