vue+express之前后台分离博客

　　说来惭愧，这么久没有更新过博客了，写个项目练练手吧，打算写一个vue+express的博客  可能这个时间说长不长说短不短  写到哪就是哪吧  我采用的是前后台分离  express采用的是mvc，但是没有v层，只要是起到一个逻辑判断写入数据库的功能，下面废话不多说直接弄吧，最后说下禁止转载。

　　首先，前端采用的是vue+element，先把前端的模板弄出来

vue init webpack qiantai
cd qiantai
npm install
npm i element-ui -S
npm i axios
npm run dev

　　更改main.js

import axios from 'axios'     //加载axios
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.prototype.axios = axios; //把axios对象挂到vue的原型上
Vue.use(ElementUI);

　　前端这块是暂时弄好了，现在开始搭建后台这块，首先确保你安装了mongodb

npm i -g express-generator
express server
npm install
mpm i cros　　//解决跨域用的
npm i config-lite connect-flash connect-mongo  express-formidable express-session marked moment mongolass objectid-to-timestamp sha1 winston express-winston --save
/*
config-lite: 读取配置文件
connect-flash: 页面通知的中间件，基于 session 实现
connect-mongo: 将 session 存储于 mongodb，结合 express-session 使用
express-formidable: 接收表单及文件上传的中间件
express-session: session 中间件
marked: markdown 解析
moment: 时间格式化
mongolass: mongodb 驱动
objectid-to-timestamp: 根据 ObjectId 生成时间戳
sha1: sha1 加密，用于密码加密
winston: 日志
express-winston: express 的 winston 日志中间件
*/
node bin/www

　　在server里面的app.js里面加入

var cors = require('cors');
app.use(cors());

　　好了，现在前后台就算基本上搭建完成了，那么我们来测试下前后台能不能连的上，在server文件夹下找到routes下的index.js，更改代码

router.get('/', function(req, res, next) {
   res.send({
    status : 1 ,
    info : '这个是index的返回的东西'
  });
});

　　回到vue里面，打开HelloWorld.vue，把如下代码全部复制进去

<template>
  <div >
    <el-tag>vue执行了</el-tag>
    {{ceshi.info}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      ceshi : ''
    }
  },
  mounted(){
    this.ceshif();

  },
  methods : {
    ceshif(){
      let self = this;

      self
        .axios({
          method: "get",
          url: 'http://localhost:3000',

        })
        .then(function(response) {
          self.ceshi = response.data;

        })
        .catch(function(err) {
          console.log("噢耶，报错咯");
        });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

　　浏览器打开http://localhost:8080/#/ ，这个时候你会看见如下图，那么基本的步骤就完成了