添加ajax请求模块

.electron-vue/dev-runner.js

@@ -68,7 +68,7 @@ function startRenderer () {
         proxy: {
           '/seller': {
             // 请求的目标服务器地址
-            target: `${serverConfig.ServerIP}:${serverConfig.ServerPort}`,
+            target: `http://112.74.78.188:8080`,
             // 设置允许跨域
             changeOrigin: true,
             // 重写路径

src/renderer/api/ajax.js

@@ -0,0 +1,26 @@
+/*
+能发送ajax请求的函数模块
+函数的返回值是promise对象
+ */
+import axios from 'axios'
+const baseUrl = 'http://112.74.78.188:8080'
+export default function ajax(url, data={}, type='GET') {
+  url = baseUrl + url
+  if(type==='GET') { // 发送GET请求
+    // 拼请求参数串
+    // data: {username: tom, password: 123}
+    // paramStr: username=tom&password=123
+    let paramStr = ''
+    Object.keys(data).forEach(key => {
+      paramStr += key + '=' + data[key] + '&'
+    })
+    if(paramStr) {
+      paramStr = paramStr.substring(0, paramStr.length-1)
+    }
+    // 使用axios发get请求
+    return axios.get(url + '?' + paramStr)
+  } else {// 发送POST请求
+    // 使用axios发post请求
+    return axios.post(url, data)
+  }
+}

src/renderer/api/index.js

@@ -0,0 +1,49 @@
+/*
+包含了n个接口请求的函数的模块
+函数返回值为: promise
+ */
+
+import ajax from './ajax'
+
+/*
+// 注册接口
+export const reqRegister = (user) => ajax('/register', user, 'POST')
+// 登陆接口
+export const reqLogin = ({username, password}) => ajax('/login',{username, password}, 'POST')
+// 更新用户接口
+export const reqUpdateUser = (user) => ajax('/update', user, 'POST')
+// 获取用户信息
+export const reqUser = () => ajax('/user')
+
+// 获取用户列表
+export const reqUserList = (type) => ajax('/userlist', {type})
+
+// 获取当前用户的聊天消息列表
+export const reqChatMsgList = () => ajax('/msglist')
+
+// 修改指定消息为已读
+export const reqReadMsg = (from) => ajax('/readmsg', {from}, 'POST')*/
+
+// 登录接口
+export const reqLogin = (data) => ajax('/login',data, 'POST')
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/renderer/components/Login.vue

@@ -1,7 +1,17 @@
 <!--登录界面-->
 <template>
-    <div class="login" :style="loginStyle">
-        <section class="login-content" :style="loginContentStyle">
+    <div class="login" :style="{
+        backgroundColor: `#${loginJson[0].BrackgroupStr.slice(3)}`,
+    }">
+        <section class="login-content" :style="{
+            width: loginJson[0].Width + 'px',
+            height: loginJson[0].Height + 'px',
+            left:loginJson[0].Left + 'px',
+            top:loginJson[0].Top + 'px',
+            zIndex: loginJson[0].ZIndex,
+            border: `1px solid #${loginJson[0].BorderStr.slice(3)}`,
+            backgroundColor: `#${loginJson[0].ForegroundStr.slice(3)}`,
+        }">
             <h2>用户登录</h2>
             <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="55px" class="login-form">
                 <el-form-item label="账号" prop="username">
@@ -11,8 +21,8 @@
                     <el-input type="password" v-model="ruleForm.password" autocomplete="off" prefix-icon="el-icon-lock"></el-input>
                 </el-form-item>
                 <el-form-item>
-                    <el-button :style="buttonStyle" type="primary" @click="submitForm('ruleForm')">提交</el-button>
-                    <el-button :style="buttonStyle" type="primary" @click="resetForm('ruleForm')">重置</el-button>
+                    <el-button :style="{backgroundColor: `#${loginJson[0].BTNForegroundStr.slice(3)}`}" type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                    <el-button :style="{backgroundColor: `#${loginJson[0].BTNForegroundStr.slice(3)}`}" type="primary" @click="resetForm('ruleForm')">重置</el-button>
                 </el-form-item>
             </el-form>
         </section>
@@ -20,9 +30,14 @@
 </template>
 
 <script>
-    import loginJson from '../../../static/EnityLogin'
+    import {mapState} from 'vuex'
+    import {reqLogin} from "../api"
 
     export default {
+        computed: {
+            ...mapState(['loginJson'])
+        },
+
         data() {
             const checkUsername = (rule, value, callback) => {
                 if (!value) {
@@ -46,34 +61,22 @@
                     password: [
                         { validator: validatePasswrod, trigger: 'blur' }
                     ]
-                },
-                loginJson,
-                loginStyle:{
-                    "background-color": `#${loginJson[0].BrackgroupStr.slice(3)}`,
-                },
-                loginContentStyle: {
-                    "width": loginJson[0].Width + 'px',
-                    "height": loginJson[0].Height + 'px',
-                    "left":loginJson[0].Left + 'px',
-                    "top":loginJson[0].Top + 'px',
-                    "z-index": loginJson[0].ZIndex,
-                    "border": `1px solid #${loginJson[0].BorderStr.slice(3)}`,
-                    "background-color": `#${loginJson[0].ForegroundStr.slice(3)}`,
-                },
-                buttonStyle: {
-                  'background-color': `#${loginJson[0].BTNForegroundStr.slice(3)}`,
                 }
             }
         },
 
         methods: {
-            submitForm() {
+            async submitForm() {
                 const {username,password} = this.ruleForm
                 if(username === '' || password === ''){
                     this.$message.warning('请输入用户名和密码！')
                     return
                 }
-                if(username === 'admin' && password === '123'){
+                // 请求登录
+                const res = await reqLogin({name:username,password})
+                console.log(res)
+
+                /*if(username === 'admin' && password === '123'){
                     const user = {username,password}
                     // 将user保存到vuex的state
                     this.$store.dispatch('saveUser', user)
@@ -81,7 +84,7 @@
                     this.$router.replace('/admin')
                 }else {
                     this.$message.error('用户名或密码错误！')
-                }
+                }*/
             },
 
             resetForm(formName) {

src/renderer/store/state.js

@@ -4,6 +4,7 @@ import path from 'path'
 
 let EnityWindow = fs.readFileSync(path.join(__static, '/EnityWindow.json'), 'utf8')*/
 
+import loginJson from '../../../static/EnityLogin'
 import windowJson from '../../../static/EnityWindow'
 import buttonJson from '../../../static/EnityButton'
 import labelJson from '../../../static/EnityLable'
@@ -22,6 +23,9 @@ export default {
   // 分屏状态（默认0: 自由屏，1: 4分屏  2：9分屏  3: 16分屏）
   splitScreenStatus: 0,
 
+  // 登录
+  loginJson,
+
   // window窗口
   windowJson,