关于二手车系统学习--登录模块

1.样式1-17行

 <div class="cheader"><div style="width: 80%;margin: 0 auto;line-height: 50px;padding-top: 10px"><el-row><el-col:span="5"style="font-size: 20px;cursor: pointer;color: #00ae66;font-weight: bold;margin-left:40px">您身边的二手车交易专家</el-col><el-col :span="8"><el-inputsize="medium"placeholder="请输入内容"v-model="keywords"class="input"></el-input></el-col>
  • 这段代码是一个Vue.js模板,可能用于构建一个网页的头部(header)。它利用了Element UI组件库中的el-row、el-col和el-input组件来布局和提供交互功能。下面是对这段代码的解释:

  • <div class="cheader">: 这表示一个HTML div元素,包含了一个CSS类cheader,用于定义此区域的样式。

  • <div style="width: 80%;margin: 0 auto;line-height: 50px;padding-top: 10px">: 这是另一个div,设置了内联样式,包括宽度、自动居中、行高和上填充(padding-top)。这通常用于将内容居中并设置合适的行高。

- <el-row>: 这是Element UI中的行布局组件,用于组织行内的子组件。

- <el-col :span="5" ...>: 这是Element UI中的列布局组件,span属性定义了这列占据的宽度份额,取值范围为1到24。此列的样式设置包括:字体大小、鼠标指针样式、颜色、字体粗细和左侧外边距。

  • 文本: “您身边的二手车交易专家” 是这列中显示的文本。根据样式设置,这个文本以20px字体大小显示,带有绿色字样和粗体。
    - <el-col :span="8">: 这是另一个列,宽度份额为8,包含一个输入框。

- <el-input ...>: 这是Element UI中的输入组件,带有placeholder属性以提供占位提示信息,v-model="keywords"绑定了Vue组件中的keywords变量,这意味着输入框的内容会自动与keywords变量同步。class="input"为这个输入框添加了额外的CSS类。
这段代码总体上展示了一个网页头部的布局,其中包括一个标题和一个用于输入搜索关键词的文本输入框。

2.搜索框

<el-col :span="8"><el-inputsize="medium"placeholder="请输入内容"v-model="keywords"class="input"></el-input></el-col><el-button size="medium" style="height:100%; float:left; margin-top:8px; line-height:16px; margin-left:0px;" type="success" class="cbtn-bg" @click="searchcar()">我要搜车</el-button>

在这里插入图片描述

2.1数据定义

<script type="text/ecmascript-6">
import cfooter from "../components/cfooter";
import { login } from '../api/userMG'
import { setCookie, getCookie, delCookie } from '../utils/util'
import md5 from 'js-md5'
export default {components: {cfooter: cfooter},name: 'login',data() {return {keywords:"",//定义loading默认为falselogining: false,// 记住密码rememberpwd: false,ruleForm: {username: '',password: '',usertype: 2},rules: {username: [{ required: true, message: '请输入账号', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]}}},

这是Vue.js组件的一个脚本,名为login。
组件导入了cfooter组件,以及从…/api/userMG导入的login函数。还使用了设置、获取和删除cookie的辅助函数(setCookie, getCookie, delCookie),以及js-md5库用于密码哈希。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.生命周期

mounted () {this.$router.afterEach((to, from, next) => {window.scrollTo(0, 0)})
},// 创建完毕状态(里面是操作)created() {this.user = JSON.parse(localStorage.getItem('userdata'))this.getuserpwd()},

在这里插入图片描述

4.车辆搜索界面的代码

searchcar(params){ this.$router.push({path:'/login',query: {keywords:this.keywords}})},

在这里插入图片描述

5.登录模块的方法

 submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {this.logining = true// 注释this.ruleForm.usertype=2;login(this.ruleForm).then(res => {if (res.status==0) {if (this.rememberpwd) {//保存帐号到cookie,有效期7天setCookie('user', this.ruleForm.username, 7)//保存密码到cookie,有效期7天setCookie('pwd', this.ruleForm.password, 7)} else {delCookie('user')delCookie('pwd')}//如果请求成功就让他2秒跳转路由setTimeout(() => {this.logining = false// 缓存tokenlocalStorage.setItem('logintoken', res.data.token)// 缓存用户个人信息localStorage.setItem('userdata', JSON.stringify(res.data))this.$store.commit('login', 'true')this.$router.push({ path: '/login' })}, 650)this.$message({message: '登录成功',type: 'success'})} else {this.$message.error(res.msg)this.logining = falsereturn false}})} else {// 获取图形验证码this.getcode()this.$message.error('请输入用户名密码!')this.logining = falsereturn false}})},

在这里插入图片描述
在这里插入图片描述

6.请求的管理

在这里插入图片描述
写的关于用户发的请求的整理

7.登录后端代码

  • controller层
 @ApiOperation(value = "登录", notes = "", httpMethod = "POST", produces = MediaType.APPLICATION_JSON_VALUE)@PostMapping(value = "/login")public Result login(HttpSession session,@RequestBody LoginVo loginVo) throws Exception {Users user=usersService.login(loginVo);if (StringUtil.isEmpty(user)){return Result.createByErrorMessage("用户名或密码错误");}if (user.getStatus()==1){return Result.createByErrorMessage("您的账号已被禁用,请联系管理员");}user.setPassword(null);session.setAttribute("user",user);return Result.createBySuccess("登录成功",user);}

在这里插入图片描述

  • Service层
public Users login(LoginVo loginVo) throws GeneralSecurityException {LambdaQueryWrapper<Users> lambdaQueryWrapper = new LambdaQueryWrapper<Users>().eq(Users::getUsername,loginVo.getUsername()).eq(Users::getIdentity,loginVo.getUsertype());Users users=usersMapper.selectOne(lambdaQueryWrapper);if (StringUtil.isEmpty(users)){return null;}String pwd= MD5Util.MD5EncodeUtf8(loginVo.getPassword());System.err.println(pwd);if (!pwd.equals(users.getPassword())){return null;}return users;}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/7478.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

typescript 不是特别常用,容易忘的知识点

1、花括号对象通过方括号字符串形式取值 let obj { name: asd, age: 21, salary: 400, desc: "asdasd", op: [asd, as, qwe] };for (let i in obj) {console.log(obj[i as keyof typeof obj]); }let key name; console.log(obj[key as name]); console.log(obj[ke…

富格林:正确杜绝欺诈实现出金

富格林悉知&#xff0c;现货黄金一直以来都是投资者们追逐的热门品种之一。其安全性和避险特性吸引着广大投资者。但在现货黄金市场中要想实现出金其实并不简单&#xff0c;是需要我们通过一定的技巧和方法去正确杜绝欺诈套路。下面为了帮助广大投资者正确杜绝欺诈实现出金&…

九、redis过期策略

目录 一、设置redis键的过期时间 1、删除过期时间 2、查看过期时间 二、过期删除策略 1、定时删除&#xff1a; 2、惰性删除&#xff1a; 3、定期删除&#xff1a; 4、惰性删除和定期删除配合使用 三、 1、设置redis最大内存 2、设置内存的淘汰方式 总结&#xff1…

运维自动化之 ansible

目录 一 常见的自动化运维工具 &#xff08;一&#xff09;有哪些常见的 自动化运维工具 &#xff08;二&#xff09;为什么后面都变成用 ansible 二 ansible 基本介绍 1&#xff0c; ansible 是什么 2&#xff0c;ansible能干什么 3&#xff0c;ansible 工作原…

桌面文件删除了怎么恢复?4个靠谱方法分享!

“我平常工作的时候喜欢将文件直接保存在电脑桌面上&#xff0c;但是今天一打开电脑&#xff0c;突然发现我的文件都不见了&#xff0c;有什么恢复桌面文件的简单方法吗&#xff1f;希望大家可以推荐几个。” 很多用户在使用电脑时可能都习惯了把文件直接放在桌面上&#xff0c…

RESTful API 构建 Web 应用程序

RESTful API 是一种设计风格&#xff0c;用于创建和管理 Web 应用程序的 API。REST&#xff08;Representational State Transfer&#xff09;表示一组规范和约定&#xff0c;用于在网络上传输和操作数据。RESTful API 使用 HTTP 方法&#xff08;如 GET、POST、PUT、DELETE&am…

基于.NET WinForms 数据CURD功能的实现

使用开发工具 VS 2022 C#&#xff0c;数据库MS SQL SERVER 2019 &#xff0c;基于NET WinForms&#xff0c;实现数据记录的创建(Create)、更新(Update)、读取(Read)和删除(Delete)等功能。主要控件包括&#xff1a;DataGridView&#xff0c;SqlDataApater &#xff0c; DataTab…

瑞萨RH850 SPI的异步传输

一、SPI工作原理 SPI (Serial Peripheralinterface),顾名思义就是串行外围设备接口。SPI是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线&#xff0c;并且在芯片的管脚上只占用四根线&#xff0c;节约了芯片的管脚&#xff0c;同时为PCB的布局上节省空间&#xff0…

深度解读:Agent AI智能体如何重塑我们的现实和未来|TodayAI

​​​​​​​ 一、 引言 在当今时代&#xff0c;人工智能&#xff08;AI&#xff09;技术的快速发展正不断改变着我们的生活与工作方式。尤其是Agent AI智能体&#xff0c;作为AI技术中的一种重要形式&#xff0c;它们通过模拟人类智能行为来执行各种复杂任务&#xff0c;从…

如何从Mac上的清空垃圾箱中恢复已删除的文件?

Mac用户几乎每天都会删除文件。当您将文档删除到 Mac 垃圾箱时&#xff0c;该文件将被剪切到 Mac 垃圾箱中&#xff0c;并且可以轻松放回原处。但是&#xff0c;在某些情况下&#xff0c;您错误地删除了文档和文件&#xff0c;并在您意识到自己犯了一个大错误之前清空了垃圾箱。…

【Leetcode 42】 接雨水-单调栈解法

基础思路&#xff1a; 维持栈单调递减&#xff0c;一旦出现元素大于栈顶元素&#xff0c;就可以计算雨水量&#xff0c;同时填坑&#xff08;弹出栈顶元素&#xff09; 需要注意&#xff1a; 单调栈通常保存的是下标&#xff0c;用于计算距离 public static int trap2(int[…

TypeScript type类型别名

文章目录 1. 基本类型别名2. 对象类型别名3. 交叉类型&#xff08;Intersection Types&#xff09;4. 联合类型&#xff08;Union Types&#xff09;5. 映射类型&#xff08;Mapped Types&#xff09;6. 条件类型&#xff08;Conditional Types&#xff09;7. 索引访问类型&…

GRUB常见操作

1、内核启动参数——如何修改启动命令&#xff1f; 1、修改/etc/default/grub 这个文件是生成grub.cfg文件时候的基础参考文件&#xff0c;我们需要修改的内核启动参数就定义在GRUB_CMDLINE_LINUX。 # Set by curtin fast-path installer. GRUB_TIMEOUT5 GRUB_DEFAULT0 GRUB…

leetcode-缺失的第一个正整数-96

题目要求 思路 1.这里的题目要求刚好符合map和unordered_map 2.创建一个对应map把元素添加进去&#xff0c;用map.find(res)进行查找&#xff0c;如果存在返回指向该元素的迭代器&#xff0c;否则返回map::end()。 代码实现 class Solution { public:int minNumberDisappeare…

一文快速掌握高性能内存队列Disruptor

写在文章开头 Disruptor是英国外汇公司LMAX开源的一款高性能内存消息队列&#xff0c;理想情况下单线程可支撑600w的订单。所以本文会从使用以及设计的角度来探讨一下这款神级java消息队列。 Hi&#xff0c;我是 sharkChili &#xff0c;是个不断在硬核技术上作死的 java code…

【Java基础】JVM内存简单介绍

JVM把内存分为五块&#xff1a;栈、堆、方法区、本地方法区、寄存器当函数被调用时&#xff0c;函数内部的局部变量在栈中开辟内存&#xff0c;当局部变量的作用域结束时&#xff0c;立刻释放栈中所占据的内存。 栈 栈的特点&#xff1a;先进后出当函数被调用时&#xff0c;为…

unity制作app(5)--发送数据给数据库

这个之前做过&#xff0c;先不做照片的。下一节再做带照片的。 第一步 收集数据 1.先做一个AppModel结构体&#xff0c;这个结构体需要单做的。 using System; using System.Collections.Generic; using System.Linq; using System.Text; //using Assets.Model; public clas…

【Linux】System V 共享内存

文章目录 1. 共享内存示意图2. 共享内存数据结构3. 共享内存函数shmgetshmatshmdtshmctl 4. 实例代码测试共享内存5. 共享内存相关命令6. System V 消息队列&#xff08;了解&#xff09;7. System V 信号量&#xff08;了解&#xff09; 共享内存区是最快的 IPC 形式。一旦这样…

webpack4和webpack5区别3---缓存

webpack4缓存 使用打包的目的是提升项目启动速度&#xff0c;提升开发体验&#xff0c;webpack的打包方式就是把项目内全部文件都走一遍loader和babel处理&#xff0c;所以项目文件内容越来越多&#xff0c;启动的时间就越来越长&#xff0c;随随便便就 run 一分钟。 webpack4 …

力扣每日一题109:有序链表转换二叉搜索树

题目 中等 给定一个单链表的头节点 head &#xff0c;其中的元素 按升序排序 &#xff0c;将其转换为 平衡 二叉搜索树。 示例 1: 输入: head [-10,-3,0,5,9] 输出: [0,-3,9,-10,null,5] 解释: 一个可能的答案是[0&#xff0c;-3,9&#xff0c;-10,null,5]&#xff0c;它…