vue+express：搭建个人博客（2）

上次更到mutations和actions，今天继续写

---

总览模块

总览模块就是显示所有文章和链接，样式和上次分享的文章类似。我觉得没有添加一个返回按钮好不科学，于是我添加了一个。

大概的感觉就是这样。
遇到的问题就是
1. 使用getter获取划分好年份的数据，for item in obj此时item为obj中的一个值而非下标，所以需要另外存储一个数据去保存。
2. 返回使用的是this.$router.push({path:'/'})，此时不需要用go，因为使用go会重新刷新页面，体验不好。

---

至此算是把简单的页面和一些简单的跳转做完了，现在需要涉及到文章和链接的可修改可编辑可删除了。
没想到这么麻烦，打包啥的
本来想用passport做的验证用户身份，但是由于本次使用的是单页应用，没办法在前端判断用户是否登录，在后端又不能先渲染再判断跳转。
不过我觉得这一块还是可以做的，再试试看。
如果用passport做的话可能不行，因为跳转的逻辑交给了前端，后端不执行跳转，那么使用无法使用redirect去控制跳转。
期待有大佬可以给个解决方案

---

webpack自动刷新

一开始我一直使用的是npm start在上面进行修改，这样会有一个问题。
就是每次我一旦修改了文件，不会自动刷新，而是需要手动重新打包再一次npm start，这样很麻烦。由于使用了webpack打包，所以也使用了webpack-dev-server工具进行自动监听文件的变化。
命令如cross-env NODE_ENV=development webpack-dev-server --open --inline --hot
也就是实时监听文件变化并打包。
此时必须要先将服务端跑起来，npm start。然后再通过npm run dev进入开发模式。

---

登录/登出

原作者在这里添加了一个注册的功能，我这边省略了。

主要的逻辑就是，在界面中点击了登录按钮，此时会派发一个登录事件，在action中会post一个请求，这个请求被后台处理，处理后会返回一个数据对象，这个数据对象是后台进行校验后的数据。

router.post('/api/login', function(req, res) {  const username = req.body.username;  const password = req.body.password;  db.User.find({username}, 'password', function(err, users) {    if(!users.length) {      res.send({status: 0, msg: '该用户不存在'})    } else if(users[0].password != password) {      res.send({status: 1, msg: '密码错误'});    } else if(users[0].password == password) {      res.send({status: 2, msg: '成功登录'});    }  })})

action会根据返回的数据判断是否成功登陆，并返回数据给页面。页面拿回数据后选择是否跳转。

---

获取所有文章/链接

这部分主要通过actions中getArticles和getLinks实现。
这两个action都是请求数据，然后再通过返回的数据对现有的文章和链接进行更新。

---

写文章/添加链接

添加链接

这里的样式我做成弹窗，如图

因为每次添加一条链接都去修改一次数据库性能肯定很差，因此跟原作者一样，做成了一系列操作之后点击保存按钮对现在的链接进行保存。
大概就是



也就是说，添加/删除/修改都是在本地进行修改（只改state里links的数据），最后只有点击了save按钮才会将修改后的数据进行保存。

添加文章

添加文章与添加链接不同，添加链接在同一个页面就可以完成但是添加文章不行。
因此我添加了一个新的组件用于写文章。
添加文章的逻辑还是很容易理解的，就是点击添加文章按钮后跳转到编辑页面，编辑后保存会触发一个post请求，此时添加到数据库中就可以啦。
有一点需要注意一下，数据库中对所有数据都有id值_id，可以通过是否传入这个id值判断此时是编辑还是新增文章。

get请求带参数

如果我要获取特定的文章，我可以通过id去获取。但是查询是get请求，如何带参呢？

getArticle: ({commit}, id) => {  return Vue.http.get('/api/getArticle', {params: {id}}).then((res) => {    return Promise.resolve(res.data);  })},

{params: {id}}就是带参的方式，记住此时的params也是一个对象。
那么后端如何获取到你带的参数呢？

// 获取特定的文章router.get('/api/getArticle', function(req, res) {  const _id = req.query.id;  db.Articles.findById({_id}, (err, article)=>{    if(err) {      console.log(err);    } else {      res.send(JSON.stringify(article));    }  })})

const _id = req.query.id;通过query来获取。
完成了文章中大部分的逻辑，大概如下

---

下面一篇就主要写写一些改进的内容，像样式啊，还有逻辑呀，收藏还没做呢。。