vue基於element-ui制作的成績管理系統（二）登錄頁

1.在src下面創建一個components文件夾里面創建HelloWorld.vue,

像這樣：

創建后的頁面： 

<template>

<el-row :span="24" class="login-bg">
  <el-form label-position="left" label-width="0px" class="demo-ruleForm login-container">
    <h3 class="title">學生成績在線管理系統</h3>
    <el-form-item>
      <el-input type="text" v-model="username"  placeholder="請輸入登錄賬號"></el-input>  //vue 的雙向綁定
    </el-form-item>
    <el-form-item>
      <el-input type="password" v-model="password" placeholder="請輸入密碼"></el-input>
    </el-form-item>
    <el-row>
      <el-col :span="12" class="text-left">
        <el-radio v-model="radio" class="remember" label="1" style="padding-left:5px;">教師</el-radio>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-radio v-model="radio" class="remember" label="2" style="padding-right:5px;">學生</el-radio>
      </el-col>
    </el-row>

    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click="dologin()">登錄</el-button>   //點擊登錄
    </el-form-item>
  </el-form>
</el-row></template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
　　　　//初始值
　　　　radio:'1',  //頁面初始加載默認選中角色教師
　　　　username:'',  //初始賬號為空
　　　　password:''   //初始密碼為空

}
  },
  methods: {
　　//函數方法
　　//登錄
　　dologin(){
　　　　let {username,password,radio} = this;   //es6寫法，方便下面調用
　　　　//首先判斷賬號或密碼是否為空，為空的話則彈出用戶名或密碼不能為空，不為空則向后台發送請求
　　　　if(username==""||password==""){
this.$message.error("用戶名或密碼不能為空");}else{
//調用登錄接口
 this.$http.get(Main.getUserLogin(username,password,radio)).then(res => { 

 let{errCode,errMsg,dataList}= res.data;
 console.log(res.data);
 if(errCode==0){
 let rolename = dataList[0].role;
 sessionStorage.setItem('userrole',rolename);
 sessionStorage.setItem('userId', dataList[0].id);
 let role=radio;
 sessionStorage.setItem('userRole',role); //存儲角色（學生和教師） 本地存儲，方便頁面中調用用戶信息
 let userName=dataList[0].name || dataList[0].tname;
 sessionStorage.setItem('userName', userName); //存儲用戶名（學生和教師）
 let userPsd=dataList[0].passwd;
 sessionStorage.setItem('userPassword', userPsd); //存儲密碼（學生和教師）
 let userSex=dataList[0].sex || dataList[0].tsex;
 sessionStorage.setItem('userSex', userSex); //存儲性別（學生和教師）
 let userDepart=dataList[0].depart || dataList[0].tdepart;
 sessionStorage.setItem('userDepart', userDepart); //存儲部門院系（教師和學生）
 let cno =dataList[0].class_cno;
 sessionStorage.setItem('userCno',cno); //存儲課程id（教師）
 let age =dataList[0].age;
 sessionStorage.setItem('studentAge',age); //存儲年齡（學生）
 let major =dataList[0].major;
 sessionStorage.setItem('studentMajor',major); //存儲專業（學生）
 let term =dataList[0].term;
 sessionStorage.setItem('studentTerm',term); //存儲學期（學生）
 let year =dataList[0].year;
 sessionStorage.setItem('studentYear',year); //存儲所在年級（學生）
 this.$router.push({path: '/person-msg'}) //登錄成功之后跳轉到首頁（個人信息頁面）->路由跳轉
 this.$message({
 message: '恭喜'+rolename+userName+'! 成功登錄學生成績管理系統',
 type: 'success'
 });
 }else{
 this.$message.error(errMsg);
 }
 }, response => {
 this.$message.error('error submit!!');
 return false;
 });
}　　　}

}

//這里給出后台給的接口

urlBase:http://www.rainrain.xin:12345/studentdb;為了方便調用，我把所有的接口都放在了一個文件里面（api.js）

上面的登錄接口可以看到后台讓我傳三個參數，用戶賬號id，用戶密碼password,角色：0或1

基礎的URL存放在一個變量里面 const baseUrl = 'http://www.rainrain.xin:12345/studentdb';

//登錄

 

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
//css樣式
</style>