基于vue-cli及express模拟Ajax获取服务器数据
2017-07-08 09:53
656 查看
由于vue-cli已经配置好express服务器,可以直接使用,也无需在node中配置其他选项
1、在项目中找到配置文件 :build/dev-server.js
先确定已经引入express
确定express已经引入,接下来就是申明与配置express服务器,
2、创建db.json 在index.html文件同级目录下新建db.json,整文件是一个 json对象,包含了需要请求的各接口的数据
{"getNewsList": [ //首先申明数据的接口名称,然后注入需要的接口数据 { "id": 1, "title": "新闻条目1新闻条目1新闻条目1新闻条目1", "url": "http://starcraft.com" }, { "id": 2, "title": "新闻条目2新闻条目2新闻条目2新闻条目2", "url": "http://warcraft.com" }, { "id": 3, "title": "新闻条3新闻条3新闻条3", "url": "http://overwatch.com" }, { "id": 4, "title": "新闻条4广告发布", "url": "http://hearstone.com" } ], "login": { //若有多个接口一次向下添加即可,需要获取数据时,写明接口名称即可 "username": "yudongdong", "userId": 123123 } }
}
3、设置接口代理,为了区分是真是的服务器数据和模拟数据,对模拟数据做一个代理处理
打开项目中,config/index.js 找到代理入口 proxyTable
默认情况代理为空,根据项目需要配置自己的代理地址
4、启动服务器获取数据
因为做了代理, 直接从 http://localhost:8081获取数据是获取不到的
想要获取数据须将代理地址补充完整 http://localhost:8081/api/getNewsList
因为做了代理,也可从前端入口进行获取 http://localhost:8080/api/getNewsList
5、使用vue-resouce发送Ajax获取数据
6、至此就可以使用模拟数据渲染页面啦
1、在项目中找到配置文件 :build/dev-server.js
先确定已经引入express
确定express已经引入,接下来就是申明与配置express服务器,
var apiServer = express() //名称apiServer根据项目自定义,避免冲突为原则 var bodyParser = require('body-parser') //express必须要进行的配置 apiServer.use(bodyParser.urlencoded({ extended: true })) // apiServer.use(bodyParser.json()) var apiRouter = express.Router() //配置路由,名称同样可以自拟 var fs = require('fs') apiRouter.route('/:apiName') //apiName为接口名称 .all(function (req, res) { // .all即支持包括get\post在内的所有xhr请求 fs.readFile('./db.json', 'utf8', function (err, data) { //db.json 自己配置的模拟数据需要放置到 if (err) throw err var data = JSON.parse(data) //将从服务器端获取到的json对象转换为普通js对象 if (data[req.params.apiName]) { res.json(data[req.params.apiName]) } else { res.send('no such api name') } }) }) apiServer.use('/api', apiRouter); // 配置 '/api'是因为做了服务器代理,所有要指明代理地址 apiServer.listen(port + 1, function (err 4000 ) { //配置接口端口号,为了方便查看,一般取前端口号+1 if (err) { console.log(err) return } console.log('Listening at http://localhost:' + (port + 1) + '\n') })
2、创建db.json 在index.html文件同级目录下新建db.json,整文件是一个 json对象,包含了需要请求的各接口的数据
{"getNewsList": [ //首先申明数据的接口名称,然后注入需要的接口数据 { "id": 1, "title": "新闻条目1新闻条目1新闻条目1新闻条目1", "url": "http://starcraft.com" }, { "id": 2, "title": "新闻条目2新闻条目2新闻条目2新闻条目2", "url": "http://warcraft.com" }, { "id": 3, "title": "新闻条3新闻条3新闻条3", "url": "http://overwatch.com" }, { "id": 4, "title": "新闻条4广告发布", "url": "http://hearstone.com" } ], "login": { //若有多个接口一次向下添加即可,需要获取数据时,写明接口名称即可 "username": "yudongdong", "userId": 123123 } }
}
3、设置接口代理,为了区分是真是的服务器数据和模拟数据,对模拟数据做一个代理处理
打开项目中,config/index.js 找到代理入口 proxyTable
默认情况代理为空,根据项目需要配置自己的代理地址
proxyTable: { '/api/':'http://localhost:8081' //代理服务器访问地址 },
4、启动服务器获取数据
因为做了代理, 直接从 http://localhost:8081获取数据是获取不到的
想要获取数据须将代理地址补充完整 http://localhost:8081/api/getNewsList
因为做了代理,也可从前端入口进行获取 http://localhost:8080/api/getNewsList
5、使用vue-resouce发送Ajax获取数据
this.$http.post('api/getNewsList') //之前已经配置了all请求,这里发送get\post请求都没有问题 .then((res)=>{ //成功的返回数据,因为内置数据处理会用到this所以此处使用es6的箭头函数,内置的this便指向vue对象,如果不想使用箭头函数,那么,就可以在函数体外对this进行一个代理,var me = this this.newsList = res.data //数据体默认存在data中,第一次使用,可以先将查看一下res整个对象都包含哪些内容,方便以后使用 console.log(this.newsList) },(err)=>{ //失败返回错误 console.log(err) })
6、至此就可以使用模拟数据渲染页面啦
相关文章推荐
- Vue.js--基于$.ajax获取数据并与组件的data绑定
- 基于$.ajax()方法从服务器获取json数据的几种方式总结
- Vue.js--基于$.ajax获取数据并与组件的data绑定
- 基于vue-cli的反向代理设置及axios获取json数据
- Vue-cli使用axios从跨域服务器获取JSON数据
- Ajax获取PHP服务器上的 Json数据以及POST的综合实例
- Ajax获取PHP服务器上的 Json数据以及POST的综合实例
- vue 中使用 AJAX获取数据的方法
- 使用vue框架 Ajax获取数据列表并用BootStrap显示出来
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
- 使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析
- Ajax获取服务器数据乱码
- jquery $.ajax+php使用jsonp处理数据时,前端success :function无法获取服务器返回数据
- Vue.js——基于$.ajax实现数据的跨域增删查改
- Vue.js——基于$.ajax实现数据的跨域增删查改
- 详解vue 中使用 AJAX获取数据的方法
- Ajax实现定时从服务器获取数据,定时更新数据
- Yii2基于Ajax自动获取表单数据的方法
- Yii2基于Ajax自动获取表单数据的方法
- debug - vue中通过ajax获取数据时,如何避免绑定的数据中出现property of undefined错误