项目小结

项目小结

项目

本次项目是模仿复制 https://swapi.co/ 网站。

项目需求

• 你需要想办法获取该网站所有资源与数据
• 给出 UI 帮助客户根据明星查看相关内容

项目要求

• 必须使用github 组织管理你的项目仓库
• 一个仓库是客户端项目，必须 使用富客户端js框架。建议框架包括（VUE.js,Angular,React）
• 一个仓库是服务端项目，你可以选择 RPC 风格、REST 风格、 GraphQL 构建服务
• 一个仓库是项目文档，用户可以获得项目简介和 API 说明

代码实现

在这次项目当中我和另一位组员负责前端的实现，包括UI界面和前端服务器的搭建，我主要负责了其中的用户部分。这次项目中前端使用Vue作为客户端服务器框架，后端使用Gol和BlotDB作为后端服务器框架。

(1) 用户的登录
用户的登录分为两种：注册用户登陆和非注册用户登录；

注册用户登录：客户端向服务端发送一个POST请求，若用户能够成功登陆，那么后端服务器将return一个token用于之后的身份验证操作。前端服务器会使用cookies保存此这个ID，然后跳转到搜索的界面。

非注册用户登录：客户端不会向服务端发送请求，而是前端服务器自己使用cookies保存一个名为“guest”的特殊值，用来区分于注册用户模式，直接跳过登陆操作，直接跳转到搜索的界面。

<template>
  <div id="login">
    <p>
      <router-link to="/Signup">SIGN UP</router-link>
    </p>
    <p>
      <input id="username" type="text" placeholder="username" v-model="usr"></input>
    </p>
    <p>
      <input id="password" type="password" placeholder="password" v-model="psw"></input>
    </p>
    <p>
      <button v-on:click="post">SIGN IN</button>
    </p>
    <p>
      <a href="#/Search" v-on:click="guessMode()">Unregistered login</a>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Signin',
  data: function() {
    return {
      usr: "",
      psw: ""
    };
  },
  methods: {
    post: function() {
      this.$http.post("http://localhost:8080/login", 
        {
          username:this.usr, 
          password:this.psw
        },
        {
          withCredentials:true
        }
        ).then(
        function(res) {
          if(res.ok) {
            var strContent = JSON.stringify(res.data);
            var jsonContent = JSON.parse(strContent);
            //console.log("token:",jsonContent["token"]);
            $cookies.set("LogInUser", jsonContent["token"]);
            this.$router.push({path:"/Search"});
          }
          else {
            alert("Error: Sign in error!");
          }
        },
        function() {
          alert("error");
        });
    },
    guessMode: function() {
      $cookies.set("LogInUser", "guest");
    }
  }
}
</script>

(2) 用户的注册
用户的注册功能和用户的登录功能相近，都是客户端向服务端发送一个POST请求，然后获得一个返回值。但是不同的地方在于对后端服务器返回值的请求的处理，用户的登录中这个返回值是用于之后的身份验证操作的。而在用户的注册当中每用户注册是不一定能够成功，一旦当新的用户注册失败时，后端的服务器会发送一个注册失败的消息到前端服务器，然后前端会通知用户注册失败。而当注册成功后，系统默认会进行用户的登录操作，然后跳转到搜索的界面。

<template>
  <div id="login">
    <p>
      <router-link to="/Signup">SIGN UP</router-link>
    </p>
    <p>
      <input id="username" type="text" placeholder="username" v-model="usr"></input>
    </p>
    <p>
      <input id="password" type="password" placeholder="password" v-model="psw"></input>
    </p>
    <p>
      <button v-on:click="post">SIGN IN</button>
    </p>
    <p>
      <a href="#/Search" v-on:click="guessMode()">Unregistered login</a>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Signin',
  data: function() {
    return {
      usr: "",
      psw: ""
    };
  },
  methods: {
    post: function() {
      this.$http.post("http://localhost:8080/login", 
        {
          username:this.usr, 
          password:this.psw
        },
        {
          withCredentials:true
        }
        ).then(
        function(res) {
          if(res.ok) {
            var strContent = JSON.stringify(res.data);
            var jsonContent = JSON.parse(strContent);
            //console.log("token:",jsonContent["token"]);
            $cookies.set("LogInUser", jsonContent["token"]);
            this.$router.push({path:"/Search"});
          }
          else {
            alert("Error: Sign in error!");
          }
        },
        function() {
          alert("error");
        });
    },
    guessMode: function() {
      $cookies.set("LogInUser", "guest");
    }
  }
}
</script>