express+vue的简单应用以及增删改查

全局安装express

npm install express-generator -g

创建web应用

express myapp

image.png

安装全部依赖

cd myapp
npm install

ok现在node_modules已经在myapp的文件夹里了
在window下启动

set debug=myapp & npm start

打开http://localhost:3000

image.png

【注意】如果对项目进行了修改，需要重新启动应用，修改位置才会生效

现在我们在这个目录里面搭建vue项目

vue init webpack devweb
cd devweb
npm install
npm run dev

image.png

这样就安装启动好了

image.png

express连接mysql

//连接数据库
var mysql = require('mysql');
var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : 'password',
    database : 'music'
});


connection.connect();

//文件字符解析方法加载

var bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extende:true}));
app.use(bodyparser.json());

写一个接口好了

app.get('/getuser', function(req, res, next) {
    var cmd_ = 'select * from user';
    connection.query(cmd_, function (error, results, fields) {
        if (error) throw error;
        res.json(results);
    });
});

到vue项目这边来

进行跨域调接口
config/index.js

proxyTable:{}

改为：

proxyTable: {
      '/api': {
        target: 'http://localhost:3000',//3000端口是你的express框架的启动端口
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    },

那我们想去调后台接口的时候就这么写

axios.get('/api/getuser').then((res)=>{
          console.log(res);
        });