• 第5篇 vue的通信框架axios和ui框架-element-ui以及node.js

    一 axios的使用

    1.1 介绍以及作用

    axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端。

    • 在浏览器中可以帮助我们完成 ajax请求的发送
    • 在node.js中可以向远程接口发送请求

    1.2  案例使用axios实现前后端数据交互

    1.后端代码

    2.前端代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <table border="1">
    14.                     <tr>
    15.                         <td>id</td>
    16.                         <td>姓名</td>
    17.                     </tr>
    18.                     <tr v-for="item in memberList">
    19.                         <td>{{item.name}}</td>
    20.                         <td>{{item.age}}</td>
    21.                     </td>
    22.                 </tr>
    23.             </table>
    24.     </div>
    25.     <script src="vue.min.js"></script>
    26.     <script src="axios.min.js"></script>
    27.     <script>
    28.         
    29. var app = new Vue({
    30.     el: '#app',
    31.     data: {
    32.         memberList: []//数组
    33.     },
    34.     created() {
    35.         this.getList()
    36.     },
    37.     methods: {
    38.         getList(id) {
    39.             //vm = this
    40.             axios.get('http://localhost:8080/axtest')
    41.             .then(response => {
    42.                 console.log(response)
    43.                 alert( response.data.data.item);
    44.                 this.memberList = response.data.data.item
    45.             })
    46.             .catch(error => {
    47.                 console.log(error)
    48.             })
    49.         }
    50.     }
    51. })
    52.     </script>
    53. </body>
    54.  
    55. </html>

    3.运行效果

    二  element-ui组件

    1.1 ui组件库

    element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建。

    官网： http://element-cn.eleme.io/#/zh-CN

    1.2 案例

    1.代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <!-- 引入样式 -->
    10. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    11. </head>
    12.  
    13. <body>
    14.     <div id="app">
    15.         <el-button @click="visible = true">Button</el-button>
    16.             <el-dialog :visible.sync="visible" title="Hello world">
    17.                 <p>Try Element</p>
    18.             </el-dialog>
    19.     </div>
    20.     <script src="vue.min.js"></script>
    21.     <!-- 引入组件库 -->
    22. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    23.     <script>
    24.          new Vue({
    25.       el: '#app',
    26.       data: function() {//定义Vue中data的另一种方式
    27.         return { visible: false }
    28.       }
    29.     })
    30.     </script>
    31. </body>
    32.  
    33. </html>

    2.效果

    三  node.js组件 

    3.1 node.js组件

    nodejs是服务端的js框架。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

    3.2 案例

    1.新建文件index.js

    console.log('Hello Node.js')

    2.新建server.js文件

    1. const http = require('http');
    2. http.createServer(function (request, response) {
    3.     // 发送 HTTP 头部 
    4.     // HTTP 状态值: 200 : OK
    5.     // 内容类型: text/plain
    6.     response.writeHead(200, {'Content-Type': 'text/plain'});
    7.     // 发送响应数据 "Hello World"
    8.     response.end('Hello Server');
    9. }).listen(8888);
    10. // 终端打印如下信息
    11. console.log('Server running at http://127.0.0.1:8888/');

    3.效果

    4.页面

     

    四  NPM

    4.1 NPM的作用

    NPM全称Node Package Manager，类似后端管理工具maven，是前端管理js库的项目管理工具。

    4.2 Npm与node关系

    Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules

    4.3 案例操作

    1.初始化工程 ，输入命令：npm  init -y   ，初始化后，生成一个package.json文件

    2.下载具体依赖

    3.下载package.json中指明的依赖

     

  • 相关阅读:
    2-12.基金国际化的发展概况
    建筑类企业做ISO9001时需要带GB/T50430标准
    【python基础】用户输入和while循环详解
    Java8实战-总结34
    爬虫框架 Scrapy 详解
    现在大二，如何使用 GitHub 提升编程水平？
    机器学习笔记之粒子滤波(一)序列重要性采样
    Android垂直跑马灯
    lazada获得lazada商品详情 API 返回值说明
    大数据课程L5——网站流量项目的实时业务系统搭建
  • 原文地址：https://blog.csdn.net/u011066470/article/details/132772987