springboot+vue 登錄頁面（三）

真是開始前端工作：

准備工作：https://www.cnblogs.com/zongguitao/p/11905343.html

請看完這個文章后再來：https://www.jianshu.com/p/96143f0917aa

1.創建對應的文件夾，在config/index.js 中設置基本路徑及跨域配置

 

 

 2.router/index.js   負責頁面進行路由轉發

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Main from '../views/Main'

Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/Main',
      name: 'Main',
      component: Main
    }
  ]
})

3.創建views/Login.vue 頁面，使用axios.post 方式進行發送表單數據

<template>
  <el-form :model="dataForm" :rules="rules">
    <el-form-item label="賬號" prop="username">
      <el-input type="text" v-model="dataForm.username" placeholder="請輸入賬號"></el-input>
    </el-form-item>
    <el-form-item label="密碼" prop="password">
      <el-input type="password" v-model="dataForm.password" placeholder="請輸入密碼"></el-input>
    </el-form-item>
    <el-button @click="submit1">登錄</el-button>
  </el-form>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        dataForm: {username: 'admin', password: '123456'},
        rules: {
          username: [{required: true, message: '賬號不可為空', trigger: 'blur'}],
          password: [{required: true, message: '密碼不可為空', trigger: 'blur'}]
        }
      }
    },
    methods: {
      submit1 () {
        var params = new URLSearchParams();
        params.append('name', this.dataForm.username);
        params.append('password',this.dataForm.password);
        this.axios.post('/user/login', params)
          .then((res)=>{
            if (res.data.code==0){
              this.$router.push("/Main2");
            }
          })
          .catch((res)=>{
            console.log(res.data.message);
          });
      }
    }
  }
</script>

<style scoped>

</style>

4.創建views/Main.vue  通過使用axios.get 方式獲取后台數據並通過  :data=“tableData”  對數據進行綁定加載

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="名稱" width="180"></el-table-column>
    <el-table-column prop="password" label="密碼" width="180"></el-table-column>
    <el-table-column prop="createTime" label="日期" width="180"></el-table-column>
  </el-table>
</template>

<script>
  export default {
    name: "Main",
    data() {
      return {
        tableData: []
      }
    },
    created() {
      this.findPage()
    },
    methods: {
      findPage() {
        this.axios.get('/user/list')
          .then((res) => {
            console.log(res.data);
            this.tableData = res.data
          })
          .catch((error) => {
            console.log(error);
          });
      }
    }
  }
</script>

<style scoped>

</style>

5.修改原有文件 app.vue

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

<script>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6.在main.js 文件中引用router,element ui ,axios

// 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 VueRouter from 'vue-router'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'

Vue.use(VueRouter);
Vue.use(VueAxios,axios);
Vue.use(ElementUI);
Vue.config.productionTip = false

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