一、vue-cli2
- 全局安装
npm install vue-cli -g
- 局部安装项目
vue init webpack 项目名称
例如:vue init webpack demo1
二、express-generator
1.全局安装
npm install express-generator -g
2.express --view=ejs 项目名称
例如:express --view =ejs server
3.安装数据库
npm install mysql
三、server部署步骤
注意:先下载mysql,开启
【1.进入前端目录根目录安装server】
【2.创建db文件夹-> 创建sql.js】
var mysql = require('mysql') // 连接数据库 var connection = mysql.createConnection({ host: 'localhost', user: 'miao', password: 'miao', database: 'myemployees' }) module.exports = connection;
【3.server->routes->index.js】
var express = require('express'); var router = express.Router(); var connection = require('../db/sql.js') router.get('/api/userInfo', function(req, res, next) { connection.query("select * from departments",function(error,results,fields){ console.log(results) res.json(results) }) }); router.get('/api/info', function(req, res, next) { res.json( [ { name:"小明", age:20, address:'北京' }, { name:"小敏", age:23, address:'上海' } ] ); }); module.exports = route
四、前端vue部署步骤
跨域需改代理
【1.该代理:vue前端目录->config->index.js】
// 代理 proxyTable: { '/api': { target: 'http://localhost:3000', // 目标地址 changeOrigin:true, // 是否跨域 默认false PathRewrite: { // 重写路径 '^/api': '' // 此处为问题原因,正确写法应为: '^/api': '/api' } } },
【2.安装axios】
cnpm i axios -v [main.js全局引用] import axios from 'axios' Vue.prototype.$axios =axios // 全局注册,使用方法为:this.$axios
【3.组件引用】
mounted(){ this.$axios.get('/api/userInfo').then ((res) => { console.log(res) }) }
更多推荐
Vue连接MySql数据库
发布评论