04-开发简版登录页面

最新推荐文章于 2023-12-27 07:00:00 发布

luckybeggar

最新推荐文章于 2023-12-27 07:00:00 发布

阅读量487

点赞数

分类专栏： Vue项目开发实战-板上钉钉会议室预定系统文章标签： es6 vue.js 项目案例会议室预定系统

本文链接：https://blog.csdn.net/luckybeggar/article/details/103725948

版权

Vue项目开发实战-板上钉钉会议室预定系统专栏收录该内容

7 篇文章 2 订阅

订阅专栏

开发简版登录页面

Vue项目实战系列

主要内容：

简版登录开发过程
路由组件的使用

1 任务概述

我们要开发的最终效果如下：

登录页面：

在这里插入图片描述

点击登录按钮之后的主页：

在这里插入图片描述

2 简版登录页面开发

2.1 修改网站图标

在项目的public文件夹下的favicon.ico放的是网站图标，你可以使用一个32X32像素的图标文件覆盖成你自己的网站图标，或者使用图片，访问类似http://www.faviconico.org/favicon 这样的网站在线制作一个图标文件。

替换后的效果：

在这里插入图片描述

2.2 修改网站标题

修改public文件夹下的index.html页面中的title标签，修改成项目标题。

index.html源码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>板上钉钉会议室预定系统</title>
</head>

<body>
  <noscript>
    <strong>We're sorry but gdtrain doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

运行效果：

在这里插入图片描述

2.3 建立登录页面

我们的登录页面由Login.vue负责，由于是页面，我们将其放置在src\views文件夹下，开启VS code，在src>views文件夹下新建文件命名为Login.vue：

在这里插入图片描述

1）骨架代码：

打开Login.vue文件，输入vue然后按tab键会生成下面的骨架代码：

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

2）登录页面

在template标签中使用html编写登录页面，输入如下代码：

  <div>
    <h3>登录系统</h3>用户名：
    <input type="text" v-model="loginForm.userName" placeholder="请输入用户名" />
    <br />密码：
    <input type="password" v-model="loginForm.password" placeholder="请输入密码" />
    <br />
    <button @click="login">登录</button>
  </div>

代码说明：

template中只能有一个根元素
line 3：v-model，vue指令，将输入框中和loginForm.userName进行双向绑定
line7：@click为按钮绑定单击事件，单击后调用login函数。

3）登录脚本

在script标签中添加如下内容：

export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        userName: '',
        password: ''
      }
    }
  },
  methods: {
    login () {
      console.log(this.loginForm.userName)
      console.log(this.loginForm.password)
      this.$router.replace('/index')
    }

  }

}

代码说明：

line 1：export default，导出组件，向外暴露组件，方便在其他地方导入，比如使用import，路由中会使用Login页面
line3~ling10：data函数，通过return返回对象的拷贝，每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值
line11：定义方法，methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
line12：点击登录按钮时，绑定得login函数
line15：调用路由将当前url替换为index路径，需要在router\index.js中配置

登录样式

最后的style部分是页面美化，我们是一个简版的登录，先不做任何美化，因此此处不必写任何代码。

2.4 建立home页面

直接修改views目录下的示例文件Home.vue即可：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h3>欢迎使用板上钉钉会议室预定系统！</h3>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'home'

}
</script>

代码说明：

删掉了多余的代码，在templete中添加了h3标题。

2.5 通过路由连接各个页面

修改router目录下的index.js文件，定义页面组件的路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login'

Vue.use(VueRouter)

const routes = [
  {
    path: '/index',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/',
    name: 'login',
    component: Login

  }
]

const router = new VueRouter({
  routes
})

export default router

代码说明：

line3~4：导入登录和登录成功后的Home页面组件
line6：使用路由插件（应该在建立项目时，已经选择了使用路由插件，如果没有选取，需要事先使用install进行安装），更多参考： https://cn.vuejs.org/v2/api/#Vue-use
line 8~28：定义路由数组，每个路由对象对应：url路径，路由名字，路由对应组件

更多参考：https://router.vuejs.org/zh/installation.html
line23：我们这里直接访问根路径时会跳转到login页面

2.6 在页面上显示路由

路由要显示需要在App.vue上有<router-view />标签

此时的App.vue

<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>-->
    <router-view />
  </div>
</template>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

代码说明：

此处仅注释调home和about链接

2.7 运行效果

打开vs code终端窗口，View>Terminal：

在这里插入图片描述

或者使用快捷键ctrl+反引号

在终端输入命令：

npm run serve

终端显示如下：

Windows PowerShell
 DONE  Compiled successfully in 6613ms                                                                  9:55:48

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://10.62.6.93:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

此时可以按终端提示访问： http://localhost:8080/ 查看运行效果：

在这里插入图片描述

输入用户名和密码点击登录后会显示：

在这里插入图片描述

打开开发者工具：

在这里插入图片描述

查看控制台输出：

在这里插入图片描述

此时会看到控制台输出用户在登录页面输出的用户名和密码。

自此，简版登录页面开发完成。

3 总结

我们在开发简版登录页面的同时，学习了如何使用路由组件，我们后面可以发生ajax请求进行实际的登录开发。

luckybeggar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04-开发简版登录页面

开发简版登录页面Vue项目实战系列主要内容：简版登录开发过程路由组件的使用1 任务概述我们要开发的最终效果如下：登录页面：点击登录按钮之后的主页：2 简版登录页面开发2.1 修改网站图标在项目的public文件夹下的favicon.ico放的是网站图标，你可以使用一个32X32像素的图标文件覆盖成你自己的网站图标，或者使用图片，访问类似http://www.favic...
复制链接

扫一扫