a.vue基础入门项目实战——（超出部分◤省略号...◥ express启动数据服务）实战03

目录

✎ 超出部分省略号

✎ Express

✉ 官方文档

➀ 使用教程

➁ ../build/webpack.dev.conf.js 整体代码

➂ 测试请求

➃ 总结
✎ 超出部分省略号

.new-item {
		display: inline-block;
		width: 230px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;/* 不允许换行 */
	}

✎ Express
✉ 官方文档
➀ 使用教程

安装： http://www.expressjs.com.cn/starter/installing.html
Hello world example： http://www.expressjs.com.cn/starter/hello-world.html
Express 应用程序生成器： http://www.expressjs.com.cn/starter/generator.html

1、cmd --> npm install express --save

// ../build/webpack.dev.conf.js


2、原来
const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

3、变成
// 官方例子 app.get('/', (req, res) => res.send('Hello World!'))
apiRouter.route('/:apiName')
	.all(function(req, res) {
		fs.readFile('./db.json', 'utf8', function(err, data) {
			if (err) throw err
			var data = JSON.parse(data)
			if (data[req.params.apiName]) {
				res.json(data[req.params.apiName])
			} else {
				res.send('no such api name')
			}

		})
	})

app.use('/api', apiRouter);
// 官方例子 app.listen(8081, () => console.log('Example app listening on port 8081!'))
app.listen(8081, function(err) {
	if (err) {
		console.log(err)
		return
	}
	console.log('Listening at http://localhost:8081')
})
/* express 2020-01-17 19:17 end */

➁ ../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')

/*// server.js
const jsonServer = require('json-server')
const apiServer = jsonServer.create()
const apiRouter = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()

apiServer.use('/api', apiRouter)
apiServer.use(middlewares)
apiServer.use(apiRouter)
apiServer.listen(8081, () => {
  console.log('JSON Server is running')
})
 apiServer.use('/api', apiRouter) */

/* express 2020-01-17 19:17 start */
const express = require('express')
const app = express()

var bodyParser = require('body-parser')/* 用它返回json数据 */
app.use(bodyParser.urlencoded({
	extended: true
}))
app.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs') /* 通过node的fs去取db.json */

// 官方例子 app.get('/', (req, res) => res.send('Hello World!'))
apiRouter.route('/:apiName')
	.all(function(req, res) {
		fs.readFile('./db.json', 'utf8', function(err, data) {
			if (err) throw err
			var data = JSON.parse(data)
			if (data[req.params.apiName]) {
				res.json(data[req.params.apiName])
			} else {
				res.send('no such api name')
			}

		})
	})

app.use('/api', apiRouter);
// 官方例子 app.listen(8081, () => console.log('Example app listening on port 8081!'))
app.listen(8081, function(err) {
	if (err) {
		console.log(err)
		return
	}
	console.log('Listening at http://localhost:8081')
})
/* express 2020-01-17 19:17 end */
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

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,
		},
	},
	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-plugin
		new HtmlWebpackPlugin({
			filename: 'index.html',
			template: 'index.html',
			inject: true
		}),
		// copy custom static assets
		new CopyWebpackPlugin([{
			from: path.resolve(__dirname, '../static'),
			to: config.dev.assetsSubDirectory,
			ignore: ['.*']
		}])
	]
})

module.exports = new Promise((resolve, reject) => {
	portfinder.basePort = process.env.PORT || config.dev.port
	portfinder.getPort((err, port) => {
		if (err) {
			reject(err)
		} else {
			// publish the new Port, necessary for e2e tests
			process.env.PORT = port
			// add port to devServer config
			devWebpackConfig.devServer.port = port

			// Add FriendlyErrorsPlugin
			devWebpackConfig.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)
		}
	})
})