springboot+vue前后端分离项目(二)vue-cli4 构建vue项目-登录

作者:神秘网友 发布时间:2020-10-25 18:14:48

springboot+vue前后端分离项目(二)vue-cli4 构建vue项目-登录

springboot+vue前后端分离项目(二)vue-cli4 构建vue项目-登录页制作

vue-cli4 构建vue项目-登录页制作

  • 1. vue项目创建
  • 2. 配置项目启动
    • 2.1 进入配置
    • 2.2 创建npm启动
    • 2.3 编辑启动项
    • 2.4 点击启动按钮启动项目
  • 3. 安装Element
  • 4. 改造项目
    • 4.1 修改App.vue
    • 4.2 创建登录页
    • 4.3 修改
  • 5. 登录页面开发

1. vue项目创建

2. 配置项目启动

springboot+vue前后端分离项目(二)vue-cli4 构建vue项目-登录

springboot+vue前后端分离项目(二)vue-cli4 构建vue项目-登录

springboot+vue前后端分离项目(二)vue-cli4 构建vue项目-登录

springboot+vue前后端分离项目(二)vue-cli4 构建vue项目-登录

3. 安装Element

https://element.eleme.cn/#/zh-CN/component/installation

npm i element-ui -S

在 main.js 中写入以下内容:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

4. 改造项目

App.vue只保留如图,并删除箭头指向的文件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

springboot+vue前后端分离项目(二)vue-cli4 构建vue项目-登录

<template>
    <div>
        Login
    </div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped>

</style>

springboot+vue前后端分离项目(二)vue-cli4 构建vue项目-登录

路由文件index.js,启动项目

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

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router

springboot+vue前后端分离项目(二)vue-cli4 构建vue项目-登录

5. 登录页面开发

在4.2创建的Login.vue开发登录页,代码如下

<template>
    <div>
        <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
            <H3 class="loginTitle">系统登录</H3>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" auto-complete="off"
                          placeholder="请输入用户名">
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" auto-complete="off"
                          placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-checkbox class="loginRemember" v-model="checked"></el-checkbox>
            <el-button type="primary" style="width: 100%;" @click="submitLogin">登录</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    username: 'admin',
                    password: '123'
                },
                checked: true,
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}]
                }
            }
        },
        methods: {
            submitLogin() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        this.$message.error('请输入用户名或者密码!');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle {
        margin: 15px auto 20px auto;
        text-align: center;
        color: #505458;
    }

    .loginRemember {
        text-align: left;
        margin: 0 0 15px 0;
    }
</style>

springboot+vue前后端分离项目(二)vue-cli4 构建vue项目-登录相关教程

  1. springboot+vue前后端分离项目(三)后端项目搭建及配置

    springboot+vue前后端分离项目(三)后端项目搭建及配置 springboot+vue前后端分离项目(三)后端项目搭建及配置 1. 项目创建 2. 配置pom文件 3. 配置application.yml文件 4. 配置启动类 1. 项目创建 2. 配置pom文件 添加依赖 dependency groupIdcom.alibaba/

  2. 批量导入功能java实现(从前端到后端)

    批量导入功能java实现(从前端到后端) 上传文件获取后台返回数据功能分两种方法实现 1、通过FormData获取文件提交表单,不支持ie8、ie9,只支持ie11及其谷歌、火狐等浏览器。 function uploa(){ var fileDir = $(#file).val(); var suffix = fileDir.substr(fi

  3. springboot+vue前后端分离项目(四)登录接口开发

    springboot+vue前后端分离项目(四)登录接口开发 springboot+vue前后端分离项目(四)登录接口开发 1. 利用idea逆向工程插件生成hr表相关代码 2. Hr实体类开发 3. HrServiceImpl实现类开发 4. HrDao.xml开发 5. SecurityConfig配置类开发 6. 完善登录操作 7.

  4. 分离硬件和代码、稳定 API,PyTorch Lightning 1.0.0 版本正式发

    分离硬件和代码、稳定 API,PyTorch Lightning 1.0.0 版本正式发布 点击上方“ AI遇见机器学习 ”,选择“星标”公众号 重磅干货,第一时间送达 来自:机器之心 还记得那个看起来像 Keras 的轻量版 PyTorch 框架 Lightning 吗?它终于出了 1.0.0 版本,并增添

  5. 前后端分离项目,通过配置解决跨域问题

    前后端分离项目,通过配置解决跨域问题 跨域资源共享(CORS)是前后端分离项目很常见的问题,本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解决该问题。 CORS全称Cross-Origin Resource Sharing,意为跨域资源共享。当一个资源去访问另一个不同域

  6. 前后端分离历史

    前后端分离历史 文章目录 前后端分离 前后端分离的历史 前后端合并 前后端耦合 前后端“分离” 大厂的方案 前后端分离的理想方式 前后端分离的好处 前后端分离的挑战 总结 前端历史 前端开发的历史和趋势 什么是前端 前后端不分的时代 后端 MVC 的开发模式 前

  7. 【手摸手,带你搭建前后端分离商城系统】03 整合Spring Security

    【手摸手,带你搭建前后端分离商城系统】03 整合Spring Security token 实现方案,完成主业务登录... 上节里面,我们已经将基本的前端 VUE + Element UI 整合到了一起。并且通过 axios 发送请求到后端API。 解决跨域问题后、成功从后端获取到数据。 本小结,

  8. springboot+vue前后端分离项目(五)前后端接口对接

    springboot+vue前后端分离项目(五)前后端接口对接 springboot+vue前后端分离项目(五)前后端接口对接 1. axios安装 2. 自定义登录返回消息及请求方法 2.1 自定义响应拦截器 2.2 自定义请求方法 2.2.1 封装请求 2.2.2 自定义插件 3. Login.vue添加登录方法