前后端交互------登录页面

1.创建项目

在文件夹下运用cmd命令创建一个vue项目

 

然后导入Axios

cnpm install axios--save

 还需要再装element

vue add element

接下来需要在HBbuilder中导入项目

 创好之后启动项目

成功启动！

 2.配置前端页面

2.1 main.vue:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

import Axios from 'axios' 

//这行代码导入了名为Axios的模块，该模块是一个基于Promise的HTTP客户端，用于发送网络请求。
vue.prototype.$axios=Axios
//这行代码将Axios作为Vue实例的原型属性axios,这样在组件中就可以通过this.axios来访问Axios实例，方便在组件中进行网络请求。
Axios.defaults.baseURL = 'https://127.0.0.1:8001';
//这行代码设置了Axios的默认请求URL。这里将基础URL设置为https://127.0.0.1:8001，意味着所有通过Axios发送的请求都会以这个URL作为基础进行请求。

Vue.config.productionTip = false

import qs from 'quertstring'
// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
    //post和put请求中的请求参数修改为json字符串
	if(config.method==="post"||config.method==="put")
	{
		config.data=qs.stringify(config.data);
	}
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2.2 app.vue

 <router-view> -----Vue Router提供的路由视图组件，用于渲染当前路由对应的组件。它会根据当前URL的路径匹配到对应的组件，并将该组件渲染在这个位置。

<template>
  <div id="app">
	<router-view></router-view>
  </div>
</template>
<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

2.3 index.vue

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Login',
    component:Login
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

2.4 Login.vue

<template>
	<div>
	<h3>登陆系统</h3>
	<el-form  label-width="100px" class="demo-ruleForm" style="width: 50%;margin: auto;">
	<el-form-item label="账号" >
		  <el-input type="text" v-model="loginform.username" autocomplete="off"></el-input>
	</el-form-item>
	  <el-form-item label="密码" >
	    <el-input type="password" v-model="loginform.password" autocomplete="off"></el-input>
	  </el-form-item>
	  <el-form-item>
	   <el-button type="primary" v-on:click="login()">登录</el-button>
	  </el-form-item>
	</el-form>
	</div>
</template>
<script>
	export default{
		name:"Login",
		data()
		{
			return{
				loginform:{
					username:'',
					password:''
				}
			}
		},
		methods:{
			login()
			{
				let _this=this;
				// 为给定 ID 的 user 创建请求
				this.$axios.get('/login/'+this.loginform.username+'/'+this.loginform.password,{
					username:this.loginform.username,
					password:this.loginform.password
				})
				  .then(function (response) {
				    console.log(response);
				  })
				  .catch(function (error) {
				    console.log(error);
				  });
			}
			
		}
	}
</script>

3.最终效果