【SpringBoot+Vue】003-创建Login组件、编写Login组件的页面

心已赠人 2023-10-05 11:53 21阅读 0赞

**目录**

一、创建Login组件

1、创建Login.vue页面

2、在index.js中引入login.vue，并为其配置路由

3、在App.vue页面添加路由标签

4、访问http://localhost:8080/\#/

二、编写Login组件的页面

1、html代码

2、其他文件

自定义的CSS文件（global.css）：

在mian.js中引入自定义的CSS文件和图标（见关于引入图标的说明）；

3、关于引入图标的说明

图标来源：

图标的使用：

4、其他说明

5、页面渲染结果

--------------------

# 一、创建Login组件 #

## 1、创建Login.vue页面 ##

<template>
        <div>
            Login 页面！
        </div>
    </template>
    <script>
    export default {
        
    }
    </script>
    <style lang = "less" scoped>
    
    </style>

## 2、在index.js中引入login.vue，并为其配置路由 ##

import Vue from 'vue'
    import VueRouter from 'vue-router'
    //引入login组件
    import Login from '../components/Login.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path:"/",
        //将首页“/”重定向到“/login”
        redirect:"/login"
      },{
        //将上面引入的Login与“/login”访问路径进行绑定
        path:"/login",
        component:Login
      }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router

## 3、在App.vue页面添加路由标签 ##

## 4、访问[http://localhost:8080/\#/][http_localhost_8080] ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

# 二、编写Login组件的页面 #

## 1、html代码 ##

<template>
    	<div class="login_container">
    		
    		<div class="login_box">
    			
    			<div class="acator_box">
    				<img src="../assets/logo.png" />
    			</div>
    			
    			<el-form ref="loginFormRef" :model="loginForm" class="login_form" label-width="0">
    				
    				<el-form-item>
    					<el-input v-model="loginForm.username" prefix-icon="iconfont icon-denglu">
    					</el-input>
    				</el-form-item>
    				
    				<el-form-item>
    					<el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima">
    					</el-input>
    				</el-form-item>
    				
    				<el-form-item class="btns">
    					<el-button type="primary">提交</el-button>
    					<el-button type="info">重置</el-button>
    				</el-form-item>
    			</el-form>
    		</div>
    	</div>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    				loginForm: {
    					username: "username",
    					password: "password",
    				},
    			};
    		},
    	};
    </script>
    <style lang="less" scoped>
    	// 根节点样式
    	.login_container {
    		background-color: #2b4b6b;
    		height: 100%;
    	}
    
    	.login_box {
    		width: 450px;
    		height: 300px;
    		background-color: #ffffff;
    		border-radius: 3px;
    		position: absolute;
    		left: 50%;
    		top: 50%;
    		transform: translate(-50%, -50%);
    
    		.acator_box {
    			width: 130px;
    			height: 130px;
    			border: 1px solid #eeeeee;
    			border-radius: 50%;
    			padding: 10px;
    			box-shadow: 0 0 10px #dddddd;
    			position: absolute;
    			left: 50%;
    			transform: translate(-50%, -50%);
    			background-color: #00eeee;
    
    			img {
    				width: 100%;
    				height: 100%;
    				border-radius: 50%;
    				background-color: #eeeeee;
    
    			}
    		}
    	}
    
    	.btns {
    		display: flex;
    		justify-content: flex-end;
    	}
    
    	.login_form {
    		position: absolute;
    		bottom: 0%;
    		width: 100%;
    		padding: 0 10px;
    		box-sizing: border-box;
    	}
    </style>

## 2、其他文件 ##

### 自定义的CSS文件（global.css）： ###

/* 全局样式 */
    html,body,#app{
        height: 100%;
        margin: 0;
        padding: 0;
    }

### 在mian.js中引入自定义的CSS文件和图标（见关于引入图标的说明）； ###

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import './plugins/element.js'
    //导入全局样式
    import './assets/css/global.css'
    //引入图标
    import './assets/font/iconfont.css'
    
    Vue.config.productionTip = false
    
    new Vue({
    	router,
    	render: h => h(App)
    }).$mount('#app')

## 3、关于引入图标的说明 ##

### 图标来源： ###

iconfont阿里巴巴矢量图标库；

下载之后直接复制到assets文件夹引入即可；

### 图标的使用： ###

详见html代码；

## 4、其他说明 ##

当写到CSS的时候，真的发现自己的CSS知识不足，仅仅知道一点常规的东西，UP主写的CSS很多我都不记得了，看来自己的路还有很长！加油！

我发现VS Code的代码提示效果并不是太好，也许是我使用得不熟练吧，我换成了国产的HBuilder X；

HBuilder X官网：[https://www.dcloud.io/][https_www.dcloud.io]

## 5、页面渲染结果 ##

还是有点意思的！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

[http_localhost_8080]: http://localhost:8080/#/login
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201018134119470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[https_www.dcloud.io]: https://www.dcloud.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020101814032240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70