vue电商实战笔记（第六章）

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);
      })
    },

就可以在前端页面看到了：

vue电商实战笔记（第六章）

猜你喜欢