springboot+vue结合，后端学习前端（二）

水深无声 2023-09-24 20:10 42阅读 0赞

结果展示  
![在这里插入图片描述][3b9c0ba8bc62419b826971348d95c4c1.png]

#### 这里写目录标题 ####

*  前端美化Element
 *   *  下载Element
     *  引入 Element
     *  测试Element
     *  美化
     *  效果
 *  背景图片
 *  整体代码

接上文  
把后端连到数据库上  
身为后端，我就大概贴一贴  
![在这里插入图片描述][a2b2962b1298415690fde70546c5a043.png]  
![在这里插入图片描述][6a47023991a04884b3276c8dfcb0b303.png]

## 前端美化Element ##

### 下载Element ###

首先，先在你的项目中安装相关包  
![在这里插入图片描述][90668e7acb4f44fbb048fa8d51ac59d3.png]

### 引入 Element ###

![在这里插入图片描述][b2623b66780d4a8ca51e36fa5c62ad41.png]

### 测试Element ###

![在这里插入图片描述][f78bae85dcff4a64b6bc76a1cacd6103.png]  
修改为  
![在这里插入图片描述][c79874f70a7c4c32abb057bb78a27517.png]  
结果  
![在这里插入图片描述][514ce89637cc45c2a1f931b9061c50bc.png]  
去掉v  
![在这里插入图片描述][48ac0df5c8524f7187bc83cbe1cf2c81.png]  
![在这里插入图片描述][47b2a3af88da465bb4cbddc07c9f2fc0.png]

### 美化 ###

element.官网找组件: [https://element.eleme.cn/\#/zh-CN/component/form][https_element.eleme.cn_zh-CN_component_form]

![在这里插入图片描述][8f53b49192724203aab38a70a429a968.png]

### 效果 ###

![在这里插入图片描述][bdbf176e6f5d467ebaa980e2e3262305.png]

## 背景图片 ##

找个图片塞到assets里  
![在这里插入图片描述][34be2fbb4aa94df2bccf6803f31af624.png]  
![在这里插入图片描述][c19f7b1691f54364b573e507c518cc1a.png]  
![在这里插入图片描述][891bc67897ec454ab130f37b8331418a.png]

## 整体代码 ##

<template>
      <body id="poster">
      <el-form class="login-container" label-position="left"
               label-width="0px">
        <h3 class="login_title">系统登录</h3>
        <el-form-item>
          <el-input type="text" v-model="loginForm.username"
                    auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password" v-model="loginForm.password"
                    auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
        </el-form-item>
      </el-form>
      </body>
    </template>
    
    <script>
    export default {
        
      name: 'Login',
      data () {
        
        return {
        
          loginForm: {
        
            username: '',
            password: ''
          },
          responseResult: []
        }
      },
      // methods中login 发定义了登录按钮的点击方法,即向后端 /login 接口发送数据，获得成功的响应后，页面跳转到 /index。
      // 默认发送到http://localhost:8443/api/login
      methods: {
        
        login () {
        
          this.$axios
            .post('/login', {
        
              username: this.loginForm.username,
              password: this.loginForm.password
            })
            .then(successResponse => {
        
              if (successResponse.data.code === 200) {
        
                this.$router.replace({
        path: '/index'})
              }
            })
            .catch(failResponse => {
        
            })
        }
      }
    
    }
    </script>
    
    <style>
    #poster {
        
      background:url("../assets/eva.jpg") no-repeat;
      background-position: center;
      height: 100%;
      width: 100%;
      background-size: cover;
      position: fixed;
    }
    body{
        
      margin: 0px;
    }
    
    .login-container {
        
      border-radius: 15px;
      background-clip: padding-box;
      margin: 90px auto;
      width: 350px;
      padding: 35px 35px 15px 35px;
      background: #fff;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;
    }
    
    .login_title {
        
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }
    
    </style>

[3b9c0ba8bc62419b826971348d95c4c1.png]: https://img-blog.csdnimg.cn/3b9c0ba8bc62419b826971348d95c4c1.png
[a2b2962b1298415690fde70546c5a043.png]: https://img-blog.csdnimg.cn/a2b2962b1298415690fde70546c5a043.png
[6a47023991a04884b3276c8dfcb0b303.png]: https://img-blog.csdnimg.cn/6a47023991a04884b3276c8dfcb0b303.png
[90668e7acb4f44fbb048fa8d51ac59d3.png]: https://img-blog.csdnimg.cn/90668e7acb4f44fbb048fa8d51ac59d3.png
[b2623b66780d4a8ca51e36fa5c62ad41.png]: https://img-blog.csdnimg.cn/b2623b66780d4a8ca51e36fa5c62ad41.png
[f78bae85dcff4a64b6bc76a1cacd6103.png]: https://img-blog.csdnimg.cn/f78bae85dcff4a64b6bc76a1cacd6103.png
[c79874f70a7c4c32abb057bb78a27517.png]: https://img-blog.csdnimg.cn/c79874f70a7c4c32abb057bb78a27517.png
[514ce89637cc45c2a1f931b9061c50bc.png]: https://img-blog.csdnimg.cn/514ce89637cc45c2a1f931b9061c50bc.png
[48ac0df5c8524f7187bc83cbe1cf2c81.png]: https://img-blog.csdnimg.cn/48ac0df5c8524f7187bc83cbe1cf2c81.png
[47b2a3af88da465bb4cbddc07c9f2fc0.png]: https://img-blog.csdnimg.cn/47b2a3af88da465bb4cbddc07c9f2fc0.png
[https_element.eleme.cn_zh-CN_component_form]: https://element.eleme.cn/#/zh-CN/component/form
[8f53b49192724203aab38a70a429a968.png]: https://img-blog.csdnimg.cn/8f53b49192724203aab38a70a429a968.png
[bdbf176e6f5d467ebaa980e2e3262305.png]: https://img-blog.csdnimg.cn/bdbf176e6f5d467ebaa980e2e3262305.png
[34be2fbb4aa94df2bccf6803f31af624.png]: https://img-blog.csdnimg.cn/34be2fbb4aa94df2bccf6803f31af624.png
[c19f7b1691f54364b573e507c518cc1a.png]: https://img-blog.csdnimg.cn/c19f7b1691f54364b573e507c518cc1a.png
[891bc67897ec454ab130f37b8331418a.png]: https://img-blog.csdnimg.cn/891bc67897ec454ab130f37b8331418a.png