03-vue实例生命周期和vue-resource

vue实例的生命周期

• 什么是生命周期：从Vue实例建立、运行、到销毁期间，老是伴随着各类各样的事件，这些事件，统称为生命周期！
• 生命周期钩子：就是生命周期事件的别名而已；
• 生命周期钩子 = 生命周期函数 = 生命周期事件
• 主要的生命周期函数分类：

• 建立期间的生命周期函数：
  • beforeCreate：实例刚在内存中被建立出来，此时，尚未初始化好 data 和 methods 属性
  • created：实例已经在内存中建立OK，此时 data 和 methods 已经建立OK，此时尚未开始 编译模板
  • beforeMount：此时已经完成了模板的编译，可是尚未挂载到页面中
  • mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
• 运行期间的生命周期函数：
  • beforeUpdate：状态更新以前执行此函数， 此时 data 中的状态值是最新的，可是界面上显示的 数据仍是旧的，由于此时尚未开始从新渲染DOM节点
  • updated：实例更新完毕以后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被从新渲染好了！
• 销毁期间的生命周期函数：
  • beforeDestroy：实例销毁以前调用。在这一步，实例仍然彻底可用。
  • destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。

 

vue-resource 实现 get, post, jsonp请求

1. JSONP的实现原理

• 因为浏览器的安全性限制，不容许AJAX访问 协议不一样、域名不一样、端口号不一样的 数据接口，浏览器认为这种访问不安全；
• 能够经过动态建立script标签的形式，把script标签的src属性，指向数据接口的地址，由于script标签不存在跨域限制，这种数据获取方式，称做JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
• 具体实现过程：
  • 先在客户端定义一个回调方法，预约义对数据的操做；
  • 再把这个回调方法的名称，经过URL传参的形式，提交到服务器的数据接口；
  • 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
  • 客户端拿到服务器返回的字符串以后，看成Script脚本去解析执行，这样就可以拿到JSONP的数据了；

　　例子：

　　

const http = require('http'); // 导入解析 URL 地址的核心模块
   const urlModule = require('url'); const server = http.createServer(); // 监听 服务器的 request 请求事件，处理每一个请求
   server.on('request', (req, res) => { const url = req.url; // 解析客户端请求的URL地址
     var info = urlModule.parse(url, true); // 若是请求的 URL 地址是 /getjsonp ，则表示要获取JSONP类型的数据
     if (info.pathname === '/getjsonp') { // 获取客户端指定的回调函数的名称
       var cbName = info.query.callback; // 手动拼接要返回给客户端的数据对象
       var data = { name: 'zs', age: 22, gender: '男', hobby: ['吃饭', '睡觉', '运动'] } // 拼接出一个方法的调用，在调用这个方法的时候，把要发送给客户端的数据，序列化为字符串，做为参数传递给这个调用的方法：
       var result = `${cbName}(${JSON.stringify(data)})`; // 将拼接好的方法的调用，返回给客户端去解析执行
 res.end(result); } else { res.end('404'); } }); server.listen(3000, () => { console.log('server running at http://127.0.0.1:3000'); });

　　2.vue-resource 的配置步骤：

• • 直接在页面中，经过script标签，引入 vue-resource 的脚本文件；
  • 注意：引用的前后顺序是：先引用 Vue 的脚本文件，再引用 vue-resource 的脚本文件；

1. 发送get请求：　　

getInfo() { // get 方式获取数据
  this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
    console.log(res.body);
  })
}

　　　　　　2.发送post请求：

postInfo() { var url = 'http://127.0.0.1:8899/api/post'; // post 方法接收三个参数：
  // 参数1： 要请求的URL地址
  // 参数2： 要发送的数据对象
  // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
  this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => { console.log(res.body); }); }

　　　　　　3.发送JSONP请求获取数据：

jsonpInfo() { // JSONP形式从服务器获取数据
  var url = 'http://127.0.0.1:8899/api/jsonp'; this.$http.jsonp(url).then(res => { console.log(res.body); }); }

 

 

 

配置本地数据库和数据接口API

1. 先解压安装 PHPStudy;
2. 解压安装 Navicat 这个数据库可视化工具，并激活；
3. 打开 Navicat 工具，新建空白数据库，名为 dtcmsdb4;
4. 双击新建的数据库，链接上这个空白数据库，在新建的数据库上右键 -> 运行SQL文件，选择并执行 dtcmsdb4.sql 这个数据库脚本文件；若是执行不报错，则数据库导入完成；
5. 进入文件夹 vuecms3_nodejsapi 内部，执行 npm i 安装全部的依赖项；
6. 先确保本机安装了 nodemon, 没有安装，则运行 npm i nodemon -g 进行全局安装，安装完毕后，进入到 vuecms3_nodejsapi目录 -> src目录 -> 双击运行 start.bat
7. 若是API启动失败，请检查 PHPStudy 是否正常开启，同时，检查 app.js 中第 14行 中数据库链接配置字符串是否正确；PHPStudy 中默认的 用户名是root，默认的密码也是root