移动端多页面应用（MPA）的开发（二）

开发服务器设置

什么是服务器设置

服务器设置就是在移动端app上设置服务端的ip、端口和应用名称等参数。之所以开发这个功能，是由于移动端应用开发过程中，常需要将应用打包为app安装到手机上，在局域网内进行测试，而服务端的ip、端口和应用名称等参数常会变化，为了测试的方便，需要在手机端开发服务器设置功能，以便在测试时根据需要设置服务端参数。

服务器设置开发示例

准备工作

1. 在《移动端多页面应用（MPA）的开发（一）》所述的基础上引入layer移动版layer.mobile-v2.0.zip

2. 开发封装访问服务器的js文件my-mobile.js，该文件代码请参阅my-mobile.js，该js文件提供的方法如下：

   /**
   * 给Vue添加原型方法 获取服务器配置
   */
   $getServerConfig()

   /**
   * 给Vue添加原型方法 设置服务器配置
   */
   $setServerConfig()

   /*
   给Vue添加原型方法 向服务器发出get请求，返回promise，
   then方法的参数是一个函数，该函数的参数为服务器发送的未经包装响应数据
   */
   $myGet(url[,config])

   /*
   给Vue添加原型方法 向服务器发出post请求，返回promise，
   then方法的参数是一个函数，该函数的参数为服务器发送的未经包装响应数据
   */
   $myPost(url[,data[,config]])

   /*
   给Vue添加原型方法 向服务器发出put请求，返回promise，
   then方法的参数是一个函数，该函数的参数为服务器发送的未经包装响应数据
   */
   $myPut(url[,data[,config]])

   /*
   给Vue添加原型方法 向服务器发出delete请求，返回promise，
   then方法的参数是一个函数，该函数的参数为服务器发送的未经包装响应数据
   */
   $myDelete(url[,config])

服务器设置的代码实现

在登录页上增加一个服务器设置弹出层界面

```
<!--使用mint-ui的popup组件开发服务器设置弹出层-->
<mt-popup style="width:96%;" v-model="serverPopupVisible" popup-transition="popup-fade">
     
     <mt-header title="服务器设置">
         <mt-button icon="back" slot="left" @click="serverPopupVisible=false"></mt-button>
     </mt-header>
     
     <div style="width:96%;margin:0 auto;">
         <mt-field label="IP" placeholder="请输入服务器IP" v-model="serverConfig.ip"></mt-field>
         <mt-field label="端口" placeholder="请输入服务器端口" v-model="serverConfig.port"></mt-field>
         <mt-field label="应用" placeholder="请输入服务器应用名称" v-model="serverConfig.app"></mt-field>
         <mt-button type="default" @click="setServerConfig" size="large">确定</mt-button>
         <div style="height:0.05rem;"></div>
     </div>

</mt-popup>
```

js代码如下：

```
const vm = new Vue({
     el: '#app',
     data: {
         serverPopupVisible: false,//定义弹出层是否显示
         serverConfig: {},//定义服务器参数
     },
     methods: {
         setServerConfig() {//设置服务器参数
             this.$setServerConfig(this.serverConfig);
             this.serverPopupVisible = false;
             this.$toast('服务器设置成功！');
         },
     },
     mounted() {
         this.serverConfig = this.$getServerConfig();
     }
});
```

完整代码请参阅登录页完整代码

登录代码实现

界面代码

<mt-field label="帐号" placeholder="请输入帐号" v-model="user.u_id"></mt-field>
<mt-field type="password" label="密码" placeholder="请输入密码" v-model="user.u_pwd" ></mt-field>



<div style="height:5%;"></div>
<div>
    <mt-button type="primary" size="large" @click="login" >登录</mt-button>

    <mt-button type="default" @click="serverPopupVisible=true" size="large" style="margin-top:0.1rem;">服务器设置
    </mt-button>
    
</div>

js代码

const vm = new Vue({
   el: '#app',
   data: {
      user:{}
   },
   methods: {
      
       login() {
           this.$myPost('/safty/login/user', this.user)
               .then(result => {

                   setTimeout(() => {
                       window.location.href = "../../safty/home/index.html";
                   }, 1000);

               });
       },

   },
   mounted() {
     
   }
});

完整代码请参阅登录页完整代码