下载

https://github.com/ElementUI/element-starter

安装

npm run dev

代理的坑

  '/api/': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }

后端可按正常书写，vue端请求时，post请求一律带上api前缀。比如分类保存接口，后端路径是localhost:3000/category/save，而vue-resource请求的就应是$http.post('api/category/save')

对打包的影响是，访问不了，于是还是'^/api': '/api/'

组织路由

Layout布局

母版

vue-resource引入

var $http = require('vue-resource').Http;
$http.post('url', param)

静态<script>引入resource的方式时，使用方式就是下面这样

this.$http.post('url', param)

接收post传值

// 添加分类
app.post('/category/save', function (req, res) {
    console.log(req.body);
    var form = req.body;
    var category = new Category();
    category.title = form.title;
    category.priority = form.priority;
    category.save();
    res.send(form);
});

通过save()方法保存到数据库

使用underscore复制对象成员

于是上述代码变成了

// 添加分类
app.post('/category/save', function (req, res) {
    var form = req.body;
    var category = new Category();
    var _category = _.extend(category, form);
    _category.save();
    res.send(form);
});