Vuejs+element+WebApi进阶之旅 一 ： 登陆

公司最近不是特别忙，然后想把公司比较老的后台管理网站翻新一下。然后就想到了vuejs。对于一个从来没接触过前端的我来说，一开始简直是一脸懵逼，都不晓得怎么开始？？？第一天一直百度有关vuejs的有关内容，总感觉对于前端已经超出了我一直认为的：调调css、jq的认知范围了。

第二天 搭建了vuejs+element开发环境:https://blog.csdn.net/dream_broken/article/details/73293391 这篇博客讲的很清楚，我是根据这个来搭建环境的。关于装一些什么插件之类的在上面也有。

搭建好之后运行会发现是这个样子的

 

首先我们把这个图片去掉，打开我们的src目录，找到app.vue将img去掉，最后的代码是这样

好，现在我们来写登陆界面，找到components目录打开，新建Login.vue

在里面添加代码：

<template>
  <el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px"
           class="demo-ruleForm login-container">
           <h3 class="title">系统登录</h3>
           <el-form-item prop="username">
              <el-input type="text"  v-model="account.username"  auto-complete="off" placeholder="账号"></el-input>
           </el-form-item>
           <el-form-item prop="pwd">
           <el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
          </el-form-item>
          <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
          <el-form-item style="width:100%;">
         <el-button type="primary" style="width:100%;" @click="LoginSend" >登录</el-button>
         </el-form-item>
  </el-form>
</template>

<script>
   

    export default {
        data() {
            return {
                loining: false,
                account: {
                    username: '',
                    pwd: ''
                },
                rules: {
                    username: [{
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }, ],
                    pwd: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }, ]
                },
                checked: true
            }
        }

    }
</script>

<style>
    body {
        background: #DFE9FB;
    }
    
    .login-container {
        width: 350px;
        margin-left: 35%;
        /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
</style>

这样登陆的界面就写好了，这时候我们去到router目录里面打开index.js。设置一下路径？？？我不知道这里叫啥，叫路由？

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: '登录',
            component: Login
        },
        {
            path: '/login',
            name: '登录',
            component: Login
        }
    ]

})

然后运行就可以啦。

界面写好了，下面我们来写axios与WebApi交互

在src里面新建目录 api,在api目录下新建index.js和api.js，

index代码

api.js代码

import axios from 'axios'


axios.defaults.baseURL = '/api';

//post请求
// axios.post('/user', {
//   firstName: 'Fred',
//   lastName: 'Flintstone'
// })
// .then(function (response) {
//   console.log(response);
// })
// .catch(function (error) {
//   console.log(error);
// });

//get请求
// // 为给定 ID 的 user 创建请求
// axios.get('/user?ID=12345')
// .then(function (response) {
//   console.log(response);
// })
// .catch(function (error) {
//   console.log(error);
// });
// 可选地，上面的请求可以这样做
// axios.get('/user', {
//         params: {
//             ID: 12345
//         }
//     })
//     .then(function(response) {
//         console.log(response);
//     })

export const requestLogin = params => {
        return axios.get('Login/login', { params }).then(res => res.data)
    }
    // export const requestLogin = params => { return axios.get('getthread.aspx', { params }).then(res => res.data) }

这里面有我的一些备注，可以看一下，

然后我们去设置一下代理，这个比较重要吧，打开config目录的indes.js，

在dev里面添加代码

  //用来跨域访问
        proxyTable: {
            '/api': {
                target: 'http://localhost:60573/', //设置你调用的接口域名和端口号 别忘了加http
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/' //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
                }
            }
        }

target里面换成你自己本地的localhost+端口，或者直接换成服务器的ip地址+端口。

这里的地址设置之后，在apijs里面的代码axios.defaults.baseURL = '/api';，这里的/api就代表你填的ip地址，axios.get后面跟的就是路径。

设置都完毕了在Login.vue里面添加代码

  methods: {
            LoginSend(ev) {
                alert(this.account.pwd)
                alert(this.account.username)
                this.logining = true;
                var loginParams = {
                    username: this.account.username,
                    userpwd: this.account.pwd
                }
                requestLogin(loginParams).then(data => {
                    debugger;
                    // this.logining = false;
                    alert(data);
                })
            }
        }

最后login.vue的代码是这样：

<template>
  <el-form ref="AccountFrom" :model="account" :rules="rules" label-position="left" label-width="0px"
           class="demo-ruleForm login-container">
           <h3 class="title">系统登录</h3>
           <el-form-item prop="username">
              <el-input type="text"  v-model="account.username"  auto-complete="off" placeholder="账号"></el-input>
           </el-form-item>
           <el-form-item prop="pwd">
           <el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
          </el-form-item>
          <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
          <el-form-item style="width:100%;">
         <el-button type="primary" style="width:100%;" @click="LoginSend" >登录</el-button>
         </el-form-item>
  </el-form>
</template>

<script>
    import {
        requestLogin
    } from '../api/api';

    export default {
        data() {
            return {
                loining: false,
                account: {
                    username: '',
                    pwd: ''
                },
                rules: {
                    username: [{
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }, ],
                    pwd: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }, ]
                },
                checked: true
            }
        },
        methods: {
            LoginSend(ev) {
                alert(this.account.pwd)
                alert(this.account.username)
                this.logining = true;
                var loginParams = {
                    username: this.account.username,
                    userpwd: this.account.pwd
                }
                requestLogin(loginParams).then(data => {
                    debugger;
                    // this.logining = false;
                    alert(data);
                })
            }
        }

    }
</script>

<style>
    body {
        background: #DFE9FB;
    }
    
    .login-container {
        width: 350px;
        margin-left: 35%;
        /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
</style>

这样完成之后就能访问你的WebApi啦

看起来其实没什么难得，但是对于我一个从没接触过前端得人来说简直是  一把辛酸泪啊！！！！不过最后终于是做好了登陆，啦啦啦啦啦啦啦啦啦啦啦啦啦，开心 ^ _ ^