elementui登录页面_Springboot+Vue从零开始实现登录

一直想动手写个项目，但是前端太差，看了看vue的教学视频学习了一下， 开始实战

Vue 开发

// 安装与卸载vue-clinpm install -g @vue/clinpm uninstall -g @vue/cli

项目创建

// 打开cmdvue create whf-blogcd whf_blogvue add element (添加 elementui)// ✔  Successfully invoked generator for plugin: vue-cli-plugin-element  安装成功npm install axios (安装 axios)//√ Installed 1 packages//√ Linked 3 latest versions//√ Run 0 scripts//√ All packages installed (4 packages installed from npm registry, used 537ms(network 529ms), speed 28.23kB/s, json 4(14.93kB), tarball 0B)npm install vuex --save(安装 Vuex)//√ Installed 1 packages//√ Linked 1 latest versions//√ Run 0 scripts//√ All packages installed (2 packages installed from npm registry, used 1s(network 1s), speed 23.57kB/s, json 2(32.41kB), tarball 0B)npm install vue-router (安装 路由)//√ Installed 1 packages//√ Linked 0 latest versions//√ Run 0 scripts//√ All packages installed (1 packages installed from npm registry, used 431ms(network 426ms), speed 21.64kB/s, json 1(9.22kB), tarball 0B)

这里就选择默认即可

安装就按部就班来，一般都没问题

目录结构

// 添加目录结构service (网络请求)router (路由配置)store (Vuex 状态管理)utils (工具)views (视图功能)

运行项目

package.json 右键可以查看到 show npm

点击直接运行

成功页面

View 层

login.vue

用户名:
密码： 登录

路由配置

import Vue from 'vue' //引入 Vueimport VueRouter from 'vue-router' //引入 Vue 路由import Login from '../views/login/login'Vue.use(VueRouter); //安装插件export const constantRouterMap = [    //配置默认的路径，默认显示登录页    {        path: '/login',        name: 'Login',        component: Login    },    {        path: '/',        name: 'Login',        component: Login    }]export default new VueRouter({    mode: 'history', //后端支持可开    scrollBehavior: () => ({y: 0}),    routes: constantRouterMap //指定路由列表})

main.js添加路由配置和axios

import Vue from 'vue' //引入 Vueimport VueRouter from 'vue-router' //引入 Vue 路由import Login from '../views/login/login'Vue.use(VueRouter); //安装插件export const constantRouterMap = [    //配置默认的路径，默认显示登录页    {        path: '/login',        name: 'Login',        component: Login    },    {        path: '/',        name: 'Login',        component: Login    }]export default new VueRouter({    mode: 'history', //后端支持可开    scrollBehavior: () => ({y: 0}),    routes: constantRouterMap //指定路由列表})

添加vue.config.js

module.exports = {    devServer:{        port: 4000,        proxy:{            '/api':{                target:'http://localhost:8080/api',                changeOrigin:true,                ws:true,                pathRewrite:{                    '^/api':''                }            }        }    }}

创建springboot项目

User类

package com.whf.blog.bean;import lombok.Data;@Datapublic class User {    private int userId;    private String  username;    private String password;}

package com.whf.blog.resp;import lombok.Data;@Datapublic class Result {    private int code;    private String message;}

package com.whf.blog.controller;import com.whf.blog.bean.User;import com.whf.blog.resp.Result;import org.springframework.web.bind.annotation.*;@RestControllerpublic class LoginController {    @RequestMapping(value = "/login",method = RequestMethod.POST)    @ResponseBody    public Result login(@RequestBody User user){        Result result = new Result();        if(user.getUsername().equals("admin") && user.getPassword().equals("admin")){            result.setCode(200);        }else {            result.setCode(400);        }        return result;    }}

package com.whf.blog;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.cors.CorsConfiguration;import org.springframework.web.cors.UrlBasedCorsConfigurationSource;import org.springframework.web.filter.CorsFilter;/** * @author suntongxin * Create on 2017年7月6日下午8:05:19 * All right reserved */@Configurationpublic class CorsConfig {    private CorsConfiguration buildConfig() {        CorsConfiguration corsConfiguration = new CorsConfiguration();        corsConfiguration.addAllowedOrigin("*"); //允许任何域名        corsConfiguration.addAllowedHeader("*"); //允许任何头        corsConfiguration.addAllowedMethod("*"); //允许任何方法        return corsConfiguration;    }    @Bean    public CorsFilter corsFilter() {        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();        source.registerCorsConfiguration("/**", buildConfig()); //注册        return new CorsFilter(source);    }}

主要解决跨域问题

现在前后端就算打得通了登录。