前言html
不知道你在项目开发过程当中有没有遇到如下场景:前端
通常是前端先制做静态页面,同时服务器端建立数据库,搭建服务器端框架,写接口;当接口写完以后,前端或者后端才能嵌套页面。可是若是前端页面制做好了,后端接口尚未写好呢?或者如何让前端、后端各自作各自的事情,互不影响?vue
能作到下面这样是否是很好呢?node
在进行完需求分析和详细设计后,前端、后端一同商量、制做出一份接口文档(其中接口名、参数、返回值名称、返回值类型都定义好)webpack
前端页面制做好以后,直接模拟出该接口的json文件,先去请求该文件,把页面绑定、业务逻辑都处理好,等前端都绑定好,同时后端接口写好后,咱们只须要前端修改接口地址,其余不用作任何处理。这样是否是前端不用等后端接口所有写完才能开始剩下的工做。ios
一、express 建立一个简单的项目web
安装nodeajax
新建一个文件,进入目录vuex
安装espress数据库
建立一个工程
安装Express框架:
本地模式:npm install express
执行该命令后会在当前文件夹下生成一个node_modules目录
全局模式:npm install -g express
执行该命令后会在C:\Users\Administrator\AppData\Roaming\npm下生成一个node_modules目录
网上推荐都是全局模式的
执行完以上的命令后,经过express --version查看版本号来检查是否安装成功(旧的版本是使用的express -v)
此时窗口打印了:'express' 不是内部或外部命令,也不是可运行的程序或批处理文件。
百度后发现,因express默认安装是最新的版本,已是4.x.x的版本。而最新express4.0+版本中将命令工具分出来了,因此必需要安装express-generator,执行:npm install -g express-generator 全局模式(在C:\Users\Administrator\AppData\Roaming\npm下生成了express、express.cmd两个文件)
此时再次执行express --version
成功输出express框架当前安装的版本号,证实你一安装成功。
下面来创建第一个工程(express默认使用的是jade模板,对于初学者来讲,ejs会更容易点):
首先进入到你当前准备建立工程的位置下,执行:express --view=ejs test_express(旧版本为:express -t ejs test_express)
--view=后面填的是当前框架使用的模板,test_express表明当前文件夹的名称
此时你会发如今当前的位置已经存在该文件夹了,下面咱们来启动服务器(首先要进入到上面建立的文件夹下面,而后再执行如下的命令):
旧版本的命令为:node app.js(主要是由于就版本中的app.js是用来启动服务器的),而新版本的命令则为:npm start(或者是node bin\www)。
此时访问http://127.0.0.1:3000/
就会出现如下页面,证实服务器启动成功
安装依赖
备注:执行npm install命令会将package.json文件中 dependencies 依赖列表中,便可自动安装依赖列表中所列出的全部模块。
开启服务
下面是浏览显示的内容
为何浏览器中出现的内容是这样的呢?
首先打开app.js,而后能够找到这句话
而后咱们再看indexRouter是什么,就能够往上找,找到
顺着这个,咱们打开routes/index文件,看看里面究竟写的什么
原来框架是找到了views文件夹下的index.ejs文件渲染到了前台
试着修改修改index.js文件的内容,将title改成Hello world.
在命令行中,按ctrl+c关闭服务,从新执行npm start ,看界面中的结果
看到这里可能有个疑问,咱们怎么访问静态的html呢?
首先,咱们看app.js中有没有这句话
有的话则直接看下一步,没有的话就在app.js中添加这句话,记得添加后从新启动服务器
接着,咱们在项目的public文件夹下,新建一个html文件下(便于后期管理全部的静态页面),而后新建index.html,内容以下:
这样在浏览器中输入下面的地址就可访问了:http://localhost:3000/html/index.html
咱们如今作到了访问一个html文件,那咱们如何模拟ajax请求,读取json文件中的内容,提早绑定页面呢?(不依赖后端接口写好)
为了方便项目管理,咱们新建几个文件夹和对应的文件
json文件夹及其对应的index.json文件在jjs文件夹下新建index.js
在index.html中引入对应的文件
打开控制台,咱们能够看到打印出了咱们想要的内容
最后附上项目结构
2.vue脚手架中的应用
初始化并建立一个项目
vue init webpack-simple node-demo
cd node-demo
npm i
cnpm i vuex axios
接下来写接口
在 build 文件下的 webpack.dev.conf.js 文件中加入
node.js后端框架,负责路由,业务逻辑,数据库操做,页面和数据响应。
即架构中的业务层,对前端的请求进行响应,须要数据库的拉取数据库内容,须要判断处理的返回处理结果,请求页面文件的返回html文件
在 build 文件下的 webpack.dev.conf.js 文件中的 devServer 中加入
以下图:
3、使用 axios 请求数据
在组件中直接请求数据就行了