学生选课系统（前端）vue

y1skkk

已于 2023-08-18 23:20:06 修改

阅读量370

点赞数 1

文章标签：前端 vue.js javascript

于 2023-08-18 23:17:50 首次发布

本文链接：https://blog.csdn.net/qq_56383190/article/details/132371946

版权

本文是同一个项目的前端，主要使用vue3.0进行前端的编写，使用vscode进行编写，本项目可能存在部分错误，谨慎参考。

相关链接：学生选课系统(后端)springboot+mybiats+gson

0.项目结构及模板

模板主要参考Vue（前端框架）

1.Course

Course.vue

course框架

<template>

  <tr >
    <th scope="col">{{  cou.id  }}</th>
    <th scope="col">{{  cou.couno  }}</th>
      <th scope="col">{{  cou.credits  }}</th>
      <th scope="col">{{  cou.comments  }}</th>
      <th scope="col">  

      </th>          
  </tr>
</template>

<script>

export default {
  props:["cou"],
  data(){
    return{
      dialogVisible: false,

    }

  },


  
}
</script>

<style>

</style>

2.manager

Manager.vue

<template>
    <div id="app">
        <div class ="text-center">
            <h2>教务系统-管理员</h2>
      <el-button @click="comName='getStu'">学生信息表</el-button>
      <el-button @click="comName='getTea'">教师信息表</el-button>
      <el-button type="warning" @click="dialogVisible = true">管理员登录</el-button>

      <el-dialog
        title="登 录"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>I D</span>
        <input type="text" v-model="login_adm.id">
        <br>
        <span>姓名</span>
        <input type="text" v-model="login_adm.name">
        <br>
        <span>邮箱</span>
        <input type="text" v-model="login_adm.mail">
        <br>
        <span>密码</span>
        <input type="password" v-model="login_adm.password">
        <br>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="login">登 录</el-button>
        </span>
      </el-dialog>



    </div>
      <div class = "box">
        <component :is='comName'></component>

      </div>
        <getStu :admlogin="admlogin"></getStu>
        <getTea :admlogin="admlogin"></getTea>
    </div>
  </template>
  
  <script>
 import getStu from "./components/getStu.vue"
 import getTea from "./components/getTea.vue"
  //import Course from "./components/Course.vue"
  //import Stucou from "./components/Stucou.vue"
  //import Teacou from "./components/Teacou.vue"
  import axios from "axios";

  export default {
    components: {
        getStu,
        getTea
    },
    data(){
      return{        
          comName: 'getStu' ,
          dialogVisible: false,
          login_adm: {
            id:"",
            name:"",
            mail:"",
            password:""
          },
          admlogin:false,
      }
    },
    methods:{
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
      },
      login(){
        axios({
          url:"http://localhost:8080/loginadm",
          data:this.login_adm,
          method:"POST"
        }).then(res =>{
          console.log(res.data);
          if(res.data == "1"){
            this.admlogin=true,
            sessionStorage.setItem("admisLogined","true");          
          }else{
              alert("登录失败！");
          }
        })
        this.dialogVisible =false
      }
    }
  }
  </script>
  
  <style>
  
  </style>

3.student

Stu.vue

这主要是学生页面的框架

<template>
  <div id="app">
    <div class ="text-center">
      <h2>教务系统-学生</h2>

    <el-button @click="comName='getSCourse'">备选课程表</el-button>
    <el-button @click="comName='getSC'">已选课程表</el-button>
    <el-button type="warning" @click="dialogVisible = true">学生登陆</el-button>

    <el-dialog
      title="登 录"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>I  D</span>
      <input type="text" v-model="login_stu.id">
      <br>
      <span>姓名</span>
      <input type="text" v-model="login_stu.name">
      <br>
      <span>邮箱</span>
      <input type="text" v-model="login_stu.mail">
      <br>
      <span>密码</span>
      <input type="password" v-model="login_stu.password">
      <br>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="login">登 录</el-button>
      </span>
    </el-dialog>

    <el-button type="danger" @click="dialogVisible2 = true">学生注册</el-button>

    <el-dialog
      title="学生注册"
      :visible.sync="dialogVisible2"
      width="30%"
      :before-close="handleClose">
      <table></table>
      <span>I D</span>
      <input type="text" v-model="reg_stu.id">
      <br>
      <span>姓名</span>
      <input type="text" v-model="reg_stu.name">
      <br>
      <span>邮箱</span>
      <input type="text" v-model="reg_stu.mail">
      <br>
      <span>密码</span>
      <input type="text" v-model="reg_stu.password">
      <br>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="stureg">确 定</el-button>
      </span>
    </el-dialog>

  </div>
    <div class = "box">
      <component :is='comName'></component>

    </div>
    <getSC :stulogin="stulogin"></getSC>
    <getSCourse :stulogin="stulogin"></getSCourse>
  </div>
</template>

<script>
//import Student from "./components/Student.vue"
//import Teacher from "./components/Teacher.vue"
import getSCourse from "./components/getSCourse.vue"
import getSC from "./components/getSC.vue"
//import Teacou from "./components/Teacou.vue"
import axios from "axios"
export default {
  components: {
    getSCourse,
    getSC
  },
  data(){
    return{        
        comName: 'getSCourse' ,       
        dialogVisible: false,
        dialogVisible2: false,

        login_stu: {
          id:"",
          name:"",
          mail:"",
          password:""
        },
        reg_stu: {
          id:"",
          name:"",
          mail:"",
          password:""
        },

        stulogin:false
    }
  },
  methods:{
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
      },
      login(){
        axios({
          url:"http://localhost:8080/loginstu",
          data:this.login_stu,
          method:"POST"
        }).then(res =>{
          console.log(res.data);
          if(res.data == "1"){
            this.stulogin=true,
            sessionStorage.setItem("stuisLogined","true");          
          }else{
              alert("登录失败！");
          }
        })
        this.dialogVisible =false
      },
      stureg(){
        axios({
          url:"http://localhost:8080/registerstu",
          data:this.reg_stu,
          method:"POST"
        })   
        this.dialogVisible2 =false
      }
  }
}
</script>

<style>

</style>

Student.vue

学生信息框架

<template>
  <tr >
    <th scope="col">{{  stu.id  }}</th>
    <th scope="col">{{  stu.name  }}</th>
    <th scope="col">{{  stu.mail  }}</th>
    <th scope="col">{{  stu.password  }}</th>
  </tr>
</template>

<script>
import axios from "axios"

export default {
  props:["stu"],

    data(){
      return{        
        student:[]
      }
    },
    methods:{
      getStudent(){
        axios({
          url:"http://localhost:8080/student",
          method:'GET',
        }).then(res=>{
          console.log(res.data);
          this.student = res.data;
        })
      }
    }
}
</script>

<style>

</style>

getStu.vue

与后端交互，获取MySQL表内信息，验证登录信息正确与否

<template>
    <div>
      <div class ="col-6 offset-3">
      <el-button type="success" @click="getStudent">获取信息</el-button>


        <table class="table">
          <thead>
              <tr>
              <th scope="col">学号</th>
              <th scope="col">姓名</th>
              <th scope="col">邮箱</th>
              <th scope="col">密码</th>
              </tr>
          </thead>
          <tbody>
            <Student v-for="stu in student" :key="stu.id" :stu = "stu"></Student>
          </tbody>
          </table>
      </div>
    </div>
</template>

<script>
import axios from "axios"
import Student from './Student.vue'
export default {
    components: { 
    Student,
    },
    data(){
      return{        
        student:[],

      }
    },
    props:{"admlogin":Boolean},
    methods:{
      getStudent(){
        if(this.admlogin==true){
          axios({
          url:"http://localhost:8080/student",
          method:'GET',
        }).then(res=>{
          console.log(res.data);
          this.student = res.data;
        })
        }

      },

    
    }
}
</script>

<style>

</style>

Stucou.vue

学生退课

<template>

  <tr >
  <th scope="col">{{  sc.id  }}</th>
  <th scope="col">{{  sc.stuno  }}</th>
  <th scope="col">{{  sc.couno  }}</th>
  <th scope="col">{{  sc.tegrade  }}</th>
  <th scope="col">  
    <el-button type="danger" @click="leaveCourse">退课</el-button>
  </th>
  </tr>

</template>
  
<script>
import axios from 'axios'
  export default {
    props:["sc"],
    methods:{
      leaveCourse(){
        axios({        
          url:"http://localhost:8080/deletesc",
          method:"POST",
          data:this.sc})
          location.reload()
      }
    }
    }

    
    
</script>
  
<style>
  
</style>

getSC.vue

获取选课信息即个人课表

<template>
    <div>
      <div class ="col-6 offset-3">

      <el-button type="success" @click="getStucou">获取信息</el-button>
        <table class="table">
          <thead>
              <tr>
              <th scope="col">序号</th>
              <th scope="col">学号</th>
              <th scope="col">课程号</th>
              <th scope="col">成绩</th>
              <th scope="col">操作</th>
              </tr>
          </thead>
          <tbody>
            <Stucou v-for="sc in scs" :key="sc.id" :sc = "sc"></Stucou>
          </tbody>
          </table>
      </div>
    </div>
</template>
  
<script>
  import axios from "axios"
  import Stucou from './Stucou.vue'

export default {
  components: { 
    Stucou
    },
    data(){
      return{        
        scs:[],
      }
    },
    props:{"stulogin":Boolean},
    methods:{    
        getStucou(){
          if(this.stulogin==true){
            axios({
                url:"http://localhost:8080/sc",
                method:'GET',
              }).then(res =>{
                console.log(res.data);
                this.scs = res.data;
            })
          }

        },
    }

    
    }
</script>
  
<style>
  
</style>

getSCourse.vue

备选课程表及选课操作

<template>
    <div>
      <div class ="col-6 offset-3">
      <el-button type="success" @click="getCourse">获取信息</el-button>
      <el-button type="primary" @click="dialogVisible = true">选课</el-button>

          <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div class="text-center"><strong>选课信息</strong></div>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="chooseCourse">选 择</el-button>
          </span>
          <div class="text-center">
              <table>
                <tr><td>id</td><td><input v-model.number ="newstcou.id" /></td></tr>
                <tr><td>学号</td><td><input v-model.number ="newstcou.stuno" /></td></tr>
                <tr><td>课程号</td><td><input v-model.number ="newstcou.couno" /></td></tr>
              </table>
          </div>
          </el-dialog>
      <table class="table">
          <thead>
              <tr>
              <th scope="col">开课序号</th>
              <th scope="col">课程号</th>
              <th scope="col">学分</th>
              <th scope="col">备注</th>
              </tr>
          </thead>
          <tbody>
            <Course v-for="cou in course" :key="cou.id" :cou = "cou"></Course>
          </tbody>
      </table>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios"
import Course from './Course.vue'
  export default {
    components:{
        Course
    },
      data(){
        return{        
          course:[],
          dialogVisible: false,

          newstcou:{
            id:"",
            stuno:"",
            couno:"",
          }
        }
      },
      props:{"stulogin":Boolean},
      methods:{

        getCourse(){
          if(this.stulogin==true){
            axios({
            url:"http://localhost:8080/course",
            method:'GET',
          }).then(res=>{
            console.log(res.data);
            this.course = res.data;
          })
          }

        },      
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
      },
      chooseCourse(){

        axios({
            url:'http://localhost:8080/addsc',
            method: 'POST',
            data:this.newstcou
        })
        this.dialogvisible = false
      }
    
      }
  }
  </script>
  
  <style>

4.teacher

Tea.vue

教师登录页面包含注册、登录

<template>
  <div id="app">
    <div class ="text-center">
      <h2>教务系统-教师</h2>
    
    <el-button @click="comName='getCourse'">已开课程表</el-button>
    <el-button @click="comName='getTC'">教师课程表</el-button>
    <el-button @click="comName='getTSC'">学生成绩表</el-button>
    <el-button type="warning" @click="dialogVisible = true">教师登录</el-button>

      <el-dialog
        title="登 录"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>I  D</span>
        <input type="text" v-model="login_tea.id">
        <br>
        <span>姓名</span>
        <input type="text" v-model="login_tea.name">
        <br>
        <span>邮箱</span>
        <input type="text" v-model="login_tea.mail">
        <br>
        <span>密码</span>
        <input type="password" v-model="login_tea.password">
        <br>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="login">登 录</el-button>
        </span>
      </el-dialog>

      <el-button type="danger" @click="dialogVisible2 = true">教师注册</el-button>

      <el-dialog
        title="教师注册"
        :visible.sync="dialogVisible2"
        width="30%"
        :before-close="handleClose">
        <span>I D</span>
        <input type="text" v-model="reg_tea.id">
        <br>
        <span>姓名</span>
        <input type="text" v-model="reg_tea.name">
        <br>
        <span>邮箱</span>
        <input type="text" v-model="reg_tea.mail">
        <br>
        <span>密码</span>
        <input type="text" v-model="reg_tea.password">
        <br>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="regtea">确 定</el-button>
        </span>
      </el-dialog>


  </div>
    <div class = "box">
      <component :is='comName'></component>

    </div>
    <getCourse :tealogin="tealogin"></getCourse>
    <getTC  :tealogin="tealogin"></getTC>
    <getTSC  :tealogin="tealogin"></getTSC>
  </div>
</template>

<script>
//import Student from "./components/Student.vue"
//import Teacher from "./components/Teacher.vue"
//import Course from "./components/Course.vue"
//import Stucou from "./components/Stucou.vue"
//import Teacou from "./components/Teacou.vue"
//import TStucou from "./components/TStucou.vue"
import getTC from "./components/getTC.vue"
import getTSC from "./components/getTSC.vue"
import getCourse from "./components/getCourse.vue"
import axios  from "axios"
export default {

  components: {
    getTC,
    getTSC,
    getCourse
  },
  data(){
    return{        
        comName: 'getTC' ,
        dialogVisible: false,
        dialogVisible2: false,

        login_tea: {
          id:"",
          name:"",
          mail:"",
          password:""
        },
        reg_tea: {
          id:"",
          name:"",
          mail:"",
          password:""
        },
        tealogin:false
    }
  },
  methods:{
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
      },
      login(){
        axios({
          url:"http://localhost:8080/logintea",
          data:this.login_tea,
          method:"POST"
        }).then(res =>{
          console.log(res.data);
          if(res.data == "1"){
            this.tealogin=true
            sessionStorage.setItem("teaisLogined","true");       
            sessionStorage.getItem("teaisLogined")   
          }else{
              alert("登录失败！");
          }
        })
        this.dialogVisible =false
      },
      regtea(){
        axios({
          url:"http://localhost:8080/registertea",
          data:this.reg_tea,
          method:"POST"
        })   
        this.dialogVisible2 =false
      }   
    
      
  }
}
</script>

<style>

</style>

getTea.vue

教师登录信息验证

<template>
    <div>
      <div class ="col-6 offset-3">
      <el-button type="success" @click="getTeacher">获取信息</el-button>

        <table class="table">
          <thead>
              <tr>
              <th scope="col">教师号</th>
              <th scope="col">姓名</th>
              <th scope="col">邮箱</th>
              <th scope="col">密码</th>
              </tr>
          </thead>
          <tbody>
            <Teacher v-for="tea in teacher" :key="tea.id" :tea = "tea"></Teacher>
          </tbody>
          </table>
      </div>
    </div>
</template>
  
<script>
import axios from "axios"
import Teacher from "./Teacher.vue"
  export default {
    components: { 
    Teacher
    },
    data(){
      return{        
        teacher:[],

      }
    },
    props:{"admlogin":Boolean},
    methods:{
      
      getTeacher(){
        if(this.admlogin==true){        
          axios({
          url:"http://localhost:8080/teacher",
          method:'GET',
        }).then(res=>{
          console.log(res.data);
          this.teacher = res.data;
        })}

      },

    }
  }
</script>
  
<style>
  
</style>

Teacher.vue

教师框架

<template>
  <tr >
    <th scope="col">{{  tea.id  }}</th>
    <th scope="col">{{  tea.name  }}</th>
    <th scope="col">{{  tea.mail  }}</th>
    <th scope="col">{{  tea.password  }}</th>
  </tr>
</template>
  
<script>

  export default {
    props:['tea'],

    
  }
</script>
  
<style>
  
</style>

getCourse.vue

教师开课及修改课程信息

<template>
    <div>
      <div class ="col-6 offset-3">
      <el-button type="success" @click="getCourse">获取信息</el-button>
      <el-button type="warning" @click="dialogVisible = true">开课</el-button>

        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div class="text-center"><strong>添加课程信息</strong></div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCourse">添 加</el-button>
        </span>
        <div class="text-center">
          <table class="text-right">
                <tr><td>开课序号</td><td><input v-model.number ="newTecou.id" /></td></tr>
                <tr><td>开课序号(确认！)</td><td><input v-model.number ="newCourse.id" /></td></tr>
                <tr><td>课程号</td><td><input v-model.number ="newCourse.couno" /></td></tr>
                <tr><td>课程号(确认课程号！)</td><td><input v-model.number ="newTecou.couno" /></td></tr>
                <tr><td>备注</td><td><input v-model="newCourse.comments" /></td></tr>
                <tr><td>教师号</td><td><input v-model.number="newTecou.teano" /></td></tr>
                <tr><td>学分</td><td><input v-model.number="newCourse.credits" /></td></tr>
              </table>
        </div>

        </el-dialog>
      <table class="table">
          <thead>
              <tr>
              <th scope="col">开课序号</th>
              <th scope="col">课程号</th>
              <th scope="col">学分</th>
              <th scope="col">备注</th>
              <th scope="col">操作</th>
              </tr>
          </thead>
          <tbody>
            <Course v-for="cou in course" :key="cou.id" :cou = "cou"></Course>
          </tbody>
      </table>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios"
import Course from './Course.vue'
  export default {
    components:{
        Course
    },
      data(){
        return{        
          course:[],
          dialogVisible: false,
          newCourse:{
            id:"",
            couno:"",
            credits:"",
            comments:"",
          },
          newTecou:{
            id:"",
            teano:"",
            couno:"",
          }
        }
      },
      props:{'tealogin':Boolean},
      methods:{
        getCourse(){
          if(this.tealogin==true){
            axios({
            url:"http://localhost:8080/course",
            method:'GET',
          }).then(res=>{
            console.log(res.data);
            this.course = res.data;
          })
          }

        },      
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
      },
      addCourse(){
        axios({
            url:'http://localhost:8080/addCourse',
            method: 'POST',
            data:this.newCourse
        })
        axios({
            url:'http://localhost:8080/addtc',
            method: 'POST',
            data:this.newTecou
        })
        this.dialogvisible = false
        }
    
      }
  }
  </script>
  
  <style>
body {text-align: center;} table {margin: auto;}</style>

getTC.vue

教师开课信息表

<template>
    <div>
      <div class ="col-6 offset-3">
      <el-button type="success" @click="getTC">获取信息</el-button>



        <table class="table">
          <thead>
              <tr>
              <th scope="col">序号</th>
              <th scope="col">教师号</th>
              <th scope="col">课程号</th>
              <th scope="col">操作</th>
              </tr>
          </thead>
          <tbody>
            <Teacou v-for="tc in tcs" :key="tc.id" :tc = "tc"></Teacou>
          </tbody>
          </table>
      </div>
    </div>
  </template>
  
  <script>
import axios from "axios"
import Teacou from './Teacou.vue'
  export default {
    components: { 
    Teacou
    },
    data(){
      return{        
        tcs:[],
      }
    },
    props:{"tealogin":Boolean},
    methods:{
      getTC(){
        if(this.tealogin==true){
          axios({
          url:"http://localhost:8080/tc",
          method:'GET',
        }).then(res=>{
          console.log(res.data);
          this.tcs = res.data;
        })
        }

      },
    }
  }
  </script>
  
  <style>
  
  </style>

Teacou.vue

教师删除课程

<template>

  <tr >
    <th scope="col">{{  tc.id  }}</th>
    <th scope="col">{{  tc.teano  }}</th>
    <th scope="col">{{  tc.couno  }}</th>
    <th scope="col">  
      <el-button type="danger" @click="deleteCourse">取消课程</el-button>
    </th>
  </tr>

</template>
  
<script>
import axios from 'axios'
  export default {
    props:['tc'],
    methods:{
      deleteCourse(){
        axios({        
          url:"http://localhost:8080/deletetc",
          method:"POST",
          data:this.tc})
          location.reload()

      }
    }
  }
</script>
  
<style>
  
</style>

TStucou.vue

教师修改课程学生成绩（这一步现在想来问题有点大，没有对应学生信息，即没办法修改个人的成绩，一改就是整个班的成绩）

<template>

    <tr>
        <td>{{  sc.id  }}</td>
        <td>{{  sc.stuno  }}</td>
        <td>{{  sc.couno  }}</td>
        <td v-show="!is_edit">{{ sc.tegrade  }}</td>
        <td v-show="!is_edit" >  
            <el-button type="primary" @click="changeGrade">修改成绩</el-button>
        </td>
        <td v-show="is_edit"><input class="w-20" type="text" v-model.number="sc.tegrade"/>
        </td>
        <td  v-show="is_edit" > 
            <el-button type="primary" @click="saveGrade">保存成绩</el-button>
        </td>
    </tr>

</template>
  
<script>
  import axios from "axios"

  export default {
    props:["sc"],
    data(){
      return{        
        is_edit : false,
      }
    },
    methods:{    
        changeGrade(){
            this.is_edit=true
        },
        saveGrade(){
            axios({
                url:"http://localhost:8080/updatesc",
                method:"POST",
                data:this.sc
            })
            this.is_edit=false
        }
    }

    
    }
</script>
  
<style>
  
</style>

getTSC.vue

教师查看选课信息

<template>
    <div>
      <div class ="col-6 offset-3">

      <el-button type="success" @click="getStucou">获取信息</el-button>
        <table class="table">
          <thead>
              <tr>
              <th scope="col">序号</th>
              <th scope="col">学号</th>
              <th scope="col">课程号</th>
              <th scope="col">成绩</th>
              <th scope="col">操作</th>
              </tr>
          </thead>
          <tbody>
            <TStucou v-for="sc in scs" :key="sc.id" :sc = "sc"></TStucou>
          </tbody>
          </table>
      </div>
    </div>
</template>
  
<script>
  import axios from "axios"
  import TStucou from './TStucou.vue'

export default {
  components: { 
    TStucou
    },
    data(){
      return{        
        scs:[],
      }
    },
    props:{"tealogin":Boolean},

    methods:{  
      getStucou(){

        if(this.tealogin == true){        
            axios({
                url:"http://localhost:8080/sc",
                method:'GET',
              }).then(res =>{
                console.log(res.data);
               this.scs = res.data;
            })
          }
        }  
  
    }

    
    }
</script>
  
<style>
  
</style>

5.APP.vue

主程序

<template>
    <div id="app">
      <div class ="text-center">

      <el-button @click="comName='Tea'">教师界面</el-button>
      <el-button @click="comName='Stu'">学生界面</el-button>
      <el-button @click="comName='Manager'">管理员界面</el-button>
    </div>
      <div class = "box">
        <component :is='comName'></component>
      </div>
    </div>

</template>

<script>
//import Student from "./components/Student.vue"
//import Teacher from "./components/Teacher.vue"
//import Course from "./components/Course.vue"
//import Stucou from "./components/Stucou.vue"
import Tea from "./Tea.vue"
import Stu from "./Stu.vue"
import Manager from "./Manger.vue"



export default {
    name: 'App',
    components: {
      Tea,
      Stu,
      Manager
    },
    data(){
      return{        
          comName: 'Stu' ,
      }
    },
  }
</script>

<style scoped>
#app{
  background-image:url("~@/assets/logo.png");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position:fixed
}
</style>

这样通过vue与springboot+mybaits完成了一个可以前后端交互、可以与数据库交互的学生选课系统，可以完成学生选课、退课、教师开课、登陆成绩等功能。

相关链接：学生选课系统(后端)springboot+mybiats+gson