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>