2021/7/8 学习知识汇聚平台：页面整合

最新推荐文章于 2023-10-16 21:36:55 发布

luluou

最新推荐文章于 2023-10-16 21:36:55 发布

阅读量215

点赞数

本文链接：https://blog.csdn.net/weixin_43398608/article/details/118640235

版权

今天主要进行了前端大部分页面的整合布置

基本实现了用户登录，跳转到平台主页，以及跳转到用户个人主页的操作

对于用户登录页面：

<template>

  <body id ="paper">
  <div class="common-layout">

    <div style="margin-top: 50px;margin-left: 60px;">
      <span style="font-weight: bold ;color: white;font-size:30px;">
       学习知识汇聚平台</span>
      <el-divider direction="vertical" style="font-weight: bold ;color: white;"></el-divider>
      <span style="font-weight: bold ;color: white;font-size:15px;">
        项目实训</span>
    </div>

    <el-container>
      <el-header > </el-header>

      <el-main style="margin-left: 700px;margin-right: 50px" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">


          <el-form-item label="学工号" prop="username" >
            <el-input type =" text" prefix-icon="el-icon-user-solid" v-model="ruleForm.username "></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input  type="password"  prefix-icon="el-icon-lock" v-model="ruleForm.password"></el-input>
          </el-form-item>
          <!--   实现登录验证时需要判断跳转-->
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>

            <div style="font-weight: bold ;color: white;font-size:5px;">
              温馨提示：
              用户名为职工号/学号，登录密码为山东大学统一认证平台密码
            </div>
          </el-form-item>
        </el-form>

      </el-main>
    </el-container>
  </div>


  </body>
</template>

<script>
import QS from 'qs'
import axios from "axios";
export default {

  name: "Login",
  data() {
    return {

      lts:'',
      cookiess:'',
      s:'',
      ruleForm: {
        username: '',
        password: '',

      },
      rules:
          {
            username: [
              { required: true, message: '请输入学工号', trigger: 'blur' },
              { min: 5, max: 20, message: '请输入正确学工号', trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'change' },
              { min: 6, max: 20, message: '请输入统一身份认证密码', trigger: 'blur' }

            ],

          }
    };
  },
  methods: {

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this=this
          axios.get('http://47.107.40.143:8080/getLt').then(function (resp){
            _this.lts=resp.data.data.lt
            console.log(resp)
            console.log(_this.lts)
            _this.cookiess=resp.data.data.cookies
            console.log(_this.cookiess)
            let data1=_this.ruleForm.username+_this.ruleForm.password+_this.lts
            console.log(data1)
            _this.s=strEnc(data1,"1","2","3")
            console.log(_this.s)
            axios.post("http://47.107.40.143:8080/login",QS.stringify(
                {

                  uid:_this.ruleForm.username,

最低0.47元/天解锁文章

luluou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021/7/8 学习知识汇聚平台：页面整合

今天主要进行了前端大部分页面的整合布置基本实现了用户登录，跳转到平台主页，以及跳转到用户个人主页的操作对于用户登录页面：<template> <body id ="paper"> <div class="common-layout"> <div style="margin-top: 50px;margin-left: 60px;"> <span style="font-weight: bold ;color:
复制链接

扫一扫