参考以下连接安装vue前端项目:
https://blog.csdn.net/marslover521/article/details/80938686
dos窗口下测试vue项目是否正常运行:
npm run dev
运行结果为:
搭建express服务端目录
参考链接:https://www.jianshu.com/p/6b2bf63bb00e
在构建项目没有报错的前提下执行以下操作来搭建express服务端:
在项目根目录下创建server文件夹,同时在server文件夹下创建:db.js,index.js,sqlMap.js,api文件夹,api/userApi.js
参考目录结构如下:
bd.js
//数据库连接配置
module.exports = {
mysql : {
host: 'localhost',//数据库IP地址
user: 'root',//用户名
password: '123456',//用户密码
database: 'network_sys',//数据库名称
port: '3306'//数据库端口号
}
}
index.js
// node 后端服务器
const userApi = require('./api/userApi');//引入项目中的文件的相对位置
//const fs = require('fs');//Node.js内置的文件系统模块(fs)
//const path = require('path');//Node.js path 模块提供了一些用于处理文件路径的小工具
const bodyParser = require('body-parser');//引入插件,通过npm下载
//body-parser 是一个Http请求体解析中间件
const express = require('express');//引入插件,通过npm下载
const app = express();
app.use(bodyParser.json());//json解析器,处理json数据
app.use(bodyParser.urlencoded({extended: false}));//ture->使用queryString库(默认) false->使用qs库
// 后端api路由
app.use('/api/user', userApi);
...//后续有别的路由时继续在下面添加
// 监听端口
app.listen(3000);
console.log('success listen at port:3000......');
sqlMap.js
// sql语句,查询数据库表中的数据
var sqlMap = {
// 用户对象,index.js中定义后端api路由时用
user: {
select_name:'select * from user'//sql语句查询表
},
...//后续有别的sql查询时继续在下面添加
}
module.exports = sqlMap;
api/userApi.js
var models = require('../db');//引入项目中的文件的相对位置
var express = require('express');//引入插件,通过npm下载
var router = express.Router();
var mysql = require('mysql');//引入插件,通过npm下载
var $sql = require('../sqlMap');//引入项目中的文件的相对位置
// 连接数据库
var conn = mysql.createConnection(models.mysql);
conn.connect();
var jsonWrite = function(res, ret) {
if(typeof ret === 'undefined') {
res.json({
code: '1',
msg: '操作失败'
});
} else {
res.json(ret);
}
};
//获取用户信息接口 --/getUser是前端使用接口名称
router.get('/getUser', (req, res) => {
var sql_name = $sql.user.select_name;//该行相当于一行sql语句代码
conn.query(sql_name, function(err, result) {
if (err) {
console.log(err);
}
if (result[0] === undefined) {
res.send('-1') //查询不出username,data 返回-1
} else {
jsonWrite(res, result);
}
})
});
...
//后续有别的接口时继续在下面添加
module.exports = router;
config/index.js
设置代理与跨域(非常重要)
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:3000/api/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
cssSourceMap: false
}
}
后端服务代码已经完成,其中注释中包含://引入插件,通过npm下载
代码,
都需要在dos窗口通过npm install name --save
的方式下载在项目中并保存在package.json文件中。
前端调用后端数据接口
在需要调用接口的文件中,执行以下代码
this.$http.get('/api/user/getUser').then((response) => {
var data = JSON.parse(response.bodyText);
//response.bodyText本身是json格式的字符串
});
可以将以上代码封装进一个方法中在需要的时候调用,例如:
get_user() {
this.$http.get('/api/user/getUser').then((response) => {
var data = JSON.parse(response.bodyText);
});
}
使用$http.get方法钱需要在main.js文件中引入vue-resource,详细代码如下:
import VueResource from 'vue-resource';
Vue.use(VueResource)
通过npm install vue-resource --save
下载