1-2节,首先实现各各面的划分,使用vue-cli脚手架搭建一个vue项目,通过组件抽取来规划各部分
3节引入插件vue-resource来发送ajax请求,引入vue-resource的步骤:
先通过npm install vue-resource来安装vue-resource,然后将vue-resource引入该项目。
引入的方法(这里洁简了项目中引入路由的方法):
在src目录下新建一个VResource文件夹,建立index.js文件
然后在index.js文件中加入如下内容:
import Vue from 'vue'
import Resource from 'vue-resource'
//全局使用vue-resource
Vue.use(Resource)
接着在main.js中进行配置:
这样子就可以在index.vue中通过this.$http来发送ajax请求了,在index.vue中使用的例子如下:
created:function(){
this.$http.get('getList')
.then(function(data){//这里是请求成功的回调
console.log(data);
},function(err){
console.log(err);//这里是请求失败的回调
})
}
接着来通过json-server来mock data:
首先先安装json-server:
输入npm install json-server --save
接着也是要通过引入来使用json-server,但是视频中的例子使用的不是最新的vue-cli,所以去网上借鉴了别人的写法:
以下是本次的参考链接:
https://blog.csdn.net/jiang7701037/article/details/79492475
根据链接中的作者操作,现在build文件夹下新建一个jserver.js文件,加入如下内容:
在此之前先在build文件夹下新建一个db.json文件:
加入如下内容:
{
"getNewList":[
{
"name": "新闻1",
"description": "新闻内容"
},
{
"name": "新闻2",
"description": "新闻内容"
},
{
"name": "新闻3",
"description": "新闻内容"
}
]
}
const path=require("path");
//引入json-server模块
const jsonserver=require("json-server");
//用jsonserver创建服务对象
const jserver=jsonserver.create();
//创建路由
const jrouter=jsonserver.router(path.join("db.json"));
//定义中间件
const middlewares=jsonserver.defaults();
//nodejs的思路,每次请求服务器都会执行middelewares中间件
jserver.use(middlewares);
//路由,会根据请求,找对应的数据
jserver.use(jrouter);
//启动服务器
jserver.listen(8081,()=>{
console.log("json-server running in 8081");
})
接着通过node命令窗口进入到该项目中的build文件夹下(注意:一定是要在build文件夹下!!)
输入node jserver.js命令,如果显示
json-server running in 8081就成功了,在浏览器中输入:
http://localhost:8081/可以出现如下页面:
引入json-server后,还需要配置代理服务器,按照作者所说,访问vue脚手架中启动的服务时,会引入到json-server服务下
在构建好的vue项目中,找到config下的index.js文件中的proxyTable{},加入如下代码:
重新在node命令行输入工具重启服务器
在浏览器输入http://localhost:8080/api便会代理到8081页面
搭建好后端服务器后可以开始来mock了:
在原先中的index.vue中加入如下代码来进行测试:
created:function(){
this.$http.get('api/getNewsList')
.then(function(data){
console.log(data);
},function(err){
console.log(err);
})
},
打开控制面板:
就可以拿到数据后进行前端页面的渲染了!!
来试试将数据渲染到前端页面吧:
created:function(){
// let me=this;
这里通过promise
// this.$http.get('api/getNewsList')
// .then(function(res){
// me.newsList=res.data;
// },function(err){
// console.log(err);
// })
// 上面的可以换成es6的写法
this.$http.get('api/getNewsList')
.then((res)=>{
this.newsList=res.data;
},(err)=>{
console.log(err);
})
},
就可以在前端页面看到了: