SPA项目开发之登录注册

第一步 安装开发模块

npm install element-ui -S
npm install axios -S
npm install qs -S
npm install vue-axios -S

复制 去你项目文件夹的黑窗口
shift右键
回车 执行就行了

第二步 引入main.js配置

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 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import axios from '@/api/http'  
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios)
Vue.use(ElementUI)
Vue.config.productionTip = false

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

第三步 登录注册页跳转

登录 跳转注册

注册 跳转登录

第四步 登录功能

引入main.js配置
import axios from ‘@/api/http’
import VueAxios from ‘vue-axios’
Vue.use(VueAxios,axios)
这里 可以参考 上面的main.js的文件

两种请求方式

Post请求

let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
				
				this.axios.post(url, this.ruleForm).then(function(response) {
					console.log(response);
				}).catch(function(error) {
					console.log(error);
				});

Get请求

let url = this.axios.urls.SYSTEM_USER_DOLOGIN;

				this.axios.get(url, { //注意数据是保存到json对象的params属性
					params: this.ruleForm
				}).then(function(response) {
					console.log(response);
				}).catch(function(error) {
					console.log(error);
				});

This 指针变量污染

现象

解决

this.axios.post(url, qs.stringify(this.ruleForm)).then((response)=> {
					console.log(response);
					if (response.data.code == 1) {
						this.$message({
							showClose: true,
							message: response.data.msg,
							type: 'success'
						});
					} else {
						this.$message({
							showClose: true,
							message: response.data.msg,
							type: 'error'
						});
					}
				}).catch(function(error) {
					console.log(error);
				});

ajax 跨域问题

引入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 'element-ui/lib/theme-chalk/index.css' // 新添加 2
import App from './App'
import router from './router'
import ElementUI from 'element-ui' // 新添加 1
// import axios from '@/api/http' 
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(ElementUI)
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

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

跨域显现问题

解决

package com.javaxl.util;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

/**
 * 配置tomcat允许跨域访问
 * 
 * @author Administrator
 *
 */
public class CorsFilter implements Filter {

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
	}

	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
			throws IOException, ServletException {
		HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;

		// Access-Control-Allow-Origin就是我们需要设置的域名
		// Access-Control-Allow-Headers跨域允许包含的头。
		// Access-Control-Allow-Methods是允许的请求方式
		httpResponse.addHeader("Access-Control-Allow-Origin", "*");// *,任何域名
		httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
		httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
		filterChain.doFilter(servletRequest, servletResponse);
	}

	@Override
	public void destroy() {

	}
}

axios 的 get/post 的区别

现象

解决

let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';

				this.axios.post(url, qs.stringify(this.ruleForm)).then(function(response) {
					console.log(response);
				}).catch(function(error) {
					console.log(error);
				});