springboot+vue+iview整合登录demo

使用工具​​​​​：IDEA、Visual Studio Code

一、前端

1、安装node.js

2、安装vue

3、使用webpack创建vue项目

有需要的话安装淘宝镜像，为了加快安装所需要的依赖速度，npm是国外服务器  cmd中使用命令行

npm install -g cnpm --registry= https://registry.npm.taobao.org

安装webpack

npm install webpack -g	

安装vue-cli脚手架

npm install vue-cli -g

cd到目录路径（该目录是自己选择的放置vue项目的目录） 

如果几经安装git的，自己选择一个目录放置vue项目，在相关目录右键选择Git Bash Here

vue init webpack 项目名

接下的操作中没有选择选项的直接按enter，选择的输入y，建议在

? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则， 选择n

cd项目名（注意）

cd 项目名

添加项目依赖

npm install

运行测试

npm run dev

(若是使用了淘宝镜像，将上面的命令中的 npm 改为cnpm)

4、使用Visual Studio Code 打开vue项目  File>open>folder

使用Visual Studio Code自己安装一些vue相关插件

对于开发环境中的跨域问题使用的是axios处理，打开Visual Studio Code的命令行窗口，快捷键Ctrl + ~,安装axios

npm install axios

项目目录结构  

 footer.vue代码

<template>
    <div>
        <span>
            这是尾部
        </span>
    </div>
</template>

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

<style lang="">
    
</style>

 header.vue代码

<template>
    <div>
        <span>
            这是头部
        </span>
    </div>
</template>

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

<style lang="">
    
</style>

login.vue代码

<!-- 这是登录页 -->
<template>
    <div>
        <header></header>
        <div>这是登录页</div>
        <template>
            <div>
                <Form ref="user" :model="user" :rules="ruleInline" inline>
                    <div>
                        <FormItem prop="username">
                            <Input type="text" v-model="user.username" placeholder="请输入用户名">
                                <Icon type="ios-person-outline" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem prop="password">
                            <Input type="password" v-model="user.password" placeholder="请输入密码">
                                <Icon type="ios-lock-outline" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                    </div>
                    <div>
                        <FormItem>
                            <Button type="primary" @click="login()">登录</Button>
                        </FormItem>
                    </div>
                </Form>
            </div>
        </template>   
        <footer></footer>  
    </div>
</template>

<script>
    import Header from '../common/header'
    import Footer from '../common/footer'
    export default {
        components:{
            Header,
            Footer
        },
        data(){
            return {
                user: {
                    username: '',
                    password: ''
                },
                ruleInline: {
                    username: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6', trigger: 'blur' }
                    ]
                },
            }
        },
        methods:{
            login(){
                var user = this.user;
                if(user.username === '' || user.password === ''){
                    return false;
                }
                this.$axios.post('/login',this.user).then((response) => {
                        var status = response.data;
                        if(status === 'success') {
                            //路由跳转
                            this.$router.push('/');
                        } else {
                            alert(response.data);
                        }
                        console.log(response);
                    }).catch((error) => {
                        console.log(response);
                });
            }
        }
    }
</script>

<style lang="">
    
</style>

index.vue代码

<template>
    <div>
        <header></header>
        <div>
            <span>这是首页拉</span>
        </div>
        <footer></footer>  
    </div>
</template>

<script>
    import Header from '../common/header'
    import Footer from '../common/footer'
    export default {
        components:{
            Header,
            Footer
        }
    }
</script>

<style lang="">
    
</style>

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/pages/index'
import Login from '@/components/pages/login'
Vue.use(Router)

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

 src/main.js

需要将 axios.defaults.baseURL的值的端口更改为自己后端的端口号

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview' // 引入iview依赖
import 'iview/dist/styles/iview.css' // 引入iview css样式
import axios from 'axios'
// import qs from 'qs'// 实现CORS 解决跨域

Vue.use(iView);

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
axios.defaults.baseURL = 'http://localhost:2234'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
// Vue.prototype.$qs = qs

Vue.config.productionTip = false

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

config/index.js 在dev代码块proxyTable中添加（端口号改为后端自己设置的）

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 路由接口代理 解决跨域问题
    proxyTable: {
      '/api': {
        target: 'http://localhost:2234',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
      }
    },

二、后端

项目结构

 User.java

public class User {

    private String username;
    private String password;

    getter/setter
}

UserController.java

@RestController
public class UserController {

    @CrossOrigin
    @PostMapping(path = "/login")
    public String login(@RequestBody User user){
        System.out.println(user.getUsername() + " + " + user.getPassword());
        if("123".equals(user.getUsername()) && "123456".equals(user.getPassword())){
            return "success";
        }
        return "fail";
    }
}

application.properties

server.port=2234

三、效果图