un7.2:IDEA中实现登录功能

我们无论是做网页还是小程序，都需要使用登录功能，那么我们该如何实现呢？接下来我用前后端分离的方式来给大家分享一些我的经验，希望可以帮到大家。

老规矩，后端工具：IDEA，前端：HbuilderX，浏览器：火狐。

话不多说，开始！

首先，打开IDEA。

一、在IAuthUserService接口中声明一个login方法。

public AuthUser login(String phone,String passwd);

二、在AuthUserServiceImpl实现类中实现方法。

@Overridepublic AuthUser login(String phone, String passwd) {AuthUser user=null;AuthUser param=new AuthUser();param.setPhone(phone);param.setPasswd(passwd);List<AuthUser> list = authUserMapper.select(param);if (list!=null&&list.size()>0){user= list.get(0);}return user;}

三、在AuthUserController中完成数据处理，在这里，我把笔记也上传了，大家也可以借鉴。

/*** restfull 软件设计模式，如果使用此模式，上面的注解必须使用restcontroller。* 查：getmapping* 增：postmapping* 改：putmapping* 删：deletemapping* @param phone* @param passwd* @return*/@GetMapping("/login/{phone}/{passwd}")@ResponseBody@CrossOrigin(origins = "*")public HttpResult login(@PathVariable String phone,@PathVariable String passwd){AuthUser user=authUserService.login(phone,passwd);if (user!=null){return new HttpResult(200,null,user,0);}return new HttpResult(500,"用户名或密码错误,请重新登录",null,0);}

四、打开火狐浏览器输入网址进行测试。

显示如此数据的时候，代表已经实现了此功能，不过这还没结束，接下来，我们需要在前端页面进行编写。

一、打开HbuilderX。

1、进入cms/pages/user中新建一个login.vue。

2、在template中写一写样式。

<template><view><!-- 导航栏 --><uni-nav-bar backgroundColor="#d3233b" color="#ffffff" title="律行法务"></uni-nav-bar><view style="width: 300rpx;margin-top: 30rpx;margin-left: auto;margin-right: auto;"><uni-forms><input style="border: 1px solid #000000;border-radius: 5rpx;height: 50rpx;line-height: 30rpx;margin-bottom: 15rpx;padding: 10rpx;" type="number" v-model="FormData.phone" placeholder="请输入手机号"/><input style="border: 1px solid #000000;border-radius: 5rpx;height: 50rpx;line-height: 30rpx;margin-bottom: 15rpx;padding: 10rpx;" type="text" password="true" v-model="FormData.pwd" placeholder="请输入密码"/><button size="mini" type="primary" @click="dologin">登录</button></uni-forms></view><!--弹出警告对话框--><uni-popup ref="popup" type="dialog"><uni-popup-dialog mode="base" title="通知" content="登录失败" :beforeClose="true" @close="close" @confirm="confirm"></uni-popup-dialog></uni-popup></view>
</template>

3、在script中写入需要的数据和函数，写的时候注意位置，函数后面要加“，”，切勿忘记！

<script>export default {data() {return {//表单数据FormData:{phone:null,  //手机号pwd:null  //密码}}},methods: {//点击登录触发dologin(){uni.request({url: 'http://localhost:8082/authuser/login/'+this.FormData.phone+'/'+this.FormData.pwd+'', //仅为示例，并非真实接口地址。method: "GET",success: (res) => {console.log(res.data);if(res.data.code == 200){//登录成功//console.log("登录成功,跳转到主页");//保存用户信息try {uni.setStorageSync('user_info', res.data.data);} catch (e) {// errorconsole.log(e)}//页面跳转uni.redirectTo({url: '../main/main'});}else{//登录失败this.open();}}});},//点击对话框确认按钮执行的操作confirm(){this.$refs.popup.close();},//点击对话框关闭按钮执行的操作close() {this.$refs.popup.close();},//弹出警告对话框open() {this.$refs.popup.open();}}}
</script>

4、在pages中新建一个页面，注意：是页面。不是.vue文件，新建页面的时候Vue文件会自动生成，不需要更改。

<template><view>欢迎使用律行法务后台管理系统！</view>
</template><script>export default {data() {return {}},//当页面显示完成时执行onShow() {//读取缓存中显示的页面信息var value = uni.getStorageSync('user_info');console.log(value)},methods: {}}
</script><style></style>

二、测试。

1、在mian.vue页面，点击运行，运行到火狐浏览器，展示如下信息（需要输入正确的用户名和密码）才可以登录。

2、登录成功后会显示如下界面，数据也会获取到。

3、我添加了一个样式，如果用户名和密码错误则会显示如下界面，重点是下面的控制台，已经显示用户名和密码错误了。

如此，我们这便实现了前后端分离的登录功能了！

un7.2:IDEA中实现登录功能相关推荐

PHP语言实现网站登录功能
使用PHP链接MySQL数据库进行登录验证. 创建数据表首先,在数据库中创建登录功能所需要用到的数据表.该表应该包含用户名.密码.登录次数.最近一次登录时间.最近一次登录IP等字段.创建代码如下: ...
springboot实现简单的注册登录功能
初始化项目通过官网初始化SpringBoot项目,包结构如图所示: 添加pom依赖 <dependency><groupId&g ...
okhttp post提交参数完成登录功能保存返回的token
作为一名android开发者,通过博客记录自己成长的道路,以下是小白在开发实践中的登录功能实现的一些步骤及功能,希望对做这一部分功能的伙伴有一定的帮助 1.登录的界面布局 2.登录的url.sp保存t ...
SpringBoot项目实战杂货铺登录功能（二）
还在为毕业设计犯愁?这里有现成的系统开源免费提供给你. 今天带来的是整个系统中的登录功能.(至于前端,emm-等后端写完了再把前端改好看点吧
python调用qq互联_Django项目中实现使用qq第三方登录功能
使用qq登录的前提是已经在qq互联官网创建网站应用并获取到QQ互联中网站应用的APP ID和APP KEY 1,建路由 # qq登录 path('loginQq/',qq.loginQq,name=' ...
jsp中未登录用户也可以浏览页面的功能实现代码
jsp中未登录用户也可以浏览页面的功能实现代码 <%! int count=0; %> < ...
‘仿微信发表朋友圈’项目中登录功能的业务逻辑
登录功能手机号验证码都通过后端验证后返回用户数据登陆成功成功后调用store中的setUser方法 store中的setUser方法将后端返回的用户信息存储到localStorage中同 ...
php第三方登录代码,thinkPHP5项目中实现QQ第三方登录功能
本文实例讲述了thinkPHP5项目中实现QQ第三方登录功能.分享给大家供大家参考,具体如下: 最近用thinkPHP 5框架做了一个婚纱店的项目,在开发过程中需要用到第三方登录,腾讯官方给的案例是几 ...
python flask框架下登录注册界面_Python的Flask框架中实现简单的登录功能的教程
Python 的 Flask 框架中实现简单的登录功能的教程 , 登录是各个 web 框架中的基础功能 , 需要的朋友可以参考下回顾在前面的系列章节中, 我们创建了一个数据库并且学着用用户和邮件来 ...

un7.2:IDEA中实现登录功能

un7.2:IDEA中实现登录功能相关推荐

最新文章

热门文章