Vue 笔记 3 - Ajax

安装axios

npm i axios

代理

跨域：协议名、主机名、端口号三者不同时浏览器认为跨域了。

使用nodejs搭建两个简易后台服务端

server1.js

// node src/server1.js
// http://localhost:5001/student

let express = require('express');
let app = express();
let fs = require('fs');
const log = console.log;

app.get('/student', function (request, response){
    response.writeHead(200, {'Content-Type': 'application/json'});
    log("有人访问了server1");
    response.end(JSON.stringify({
        name: 'server',
        age: 2020
    }));
});

let server = app.listen(5001, function(){
    let host = server.address().address
    let port = server.address().port
    log("有人访问了server1");
})

server2.js

// node src/server2.js
// http://localhost:5002/car

let express = require('express');
let app = express();
let fs = require('fs');
const log = console.log;

app.get('/car', function (request, response){
    response.writeHead(200, {'Content-Type': 'application/json'});
    log("有人访问了server2");
    response.end(JSON.stringify({
        name: 'car',
        age: 2020
    }));
});

let server = app.listen(5002, function(){
    let host = server.address().address
    let port = server.address().port
    log("有人访问了server2");
})

然后就可以通过node src/server1.js和node src/server2.js 来启动服务器。

配置vuecli开启代理服务器

修改vue的自定义配置文件vue.config.js

• 方式一：

  devServer: {
      proxy: 'http://localhost:5001'
  }

• 方式二：

  devServer: {
      proxy: {
          '/api': {
              target: '<url>',
              ws: true,
              changeOrigin: true
          },
          '/foo': {
              target: '<other_url>'
          }
      }
  }

插槽Slot

1. 作用：让父组件可以向子组件指定位置插入Html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。
2. 分类：默认插槽、具名插槽、作用域插槽
3. 使用方式：

   • 默认插槽：

     父组件中：
     <Category>
         <div>HTML结构1</div>
     </Category>
     子组件：
     <template>
     <div>
         <slot>插槽默认内容</slot>
     </div>
     </template>

     • 具名插槽：

       父组件中：
       <Category>
           <template slot="center">
               <div>HTML结构1</div>
           </template>
       
           <template v-slot:footer>
               <div>html结构2</div>
           </template>
       </Category>
       子组件：
       <template>
           <div>
               <slot name="center">插槽默认内容</slot>
               <slot name="footer">插槽默认内容</slot>
           </div>
       </template>

     • 作用域插槽：
       数据在组件自身，但根据数据生成的结构需要组件的使用者来决定
       App.vue

       <div class="container">
           <Category title="游戏">
           <template scope="geekhall">
               <ul>
               <li v-for="(g, index) in geekhall.games" :key="index">{{ g }}</li>
               </ul>
           </template>
           </Category>
       
           <Category title="游戏">
           <template scope="{games}">
               <ol>
               <li v-for="(g, index) in games" :key="index">{{ g }}</li>
               </ol>
           </template>
           </Category>
       </div>
       </template>

       Category.vue

       <template>
           <div class="category">
               <h3>{{ title }}分类</h3>
               <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
           </div>
       </template>
       <script>
       export default {
       name: "Category",
       props: ["title"],
       data() {
           return {
           games: ["coc", "bob", "lol"]
           };
       }
       };
       </script>