学生信息管理系统 —— 前端篇

Vue

采用 Vue-CLi创建的项目的结构（有后期项目的更新，可能具体文件与实际不符，但结构基本不变）。

├── App.vue
├── assets
│   └── logo.png
├── components
│   ├── BottomBar.vue
│   ├── HeadBar.vue
│   ├── SiderBar.vue
│   ├── UpLoad.vue
│   ├── UpLoadImages.vue
│   ├── UpLoadSingleImage.vue
│   ├── achievement
│   │   ├── AddAchievement.vue
│   │   └── DisplayAchievement.vue
│   ├── course
│   │   ├── AddCourses.vue
│   │   └── DisplayCourses.vue
│   ├── score
│   │   ├── AddScoreByCourse.vue
│   │   ├── QueryScoreByCourse.vue
│   │   └── QueryScoreByStudent.vue
│   └── students
│       ├── AddAmountOfStudents.vue
│       ├── AddSingleStudent.vue
│       ├── DisplayAllStudents.vue
│       └── SearchStudent.vue
├── main.js
├── router
│   └── index.js
├── store
│   └── index.js
├── utils
│   └── api.js
└── views
    ├── AddScore.vue
    ├── AddStudents.vue
    ├── DisplayScore.vue
    ├── DisplayStudent.vue
    ├── Home.vue
    └── Login.vue
    ……
└── vue.config.js  （与src同级的配置文件）

单文件组件结构

举一个简单的例子。

<!-- 模板 —— 具体的页面组件 -->
<template>
    <div class="class_1"></div>
</template>


<!-- 脚本 -->
<script>
    import {postRequest} from "../utils/api";
    import {getRequest} from "../utils/api";
    //凡是要使用的外部函数、组件都需要导入
    export default {
        name: "SingleFileComponent",
        // 状态
        data(){
            // 以对象的形式返回 
            return{
                state:1,
                state_array:[],
                state_object:{
                    
                }
            //    …………
            }
        },
        // 方法，比如按钮的触发事件，一些支持方法等等。
        methods:{
            fun_a(){
                
            },
            fun_b(variable){
                return true;
            }
        //    …………
        },
        // 局部组件（需要import进来)
        components:{
            //…………
        },
        // 生命周期函数，当然还有其他，mounted是在页面加载完之后，挂载到vue之后的钩子函数
        mounted() {
        //   比如，页面加载完页面之后，就向后端请求数据
        }
    }
</script>

<!-- 样式 -->
<style scoped>

    .class_1{
    }
    
</style>

反向代理配置

在vue.config.js文件下

module.exports={
    devServer:{
        proxy:{
            "/api":{
                target:'http://localhost:8088',//访问的服务器地址
                changeOrigin:true,//true为开启代理
                //secure: true, // 如果是https接口，需要配置这个参数
                pathRewrite:{

                    '^/api': ''//路径的替换规则
                    /*
                     *这里的配置是正则表达式，以/api开头的路径将会被‘/'替换掉
                     *假如后台文档的接口是 "https://www.cyclv.com/admin/login"
                     *前端调取API接口应写：axios.get('/api/admin/login')
                     */
                }
            }
        }
    }
}

axios

在api.js下简单封装了与后端交互的代码，主要考虑到如果以后交互技术的变化以方便拓展。

import axios from 'axios'

export const postRequest = (url,data) => {
    return axios.post(url,data);
}

export const getRequest = (url)=> {
    return axios.get(url);
}


export const deleteRequest = (url)=> {
    return axios.delete(url);
}

export const putRequest = (url,data)=> {
    return axios.put(url,data);
}

具体代码片段，如：

   const api = 'api/login';
   postRequest(api, {
       aid: this.loginForm.aid,
       pwd: this.loginForm.pwd
   })
       .then(response => {
           if (response.status == 201) {
               // 在 store 的 state存储 状态
               this.$store.commit('login', this.loginForm);
               this.$router.replace({path: '/home'});
           } else {
               alert("密码错误！");
           }
       })
       .catch(res => {
           this.console.log("内部错误");
       })

路由

//import …………

Vue.use(VueRouter)

const routes = [
  {
    path:'/login',
    name:'Login',
    component:Login
  },
  {
    path: '/home',
    name:'Home',
    component: Home,
    meta:{
      // 表明页面需要进行拦截
      requiredAuth: true
    },
    children :[
      {
        path: 'display-students',
        name: 'DisplayStudent',
        component:DisplayStudent
      },
      {
        path: 'add-students',
        name: 'AddStudents',
        component: AddStudents
      },
      {
        path: 'display-courses',
        name: 'DisplayCourses',
        component: DisplayCourses
      },
      {
        path: 'add-courses',
        name: 'AddCourses',
        component: AddCourses
      },
      {
        path: 'add-achievement',
        name: 'AddAchievement',
        component: AddAchievement
      },
      {
        path: 'display-achievement',
        name: 'DisplayAchievement',
        component: DisplayAchievement
      },
      {
        path: 'add-score',
        name: 'AddScore',
        component: AddScore
      },
      {
        path: 'display-score',
        name: 'DisplayScore',
        component: DisplayScore
      }
    ]
  },
  {
    path: '*',
    redirect:'/login'
  }

]

const router = new VueRouter({
  routes
})

export default router

store

这里只是简单的使用store技术，用于存储一些全局的状态。
这里存储了用户的登录状态。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

/*

 sessionStorage 只有关闭页面、退出浏览器才会清除
 localStorage 除非只有主动清除，否则不会清除

 */

export default new Vuex.Store({
  state: {
    administrator:{
      aid: window.sessionStorage.getItem('admin' || '[]')==null ? null: JSON.parse(window.sessionStorage.getItem('admin' || '[]')).aid
    }
  },
  mutations: {
    login(state,admin){
      state.administrator = admin;
      // console.log('到这',admin);
      window.sessionStorage.setItem('admin',JSON.stringify(admin));
    }
  },
  actions: {
  },
  modules: {
  }
})

路由钩子函数

这里简单实现了登录拦截器的功能。
在main.js文件里：

router.beforeEach((to,from,next) => {
  if(to.meta.requiredAuth){
    if(store.state.administrator.aid){
      next();
    }else{
      // 在登录成功后自动路由到目标位置
      next({
        path:'login',
        query:{redirect:to.fullPath}
      })
    }
  }else{
    next();
  }
})

ElementUI

组件开发的利器，Vue的好伙伴，很容易上手，官方也给了详尽的、友好的文档，不再赘述。