项目实训（二）登录页面

cyr___

已于 2024-06-16 18:40:12 修改

阅读量189

点赞数

分类专栏：项目实训文章标签： vue

于 2021-07-31 00:09:27 首次发布

本文链接：https://blog.csdn.net/cyr___/article/details/119221759

版权

项目实训专栏收录该内容

14 篇文章 0 订阅

订阅专栏

参照教程Vue+SpringBoot实战，教程写的很详细，很适合学习

1.Login.vue

在文件夹 components创建Vue Component文件 Login.vue
在这里插入图片描述

<template>
  <body id="poster1">
    <div>
      用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
      密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
      <button v-on:click="login">登录</button>
    </div>
  </body>
</template>

<script>

  export default {
    name: 'Login',
    data () {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      login () {
        this.$axios
          .post('/user', {
            username: this.loginForm.username,
            password: this.loginForm.password
  **加粗样式**        })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
            }
          })
          .catch(failResponse => {
          })
      }
    }
  }
</script>
<style>
.login-container {
  border-radius: 10px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 22%;
  height:200px;
  padding: 60px 35px 15px 35px;
  background: #fff;
  box-shadow: 0 0 4px #cac6c6;
}
#poster1 {
  background: url("../assets/background.jpg") no-repeat center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
body{
  margin: 0;
}
</style>

2.AppIndex.vue

在components中新建一个Home文件夹存放主页，在其中新建AppIndex.vue
先加上一个背景图

<template>
  <body  id="poster">
  </body>
</template>

<script>
  export default {
    name: 'AppIndex'
  }
</script>

<style>
#poster {
  background: url("../assets/background2.jpg") no-repeat center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: absolute;
}
</style>

3.设置反向代理

修改main.js
设置为后端地址

import Vue from 'vue'
import App from './App'
import router from './router'
// 设置反向代理
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'

Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4.配置页面路由

修改router\index.js

import Vue from 'vue'
import Router from 'vue-router'
// 导入Login和Index组件
import AppIndex from '../components/home/AppIndex'
import Login from '../components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/index',
      name: 'AppIndex',
      component: AppIndex
    }
  ]
})

5.配置跨域支持

修改config\index.js

proxyTable: {
  '/demo': {
    target: 'http://localhost:8443',
    changeOrigin: true,
    pathRewrite: {
      '^/demo': ''
    }
  }
},

http://localhost:8080/#/login访问
在这里插入图片描述

输入数据库中存好的用户名和密码点击登录页面跳转
在这里插入图片描述

cyr___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目实训（二）登录页面

login
复制链接

扫一扫

专栏目录