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. 配置项目启动

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>

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

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

<style scoped>

</style>

路由文件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

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添加登录方法