当前位置:首页 » 《资源分享》 » 正文

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

8 人参与  2024年10月02日 08:41  分类 : 《资源分享》  评论

点击全文阅读


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 = thisaxios.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更加美观啦

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


点击全文阅读


本文链接:http://zhangshiyu.com/post/167055.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1