vue服务器读取本地文件,详解vue中使用express+fetch获取本地json文件

这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 ：使用mongoose对象模型来操作 mongodb如果没了解过的可以先去基本了解一下相关概念~ 首先注明一下版本，因为express因为版本的不同使用的方式也不同，我这算是目前最新的了吧还没有装express的可以移步到 这里 看看express框架的获取安装 1.简单地项目初始化进入你的nodejs安装路径下边，如图，然后执行命令  express -e test  (这里把项目名设置为test)出现如上图所示，看到install dependencies没有，它说如果你想安装依赖就先进入项目test目录，然后执行 npm install安装依赖模块。那就开始吧，网络环境差的可能安装会出错..出现很长一大串一般就行了如此一来，项目初始已经完成，可以运行一下项目 npm start 看是否正常。  ok 还算正常，下面先来基本分析一下生成的初始项目： 之前 那篇文章 已经说过 项目创建成功之后，生成四个文件夹，主文件app.js与配置信息文件packetage.jsonbin是项目的启动文件，配置以什么方式启动项目，默认 npm startpublic是项目的静态文件，放置js css img等文件routes是项目的路由信息文件,控制地址路由views是视图文件，放置模板文件ejs或jade等(其实就相当于html形式文件啦~)express这样的MVC框架模式，是一个Web项目的基本构成。 先来看看文件信息package.json  一般项目的主要信息都会在这里产生{"name": "test","version": "0.0.0","private": true,"scripts": {"start": "node ./bin/www"},"dependencies": {"body-parser": "~1.12.0","cookie-parser": "~1.3.4","debug": "~2.1.1","ejs": "~2.3.1","express": "~4.12.2","morgan": "~1.5.1","serve-favicon": "~2.2.0"}}看看主文件 app.js   这是它的初始形式，这个模块还要继续导出给 bin文件夹下的www文件使用1 var express = require('express');2 var path = require('path');3 var favicon = require('serve-favicon');4 var logger = require('morgan');5 var cookieParser = require('cookie-parser');6 var bodyParser = require('body-parser');78 var routes = require('./routes/index');9 var users = require('./routes/users');1011 var app = express();1213 // view engine setup14 app.set('views', path.join(__dirname, 'views'));15 app.set('view engine', 'ejs');1617 // uncomment after placing your favicon in /public18 //app.use(favicon(__dirname + '/public/favicon.ico'));19 app.use(logger('dev'));20 app.use(bodyParser.json());21 app.use(bodyParser.urlencoded({ extended: false }));22 app.use(cookieParser());23 app.use(express.static(path.join(__dirname, 'public')));2425 app.use('/', routes);26 app.use('/users', users);2728 // catch 404 and forward to error handler29 app.use(function(req, res, next) {30 var err = new Error('Not Found');31 err.status = 404;32 next(err);33 });3435 // error handlers3637 // development error handler38 // will print stacktrace39 if (app.get('env') === 'development') {40 app.use(function(err, req, res, next) {41 res.status(err.status || 500);42 res.render('error', {43 message: err.message,44 error: err45 });46 });47 }4849 // production error handler50 // no stacktraces leaked to user51 app.use(function(err, req, res, next) {52 res.status(err.status || 500);53 res.render('error', {54 message: err.message,55 error: {}56 });57 });585960 module.exports = app;www文件内容：这里拥有着http服务器的基本配置1 #!/usr/bin/env node23 /**4 * Module dependencies.5 */67 var app = require('../app');8 var debug = require('debug')('test:server');9 var http = require('http');1011 /**12 * Get port from environment and store in Express.13 */1415 var port = normalizePort(process.env.PORT || '3000');16 app.set('port', port);1718 /**19 * Create HTTP server.20 */2122 var server = http.createServer(app);2324 /**25 * Listen on provided port, on all network interfaces.26 */2728 server.listen(port);29 server.on('error', onError);30 server.on('listening', onListening);3132 /**33 * Normalize a port into a number, string, or false.34 */3536 function normalizePort(val) {37 var port = parseInt(val, 10);3839 if (isNaN(port)) {40 // named pipe41 return val;42 }4344 if (port >= 0) {45 // port number46 return port;47 }4849 return false;50 }5152 /**53 * Event listener for HTTP server "error" event.54 */5556 function onError(error) {57 if (error.syscall !== 'listen') {58 throw error;59 }6061 var bind = typeof port === 'string'62 ? 'Pipe ' + port63 : 'Port ' + port;6465 // handle specific listen errors with friendly messages66 switch (error.code) {67 case 'EACCES':68 console.error(bind + ' requires elevated privileges');69 process.exit(1);70 break;71 case 'EADDRINUSE':72 console.error(bind + ' is already in use');73 process.exit(1);74 break;75 default:76 throw error;77 }78 }7980 /**81 * Event listener for HTTP server "listening" event.82 */8384 function onListening() {85 var addr = server.address();86 var bind = typeof addr === 'string'87 ? 'pipe ' + addr88 : 'port ' + addr.port;89 debug('Listening on ' + bind);90 }再来介绍一下项目使用到的ejs模板，比如看看这个view里边的index.ejs (我们待会可以直接把它转为html，差不多的)