项目地址页随机堆一个页面。我在这里使用了Ant.d。有表单验证，验证码也可以填入输入框。与用户名和密码无关。可以说前端的重心在验证码部分的实现上：在非登录状态下请求一个session接口，并从后端返回一个唯一的`sessionid`，把这个`sessionid`后面请求验证码的时候放入请求头，后端可以将`sessionid`和验证码配对存入redis或者db中。后端验证码部分使用svg-captcha实现，具体实现见后端部分。请求接口后，返回给前端的svg图形是一个html标签。如果只是简单显示验证码，接口可以直接放在`![]()
`标签的src中，但是这种方法不能改变请求头的内容，不能把`sessionid`放进去，所以通过以下步骤来实现：1.将session接口返回的sessionid存入storage；getSessionId(){this.$axios.get('session').then((response)=>{if(response.data===200){return}localStorage.setItem("sessionid",response.data)})}2。将sessionid添加到请求中;},function(error){//处理请求错误returnPromise.reject(error);});3、将img标签中的src指向变量（这里命名为captchaImage），在页面获取到sessionid后或者点击验证码时调用如下方法，将获取到的svg转成base64，给captchaImage。getCaptcha(event){this.$axios.get('/getCaptcha').then((response)=>{leta=window.btoa(unescape(encodeURIComponent(response.data)))this.captchaImage='data:image/svg+xml;base64,'+a})}，这样每次点击验证码图片，都会获取一个新的验证码显示在页面上。接下来将用户名、密码、验证码发送到后台，这里不再赘述。前端部分到此结束。后台部分用nodejs搭建，会用《Vue+nodejs实现一个登录系统(后端篇）》来写，敬请期待。
