Vue 初级入门学习记录二

Posted 2020-12-14 blackcatfish

最近心血来潮的学起来了vue 之前做了个表格增删的，今天来做一下vue+springboot 后端登录验证的 也是比较基础的（这里前后端都是没有做登录拦截的）

首先要安装一些基本的依赖

# (进入到项目根目录)
vue add element (添加 element，一个 element 风格的 UI 框架)
npm install axios (安装 axios，用于网络请求)
npm install vuex --save(安装 Vuex，用于管理状态)
npm install vue-router (安装 路由，用于实现两个 Vue 页面的跳转)

1.首先做个登录页在src文件夹下面创建一个views文件夹之后在创建个login.vue

<template>
  <div>
    <el-card class="login-form-layout">
      <el-form
        autocomplete="on"
        :model="loginForm"
        ref="loginForm"
        label-position="left"
      >
        <div style="text-align: center">
          <svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon>
        </div>
        <h2 class="login-title color-main">vue 表基础操作</h2>
        <el-form-item prop="userName">
          <el-input
            name="userName"
            type="text"
            v-model="loginForm.userName"
            autocomplete="on"
            placeholder="请输入用户名"
          >
            <span slot="prefix">
              <svg-icon icon-class="user" class="color-main"></svg-icon>
            </span>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            name="password"
            :type="pwdType"
            @keyup.enter.native="handleLogin"
            v-model="loginForm.password"
            autocomplete="on"
            placeholder="请输入密码"
          >
            <span slot="prefix">
              <svg-icon icon-class="password" class="color-main"></svg-icon>
            </span>
            <span slot="suffix" @click="showPwd">
              <svg-icon icon-class="eye" class="color-main"></svg-icon>
            </span>
          </el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 60px">
          <el-button
            style="width: 100%"
            type="primary"
            :loading="loading"
            @click.native.prevent="handleLogin"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
 
<script>
export default {
  name: "login",
  data() {
    return {
      loginForm: {
        userName: "blackCatFish",
        password: "123456"
      },
      loading: false,
      pwdType: "password"
    };
  },
  methods: {
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("Login", this.loginForm)
            .then(response => {
              this.loading = false;
              let code = response.data.code;
              if (code == 200) {
                this.$router.push({
                  path: "/success",
                  query: { data: response.data.data }
                });
              } else {
                this.$router.push({
                  path: "/error",
                  query: { message: response.data.message }
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          // eslint-disable-next-line no-console
          console.log("参数验证不合法！");
          return false;
        }
      });
    }
  }
};
</script>
 
<style scoped>
.login-form-layout {
  position: absolute;
  left: 0;
  right: 0;
  width: 360px;
  margin: 140px auto;
  border-top: 10px solid #409eff;
}

.login-title {
  text-align: center;
}

.login-center-layout {
  background: #409eff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-top: 200px;
}
</style>

2.之后再创建个src下面创建一个router文件夹，router是路由守卫的意思

import Vue from ‘vue‘ //引入 Vue
import VueRouter from ‘vue-router‘ //引入 Vue 路由
 
Vue.use(VueRouter); //安装插件
 
export const constantRouterMap = [
    //配置默认的路径，默认显示登录页
    { path: ‘/‘, component: () => import(‘@/views/login‘)},
 
    //配置登录成功页面，使用时需要使用 path 路径来实现跳转
    { path: ‘/success‘, component: () => import(‘@/views/table‘)},
 
    // //配置登录失败页面，使用时需要使用 path 路径来实现跳转
    // { path: ‘/error‘, component: () => import(‘@/views/error‘), hidden: true }
]
 
export default new VueRouter({
    // mode: ‘history‘, //后端支持可开
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap //指定路由列表
})

关键的代码都有注释

3.将写好路由添加到程入口就是写入main.js中

import App from ‘./App.vue‘;
import Vue from ‘vue‘;
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
import router from ‘./router‘;

Vue.config.productionTip = false

Vue.use(ElementUI);
new Vue({
    el: ‘#app‘,
    render: h => h(App),
    router,

})

4.配置了路由  要将路由加入到程序的出入口要在App.vue中添加一行代码

<template>
    <div id="app">
    <!-- 程序路由出入口配置代码 -->
    <router-view/>
   </div>   
   </template>
   <script>
  export default {
    name: ‘App‘
  }
</script>

5.启动项目 npm run dev 访问localhost：8086可看到登录页面就可以出来了

端口实在vue.configer.js中配置

devServer: {
        port: 8086,
        open: true,
        compress: false, // 开启压缩
    }

到这完成了一大部分

6.使用axios和vuex 进行网络请求，用于调用后台接口

创建一个request文件夹；里面建一个request.js文件

import axios from ‘axios‘ //引入 axios
import baseUrl from ‘../api/baseUrl‘ //使用环境变量 + 模式的方式定义基础URL
 
// 创建 axios 实例
const service = axios.create({
  baseURL: baseUrl, // api 的 base_url
  timeout: 15000, // 请求超时时间
})
 
export default service

let baseUrl = "";
switch (process.env.NODE_ENV) {
    
    case ‘development‘:
        baseUrl = "http://localhost:8081/"  //开发环境url
        break
    case ‘serve‘:
        baseUrl = "http://localhost:8089/"   //生产环境url
        break
}
export default baseUrl;

这里的development 不要写成了dev  不然会找不到

在创建个login.js 文件

import request from ‘@/util/request‘ //引入封装好的 axios 请求

export function login(userName, password) { //登录接口
    return request({ //使用封装好的 axios 进行网络请求
        url: ‘/user/login‘,
        method: ‘post‘,
        data: { //提交的数据
            userName,
            password
        }
    })
}

用于网络请求

import Vue from ‘vue‘ //引入 Vue
import Vuex from ‘vuex‘ //引入 Vuex
import user from ‘./modules/user‘ //引入 user module
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  modules: {
    user //使用 user.js 中的 action
  }
})
 
export default store

8.在 store 文件夹下创建一个 modules 文件夹，然后在此文件夹下创建一个 user.js 文件

import { login } from ‘@/api/login‘//引入登录 api 接口
 
const user = {
  actions: {
    // 登录
    Login({ commit }, userInfo) { //定义 Login 方法，在组件中使用 this.$store.dispatch("Login") 调用
      const userName = userInfo.userName.trim()
      return new Promise((resolve, reject) => { //封装一个 Promise
        login(userName, userInfo.password).then(response => { //使用 login 接口进行网络请求
          commit(‘‘) //提交一个 mutation，通知状态改变
          resolve(response) //将结果封装进 Promise
        }).catch(error => {
          reject(error)
        })
      })
    },
  }
}
export default user

这里的代码值得解释一下

1.首先引入 login 接口，之后使用登录接口进行网络请求。

2.定义一个 名为 Login 的 action 方法，Vue 组件通过 this.$store.dispatch("Login") 调用

3.Promise，这个类很有意思，官方的解释是“store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise”。这话的意思组件中的 dispatch 返回的仍是一个 Promise 类，因此推测 Promise 中的两个方法 resolve() 与 reject() 分别对应 dispatch 中的 then 与 catch。
9.在main.js中引入vuex

import Vue from ‘vue‘
import App from ‘./App.vue‘
import ‘./plugins/element.js‘
import router from ‘./router‘ //引入路由配置
import store from ‘./store‘ //引入 Vuex 状态管理
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
  router, //使用路由配置
  store //使用 Vuex 进行状态管理
}).$mount(‘#app‘)

再次启动项目 访问登录页打卡资源管理器发F12 network会看到 页面会请求我们配置后端的地址:localhost:8081

这里后台还没有启动所以有包错 

接下来就是要写后台代码部分后台文章地址（先占个位）

学习连接：https://blog.csdn.net/xiaojinlai123/article/details/90694372

https://vuex.vuejs.org/zh/guide/actions.html

https://blog.csdn.net/xiaojinlai123/article/details/90699565