练手项目2笔记之day02

最新推荐文章于 2019-06-11 09:10:26 发布

慢慢慢时光

最新推荐文章于 2019-06-11 09:10:26 发布

阅读量517

点赞数

分类专栏：项目文章标签：学成在线

本文链接：https://blog.csdn.net/wjl31802/article/details/91411148

版权

项目专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

1. Vue.js

1. vue.js介绍

1. vue.js是什么

一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式框架：Progressive，说明vue.js的轻量，是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js。

自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发

2. vue.js和ECMAScript

Vue不支持IE8及以下版本，使用ECMAScript 5特性。

3. Vue.js的使用

在html页面使用script引入vue.js的库即可使用
使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。（大型应用推荐此方案）
Vue-CLI脚手架很方便去创建vue.js工程雏形。

4. 功能

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

条件与循环

dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环

双向数据绑定

Vue 提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素中的值自动修改绑定的数据对象，修改数据对象的值自动修改Dom元素中的值。

处理用户输入

为了让用户和你的应用进行交互，我们可以用 v-on指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法

组件化应用构建

vue.js可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用

2. vue.js基础

1. MVVM模式

拆分解释为：

model：负责数据存储
view：负责页面展示
view model：负责业务逻辑处理（如ajax请求），对数据加工交给视图展示

MVVM作用：将业务逻辑代码和视图代码进行完全分离，使得各自职责更加清晰，便于维护

dya0201

2. 入门程序

测试在门户目录创建一个HTML页面，正式的页面管理前端会单独创建工程

在门户目录中创建vuetest目录，在目录下创建vue_01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js的测试程序</title>
    <script src="vue.min.js"></script>
</head>
<body>
<!--实现在body区显示一个传智播客-->
<div id="app">
    {{name}} <!--相当于MVVM的view视图-->
</div>

</body>

<script>
    // 编写MVVM的model部分及VM部分
    var VM = new Vue({
        el:'#app',//vm接管了APP区域的管理
        data:{
            name:'传智播客'
        }
    });
</script>
</html>

3. `1+1=2`

v-model 在表单控件或组件上创建双向绑定；v-model仅能在下边元素中使用（input、select、textarea、components[vue中的组件]）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令</title>
</head>
<body>
<div id="app">
    <!--{{name}}-->
    <span v-text="name"></span>
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/>=
    <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
    <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>
    <button>计算</button>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    var VM = new Vue({
        el:'#app',
        data:{
            name:'黑马程序员',
            num1:1,
            num2:1
        }
    });
</script>
</html>

解决插值表达式闪烁的问题，用v-text

v-text可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>vue.js常用指令</title>
  </head>
  <body>
    <div id="app">
      <!--{{name}}-->
      <span v-text="name"></span>
      <input type="text" v-model="num1"/>+
      <input type="text" v-model="num2"/>=
      <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
      <span v-text="result"></span>
      <button v-on:click="change">计算</button>
    </div>
  </body>
  <script src="vue.min.js"></script>
  <script>
    var VM = new Vue({
      el:'#app',
      data:{
        name:'黑马程序员',
        num1:1,
        num2:1,
        result:0
      },
      methods:{
        change:function () {
          this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2);
          // alert("计算结果："+this.result)
        }
      }
    });
  </script>
</html>

v-on绑定一个按钮的单击事件
v-bind 作用：将数据对象绑定在dom的任意属性中；给dom对象绑定一个或多个特性，例如动态绑定style和class

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>vue.js常用指令</title>
  </head>
  <body>
    <div id="app">
      <a v-bind:href="url">
        <span v-text="name"></span>
      </a>
      <input type="text" v-model="num1"/>+
      <input type="text" v-model="num2"/>=
      <!--{{Number.parseInt(num1)+Number.parseInt(num2)}}-->
      <span v-text="result"></span>
      <button v-on:click="change">计算</button>
      <hr>
      <div v-bind:style="{ fontSize: size + 'px' }">javaEE培训</div>
    </div>
  </body>
  <script src="vue.min.js"></script>
  <script>
    var VM = new Vue({
      el:'#app',
      data:{
        name:'黑马程序员',
        num1:1,
        num2:1,
        result:0,
        url:'http:www.xuecheng.com',
        size:33
      },
      methods:{
        change:function () {
          this.result = Number.parseInt(this.num1)+Number.parseInt(this.num2);
          // alert("计算结果："+this.result)
        }
      }
    });
  </script>
</html>

v-if 和v-for

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>vue.js常用指令</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(item,index) in list" :key="index" v-if="index % 2===0">{{index+1}}--{{item*5}}</li>
        <li v-for="(value,key) in user">{{key}}--{{value}}</li>
        <li v-for="(item,index) in userlist" :key="item.user.uname">
          <div v-if="item.user.uname==='itheima'" style="background: #00a2d4">
            {{index}}--{{item.user.uname}}--{{item.user.age}}
          </div>
          <div v-else="">
            {{index}}--{{item.user.uname}}--{{item.user.age}}
          </div>
        </li>
      </ul>
    </div>
  </body>
  <script src="vue.min.js"></script>
  <script>
    var VM = new Vue({
      el:'#app',
      data:{
        list:[1,2,3,4,5],
        user:{uname:'itcast',age:10},
        userlist:[
          {user:{uname:'itcast',age:10}},
          {user:{uname:'itheima',age:12}}
        ]
      },
    });
  </script>
</html>

3. webpack入门

1. 介绍

使用vue.js开发大型应用需要使用webpack打包工具，Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

好处：

模块化开发

程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文件，减少了http的请求次数。
webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。

编译typescript、ES6等高级js语法

随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发，webpack可以将打包文件转换成浏览器可识别的js语法。

CSS预编译

webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的语法编译成浏览器可识别的css语法。

缺点：

配置有些繁琐
文档不丰富

2. 安装

1. 安装node.js

webpack基于node.js运行，首先需要安装node.js

Chrome 使用的 JavaScript 引擎是 V8，Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎，这样就可以使用javascript去编写一些服务端的程序。node.js基于V8引擎，基于事件驱动机制，在特定领域性能出色，比如用node.js实现消息推送、状态监控等的业务功能非常合适。

测试：

cmd输入命令node -v

2. 安装npm

npm全称Node Package Manager，他是node包管理和分发的工具，使用NPM可以对应用的依赖进行管理，通过npm 可以很方便地下载js库，打包js文件

node.js已经集成

cmd输入命令npm -v

设置包路径，也就是npm从从远程下载的js包所存放的路径

cmd输入命令npm config ls查询npm管理包路径

将安装目录设置node.js的目录下，创建npm_cache和npm_modules

cmd输入命令 npm config set prefix "D:\software\nodejs\npm_modules" 和

npm config set cache "D:\software\nodejs\npm_cache"

安装cnpm

默认国外镜像，慢，开发中使用国内镜像

cmd命令npm install -g cnpm --registry=https://registry.npm.taobao.org

非联网安装cpnm

1）配置环境变量
NODE_HOME = D:\Program Files\nodejs (node.js安装目录)
在PATH变量中添加：%NODE_HOME%;%NODE_HOME%\npm_modules;
2）找到npm包路径
根据上边的安装说明npm包路径被设置到了node.js安装目录下的npm_modules目录。可以使用npm config ls查看。
拷贝课程资料中的 npm_modules.zip到node.js安装目录，并解压npm_modules.zip覆盖本目录下的
npm_modules文件夹。
3）完成上边步骤测试
cnpm -v

3. 安装webpack

非联网拷贝的，里面已经有webpack了

测试：cmd状态输入webpack，成功

3. 入门程序

1. 需求分析

实现对js文件的打包，体会webpack如何对应用进行模块化管理

2. 开发过程

分模块去定义js

在model01.js中要导出将来要被打包的方法module.exports

var add = function (x, y) {
    return x+y;
};
module.exports.add = add;

定义main.js入口文件（主文件）

在此文件，导入引用的js文件

var {add} = require('./model01');
var Vue = require('./vue.min');
var VM = new Vue({
    el:'#app',
    data:{
        name:'黑马程序员',
        num1:1,
        num2:1,
        result:0,
        url:'http:www.xuecheng.com',
        size:33
    },
    methods:{
        change:function () {
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2));
            // alert("计算结果："+this.result)
        }
    }
});

webpack main.js build.js

在html中引用打包生成的js文件

<script src="build.js"></script>

3. webpack-dev-server

webpack-dev-server开发服务器，它的功能可以实现热加载并且自动刷新浏览器。

创建一个新的程序目录，这里我们创建webpacktest02目录，将webpack入门程序的代码拷贝进来，并在目录下创建src目录、dist目录。将main.js和model01.js拷贝到src目录

安装webpack-dev-server

需要本地安装webpack、webpack-dev-server和html-webpack-plugin三个包

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30. 1 --save-dev

安装完成，目录下会多一个package.json文件，记录了依赖

也可以拷贝提供好的node_modules.zip到目录下

配置webpack-dev-server

在package.json中配置script(运行命令)

"scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },

配置webpack.config.js

webpack的配置文件，配置了入口文件、输入文件的路径、依赖的插件

// 引用html-webpack-plugin插件，作用是根据html模板在内存中生成htmL文件，工作原理是根据模板文件在内存中生成一个index.html文件
var htmlwp = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js', //指定打包的入口文件
    output: {
        path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename: 'build.js' //输出文件
    },
    plugins: [
        new htmlwp({
            title: '首页', //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

使用webpacktest02目录，执行npm run dev 或者使用webstorm，右键package.json,show npm script，双击dev
debug调试

不能用传统的js调试，需要配置

在webpack.config.js中配置

// 引用html-webpack-plugin插件，作用是根据html模板在内存中生成htmL文件，工作原理是根据模板文件在内存中生成一个index.html文件
var htmlwp = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js', //指定打包的入口文件
    output: {
        path: __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename: 'build.js' //输出文件
    },
    devtool: 'eval-source-map',
    plugins: [
        new htmlwp({
            title: '首页', //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

在js中跟踪代码的位置上添加debugger

var add = function (x, y) {
    debugger
    return x+y+1;
};
module.exports.add = add;

启动应用，刷新页面跟踪代码，进行Chrome的debug调试

2. CMS前端工程创建

1. 导入系统管理前端工程

采用Vue-cli脚手架创建，对其进行二次封装

1. 工程结构

将资料中的xc-io-pc-sysmanage.7z拷贝到UI工程目录，解压，WebStorm打开xc-ui-pc-sysmanage目录

2. package.json

记录工程所有依赖

开发使用：npm run dev

打包使用：npm run build

3. webpack.base.conf.js

就是webpack的webpack.conf.js配置文件，该文件中配置了入口文件和各种loader，webpack通过vue-load解析.vue文件，通过css-load打包css文件

4. main.js

main.js是工程的入口文件，在该文件中加载了很多第三方组件，如Element-UI,Base64,VueRouter等

5. src目录

存放页面和js代码

assets：存放一些静态文件，如图片。
base：存放基础组件
base/api：基础api接口
base/component：基础组件，被各各模块都使用的组件
base/router：总的路由配置，加载各模块的路由配置文件。
common：工具类
component：组件目录，本项目不用。
mock：存放前端单元测试方法。
module：存放各业务模块的页面和api方法。
下级目录以模块名命名，下边以cms举例：
cms/api：cms模块的api接口
cms/component：cms模块的组件
cms/page： cms模块的页面

cms/router：cms模块的路由配置
statics：存放第三方组件的静态资源
vuex：存放vuex文件，本项目不使用
static：与src的平级目录，此目录存放静态资源
它与assets的区别在于，static目录中的文件不被webpack打包处理，会原样拷贝到dist目录下。

2. 单页面应用介绍

什么是单页应用

Single page web application，SPA，就是只有一张web页面的应用。

优点：

1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

缺点：

1、首页加载慢
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好。
2、SEO不友好
SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录

总结：

本项目的门户、课程介绍不采用单页面应用架构去开发，对于需要用户登录的管理系统采用单页面开发

3. CMS前端页面查询开发

1. 页面原型

1. 创建页面

1. 页面结构

在model目录创建cms模块的目录结构，包括api components page router

在page目录新建page_list.vue，扩展名为.vue

文件结构如下：

<template>
<!‐‐编写页面静态部分，即view部分‐‐>
测试页面显示...
</template>
<script>
/*编写页面静态部分，即model及vm部分。*/
</script>
<style>
/*编写页面样式，不是必须*/
</style>

在页面的template中填写“测试页面显示…”

注意：template内容必须有一个根元素，否则vue会报错，这里我们在template标签内定义一个div。

2. 页面路由

在cms目录下创建page_list.vue页面

先配置路由，实现url访问到页面再进行内容完善和调试

在cms的router下配置路由

import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
export default [{
  path: '/cms',
  component: Home,
  name: 'CMS', //菜单名称
  hidden: false,
  children: [
    {path:'/cms/page/list',name:'页面列表',component: page_list,hidden:false}
  ]
}]

在base目录下的router导入cms模块的路由

// // 导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter) //加入home的路由
concat(CmsRouter) //加入cms模块的路由

测试

2. Table组件测试

1. Element-UI介绍

使用Element-UI构建页面，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

2. Table组件测试

找到table组件，拷贝测试，发现：

el-table组件绑定了tableData模型数据

tableData模型数据在script标签中定义

3. 页面内容完善

<template>
<!--编写页面静态部分，即view部分-->
<div>
  <el-button type="primary" size="small" v-on:click="query">查询</el-button>
  <el-table
            :data="list"
            stripe
            style="width: 100%">
    <el-table-column type="index" width="60">
  </el-table-column>
    <el-table-column prop="pageName" label="页面名称" width="120">
  </el-table-column>
    <el-table-column prop="pageAliase" label="别名" width="120">
  </el-table-column>
    <el-table-column prop="pageType" label="页面类型" width="150">
  </el-table-column>
    <el-table-column prop="pageWebPath" label="访问路径" width="250">
  </el-table-column>
    <el-table-column prop="pagePhysicalPath" label="物理路径" width="250">
  </el-table-column>
    <el-table-column prop="pageCreateTime" label="创建时间" width="180" >
  </el-table-column>
  </el-table>
  <el-pagination
                 layout="prev, pager, next"
                 :total="total"
                 :page-size="params.size"
                 :current-page="params.page"
                 @current-change="changePage"
                 style="float:right">
  </el-pagination>
  </div>
</template>
<script>
  // 编写页面静态部分，即model和VM部分
  import * as cmsApi from '../api/cms'

  export default {
    data() {
      return {
        list: [ {
          "siteId": "5a751fab6abb5044e0d19ea1",
          "pageId": "5a754adf6abb500ad05688d9",
          "pageName": "index.html",
          "pageAliase": "首页",
          "pageWebPath": "/index.html",
          "pageParameter": null,
          "pagePhysicalPath": "F:\\develop\\xc_portal_static\\",
          "pageType": "0",
          "pageTemplate": null,
          "pageHtml": null,
          "pageStatus": null,
          "pageCreateTime": "2018-02-03T05:37:53.256+0000",
          "templateId": "5a962b52b00ffc514038faf7",
          "pageParams": null,
          "htmlFileId": "5a7c1c54d019f14d90a1fb23",
          "dataUrl": null
        },
               {
                 "siteId": "5a751fab6abb5044e0d19ea1",
                 "pageId": "5a795ac7dd573c04508f3a56",
                 "pageName": "index_banner.html",
                 "pageAliase": "轮播图",
                 "pageWebPath": "/include/index_banner.html",
                 "pageParameter": null,
                 "pagePhysicalPath": "F:\\develop\\xc_portal_static\\include\\",
                 "pageType": "0",
                 "pageTemplate": null,
                 "pageHtml": null,
                 "pageStatus": null,
                 "pageCreateTime": "2018-02-06T07:34:21.255+0000",
                 "templateId": "5a962bf8b00ffc514038fafa",
                 "pageParams": null,
                 "htmlFileId": "5a795bbcdd573c04508f3a59",
                 "dataUrl": null
               }
              ],
        total:50,
        params:{
          page:2,
          size:10
        }
      }
    },
    methods:{
      query:function () {
        // alert('查询');
        // 调用服务端的接口
        cmsApi.page_list(this.params.page,this.params.size).then((res)=>{
          // 将res结果数据赋值给数据模型对象
          this.list = res.queryResult.list;
          this.total = res.queryResult.total;
        })
      },
      changePage:function () {
        // 调用query方法
        this.query();
      }
    }
  }
</script>
<style>
  /*编写页面样式，不是必须*/
</style>

2. Api调用

1. Api方法定义

在cms模块的api目录定义cms.js

在cms.js中定义如下js方法，实现http请求服务端页面查询接口

// 页面查询
export const page_list = (page,size,param) =>{
  // 请求服务端的页面查询接口
  return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size)
}

axios实现http方法的封装

2. Api调用

前端页面导入cms.js，调用js方法请求服务端页面查询接口

导入cms.js，在query方法中调用page_list方法

见page_list.vue

3. 跨域问题解决

测试会报错，No 'Access-Control-Allow-Origin'

原因：浏览器的同源策略不允许跨域访问，同源指的是协议、域名、端口

解决：采用proxyTable

什么是proxyTable

vue-cli提供的vue开发环境下跨域问题的方法，底层使用http-proxy-middleware，是http代理中间件，基本原理是用服务端代理解决浏览器跨域（node和cms服务端不存在跨域问题）

4. 分页查询测试

定义分页视图

使用v-on监听更改分页事件

定义数据模型对象
定义分页方法，接收页码参数

template>
  <!--编写页面静态部分，即view部分-->
  <div>
    <el-button type="primary" size="small" v-on:click="query">查询</el-button>
    <el-table
      :data="list"
      stripe
      style="width: 100%">
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="pageName" label="页面名称" width="120">
      </el-table-column>
      <el-table-column prop="pageAliase" label="别名" width="120">
      </el-table-column>
      <el-table-column prop="pageType" label="页面类型" width="150">
      </el-table-column>
      <el-table-column prop="pageWebPath" label="访问路径" width="250">
      </el-table-column>
      <el-table-column prop="pagePhysicalPath" label="物理路径" width="250">
      </el-table-column>
      <el-table-column prop="pageCreateTime" label="创建时间" width="180" >
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      :page-size="params.size"
      :current-page="params.page"
      @current-change="changePage"
      style="float:right">
    </el-pagination>
  </div>
</template>
<script>
  // 编写页面静态部分，即model和VM部分
  import * as cmsApi from '../api/cms'

  export default {
    data() {
      return {
        list: [ {
          "siteId": "5a751fab6abb5044e0d19ea1",
          "pageId": "5a754adf6abb500ad05688d9",
          "pageName": "index.html",
          "pageAliase": "首页",
          "pageWebPath": "/index.html",
          "pageParameter": null,
          "pagePhysicalPath": "F:\\develop\\xc_portal_static\\",
          "pageType": "0",
          "pageTemplate": null,
          "pageHtml": null,
          "pageStatus": null,
          "pageCreateTime": "2018-02-03T05:37:53.256+0000",
          "templateId": "5a962b52b00ffc514038faf7",
          "pageParams": null,
          "htmlFileId": "5a7c1c54d019f14d90a1fb23",
          "dataUrl": null
        },
          {
            "siteId": "5a751fab6abb5044e0d19ea1",
            "pageId": "5a795ac7dd573c04508f3a56",
            "pageName": "index_banner.html",
            "pageAliase": "轮播图",
            "pageWebPath": "/include/index_banner.html",
            "pageParameter": null,
            "pagePhysicalPath": "F:\\develop\\xc_portal_static\\include\\",
            "pageType": "0",
            "pageTemplate": null,
            "pageHtml": null,
            "pageStatus": null,
            "pageCreateTime": "2018-02-06T07:34:21.255+0000",
            "templateId": "5a962bf8b00ffc514038fafa",
            "pageParams": null,
            "htmlFileId": "5a795bbcdd573c04508f3a59",
            "dataUrl": null
          }
          ],
        total:50,
        params:{
          page:2,
          size:10
        }
      }
    },
    methods:{
      query:function () {
        // alert('查询');
        // 调用服务端的接口
        cmsApi.page_list(this.params.page,this.params.size).then((res)=>{
          // 将res结果数据赋值给数据模型对象
          this.list = res.queryResult.list;
          this.total = res.queryResult.total;
        })
      },
      changePage:function (page) {
        // 调用query方法
        this.params.page = page;
        this.query();
      }
    },
    mounted(){
      //默认查询页面
      this.query();
    }
  }
</script>
<style>
  /*编写页面样式，不是必须*/
</style>

5. 进入页面立即查询

需要用到vue的钩子函数，每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

通常使用最多的是created和mounted两个钩子：
created：vue实例已创建但是DOM元素还没有渲染生成。
mounted：DOM元素渲染生成完成后调用。

添加代码后，见上面代码

4. 前后端请求响应流程小结

day0202

1、在浏览器输入前端url
2、前端框架vue.js根据url解析路由，根据路由找到page_list.vue页面
3、首先执行page_list.vue中的钩子方法
4、在钩子方法中调用query方法。
5、在query方法中调用cms.js中的page_list方法
6、cms.js中的page_list方法通过axios请求服务端接口
7、采用proxyTable解决跨域问题，node.js将请求转发到服务端(http://localhost:31001/cms/page/list)
8、服务端处理，将查询结果响应给前端
9、成功响应调用then方法，在then方法中处理响应结果，将查询结果赋值给数据模型中的total和list变量。
10、vue.js通过双向数据绑定将list数据渲染输出。

慢慢慢时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练手项目2笔记之day02

文章目录1. Vue.js1. vue.js介绍1. vue.js是什么2. vue.js和ECMAScript3. Vue.js的使用4. 功能2. vue.js基础1. MVVM模式2. 入门程序3. `1+1=2`3. webpack入门1. 介绍2. 安装1. 安装node.js2. 安装npm3. 安装webpack3. 入门程序1. 需求分析2. 开发过程3. webpack-dev-...
复制链接

扫一扫