山东大学项目实训——3月21日

最新推荐文章于 2024-08-13 16:15:07 发布

无敌小宇宙jy

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量100

点赞数 1

分类专栏：山大2018级项目实训文章标签： javascript vue.js css html web

本文链接：https://blog.csdn.net/weixin_54179379/article/details/115049266

版权

山大2018级项目实训专栏收录该内容

1 篇文章 0 订阅

订阅专栏

作为前端组的成员，我在前段时间开始学习系统地前端知识，并且本周我们使用vue搭建了用户登录界面以及管理员界面，后续将完成对个人信息界面的搭建以及对前端界面的功能补充以及美化等工作。
**

1.用户登录界面

<template>
  <div>
  <div class="background">
    <img :src="imgSrc" width="100%" height="100%" alt="" />
  </div>
    <h1 style="top:22.5%;left: 46.5%;position: absolute;z-index: 2;font-family:宋体" >优云写作</h1>
    <div style="display: flex;justify-content: center;margin-top: 150px" class="front">
      <el-card style="width: 400px">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="60px" class="demo-ruleForm" >
          <el-form-item label="用户名" prop="username">
            <el-input type="username" v-model="ruleForm.username" autocomplete="off" ref="username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" ref="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="primary" @click="login2">管理员登录</el-button>
            <el-button @click="register">注册</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<style>
.background{
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 */
  z-index:-1;
  position: absolute;
}
.front{
  z-index:1;
  position: absolute;
}
</style>
<script>

export default {
  data() {


    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能输入空的用户名'));
      } else {
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }  else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: '',
        password: '',
      },
      user1 :[],
      admin:[],
      imgSrc:require('../assets/123.jpg'),
      rules: {
        username: [
          { validator: validatePass, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      },
      user:{

      }
    };
  },
  created() {
    const _this = this
    this.axios.get("http://localhost:8181/User1/findAll").then(function (resp) {
      _this.user1=resp.data
    });
    this.axios.get("http://localhost:8181/Admin/findAll").then(function (resp) {
      _this.admin=resp.data
    });
  },
  methods: {
    login(){
      const _this=this
      let text1 = this.$refs.username.value
      let text2 = this.$refs.password.value

      console.log(_this.user1)
      for(let text3 of _this.user1){
        if(text1===text3.user1_nickname&&Number(text2)===text3.user1_password){
          sessionStorage.setItem('id',text3.user1_id);
          this.$router.push({
            path: "/login"//要跳转的页面的路由
          });
        }}
    },
    login2(){
      const _this=this
      let text1 = this.$refs.username.value
      let text2 = this.$refs.password.value

      console.log(_this.admin)
      for(let text3 of _this.admin){
        if(text1===text3.admin_nickname&&Number(text2)===text3.admin_password){
          sessionStorage.setItem('admin_id',text3.admin_id);
          this.$router.push({
            path: "/login2"//要跳转的页面的路由
          });
        }}
    },

    register() {
      this.$router.push({
        path: "/register"//要跳转的页面的路由
      });
    }
  }
}
</script>

在这里插入图片描述

**

2.管理员界面

<template>
  <div>
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 400px">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" >
          <el-form-item label="用户名" prop="username">
            <el-input type="username" v-model="ruleForm.username" autocomplete="off" ref="username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" ref="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input type="password" v-model="ruleForm.password2" autocomplete="off" ref="password2"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register">注册</el-button>
            <el-button type="primary" @click="adminregister">管理员注册</el-button>
            <el-button @click="login">返回</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {


    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能输入空的用户名'));
      } else {
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }  else {
        if (this.ruleForm.password !== '') {
          this.$refs.ruleForm.validateField('password');
        }
        callback();
      }
    };
    let validatePass3 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: '',
        password: '',
        password2:''
      },
      user1 :[],
      admin:[]
      ,
      rules: {
        username: [
          { validator: validatePass, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        password2: [
          { validator: validatePass3, trigger: 'blur' }
        ]
      },
      user:{

      },
      insertdata:{
        user1_id:'',
        user1_nickname:'',
        user1_password:''

      },
      insertdata2:{
        gouwuche_id:'',
        price1:'',
        price2:''

      }
    };
  },
  created() {
    const _this = this
    this.axios.get("http://localhost:8181/User1/findAll").then(function (resp) {
      _this.user1=resp.data
    });
    this.axios.get("http://localhost:8181/Admin/findAll").then(function (resp) {
      _this.admin=resp.data
    });

  },
  methods: {
    register(){
      let a=0
      let b=0
      let qs = require('qs');
      const _this=this
      let text1 = this.$refs.username.value
      let text2 = this.$refs.password.value
      _this.insertdata.user1_nickname=text1
      _this.insertdata.user1_password=text2
      for(let text3 of _this.user1) {
        if (text1 === text3.user1_nickname) {
          this.$alert('该用户名已经存在',  {
            confirmButtonText: '确定',
          });
          a=1
        }
        b=Number(text3.user1_id)+1
      }
      _this.insertdata.user1_id=b
      _this.insertdata2.gouwuche_id=b
      _this.insertdata2.price1=0
      _this.insertdata2.price2=0
      if (a===0){
        console.log(a)
        _this.axios({
          headers: {
            'deviceCode': 'A95ZEF1-47B5-AC90BF3',
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          method: 'post',
          url: 'http://localhost:8181/User1/Insert2',
          data: qs.stringify(_this.insertdata)
        })
        _this.axios({
          headers: {
            'deviceCode': 'A95ZEF1-47B5-AC90BF3',
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          method: 'post',
          url: 'http://localhost:8181/Gouwuche/Insert',
          data: qs.stringify(_this.insertdata2)
        })
        this.$alert('注册成功',  {
          confirmButtonText: '确定',
        });
      }
    },
    adminregister(){
      let a=0
      let b=0
      let qs = require('qs');
      const _this=this
      let text1 = this.$refs.username.value
      let text2 = this.$refs.password.value
      _this.insertdata.admin_nickname=text1
      _this.insertdata.admin_password=text2
      for(let text3 of _this.admin) {
        if (text1 === text3.admin_nickname) {
          this.$alert('该用户名已经存在',  {
            confirmButtonText: '确定',
          });
          a=1
        }
        b=Number(text3.admin_id)+1
      }
      _this.insertdata.admin_id=b
      if (a===0){
        console.log(a)
        _this.axios({
          headers: {
            'deviceCode': 'A95ZEF1-47B5-AC90BF3',
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          method: 'post',
          url: 'http://localhost:8181/Admin/Insert',
          data: qs.stringify(_this.insertdata)
        })

        this.$alert('注册成功',  {
          confirmButtonText: '确定',
        });
      }
    },

    login() {
      this.$router.push({
        path: "/"//要跳转的页面的路由
      });
    }
  }
}
</script>

3.学习笔记

关于HTML与用户交互的OutPut方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的输出函数</title>
    <!--js代码需要编写到script标签中-->
    <script type="text/javascript">
        alert("abc");//警告框,点完才往下执行
        document.write("hello");//向body中输出内容，页面中
        console.log("hi");//向控制台输出，打开开发者页面
    </script>
</head>
<body>
<!--可以将js代码写到标签的onclick属性中
点击时执行代码-->
<button onclick="alert('dont click me')">点我</button>
<!--可以将js代码写在超链接的href属性中，点击时执行-->
<a href="outPut.html">点我一下</a>
<a href="javascript:alert('让你点了吗')">点我一下ma</a>
<a >点我一下ma1</a>//无超链接
<a href="javascript:;">点我一下ma2</a>//有超链接无反应
</body>
</html>

在这里插入图片描述

关于外部文件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部文件使用</title>
    <script src="外部文件.js">
   /* 将js代码写到js外部文件中
    然后通过script标签引入
    方便在不同页面中使用，并且能利用到浏览器缓存
    一旦用于引入外部文件，就不能运行内部代码了
    创建新的script代码
    */
    </script>

</head>
<body>

</body>
</html>

（外部文件）

alert("我是外部文件");

在这里插入图片描述

4.收获心得

对于前端界面的搭建，不仅要考虑到所需要完成的功能，更应该考虑到用户的体验，对于各种div、herf以及各种table的布置应该充分考虑到整洁美观，提高用户体验。
对于div的调整，可以使用他的top以及left属性。或者通过编写其他html文件来获取所需的位置的坐标，进而方便调整div的位置。
学会了vue环境的搭建，并且能使用vue搭建出一个完整的前端界面。
事件的触发和监听(emit，on)。它们是父子组件的时候，可以直接在父组件上绑定事件，然后子组件触发的时候，就可以被监听到。

无敌小宇宙jy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
山东大学项目实训——3月21日

作为前端组的成员，我在前段时间开始学习系统地前端知识，并且本周我们使用vue搭建了用户登录界面以及管理员界面，后续将完成对个人信息界面的搭建以及对前端界面的功能补充以及美化等工作。**1.用户登录界面**<template> <div> <div class="background"> <img :src="imgSrc" width="100%" height="100%" alt="" /> </div> &
复制链接

扫一扫

专栏目录