From 69a16c9c3cfad97cc20788174d8d02e64e90cbca Mon Sep 17 00:00:00 2001
From: lsy <18332763730@163.com>
Date: Sat, 23 Dec 2017 22:51:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0vuex=E6=9B=B4=E6=8D=A2ajax?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E6=96=B9=E6=B3=95=EF=BC=8C=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?springmv=E5=90=8E=E5=8F=B0=E8=8E=B7=E5=8F=96=E4=B8=8D=E5=88=B0?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ms-web/README.md                 | 14 ++++++++++
 ms-web/package.json              |  3 ++-
 ms-web/src/components/SignIn.vue | 30 +++++++++++++--------
 ms-web/src/main.js               | 45 ++++++++++++++++++++++++++++++--
 4 files changed, 78 insertions(+), 14 deletions(-)

diff --git a/ms-web/README.md b/ms-web/README.md
index 2ca9fbb..f2cfdea 100644
--- a/ms-web/README.md
+++ b/ms-web/README.md
@@ -49,4 +49,18 @@ module.exports = {
 最后，在代码中的 style 标签中 加上 lang="less" 属性即可~
 <style scoped lang="less">
 </style>
+
+#安装vuex
+
+#安装axios
+npm install axios -S
+修改原型链
+import axios from 'axios'
+Vue.prototype.$http = axios
+#安装vue-devtools
+
+#关于部署使用nodejs的http-server模块进行部署
+npm install http-server 
+cd dist 
+http-server -p 80
 ```
diff --git a/ms-web/package.json b/ms-web/package.json
index fec24c5..9dacdfc 100644
--- a/ms-web/package.json
+++ b/ms-web/package.json
@@ -14,9 +14,10 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.17.1",
     "element-ui": "^2.0.8",
     "vue": "^2.5.2",
-    "vue-resource": "^1.3.5",
+    "vue-axios": "^2.0.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },
diff --git a/ms-web/src/components/SignIn.vue b/ms-web/src/components/SignIn.vue
index dfdf85f..b42f3df 100644
--- a/ms-web/src/components/SignIn.vue
+++ b/ms-web/src/components/SignIn.vue
@@ -2,16 +2,16 @@
   <el-container class="page-container">
     <el-main class="sign-in-container">
       <el-row type="flex" justify="center">
-        <span class="title">micro fast 后台管理系统</span>
+        <span class="title">ms 分布式系统后台管理</span>
       </el-row>
       <el-row type="flex" justify="center">
         <el-col :sm="5" :md="7" :lg="5" :xl="4">
-          <el-input v-model="username" placeholder="用户名" size="large"  clearable></el-input>
+          <el-input v-model="username" placeholder="用户名" size="large" clearable></el-input>
         </el-col>
       </el-row>
       <el-row type="flex" justify="center" class="row-line">
         <el-col :sm="5" :md="7" :lg="5" :xl="4">
-          <el-input v-model="password" placeholder="密码" size="large"  clearable type="password"></el-input>
+          <el-input v-model="password" placeholder="密码" size="large" clearable type="password"></el-input>
         </el-col>
       </el-row>
       <el-row type="flex" justify="center" class="row-line">
@@ -19,32 +19,40 @@
           <el-input v-model="imageCode" size="small" placeholder="验证码"></el-input>
         </el-col>
         <el-col :sm="3" :md="5" :lg="3" :xl="2">
-          <img src="http://fthipw.natappfree.cc:10006/upms/code/image?width=67&height=30" class="image-code" />
+          <img src="http://fthipw.natappfree.cc:10006/upms/code/image?width=67&height=30" class="image-code"/>
         </el-col>
       </el-row>
       <el-row type="flex" justify="center" class="row-line">
         <el-button type="success" size="medium" class="button-margin" @click="signIn">登录</el-button>
-        <el-button type="primary" size="medium">注册</el-button>
+        <el-button type="primary" size="medium" @click="signUp">注册</el-button>
       </el-row>
     </el-main>
   </el-container>
 </template>
 <script>
+  let data = {
+    username: '',
+    password: '',
+    imageCode: '',
+    rememberMe: false
+  }
   export default {
     name: 'SignIn',
     data () {
-      return {
-        username: '',
-        password: '',
-        imageCode: ''
-      }
+      return data
     },
     methods: {
       signIn: function () {
-        this.$http.post('http://fthipw.natappfree.cc:10006/upms/user/login',this.data,{method: "post"})
+        let that = this
+        that.$http.post('http://fthipw.natappfree.cc:10006/upms/user/login', that.$querystring.stringify(data))
           .then(response => {
             console.log(response.data)
+          }, error => {
+            console.log(error)
           })
+      },
+      signUp () {
+        this.$router.push('/register')
       }
     }
   }
diff --git a/ms-web/src/main.js b/ms-web/src/main.js
index 1579a7b..ac15cf3 100644
--- a/ms-web/src/main.js
+++ b/ms-web/src/main.js
@@ -3,12 +3,52 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+//  引入element-ui依赖
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import VueResource from 'vue-resource'
+//  引入axios用于发起请求
+import axios from 'axios'
+//  引入vuex进行数据管理
+import Vuex from 'vuex'
 
 Vue.use(ElementUI)
-Vue.use(VueResource)
+Vue.use(Vuex)
+Vue.prototype.$http = axios
+// 用于转换json数据
+let querystring = require('querystring')
+Vue.prototype.$querystring = querystring
+//  admin模块的state和action
+const admin = new Vuex.Store({
+  //  模块的state
+  state: {
+    username: ''
+  },
+  //  根据特定的规则获取state中的数据
+  getters: {
+    getUsername: (state, getters) => {
+      return state.username
+    }
+  },
+  //  改变模块的状态的函数，只能是同步的
+  mutations: {
+    setUsername (state) {
+      state.username = ''
+    }
+  },
+  //  模块的action是对mutations的封装，在action中可以进行异步的操作
+  actions: {
+    increment (context) {
+      context.commit('setUsername')
+    }
+  }
+})
+
+// 把全局的state进行拆分
+const store = new Vuex.Store({
+  state: {
+    admin: admin
+  }
+})
 
 Vue.config.productionTip = false
 
@@ -16,6 +56,7 @@ Vue.config.productionTip = false
 new Vue({
   el: '#app',
   router,
+  store,
   template: '<App/>',
   components: { App }
 })