从零开始的Vue+flask项目实战-登录系统的实现-Vue前端编写

Vue前端用到的一些小技巧简单记录一下

v-model 双向绑定

v-model 指令可以实现表单输入元素与 Vue 实例中的数据双向绑定。

通俗来说，一个变量的值可以被用户修改，也可以被代码自带逻辑修改，并且一方修改，双方都能获取到最新值。

HTML中这样编写，v-model作数据的双向绑定

<div>用户名：<input type="text" placeholder="请输入用户名" v-model="form.username"></div>
<div>密码：<input type="password" placeholder="请输入密码" v-model="form.password"></div>

JS里定义一个对象存储一下用户输入的内容即可。

form.username和form.password就是用户输入的内容啦

export default {
        name: 'app',
        data() {
            return {
                form: {},
            }
        },
}

:class实现动态样式变化

再逛淘宝网页，我们点击上方的导航栏，点击的一栏会变色。

可以通过如下方法实现这样的效果（在这里通过登录注册两个按钮的样式切换简单演示一下）:

格式为:class="{classname:true/false}"

<div @click="choiceChange(index)" v-for="(item,index) in choices">
    <div class="items" :class="{items_active:index==active} ">{{item}}</div>
</div>

    export default {
        name: 'app',
        data() {
            return {
                choices: ["登陆", "注册"],
                active: ''
            }
        },
        methods: {
            choiceChange(index) {
                this.active = index
            },
        }
}

外层div盒子使用v-for进行循环渲染，内层div盒子类名默认为items。

添加一个鼠标点击的事件并传递参数，以此告知所点击位置对应choices数组下标，记录在active中，如果active中记录的值刚好是当前下标值，就改变class样式为items_active。

hover实现鼠标悬停样式变化

我们这里以按钮组件悬停变化为例，增强用户体验感

<button type="submit">登陆</button>

css中如下配置即可，hover中为悬停后的样式变化

    button {
        /** 重置按钮的默认样式 **/
        background-color: transparent;
        /* 或者你想要的任何颜色 */
        border: none;
        /* 移除边框 */
        padding: 10px 20px;
        /* 内边距 */
        color: white;
        /* 字体颜色 */
        font-size: 16px;
        /* 字体大小 */
        cursor: pointer;
        /* 鼠标悬停时的光标样式 */
        
        /** 添加一些视觉效果 **/
        background-color: #007bff;
        /* 背景颜色 */
        border-radius: 4px;
        /* 边框圆角 */
        transition: background-color 0.3s ease;
        /* 背景颜色过渡效果 */
    }

    button:hover {
        background-color: #19dfcf;
        /* 更深的蓝色背景 */
    }

axios实现发送请求

安装axios库

npm install axios

此处以POST请求为例发送请求

<div >
    <div>用户名：<input type="text" placeholder="请输入用户名" v-model="form.username"></div>
    <div>密码：<input type="password" placeholder="请输入密码" v-model="form.password"></div>
    <button type="submit" @click="handleLogin">登陆</button>
</div>

这里仅仅提供一个格式参考，能够成功发送请求并接收后端返回结果，具体详细代码将在下一篇中进行讲解。由于项目较为简易，并未对axios进行二次封装，用最直白的方式进行实现。

handleLogin() {
    let that = this
    axios.post('http://127.0.0.1:5000/login', {
            userName: that.form.username,
            passWorAd: that.form.password
        }, {
                headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        .then(res => {
            console.log(res)
        })
        .catch(res => {
            console.log(res)
        })

    }
},

axios.post中第三个参数配置请求头的信息，其中'Content-Type': 'application/x-www-form-urlencoded'表明是以表单形式传参，如果是"Content-Type":"application/json"的配置，即为json格式传参，浏览器会先发送预检请求，配置复杂且会容易报错，更换请求头信息可以避免掉。

flex布局调整前端页面

之前对flex布局就一直是一知半解，属性多记得有点混乱，这次使用完更熟悉了一点。

这是实现的效果图

HTML

<div class="main">
    <div class="head">
        <div @click="choiceChange(index)" v-for="(item,index) in choices">
            <div class="items" :class="{items_active:index==active} ">{{item}}</div>
        </div>
    </div>
    <div class="container">
        <div class="flex-item">用户名：<input class="login" type="text"         placeholder="请输入用户名" v-model="form.username"></div>
        <div class="flex-item">密码：<input class="_login" type="password" placeholder="请输入密码"v-model="form.password"></div>
    </div>
    <button type="submit" @click="handleLogin">登陆</button>
</div>

CSS

.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.head {
    display: flex;
    justify-content: space-around;
}

外层flex布局

最外层是一个class为main的div盒子，我们想要让其内部元素进行flex布局，所以先给其本身添加一个display:flex的属性值。

我们想要达到这种每行为一个子元素的效果，所以我们在属性值中添加flex-direction:column的属性，主轴定为列。这里可能与我们直接思维有些许区别，为什么子元素占一行，却要主轴定为列？

仔细想想，只有列为主轴，每一行才成为子元素依次排列， 是不是就好理解一点了

我们想要实现这样的居中效果，首先需要加一个justify-content:center的属性值，意为以主轴为参照进行居中，通俗一点就是，居主轴的中

之后我们再添加一个align-items:center的属性值，意为以副轴为参照进行居中，通俗一点就是，居副轴的中。这样我们就完成了我们的外层flex布局

内层flex布局

<div class="head">
    <div @click="choiceChange(index)" v-for="(item,index) in choices">
        <div class="items" :class="{items_active:index==active} ">{{item}}</div>
    </div>
</div>

.head {
    display: flex;
    justify-content: space-around;
}

怎样将这两个div盒子在一行中显示？还是flex布局！

添加display:flex后，我们再加一个justify-content:space-around的属性，可以让每个元素左右两侧都添加相同的空间

如果改成justify-content:space-between，两侧的div盒子会贴边，剩下空间进行平分，在这里显然space-around更加美观啦

前端的部分就说这么多，一些细节和功能优化就放在下一篇与后端一起实现吧