前段時間學習了vue.js的一些相關知識。現在動手敲程式碼，想實現一個簡單的後臺管理，包括登入驗證、選單導航、列表、增刪改查，選單/按鈕的許可權控制等一些常見功能。當然網上也有很多例子了，只是想自己敲一遍程式碼。一直從事後臺開發，公司都是有專門的前端設計及開發的，所以本人的js/css基礎非常差，只能隨意弄弄了。

     網上找了下，這篇博文給的例子非常不錯http://www.cnblogs.com/fhen/p/6721930.html，也主要參考了下介面的實現，他的資料互動模擬是用了mock.js，本人作為後臺開發專業程式設計師，所以學習過程中，會使用spring boot快速建立一些api支援。

專案搭建  

   建立個專案admin-demo-01,這是分步驟學習的，01是登入，後面還有02,03....慢慢的一點點功能實現。

   看package.json

已經預設有vue,vue-router了，由於要使用axios作為和後臺的互動（就像jquery的ajax),element-ui作為控制元件，所以需要安裝axios/element-ui,執行命令

cnpm install axios --save

cnpm install element-ui --save

然後初始化下把整個專案都初始化npm install,然後執行起來cnpm run dev,瀏覽器訪問

登入介面

   新建立的專案，執行後訪問看到就是上面的那圖，我們需要去掉它，同時顯示我們的登入頁面，開啟App.vue,把img那去掉。

main.js修改為

// 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 App from './App'
import router from './router'

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


Vue.config.productionTip = false
Vue.use(ElementUI)

Vue.config.productionTip = false

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

接著，在components下建立一個Login.vue.

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: '登入',
  data () {
    return {
      msg: 'welcome login'
    }
  }
}
</script>

router下的index.js初始是這樣的

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

它預設指向components/Hello，那我們修改下

import Vue from 'vue'
import Router from 'vue-router'

// 懶載入方式，當路由被訪問的時候才載入對應元件
const Login = resolve => require(['@/components/Login'], resolve)

Vue.use(Router)

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

頁面就重新整理如下圖了

  那接下來就改造登入頁：賬號輸入框、密碼輸入框、登入按鈕,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%;" >登入</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: '登入',
  data () {
    return  {
        logining: false,
        account: {
          username: '',
          pwd: ''
        },
        rules: {
          username: [
            {required: true, message: '請輸入賬號', trigger: 'blur'},
            //{ validator: validaePass }
          ],
          pwd: [
            {required: true, message: '請輸入密碼', trigger: 'blur'},
            //{ validator: validaePass2 }
          ]
        },
        checked: true
      };
  }
}
</script>


<style>
  body{
    background: #DFE9FB;
  }
  .login-container{
    width:350px;
    margin-left:35%;
  }
</style>

頁面重新整理

 這時點選登入還沒有互動能力的。

axios和mock.js實現互動

  上面說了axios類似jquery的ajax。在src下建立個api資料夾，然後建立個api.js

import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:80';


export const requestLogin = params => { return axios.post('/user/login', params).then(res => res.data) }

然後再建立個index.js

import * as api from './api'

export default api

這是向後臺發起請求/user/login，以post的方式。但是我們還沒做後臺服務。那這時可以使用mock.js進行攔截，然後模擬後臺服務返回的資料。

mock模式

   在src目錄下建立資料夾mock,建立檔案index.js

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

import { LoginUsers, users } from './data/user'

export default {

    init() {
        let mock = new MockAdapter(axios)
            // mock success request
        mock.onGet('/success').reply(200, {
            msg: 'success'
        })

        // mock error request
        mock.onGet('/error').reply(500, {
            msg: 'failure'
        })

        // 登入
        mock.onPost('/user/login').reply(arg => {
            let { username, password } = JSON.parse(arg.data)
            return new Promise((resolve, reject) => {
                let token = null


                let hasUser = LoginUsers.some(u => {
                    if (u.username === username && u.password === password) {
                        token = 'adminXXXXXX'
                        return true
                    }
                })

                if (hasUser) {
                    resolve([200, { code: 200, msg: '請求成功', token: token }])
                } else {
                    resolve([200, { code: 500, msg: '賬號或密碼錯誤' }])
                }

            })
        })



    }

}

mock下建立data資料夾，data資料夾下建立user.js

/**
 * 用來模擬使用者的一些資訊
 */
import Mock from 'mockjs'
const LoginUsers = [{
    id: 1,
    username: 'admin',
    password: '123456',
    email: '[email protected]',
    name: '程式設計師'
}]

export { LoginUsers, users }

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.native.prevent="handleLogin" :loading="logining" >登入</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {requestLogin} from '../api/api';
  //import NProgress from 'nprogress'
  export default {
    data() {
      return {
        logining: false,
        account: {
          username: 'admin',
          pwd: '123456'
        },
        rules: {
          username: [
            {required: true, message: '請輸入賬號', trigger: 'blur'},
            //{ validator: validaePass }
          ],
          pwd: [
            {required: true, message: '請輸入密碼', trigger: 'blur'},
            //{ validator: validaePass2 }
          ]
        },
        checked: true
      };
    },
    methods: {
      handleLogin() {
        this.$refs.AccountFrom.validate((valid) => {
          if (valid) {

            this.logining = true;
            //NProgress.start();
            var loginParams = { username: this.account.username, password: this.account.pwd };
          //    let loginParams = new URLSearchParams();
          //    loginParams.append("username",this.account.username);
           //   loginParams.append("password",this.account.pwd);
            requestLogin(loginParams).then(data => {
             debugger;
              this.logining = false;
              
              let { msg, code, token } = data;
              if(code == '200'){
                //登入成功，把使用者資訊儲存在sessionStorage中
                sessionStorage.setItem('access-token', token);
                //跳轉到後臺主介面
                this.$router.push({ path: '/home' });
              }else{
                this.$message({
                  message: msg,
                  type: 'error'
                });
              }
              
            });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }

</script>


<style>
  body{
    background: #DFE9FB;
  }
  .login-container{
    width:350px;
    margin-left:35%;
  }
</style>

看到登入成功後，是要跳到後臺主介面Home的，所以建立個Home.vue

<template>
  <div >
    <h1>{{ msg }}</h1>
   
  </div>
</template>

<script>
export default {
  name: '後臺主介面',
  data () {
    return {
      msg: '後臺主介面'
    }
  }
}
</script>

router下的index.js那也要修改下了

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
//import Login from '@/components/Login'
// 懶載入方式，當路由被訪問的時候才載入對應元件
const Login = resolve => require(['@/components/Login'], resolve)

Vue.use(Router)

let router = new Router({
    routes: [{
            path: '/',
            name: '登入',
            component: Login
        }, {
            path: '/login',
            name: '登入',
            component: Login
        },
        {
            path: '/home',
            name: '後臺主介面',
            component: Home
        }

    ]
})

// 訪問之前，都檢查下是否登入了
router.beforeEach((to, from, next) => {
    // console.log('to:' + to.path)
    if (to.path.startsWith('/login')) {
        window.sessionStorage.removeItem('access-token')
        next()
    } else {
        let token = window.sessionStorage.getItem('access-token')
        if (!token) {
            next({ path: '/login' })
        } else {
            next()
        }
    }
})

export default router

在main.js中引入mock

// 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 App from './App'
import router from './router'

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

import Mock from './mock'
Mock.init()

Vue.config.productionTip = false
Vue.use(ElementUI)

Vue.config.productionTip = false

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

初始化mockjs,axios-mock-adapter

cnpm install mockjs --save

cnpm axios-mock-adapter

最後執行cnpm run dev的時候報錯

babel-runtime/core-js/json/stringify in ./src/mock/index.js, ./~/[email protected]@babel-loader/lib!./~/[email protected]@vue-loader/lib/selector.js?typ
e=script&index=0!./src/components/Login.vue

   是使用了JSON引起的，安裝提示執行cnpm install babel-runtime --save

最後在package.json中看到的樣子

src下的檔案結構

執行起來cnpm run dev

出現登入介面，如果如果的使用者不正確（不再mock/data/user.js的LoginUsers中，則會提示賬號或密碼錯誤

如果正確，就會進入後臺主介面,如果沒登入，直接訪問主介面的url  http://localhost:8080/home，則會自動重新整理到登陸頁面

spring boot搭建後臺

  上面的程式碼，當登入的時候，發起登入請求/user/login的時候，被axios-mock-adapter攔截了，並沒有正真和後臺互動，這種模式適合純粹的前端開發階段，但最後還是要和後臺聯調的。

main.js中去掉

//import Mock from './mock'
//Mock.init()

再次登陸的時候，就無法登入了，看瀏覽器控制檯就看到404了

現在使用eclipse寫個後臺的使用者管理user-server，使用spring boot快速搭建。

UserController.java

package com.fei.springboot.controller;

import javax.servlet.http.HttpServletRequest;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import com.alibaba.fastjson.JSONObject;
import com.fei.springboot.controller.util.TokenUtil;

@RestController
@RequestMapping("/user")
public class UserController {

	private static Logger log = LoggerFactory.getLogger(UserController.class);
	
	@CrossOrigin(origins="*")//允許跨域請求
	@RequestMapping(value="/login",method=RequestMethod.POST)
	public JSONObject login(String username,String password,HttpServletRequest request){
		log.info("登入請求...username="+username+"  pwd=" + password);
		JSONObject r = new JSONObject();
		if("admin".equals(username) && "123456".equals(password))	{
			r.put("code", "200");
			r.put("msg", "登入成功");
			r.put("token", TokenUtil.getToken(username));
		}else{
			r.put("code", "500");
			r.put("msg", "登入失敗");
		}
		return r;
	}
	
}

其他檔案程式碼，看github上完整程式碼吧https://github.com/269941633/vue.js2.X-elementUI

好了，一切準備就緒了，點選“登入”，但是提示登入失敗了，看後臺控制檯日誌，接收到的使用者名稱和密碼是null。。。這是怎麼回事？使用postman工具測試下介面，訪問是OK的。。。趕緊百度找原因，在這篇博文中，解說得非常詳細http://www.jianshu.com/p/042632dec9fb，原因找到了，解決方法有3中。按照那博文的說法，原因就是axios判斷引數是object物件時，header中的Content-type是application/json;charset=UTF-8，而springMVC是預設application/x-www-form-urlencoded;charset=UTF-8，平時我們用jquery的ajax的時候，預設就是application/x-www-form-urlencoded;charset=UTF-8了，和後臺匹配，所以我們都不需要額外做處理。看下axios.js的原始碼

如果引數是Object，而且headers中沒有設定contentType,那就預設'application/json;charset=utf-8',把Object轉為json字串，那也就是說，如果使用axios.post的時候指定了headers的content為application/x-www-form-urlencoded;charset=UTF-8就可以了呢？試了下
api.js修改前

export const requestLogin = params => { return axios.post('/user/login', params).then(res => res.data) }

發起請求

後臺接收不到資料，修改api.js

let config = { headers: { 'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' } }
export const requestLogin = params => { return axios.post('/user/login', params, config).then(res => res.data) }

request headers 中的content-type的確是變了，但是後臺仍然沒接收到資料。用postman測試

成功，檢視傳送的資訊

發現是引數，axios是json字串，而postman那是&拼接起來的。

那隻能要麼後臺接收引數的時候使用@RequestBody,要麼前臺使用URLSearchParams，

試試URLSearchParams,Login.vue,修改下

// var loginParams = { username: this.account.username, password: this.account.pwd };
              let loginParams = new URLSearchParams();
              loginParams.append("username",this.account.username);
              loginParams.append("password",this.account.pwd);

googel瀏覽器OK，但是360瀏覽器卻報Uncaught ReferenceError: URLSearchParams is not defined，網上的一些說法是URLSearchParams，並不是所有瀏覽器都支援的。

   修改後臺UserController.java

package com.fei.springboot.controller;

import java.util.Map;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import com.alibaba.fastjson.JSONObject;
import com.fei.springboot.controller.util.TokenUtil;

@RestController
@RequestMapping("/user")
public class UserController {

	private static Logger log = LoggerFactory.getLogger(UserController.class);
	
	@CrossOrigin(origins="*")//允許跨域請求
	@RequestMapping(value="/login",method=RequestMethod.POST)
	public JSONObject login(@RequestBody Map<String,String> map){
		String username = map.get("username");
		String password = map.get("password");
		
		log.info("登入請求...username="+username+"  pwd=" + password);
		
		JSONObject r = new JSONObject();
		if("admin".equals(username) && "123456".equals(password))	{
			r.put("code", "200");
			r.put("msg", "登入成功");
			r.put("token", TokenUtil.getToken(username));
		}else{
			r.put("code", "500");
			r.put("msg", "登入失敗");
		}
		return r;
	}
	
}

這樣，後臺成功接收到axios傳的引數了。

完整原始碼