uni-app 实现简单登录注册demo

preface： 用uni-app实现app前端界面，后端使用asp.net webapi控制器实现提供后台api服务。

一.所需掌握技术点：
1.前端
1.网络请求 uni.request
2.页面跳转，页面传参 uni.navigateTo
3.本地缓存 uni.setStorageSync, uni.getStorageSync

2.后端
1.Restful 接口设计规范
2.http协议常用方法
3.http 状态码(Http Status Code)
4.webapi 控制器设计

后台mssql数据库：

一.用户注册
前端代码：

methods: {btnReg(){uni.request({url: 'https://localhost:44358/api/users',method: 'POST',data: {UserName:this.account, Password:this.password, E_Mail:this.email},success: res => {uni.showToast({title:"注册成功",duration:2000,success() {setTimeout(function () {uni.navigateTo({url: '../login/login',});}, 1000);}});},fail: () => {},complete: () => {}});}}

后端代码：

  // POST: api/Users[ResponseType(typeof(User))]public async Task<IHttpActionResult> PostUser(User user){if (!ModelState.IsValid){return BadRequest(ModelState);}db.Users.Add(user);await db.SaveChangesAsync();return CreatedAtRoute("DefaultApi", new { id = user.Id }, user);}

二.用户登录
前端请求代码：

methods: {bindLogin() {const data = {account: this.account,password: this.password};console.log(data);uni.request({url: 'https://localhost:44358/api/users',method: 'GET',data: {username : this.account, password : this.password},success: res => {if(res.statusCode == 404){uni.showToast({icon: 'none',title: '密码或用户名错误',});return;}console.log(res);uni.showToast({icon: 'none',title: '登录成功',});uni.setStorage({key: 'username',data: this.account,success:function(){console.log("存储用户名到本地成功！");}})uni.reLaunch({url:'../main/main',})},fail: () => {},complete: () => {}});}}

后端接收请求方法：

  [ResponseType(typeof(User))]public async Task<IHttpActionResult> GetUser(string username, string password){User user = await db.Users.FirstOrDefaultAsync(c => c.UserName == username && c.Password == password);if (user == null)return NotFound();return Ok(user);}

运行过程中的问题：
1.调试遇到的跨域问题.
在web.config中删除 <system.webServer> 节点下的

  <handlers><remove name="ExtensionlessUrlHandler-Integrated-4.0" /><remove name="OPTIONSVerbHandler" /><remove name="TRACEVerbHandler" /><add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers>

删除后，再添加

  <httpProtocol><customHeaders><add name="Access-Control-Allow-Origin" value="*" /><add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" /><add name="Access-Control-Allow-Headers" value="Content-Type,Accept" /></customHeaders></httpProtocol>

到web.config 文件中。即可解决跨域请求 HTTP状态码403的问题。

uni-app 实现简单登录注册demo相关推荐

tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册
tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册引言 #在数据库,所谓表关系,只是人为认为的添加上去的表与表之间的关系,只是逻辑上认为的关系,实际上数据库里面的表之间 ...
java注册登录小程序,详解小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容一.首先我是在util.js中引入表单正则验证规则,给予l ...
小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容一.首先我是在util.js中引入表单正则验证规则,给予l ...
App常见的登录注册分析
京东app注册页 1.手机号注册国内App普通都会采用手机号注册的方式,一方面便于用户在手机端进行注册验证码相关的验证,另一方面企业也想收集用户的手机号码,便于后期的广告.活动相关的通知和发放 2. ...
Java小案例——方法实现简单登录注册
简单登录和注册一.登录 1. 内容介绍定义一个内置的账号和密码,写好账号输入.密码输入.随机验证码生成.验证码输入方法(3个输入方法没有使用重载)以及账号密码验证码比较方法.调用这些方法实现简单的 ...
uni.app小程序登录页持久化存储和退出后清除本地缓存
持久化存储在store里面的user.js(自己创建的)中 export default {state: {status: false, //登录的状态,获取数据中status是1,登录成功时状态为 ...
php简单论坛登录注册,php简单登录注册验证
列表页 //连接数据库 $db = new MySQLi('localhost','root','','z_1032'); !mysqli_connect_error() or die('连接失败') ...
微信小程序登录注册demo+java服务器(一)
一.开发平台和前期准备 1.前端工具:微信web开发者工具打web开发者工具,新建小程序项目,目录和名称自己随意填,AppID点击体验:小程序小程序打开后,点击右上方的详情,项目设置,勾选不校验x ...
node+express+mongDB实现简单登录注册
exprss学习参考资料 npm 与 package.json 快速入门 MongoDB的数据库和集合的基础操作安装依赖包 ` npm install express -save npm insta ...
php登录注册demo,PHP实现登录功能DEMO
PHP实现登录的原理是什么呢?就是利用Session实现的,用户访问网站,系统会自动在服务器生成一个Session文件,这个Session可以用来存储用户的登录信息.好了,这是基本储备,我们下面来实现 ...

uni-app 实现简单登录注册demo

uni-app 实现简单登录注册demo相关推荐

最新文章

热门文章