系统登录页面前后，js基础逻辑运算，if语句，while语句，swith语句，数组的增删改查、函数的学习

一、系统登陆页面

        1.前端方向

该系统具有删选功能，如果输入正确的用户名和密码即可进入，输入错误的用户名和密码就会弹出提示

本次登录页面的前端反馈运用的是js技术

export default {
  name: 'login',
  data() {
    return {
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      loginRules: {
        username: [{required: true, trigger: 'blur', message: "请输入用户名"}],
        password: [{required: true, trigger: 'blur', message: "请输入密码"}]
      },
      loading: false
    }
  },

其中：

loginform是数据返回的数据表示账号和密码必须是这个

loginrules则是一种规则 

其中required：true表示此字段必填  message起到一种提示的作用

trigger表示触发模式有两种change/blur

change：是用户只要在写修改了数据就会进行提示

blur：是失去焦点的时候才会去提示

这串代码分别是把数据和规则绑定给model和rules就可以使用了

这进行的是用户名的校验，第二个框里面是对用户名进行双向绑定这样用户就可以输入用户名了密码也同样如此

2.后端方向

 这串代码负责sprinboot的初始化以及启动 

这串代码当中的@Param注解的作用是可以给参数命名，意思就是给其命名一个username，和password。当外部想要传入值时，就会直接传入到数据库当中。

二、js基础的学习

1.逻辑运算

逻辑与&& 必须要两边都是真才会输出为正确的才可以输出true

3<5 && 5<7

逻辑 或 || 一真全真两边的函数只要有一边为真就全为真

2.if语句

if语句分为单支、双支、多支

单只：

if（条件）{语句}——意思是如果满足小括号里面的条件则执行大括号里面的语句

双支：

if（）{

}else{

}表示的是如果满足if里面的条件则执行if大括号里面的语句，如果不满足则执行else里面的语句

多支：看给出的数据是否复合条件，如果复合就执行如果不符合就往下面走依次看符合还是不符合

if（条件）{

}else if（）{语句

}else if（）{语句

}

三元运算符：

条件？满足时执行的代码：不满足时执行的代码

3.while语句

语法：while（）{

}

while（true）则可以表示无线循环

4.switch语句

switch语句实现是

如果根据小括号里面的数据往下面依次进行对比——如果数据等于值1就执行里面的代码然后后面的就不再执行了，如果不满足条件就继续往下检验，直到最后如果还没有满足的条件就执行default里面的代码

基于这几个语句我写了一个简单的存钱取钱的弹框

代码如下

 let money = 0
        while(true){
            let str = +prompt(`请选择操作：
            1.取钱 
            2.存钱
            3.查询余额
            4.退出`)
            if(str === '4'){
                break
            }
            switch(str){
                case 1:
                let qu = +prompt('请输入你想取的金额：')
                money = money-qu
                break
                case 2:
                    let cun = +prompt('请输入你想存的钱')
                    money = money + cun
                    break
                case 3:
                alert(money)
            }
        }

但是开始时发现不管输入123还是多少都会一直循环
最后查找原因是：

因为我没有给str语言转换为数字数据类型还是字符串数据类型，在prompt前面加一个“+”即可实现转换

4.数组的增删改查

（1）查询数组数据

可直接输入  数组名[下标]就可以进行查询

（2）数组的改

可利用代码 数组[下标]=新值

（3）数组的增

数组的增有两种

arr.push（新增内容）：是在数组的最后增加一组数据

arr.unshift（新增内容）：在数组最前方增加新内容

（4）数组的删除

arr.pop（）：删除末尾的一个数据

实现了末尾最后一个数据的删除

arr.shift（）：删除首的一个数据

arr.splice（操作的下标，删除的个数）：可以选择一个数据从他开始删除

此代码先执行删除头一个数据，然后再在下标为2的数据开始删除两个数据

因为先执行头一个的删除所以执行完以后“nnnn”变成了下标为2的数据然后“nnnn”和“hxanm”就被删除

5.函数

函数的语法格式：
 

function 函数名（）{
    输入语句
}

如果想要想要调用函数的话直接输入函数名即可

 

再函数当中还可以输入形参和实参：

形参：声明函数时的函数

实参：调用函数时的函数

注意：如果函数里面声明的变量属于局部变量是只能在函数当中使用的

如图所示当在函数当中定义一个num变量但是拿到函数外面来使用就会出现报错——没有找到“num”所以函数里面定义的变量算局部变量，不能全局使用，形参可以看作局部变量

但是局部变量里面没有声明的变量可以全部使用