vue 请求多个api_Vue 创建多人共享博客

多人共享博客

上一个项目：仿 CNODE 社区 刚完成，感觉有点意犹未尽，对于 登录 这一块老师并没有展开，我先是用了 localStorage 自己瞎搞，跑通之后想了下，vuex 不是专门做全局状态管理的么？那么用 vuex 做登录是最合适不过的呀。于是又搜了些别人用 vuex 做登录状态管理的案例，算是搞明白了。

现在选择了若愚老师的这个项目，主要是巩固一下对 vue 的认识，同时对 vuex 做个更详细的了解。本项目做一款多人共享博客，包含首页、用户文章列表、登录、注册、个人管理、编辑、发布等功能。

测试账号： hunger10086

测试密码： 123456

实现功能:用户的登录、注册、注销

首页多人博客展示

用户博文展示

我的页面博文展示及管理

博文的创建、编辑、删除、发布

使用 Vue.js 技术栈：vue-cli / vue2 / axios / vue-router /vuex / es6 / webpack / element-ui

博客主要记录项目完成过程中学习到的知识点，其他的就一笔带过了。

项目初始化

在 vue 项目中使用 less:

如果要在某个组件中引入 less 文件，则在 style 中写入 @import '../assets/base.less'; 即可(记得 npm 装上 less 和 less-loader 哦)

ElementUI 的使用

ElementUI 的有很详细的安装使用文档

主要步骤：

1.安装 cnpm i element-ui

2.引入

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

3.挂载到 Vue Vue.use(ElementUI)

然后就可以在组件中使用 element-ui 了。

数据请求接口封装

另外，若愚老师前期还对 axios 底层请求做了进一步的定制和封装，其中一些技巧很值得学习。

1.先把 axios 请求封装成了输入参数更简洁明了、报错信息更「人性化」的 Promise 对象。

// /helpers/request.jsaxios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

axios.defaults.baseURL = 'http://blog-server.hunger-valley.com'

axios.defaults.withCredentials = true

export default function request(url, type = 'GET', data = {}) {

return new Promise((resolve, reject) => {

let option = {

url,

method: type

}

if(type.toLowerCase() === 'get') {

option.params = data

}else {

option.data = data

}

axios(option).then(res => {

console.log(res.data)

if(res.data.status === 'ok') {

resolve(res.data)

}else{

Message.error(res.data.msg)

reject(res.data)

}

}).catch(err => {

Messa