一、angular
1、总目录
2、代码
userregister.comment.html
<br><h2>新用户注册</h2>
<div class="people_list">
<dl>
<dt>用户名:
<input type="text" placeholder="由数字,字母,下划线组成的10位字符" [(ngModel)]="username">
</dt>
<dt>手机号:
<input type="text" placeholder="中国大陆手机号" [(ngModel)]="userphone" >
</dt>
<dt> 邮箱 :
<input type="text" placeholder="***@域名" [(ngModel)]="usermail" >
</dt>
<dt> 密码 :
<input type="text" [(ngModel)]="password">
</dt>
<dt>
验证码:<input type="text" [(ngModel)]="idcodenumber">
<a (click)="changeimg()">
<img [src]="image">
</a>
</dt>
<dt class="autologin">
<label>是否记住:</label>
<select id="remember" [(ngModel)]="choose">
<option value="0">不记住</option>
<option value="1">记住</option>
</select><br/>
</dt>
</dl>
<button (click)="userregister()"> 确认 </button>
<button>
<a [routerLink]="['/login']">__取消__ </a>
</button>
<br>
</div>
userregister.comment.scss
h2{
text-align: center;
}
.people_list{
width: 400px;
height: 300px;
//margin: 100px 800px 15px; //上左右下
margin: 70px auto;
padding: 20px;
border: 1px solid rgb(0, 102, 218);
dl{
height: 220px;
}
dt{
height: 36px;
line-height: 20px;
}
input{
width: 250px;
}
button{
width: 100px;
height: 30px;
margin: 12px 48px 14px 52px;
}
img{
// max-width:100px;
width: 70px;
height: 50px;
margin: 11px 36px 12px 250px;
}
}
.autologin{
margin-top: 20px;
}
userregister.comment.ts
import { Component, OnInit } from '@angular/core';
import { CommonService } from '../../services/common.service';
import { assertNotNull } from '@angular/compiler/src/output/output_ast';
import { CookieService } from 'ngx-cookie-service';
import {Router} from '@angular/router';
@Component({
selector: 'app-userregister',
templateUrl: './userregister.component.html',
styleUrls: ['./userregister.component.scss']
})
export class UserregisterComponent implements OnInit {
constructor(private router:Router,
public cookieService: CookieService,
public common:CommonService) { }
ngOnInit() { this.changeimg() }
public image:string="";
public idcodenumberlist:any=[ "7364","vw07" ]
public idcodenumber:any="";
public i:any=0;
changeimg(){
this.i=Math.floor(Math.random()*2);
this.image="assets/images/"+this.idcodenumberlist[this.i]+".jpg"
}
public username = "";
public userphone = "";
public usermail = "";
public password = "";
userregister(){
if ( this.idcodenumber!=this.idcodenumberlist[this.i] ){
alert("验证码错误")
this.changeimg()
return
}
this.common.register(this.username, this.userphone, this.usermail, this.password).then((Response:any)=>{
console.log(Response);
if(Response.status==0){
if(this.choose==1){
this.setusercookie(Response.id);
}
this.router.navigate(['/friends',Response.id]);
}else{
alert("注册失败:"+Response.msg)
}
})
}
public choose:any=0
setusercookie(id){
console.log("设置cookie")
var time: number = 24*60*60*1000;// cookie过期时间24个小时 24*60*60*1000
this.cookieService.set("userid", id, new Date(new Date().getTime() + time))
}
}
app.module.ts
comment.service.ts
参考上一条博《 ng8 go 图片&聊天》
3、运行效果
4、bug
本页面验证码功能为“障眼法”,尚未完善。
二、golang
1、总目录
(数据库为 postgresql)
2、代码
loginregister.go
initDB.go
handleDB.go
handleErr.go
main.go
参考博文 《 ng8 go 图片&聊天》
3,运行
go run main.go