公司最近不是特别忙，然后想把公司比较老的后台管理网站翻新一下。然后就想到了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/', //设置你调用的接口域名和端口号 别忘了加httpchangeOrigin: 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啦

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