1.下載express

...

2.使用vue-cli下載好項(xiàng)目文件

...

3.找到文件 build -?webpack.dev.conf.js

'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require('path') const baseWebpackConfig = require('./webpack.base.conf') const CopyWebpackPlugin = require('copy-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const portfinder = require('portfinder')const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT)/*** 使用express框架啟動(dòng)一個(gè)服務(wù)器*/ var express = require('express') var app = express() //1.讀取數(shù)據(jù) var appData=require('../static/json/table.json'); var businessNum=appData.businessNum; var recruitingNum=appData.businessNum; var customerData=appData.businessNum;//2.使用expresss配置路由，指定接口請(qǐng)求 var apiRoutes=express.Router(); //定義一個(gè)路由 const devWebpackConfig = merge(baseWebpackConfig, {module: {rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })},// cheap-module-eval-source-map is faster for development devtool: config.dev.devtool,// these devServer options should be customized in /config/index.js devServer: {clientLogLevel: 'warning',historyApiFallback: {rewrites: [{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },],},hot: true,contentBase: false, // since we use CopyWebpackPlugin.compress: true,host: HOST || config.dev.host,port: PORT || config.dev.port,open: config.dev.autoOpenBrowser,overlay: config.dev.errorOverlay? { warnings: false, errors: true }: false,publicPath: config.dev.assetsPublicPath,proxy: config.dev.proxyTable,quiet: true, // necessary for FriendlyErrorsPlugin watchOptions: {poll: config.dev.poll,},before(apiRoutes) {apiRoutes.get('/api/businessNum', (req, res) => {res.json({// 這里是你的json內(nèi)容errno: 0,data: businessNum})});apiRoutes.get('/api/recruitingNum', (req, res) => {res.json({// 這里是你的json內(nèi)容errno: 0,data: recruitingNum})});apiRoutes.get('/api/customerData', (req, res) => {res.json({// 這里是你的json內(nèi)容errno: 0,data: customerData})})}},plugins: [new webpack.DefinePlugin({'process.env': require('../config/dev.env')}),new webpack.HotModuleReplacementPlugin(),new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.new webpack.NoEmitOnErrorsPlugin(),// https://github.com/ampedandwired/html-webpack-pluginnew HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true}),// copy custom static assetsnew CopyWebpackPlugin([{from: path.resolve(__dirname, '../static'),to: config.dev.assetsSubDirectory,ignore: ['.*']}])] })module.exports = new Promise((resolve, reject) => {portfinder.basePort = process.env.PORT || config.dev.portportfinder.getPort((err, port) => {if (err) {reject(err)} else {// publish the new Port, necessary for e2e testsprocess.env.PORT = port// add port to devServer configdevWebpackConfig.devServer.port = port// Add FriendlyErrorsPlugindevWebpackConfig.plugins.push(new FriendlyErrorsPlugin({compilationSuccessInfo: {messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], },onErrors: config.dev.notifyOnErrors? utils.createNotifierCallback(): undefined}))resolve(devWebpackConfig)}}) })

?

4.在頁(yè)面中發(fā)送axios請(qǐng)求（先在main.js中引入axios）

... import axios from 'axios' ... /* 全局引入axios */ Vue.prototype.$http = axios

?

5.在頁(yè)面中請(qǐng)求數(shù)據(jù)

　　created () {this.$http.get('/api/businessNum').then(response => {console.log(response)}).catch(response => {console.log(response)})}

?

6.頁(yè)面加載返回?cái)?shù)據(jù)信息

?

轉(zhuǎn)載于:https://www.cnblogs.com/yulingjia/p/8794396.html

總結(jié)

以上是生活随笔為你收集整理的Vue（二十一）使用express模拟接口数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。