一、涉及文件

1、空项目文件清单

quasar项目创建后，初始文件清单如下：

进入windows命令行窗口，在项目目录d:\eddysproject\front\中，执行quasar dev即可启动项目服务。

2、新增修改文件清单

前端的应用界面开发完成后，在前端项目目录d:\eddysproject\front\中，涉及到如下文件的新增和变化：

后续的开发实际上就是对以上文件的开发。

二、静态功能界面

实现以上清单中的1、2、3等三个文件。

由于quasar项目初始创建后，默认打开的首页面就是1，为方便起见，就直接修改1中的代码称为登录本项目的登录界面，修改后效果如下：

同时新增了2、3两个vue文件，分别作为账号管理界面，和学生管理界面，效果如下：

以上2、3两个文件实际仅是上图中的右边部分，上面标题区和左边菜单导航区实际上是文件4的实现效果，即2放在4中就得到左图效果、3放在4中就得到右图效果。

文件6就是文件1上部左边的那个图片，文件5是文件4中左边导航菜单上部的那个图片。

为了有更好的静态显示效果，表格qtable组件中，除了需要定义各个数据列columns，同时还是定义一些静态数据到rows中，这样显示的表格中就能看到具体的数据。

具体代码请参见源文件。

三、配置页面路由routes.js

文件1是打开的首页文件，在成功登录后，进入主界面，初始默认打开文件2，通过左边导航菜单，可以在2、3两个功能间切换；另外文件2、3都是整合到文件4的框架中的。

为达到以上文件之间的整合、切换目标，通过修改文件7，实现三个功能界面之间的路由关系：

const routes = [

  {

   path: '/',

   component: () => import('pages/index.vue')

  },

  {

   path: '/',

   component: () => import('layouts/MainLayout.vue'),

   children: [

      {path: 'student', name:'student',component: () => import('pages/student.vue')},

      {path: 'user', name:'user',component: () => import('pages/user.vue') }

    ]

  },

  {

   path: '/:catchAll(.*)*',

   component: () => import('pages/Error404.vue')

  }

]

export default routes

以上就是文件7即D:\eddysproject\front\src\router\routes.js中的完整代码。

四、实现应用接口

本项目前端和后端的通讯是基于axios软件包实现的。

基本思路：将axios软件包封装成文件10，形成通讯驱动包；将所有访问后台的6个接口统一放置在文件11中，即文件11中的每个接口都通过调用文件10实现对后端接口的访问。

由于需要访问后台接口服务，所以在文件8中增加了后台服务地址。

1、request.js(文件10)

2、interface1.js(文件11)

这是对应调用后端服务提供的6个接口的前端接口：

import request from './request'

//1、登录校验接口

export function logincheck(query) {

   return request({

       url: '/interf/logincheck',

       method: 'get',

       params: query

    })

}

//2、登录账号分页查询接口

export function userpagelist(query) {

   return request({

       url: '/interf/userpagelist',

       method: 'get',

       params: query

    })

}

//3、学生信息分页查询接口

export function studentpagelist(query) {

   return request({

       url: '/interf/studentpagelist',

       method: 'get',

       params: query

    })

}

//4、登录账号增删改接口

export function updateuser(data) {

    returnrequest({

       url: '/interf/updateuser',

       method: 'post',

       data: data,

       loading:"hourglass"

    })

}

//5、学生信息增删改接口

export function updatestudent(data) {

   return request({

       url: '/interf/updatestudent',

       method: 'post',

       data: data,

       loading:"hourglass"

    })

}

//6、获取登录者姓名接口

export function getloginname(query) {

   return request({

       url: '/interf/getloginname',

       method: 'get',

       params: query

    })

}

3、loading.js(文件9)

这个文件其实可以不要，主要就是实现前后台通讯期间一个转啊转的动态等待效果。

import { Loading, QSpinnerGears,QSpinnerHourglass } from 'quasar'

let loading = {}

let lastRequest = new Date('2021');

loading.show = function (config) {

    if (config&&config.loading) {

        let now = new Date();

        let ms = now - lastRequest;

        lastRequest = now;

        if (ms > 2000) {//相隔两秒的请求才重新显示loading

            if (config.loading == "gears") {

                Loading.show({

                    spinner: QSpinnerGears,

                    message: '',

                    messageColor: 'white',

                    spinnerSize: 100,

                    spinnerColor: 'white',

                    customClass : ''

                })

            }else if(config.loading=="hourglass")

            {

                Loading.show({

                  // spinner: QSpinnerHourglass,

                    message: '',

                    messageColor: 'white',

                    spinnerSize: 100,

                    spinnerColor: 'white',

                    customClass : ''

                })

            }

        }

    }

}

loading.hide = function (config) {

    if (config&&config.loading) {

        setTimeout(() => {

            Loading.hide()

        }, 1000)

    }

}

export default loading;

五、环境配置文件(文件8)

环境配置文件quasar.conf.js是quasar重要的配置文件，本项目对quasar.conf.js文件做了如下修改：

1、增加后端服务接口地址

2、修改前端应用访问地址

3、加载Dialog插件

六、两个图片（其实可以自行替换成自己另选的图片）

1、文件5

2、文件6