springboot整合iview-vue实现简单的前后端分离项目登录demo（二）

结合上篇https://blog.csdn.net/xibei19921101/article/details/104717453

上篇是后端接口的代建，此处是前端项目的搭建

具体项目已上传git

https://github.com/qigangye/spring_vue_demo

1.使用异步请求需要axios，那么使用npm安装axios

npm install axios -g

2.确认安装好iview并在项目中引入iview以及iview样式

3.在项目中引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

4.绘制一个登录界面(此处可以去iview官网http://v1.iviewui.com/components/form去下载一个模板)

在src/components目录下新建一个vue文件

将iview的模板代码稍作修改(设置属性名的时候与后端请求接收的json属性名一致)

注意：一个vue文件中的template标签下只有一个主div

<template>
  <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.passWd" 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>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data(){
      return {
        user: {
          userName: '',
          passWd: ''
        },
        ruleInline: {
          userName: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          passWd: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码长度不能小于6', trigger: 'blur' }
          ]
        },
      }
    },
    methods:{
      login(){
        var user = this.user;
        if(user.userName === '' || user.passWd === ''){
          return false;
        }
        this.$axios.post('/api/userController/userLogin',user).then((response) => {
          var status = response.data.code;
          if(status === 200) {
            console.log(response)
            //路由跳转
            this.$router.push('/Helloworld');
          } else {
            alert(response.data);
          }
        }).catch((error) => {
          console.log(response);
        });
      }
    }
  }
</script>

5.将绘制好的页面注册到路由中，就是router目录下的index.js文件

6.在Login.vue文件下编写js脚本

7.最后关键的一步，解决路由跨域的问题，可以在前端解决，也可以在springboot中使用跨域解决，此处使用前端配置解决，在config目录下的index.js文件中加入几行代码

'/api': {
  target: 'http://localhost:8089',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}

若想使用springboot后端更改来解决跨域，参考https://www.bilibili.com/video/av85793766?p=1

8.工作完成，启动项目,老规矩(后端要启动)

npm install & npm run dev

然后浏览器地址栏输入localhost:8080，输入账号密码

点击登录

达到预期结果(response的日志打印，跳转HelloWorld页面)

查看后端的日志：

奈斯，一个简单的前后端分离的项目就此搭建结束！！！