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

落日映苍穹つ 2023-02-17 13:24 9阅读 0赞

**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 控制器设计  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NzIwMA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NzIwMA_size_16_color_FFFFFF_t_70 1]  
后台mssql数据库：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NzIwMA_size_16_color_FFFFFF_t_70 2]

**一.用户注册**  
**前端代码：**

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> 节点下的

删除后，再添加

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NzIwMA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200614110052974.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NzIwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NzIwMA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200614110814208.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NzIwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NzIwMA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200614110904254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2NzIwMA==,size_16,color_FFFFFF,t_70