前言
前端变化太快，各种框架也是层出不穷，vue、react等各种框架。作为一个工作中常年使用jQuery,zepto的人来说，总要找个机会来探索下，所以在业余时间开了这个仓库（总觉得光看得来终觉浅）。出于个人主观因素，决定使用vue来作为前端框架，后端必须是node框架，我选择的是express，数据库使用的是mongodb。在持续更新中，会对自己摸索过程中遇到的坑作一个总结。
项目概要
前端
- .src
.components- header.vue //公共头部
- leftMenu.vue //左侧导航栏
.page
.addblog - addBlog.vue //编辑博客页面
.userInfo - userinfo.vue //个人信息页面
.router - router.js //单页面路由
App.vue
main.js
这个是目前在仓库中的前端项目结构。由于偷懒，没有自己去通过webpack搭建开发环境，所以依然使用的vue脚手架 vue-cli。对于脚手架的安装这边不在过多重复 传送门：https://github.com/vuejs/vue-cli；
现在开发环境有了之后，就需要总体规划整个的项目结构。由于是后台页面和本着使用vue全家桶的宗旨，页面ui我使用了饿了么的element-ui，路由配置vue-roouter，异步接口请求使用了vue-resource。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import VueRouter from 'vue-router'
import resource from 'vue-resource'
Vue.use(ElementUI);
Vue.use(VueRouter);
Vue.use(resource);
安装之后在入口脚本中引用，并且把脚本配置在全局使用。可能会好奇，为什么Vue.use()之后，该组件就能全局使用了。于是去找了一个组件去看了下源码
function install (Vue) {
if (install.installed) { return }
install.installed = true;
........
Vue.component('router-view', View);
Vue.component('router-link', Link);
}
这是vue-router脚本中的代码，可以看出的是，当我们使用Vue.use()的时候，触发了install()方法，在这个方法的最后处，主要还是注册了vue组件，所以Vue.use()之后，组件会被加载到入口文件中。
当开始在.vue文件中开始开发页面时，最先用到的就是elementui框架，参考地址：http://element.eleme.io/#/zh-CN/component/installation，如何使用组件在官网中有详细的服用方法，中文api加上详细的demo实例，实在找不到有什么不用它的理由。当使用npm run dev之后会开启localhost:8080的页面地址
左侧的菜单切换，渲染的是两个不同的组件，没有打开新页面只是单页面跳转。实现这个功能主要是依靠vue-router的作用，让我们来看下router文件夹下的脚本。
import userinfo from '../page/userInfo/userinfo' //个人信息
import addblog from '../page/addblog/addBlog' //博客编辑
const routers = [
{
path:'/backstage/userinfo',
component:userinfo
},
{
path:'/backstage/addblog',
component:addblog
}
]
export default routers;
脚本中配置了路由列表，当浏览器访问到对应列表中的地址后，对象component配置的组件就相对应的渲染。不过在一开始我配置完列表之后，打开对应地址页面并没有相应组件渲染。最后查了官网api，在App.vue中需要配置路由中组件渲染的地址，也算是入口。
有了router-view标签之后，每次切换的组件都会在这个标签位置作为渲染。
现在页面路由都齐了之后，据需要和后端的交互。使用jquery中，使用ajax，在vue中使用vue-resource 官网地址：https://github.com/pagekit/vue-resource。最常用的就是get,post方法，上代码：
bindSubmit(){
this.$http.post('http://127.0.0.1:3000/api/userinfos/putInfo',this.formDate,{emulateJSON:true}).
then((res) => {
let code = res.body.code;
if(code === 201){
this.$message('保存成功');
}
} , (resErr) => {
this.$message('系统异常');
})
}
post请求比较特别的就是跨域问题，在options添加emulateJSON:true,允许post请求，当参数为true时，官网给出的解释是Send request body as application/x-www-form-urlencoded content type 意思大致就是当参数为true时，请求头中的content-type将以application/x-www-form-urlencoded方式编码，所以避免了跨域请求。
接下来，还会对后端项目开发过程的介绍，也在研究阮一峰的RESTful api的设计指南，运用到实际开发中。
项目地址：https://github.com/lyf911010/myblog