zoukankan      html  css  js  c++  java
  • 搭建vue+express项目

    1.express建一个 server.js

    // Setup basic express server
    var express = require('express');
    var compression = require('compression')
    var bodyParser = require('body-parser');
    var app = express();

    app.use(compression());

    app.use(express.static(__dirname + '/public'));
    app.use(bodyParser.urlencoded({
        extended: false
    }))
    app.use(bodyParser.json());


    app.use(function(err, req, res, next) {
        if (err) {
            console.error(err.stack);
            res.status(500).send({
                error: 'Something failed!'
            });

        } else {
            next(err, req, res, next);
        }
    })

    app.use('/', require('./routes/routes'));// routes.js 里面写 api路由设置

    var port = process.env.PORT || 3000;
    app.listen(port, function() {
        console.log('Server listening at port %d', port);
    });
     
    2.vue-cli 建立项目
      1.  npm install cue-cli webpack
      2. vue init webpack vueTest(项目名字)
      3.npm install  
      4.npm run dev
     
    3.设置config中index的proxyTable
    proxyTable: {
          '/api/*': {
                    target: 'http://127.0.0.1:3000/',
                    preserveHost: false
                }
        },
     assetsPublicPath: './',
     
    这样就可以请求express中的api 了。ok
     
    4.在前端vue文件中调用
       可以用fetch或者是axios  在vue项目中的mai.js中添加fetch or axios : Vue.ProtoType.fetch = fetch.
     
    this.axios.post("/api/users/login", { name: this.name, password: this.pwd });
    this.fetch('/api/users/login',{
        
      headers: {
          Accept: "application/json, text/plain, */*",
          "Content-Type": "application/json"
          },
         method: "POST",
         body: JSON.stringify({
         //参数
       })
    })
    

      

     
     
     
     
  • 相关阅读:
    以太坊客户端Geth命令用法
    ubuntu 下载地址
    以太坊(二)安装Solidity编译器
    git 查看&修改用户名
    以太坊(一)
    centos7 时间设置
    centos7 桥接配置
    nginx http转 https
    centOS7 安装mysql5.7
    webpack--关于babel的配置
  • 原文地址:https://www.cnblogs.com/cylblogs/p/6705294.html
Copyright © 2011-2022 走看看