ng8 go注册

一、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