【SDU项目实训2019级】前端页面搭建、设计与展示，功能实现之登录页面

目录

1.前端总体项目的搭建

2.项目路由的设置：

3.页面设计

---

1.前端总体项目的搭建

在配置文件main.js里面导入相关包，插件等，例如axios插件等。

main.js:

import Vue from 'vue'
import ElementUI from 'element-ui'
import Meta from 'vue-meta'
import 'element-ui/lib/theme-chalk/index.css'
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios";
......

Vue.prototype.$http = axios
axios.defaults.baseURL = 'http://localhost:8088'
//设置baseUrl

导入相关的js和css框架和动态样式，方便之后使用，例如bootstrap等框架

2.项目路由的设置：

在router文件下的index.js中设置vue组件页面跳转的路径。

一级默认路由为Index.vue，每个页面都有这个组件的属性，展示在每个不同的页面上面，二级路由则是各种不同的功能性页面，如登录、注册、推荐、搜索等。

3.页面设计

①登录页面：

 因为登录功能可以点击切换为手机号登录，于是使用v-if对标签进行了简单的判断，如果点击了“切换为手机号登录”按钮，则不展示该标签，同理，可以切换回来：

<div class="col-lg-2 text-end display-none">
                      <a class="btn-1 causes-btn" @click="change()" v-model="loginValue" id="changeLogin" style="width: 550px;text-align: center">切换为手机号登录</a>
                    </div>

这是点击切换按钮的标签，然后样式设计：样式都是自己写的设计的。

.btn-1 {
  display: block;
  width: 155px;
  height: 60px;
  background-color: #FBD15B;
  text-align: center;
  line-height: 60px;
  border-radius: 5px;
  text-transform: capitalize;
  font-size: 18px;
  font-weight: 500;
  color: #232323 !important;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btn-1.causes-btn {
  background-color: transparent;
  border: 1px solid #232323;
  color: #232323 !important;
}

.btn-1.causes-btn:hover {
  border: 1px solid #00715D;
  color: #fff !important;
}

.btn-1:hover {
  background-color: #00715D;
  color: #fff !important;
}

对按钮设计一些样式，如鼠标移动到该按钮上，会产生一些动态效果，使用户交互感更好，页面更好看。 

v-model绑定的是loginValue属性，false代表的用户名密码登录，true代表的是手机账号登录，点击切换则改变loginValue的值，然后其他标签则通过loginValue的值来动态显示：

 切换的js函数：

change(){
      var _this = this;
      if(_this.loginValue == false){
        _this.loginValue = true;
        var butt = document.getElementById('changeLogin');
        butt.text = "切换为账号密码登录";
      }else{
        _this.loginValue = false;
        var butt = document.getElementById('changeLogin');
        butt.text = "切换为手机号登录";
      }
    },

其他的标签都类似，就展示一个吧

<div class="form-group" v-if="loginValue == false">
                      <label for="fullName" class="form-label">用户名</label>
                      <input type="text" class="form-control" id="fullName" placeholder="请输入你的用户名" v-model="user_name">
                      <label class="form-label"><a href="/Register">没有账号？点击立即注册</a></label>
                    </div>

然后是实现用户名密码登录的js函数：

这个实现起来比较的简单，相比较于验证码登录：

 首先先进行简单的判空，然后向后端传送请求，根据后端返回的数据进行判断处理。登录成功则页面跳转。

由于验证码登录注册的前端、后端代码都是我完成的，所以我打算另外一篇博客一起写。