starter经过这段时间的学习Vue.js的学习，感受很大，首先觉得vue渲染数据非常方便。绑定数据有单向绑定和双向绑定，单向绑定的方式主要有v-bind，v-html，v-text，{{}}等等，双向绑定v-model。当然这些都是vue.js基础知识的一小部分。还有很多基础知识可以参考vue.js官网：https://cn.vuejs.org/v2/guide/syntax.html这里就不过多的介绍了，个人觉得单页应用程序在工作中会比较常用，把自己做的一个简单例子讲解一下。搭建单页应用程序主要是建立在脚手架的基础之上的。而脚手架的安装要基于node.js环境之上。安装脚手架步骤如下：

步骤一：下载安装的node.js地址:https://nodejs.org/en/ 安装文件按照向导安装下一步下一步即可。

步骤二：下一步需要安装淘宝镜像：http://npm.taobao.org/，淘宝镜像安装好后我们就可以安装脚手架了，

步骤三：安装脚手架的命令主要是：

1安装Vue-cli脚手架 全局安装 cnpm install -g vue-cli  这里自己根据提示是否安装插件。

2在你想要放的文件夹创建我的项目 vue init webpack my-project 

3进入到我的项目  cd my-project

4.下载依赖文件 npm install 

5.运行项目 npm run dev

到这我们的脚手架就安装好了，安装好后大概会看到如下文件：

我们主要的操作就是在src中进行。简单说一下我们做的这个例子。我们的例子主要是通过登录页面进入到我们的学生管理系统。主要是对班级学生的展示和根据姓名查找学生信息。

首先我们的components组件目录中创建stulist文件，在此文件中创建login.vue和main.vue及stulist.vue这三个我们主要的文件。我们的login.vue是我们的我们的登录组件，main.vue是登陆后的组件即主菜单组件，stulist.vue是我们展示学生信息的组件。首先在index.html 中引入我们所需要的css和jq和js及其他我们所需要的文件。准备工作做好后我们开始制作。

1在页面级Vue组件App.vue中定义视图：

<template>
 <router-view></router-view>
</template>

2.login.vue组件布局：

<template>
    <!-- 组件模板 -->
    <div>
        <div class="login-box">
        <div class="login-logo">
          <a href="../../index2.html"><b>管理员</b>登录</a>
        </div>
        <!-- /.login-logo -->
        <div class="login-box-body">
          <p class="login-box-msg">欢迎登录</p>
            <div class="form-group has-feedback">
              <input type="email" class="form-control" v-model="loginid" placeholder="用户名">
              <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
              <input type="password" class="form-control"  v-model="loginpwd" placeholder="密码">
              <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="row">
              <div class="col-xs-8">
                <div class="checkbox icheck">
                  <label>
                    <input type="checkbox"> 记住密码
                  </label>
                </div>
              </div>
              <!-- /.col -->
              <div class="col-xs-4">
                <button type="submit" class="btn btn-primary btn-block btn-flat" @click="login" >登录</button>
              </div>
              <!-- /.col -->
            </div>
        
          <!-- /.social-auth-links -->

          <a href="#" class="pull-left">忘记密码</a>
          <a href="register.html" class="text-center pull-right">注册</a>

        </div>
        <!-- /.login-box-body -->
      </div>
    </div>
</template>

3 main.vue组件的布局，这个组件的布局代码过多这里就不展示了。主要是用我们的后台管理系统模板里面的starter.html的布局。这里主要是在这个模板的中间内容中插入视图标签<router-view></router-view> 。在需要跳转的按钮上插入<router-link to="/stulist">班级学生信息</router-link> 标签 类似于a标签，to是需要跳转到的页面的path路径。

4.stulist.vue组件布局：

<template>
    <div>
      <table class="table table-responsive text-center">
          <tbody>
            <tr>
              <th>班级编号</th>
              <td v-for ="(item,index) in array" :key="index">{{item.class_id}}</td>
            </tr>
            <tr>
              <th>班级名称</th>
              <td v-for ="(item,index) in array" :key="index" @click="liststu(item.class_id)"><button type="button" class="btn btn-info ">{{item.class_Name}}</button></td>
            </tr>
          </tbody>
        </table>
        <br/>
        <label>按姓名查询:</label>
        <input v-model="uname" :class="{sty:csssty}">
        <button @click="inquire" class="btn btn-xs btn-info">查询</button>
        <table class="table table-responsive text-center ">
          <thead>
            <tr>
              <th>学生编号</th>
              <th>邮箱</th>
              <th>姓名</th>
              <th>性别</th>
              <th>手机号</th>
              <th>所在分组</th>
              <th>角色名称</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for ="(item,index) in array1" :key="index">
              <td>{{item.stu_Id}}</td>
              <td>{{item.stu_Email}}</td>
              <td>{{item.stu_Name}}</td>
              <td>{{item.stu_Sex}}</td>
              <td>{{item.stu_Mobile}}</td>
              <td>{{item.group_Name}}</td>
              <td>{{item.srole_Name}}</td>
            </tr>
          </tbody>
        </table>
        <button type="button" class="btn btn-info pull-right" @click="stuout">退出</button>
    </div>
</template>

这样我们的三个组件页面的布局就搭建好了。三个组件页面搭建好后都使用export defaule{} 导出。下一步我们要做的就是配置好路由。在我们的src文件中的router文件中的index.js中配置好路由。第一步使用import  名称  from  '路径' 导入我们的组件模块，第二步在我们的路由列表中定义路由路径和注册组件。示例代码如下：

import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'
//导入模块 自定义名称 这个名称是下面路由列表注册组件的名称
import login from '@/components/stulist/login'  //@/相当于路径
import stulist from '@/components/stulist/stulist'
import main from '@/components/stulist//main'
Vue.use(Router)

export default new Router({
  // 路由列表
  routes: [
    {
      path: '/',
      name: 'login',
      component: login,
    },
    {
      path: '/main',
      name: 'main',
      component: main,
      //嵌套路由
      children:[
        {
          path: '/stulist',
          name: 'stulist',
          component: stulist,
        },
      ]
    },
  ]
})

注意我们导入的组件模块中的@符号可以理解为路径  示例：'@/components/stulist/login'  就是在components文件夹中找到stulist文件夹中找到login文件 后缀js可要可不要。

路由配置好后，开始实现我们的功能，首先我们的数据是从api接口拿到的，所以我们要先安装Ajax vue-axios插件，使用cmd命令进入我们的项目文件运行npm install --save axios vue-axios 

安装好后需要在src文件夹中的main.js中引入文件，代码如下：

import axios from 'axios'
import VueAxios from 'vue-axios' 
Vue.use(VueAxios,axios)

注意在Vue.use(VueAxios，axios)中VueAxios要在axios之前。

考虑到我们请求的接口都有相同的协议部分，域名部分，和端口部分，所以我们配置一个基路径，避免每次都写比较麻烦。在在src文件夹中的main.js中的代码如下：

axios.defaults.baseURL='http://192.168.1.188:8/' //基路径

准备工作做好后开始写登录方法。首先登录需要传俩个值回去，一个是用户名和密码。代码如下：

export default {
  name: 'course',
  data () {
    return {
      msg:"用户登录",
      loginid:"",
      loginpwd:"",
    }
    
  },
  methods:{
    login(){
        this.axios.get("zxwyit_admin/User/Login",
        {
          params:{
            loginId:this.loginid, //传值 用户名 注意key必须和接口请求的一样
            pwd:this.loginpwd //传值 密码 
          }
        }
        ).then(res=>{ //箭头函数
          if (res.data.code==1) {
            this.$router.push({path:"/main"}) //编程式导航对象的方式 push()和replace()一样
          }else{
            alert("登录失败")
          }
        }).catch(err=>{
            console.log(err);
        })
    }
  }
}
</script>

定义俩个双向绑定的数据loginid和loginpwd，然后在login方法中使用axios get请求。axios中有成功的方法then和失败的方法catch()都有对应的参数。用户名和密码正确会返回1判断是否等于1 为true利用编程式导航跳转到主页组件，这里登录之后还拿不到我们的数据，需要在src文件夹中的main.js中声明访问凭证或者说许可证。代码如下：

axios.defaults.withCredentials=true; //携带凭证 许可

，点击班级学生信息会通过<router-link to="/stulist">班级学生信息</router-link>

会在我们的主页的中间部分展示学生班级和默认7班学生信息，默认几班自己定。在我们的学生列表组件里主要的就是从api接口拿到我们的所有班级信息，和每个班级的学生信息，并且通过接口查询学生信息。代码如下：

<script>
//导出
export default {
  name: 'stulist',
  data () {
    return {
      array:[],//数组接收
      array1:[],  //班级学生信息
      uname:"",
      csssty:true,
    }
  },
  methods:{
    //点击班级信息
    liststu(class_id){
     if (class_id==3||class_id==4) {
        this.array1=[{stu_Id:"暂无数据",stu_Email:"暂无数据",stu_Name:"暂无数据",stu_Sex:"暂无数据",stu_Mobile:"暂无数据",group_Name:"暂无数据",srole_Name:"暂无数据",}]
        return false;
     }
    this.axios.get('zxwyit_admin/Student/GetStudents',
      {
        params:{
          classId:class_id //idb班级编号传参回去
        }
      }).then(res=>{
        // console.log(res.data.classStudents[0].students)
          this.array1=res.data.classStudents[0].students //得到我们的数据用数组接收 并在HTML中使用v-for循环得到学生信息数据
      }).catch(err=>{
        console.log(err);
      })  
    },
    //查询
    inquire(){
      this.axios.get('zxwyit_admin/Student/GetStudentByLikeName',
      {
        params:{
          keyWord:this.uname //输入框模糊查询的内容传参回去
        }
      }).then(res=>{
        if (this.uname=="") {
          alert("请输入查询的内容，不能为空");
          return false;
        }
        // console.log(res.data.students)
          this.array1=res.data.students //得到我们的数据用数组接收 并在HTML中使用v-for循环得到学生信息数据
      }).catch(err=>{
        console.log(err);
      }) 
    },
    //退出
    stuout(){
      this.axios.get('zxwyit_admin/User/LoginOut').then(res=>{
        if(res.data==1){
            this.$router.push({path:"/"}) //退出回到登录页面 路径为默认 / 
        }
      }).catch(err=>{
        console.log(err);
      }) 
    }
  },
  created(){
    this.axios.get('zxwyit_admin/Student/GetStudents',
      {
        params:{
          classId:7 //登录进来默认7班
        }
      }).then(res=>{
        // console.log(res.data.classStudents[0].students)
          this.array1=res.data.classStudents[0].students  //得到我们的数据用数组接收 
      }).catch(err=>{
        console.log(err);
      }) 
  },
  //渲染后
  mounted(){
    this.axios.get('zxwyit_admin/Class/GetAllClass').then(res=>{
      // console.log(res.data)
      this.array=res.data //加载班级信息数组接收 并在上面循环展示
    }).catch(err=>{
      console.log(err);
    })
  }
}
</script>

注意每个接口的数据不一样，需要自己查看点出正确我们需要的数据

主要的方法如上，注释都有写，方法和上面介绍的登录方法大同小异，都是从接口拿数据，该传值的就传值，在这就不一一介绍了。看一下我们整体的效果：

这个单页应用程序例子虽小，但五脏俱全，虽然这里我们只是几个组件，当多个组件也是一样的，定义好组件后，配置路由就好了。例子说完了，下面总结一下例子中需要用到的知识点。

一 组件的使用

1.定义组件 

在这个例子中我们定义了3个组件

2.组件的注册 

注册是在路由列表中的component中注册

二 路由的使用

1这里的例子用到了嵌套路由 简单的说就是在一个路由中使用 children：[ {path:'路径' component:组件对象}] 这样就可以作为它的子路由了

三 vue-axios的使用

这个例子vue-axios是在在组件内使用的，使用的比较简单使用的是get请求，模板：

this.axios.get('api')//请求的接口
  .then(function (response) { //then()请求成功的方法 response响应的参数
    console.log(response);
  })
  .catch(function (error) { //catch()请求失败的方法 error错误的参数
    console.log(error);
  });

四 编程式导航

这个例子使用的编程式导航有三种是 1是router.push()  2是 router.replace() 3是router.go() 

这里例子使用的是第一种：

this.$router.push({path:"/main"}) //对象的方式 

五 按键修饰符

有时候用户输入完后直接就回车键了，这时候我们需要绑定一个按键修饰符：

//登录时
<input type="password" class="form-control" v-model="loginpwd" placeholder="密码" @keyup.enter='login'>
//查询时 
<input v-model="uname" :class="{sty:csssty}" @keyup.enter="inquire">

v-bind绑定keyup事件点出按键enter="登录的方法" 

v-bind绑定keyup事件点出按键enter="查询的方法" 

以上对脚手架搭建单页应用程序的小结就这么多，如有错误欢迎批评指正，共同进步，谢谢大家。