SPA项目开发之登录

最新推荐文章于 2023-09-21 20:10:14 发布
最新推荐文章于 2023-09-21 20:10:14 发布
阅读量205 收藏
点赞数
分类专栏： 前端 文章标签： SPA项目开发之登录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43514335/article/details/99170147
版权

SPA项目开发之登录

1.1 使用 vue-cli 脚手架工具创建一个 vue 项目
vue init webpack pro01
在这里插入图片描述

1.2 npm安装elementUI
cd pro01 #进入新建项目的根目录
npm install element-ui -S #安装element-ui模块

1.3 在项目中 src 目录下找到 main.js ，并在指定位置添加三行代码（ main.js 是入口文件，所以在这里引入就行，页面就不用引入了）

  import Vue from 'vue'

   import ElementUI from 'element-ui' // 新添加 1

   import 'element-ui/lib/theme-chalk/index.css' // 新添加 2 ，避免后期打包样式不同，要放在import App from './App'; 之前

  

  import App from './App'

  import router from './router'
  
   Vue.use(ElementUI)   // 新添加 3

  Vue.config.productionTip = false

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(ElementUI)
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

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

axios/qs/vue-axios安装及使用步骤

 1.安装
 
      npm install axios -S
      npm install qs -S  
      npm install vue-axios -S                        
   
      2.修改main.js文件
      #import axios from 'axios'
      #import qs from 'qs'
      import axios from '@/api/http'             #vue项目对axios的全局配置      
      import VueAxios from 'vue-axios' 
      Vue.use(VueAxios,axios)

      3.之后就可以直接在Vue组件文件的methods里使用了  
      this.axios.get(url,{params:{id:1,name:'zs'}}).then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      });

导入所需文件
action.js

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/T216_SSH', //服务器
	'SYSTEM_USER_DOLOGIN': '/vue/userAction_login.action', //用户登陆
	'SYSTEM_USER_DOREG': '/vue/userAction_reg.action', //用户注册
	'SYSTEM_MENU_TREE': '/vue/treeNodeAction.action', //左侧树形菜单加载
	'SYSTEM_ARTICLE_LIST': '/vue/articleAction_list.action', //文章列表
	'SYSTEM_ARTICLE_ADD': '/vue/articleAction_add.action', //文章新增
	'SYSTEM_ARTICLE_EDIT': '/vue/articleAction_edit.action', //文章修改
	'SYSTEM_ARTICLE_DEL': '/vue/articleAction_del.action', //文章删除
	'SYSTEM_USER_GETASYNCDATA': '/vue/userAction_getAsyncData.action', //vuex中的异步加载数据
	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}
}

http.js

/**
 * vue项目对axios的全局配置
 */
import axios from 'axios'
import qs from 'qs'

//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action

// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;

//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
	data = qs.stringify(data);
	return data;
};


// 请求拦截器
axios.interceptors.request.use(function(config) {
	// var jwt = window.vm.$store.getters.getJwt;
	// config.headers['jwt'] = jwt;
	return config;
}, function(error) {
	return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function(response) {
	// debugger;
	// var jwt = response.headers['jwt'];
	// if(jwt){
	// 	window.vm.$store.commit('setJwt',{jwt:jwt});
	// }
	return response;
}, function(error) {
	return Promise.reject(error);
});

// // 路由请求拦截
// // http request 拦截器
// axios.interceptors.request.use(
// 	config => {
// 		//config.data = JSON.stringify(config.data);  
// 		//config.headers['Content-Type'] = 'application/json;charset=UTF-8';
// 		//config.headers['Token'] = 'abcxyz';
// 		//判断是否存在ticket，如果存在的话，则每个http header都加上ticket
// 		// if (cookie.get("token")) {
// 		// 	//用户每次操作，都将cookie设置成2小时
// 		// 	cookie.set("token", cookie.get("token"), 1 / 12)
// 		// 	cookie.set("name", cookie.get("name"), 1 / 12)
// 		// 	config.headers.token = cookie.get("token");
// 		// 	config.headers.name = cookie.get("name");
// 		// }
// 		return config;
// 	},
// 	error => {
// 		return Promise.reject(error.response);
// 	});

// // 路由响应拦截
// // http response 拦截器
// axios.interceptors.response.use(
// 	response => {
// 		if (response.data.resultCode == "404") {
// 			console.log("response.data.resultCode是404")
// 			// 返回 错误代码-1 清除ticket信息并跳转到登录页面
// 			//      cookie.del("ticket")
// 			//      window.location.href='http://login.com'
// 			return
// 		} else {
// 			return response;
// 		}
// 	},
// 	error => {
// 		return Promise.reject(error.response) // 返回接口返回的错误信息
// 	});



export default axios;

Login.vue

<template>
	<div class="login-wrap">
		<el-form :model="ruleForm" class="demo-ruleForm login-container">
			<h3 style="text-align: center;"> 用户登录</h3>
			<el-form-item label="用户名">
				<el-input v-model="ruleForm.uname"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="ruleForm.pwd"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width: 100%;" type="primary" @click="doLogin()">提交</el-button>
			</el-form-item>
			<el-link type="primary">忘记密码</el-link>
			<el-link type="primary" @click="toReg">用户注册</el-link>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ruleForm: {
					uname: '',
					pwd: ''
				}
			};
		},
		methods: {
			toReg() {
				this.$router.push({
					path: '/Reg'
				})
			},
			doLogin() {
				let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
				this.axios.get(url, {
					params: 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((response) => { //失败的回调函数(异常)
					console.log(response);
				});



				/* post请求 */
				/* qs.stringify()  将json转为键值对形式 */
				/* 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);
				}); */
			}
		}
	}
</script>

<style scoped>
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-image: url(data:image/svg+xml;
		
		background-color: #112346;
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}

	.login-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 350px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}

	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}
</style>

Reg.vue

<template>
	<div class="login-wrap">
		<el-form :model="ruleForm" class="demo-ruleForm login-container">
			<h3 style="text-align: center;">用户注册</h3>
			<el-form-item label="用户名">
				<el-input v-model="ruleForm.uname"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="ruleForm.upwd" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width: 100%;" type="primary">提交</el-button>
			</el-form-item>
			<el-link type="primary">忘记密码</el-link>
			<el-link type="primary" @click="toLogin">用户登录</el-link>

		</el-form>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				ruleForm: {
					uname: '',
					upwd: ''
				}
			};
		},
		methods: {
			toLogin(){
				this.$router.push({
					path:'/Login'
				})
			}
		}
	}
</script>

<style scoped>
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-image: url(data:image/svg+xml;
		
		/* background-color: #112346; */
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}

	.login-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 350px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}

	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}
</style>

App.vue
这里只修改了样式

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

<script>	
export default {
  name: 'App'
}
</script>


<style> 
html,
body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    widows: 100%;
    height: 100%;
}
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Res from '@/views/Res'
Vue.use(Router)

export default new Router({
	routes: [{
		path: '/',
		name: 'Login',
		component: Login,
	},
	{
		path: '/Login',
		name: 'Login',
		component: Login,
	},
	{
		path: '/Res',
		name: 'Res',
		component: Res,
	}]
})

关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SPA项目开发之动态树+数据表格+分页
Smootht的博客
08-25 245
SPA项目开发之动态树+数据表格+分页1. 前言2. 动态树2.1 代码块概解2.2 效果显示3. 数据表格+分页3.1 定义组件3.2 表格样式3.3 搜索框3.4 分页3.5 实现代码块3.6 实现效果图 1. 前言 续写前篇Spa项目开发之首页导航+左侧菜单，在spa项目中进行书写一个动态树与数据表格，分页的功能 2. 动态树 2.1 代码块概解 在前篇代码的基础上，将LeftNav.vue组件内容进行修改成动态的菜单，也就是将获取到的表格数据赋值遍历输出 要实现路由跳转，先要在el-menu标
SPA项目开发之首页导航+左侧菜单
weixin_30328063的博客
08-29 104
Mock.js: 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 众所周知Mock.js因为两个重要的特性风靡前端: 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax...
SPA项目开发之动态树 + 数据表格 + 分页
断雨的博客
08-13 160
文章目录动态树数据表格分页测试 思路 准备好后台（左侧树，带分页的文章查询） 将左侧树的数据绑定到elementui中的menu标签上 新增一个自定义组件用来展示文章列表的 绑定elementui提供的分页组件来完成分页功能 动态树 动态生成NavMenu导航菜单(只支持2级菜单) 结构 <el-menu key="" index=""> <el-subme...
SPA首页导航和左侧菜单
chiyangj的博客
08-28 722
这里写目录标题使用mockjs模拟mock.js的安装引用mock.js拦截路由配置首页头部点击退出 使用mockjs模拟 什么是mock.js Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 mock.js重要特性 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 拦截Ajax请求 不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。 mock.js的安装引用 进入项目的盘符如： 安装moc
SPA项目开发 之 登录注册
qq_44641053的博客
08-09 5736
SPA项目开发登录注册监听器处理CORS跨域的监听器 登录注册 vue+elementUI完成注册及登陆 先创建一个新项目 vue init webpack javaxl_spa C d javaxl_spa npm install npm install element-ui -S confi...
SPA项目开发之登录与注册
Cat_Jay_Fish的博客
11-09 1755
课程目标 1.spa项目完成登录注册布局 2.spa项目完成登录功能 3.This指针带来的变量污染 4.ajax跨域问题 5.axios的get/post的区别（qs） 一.spa项目完成登录注册布局 ①安装开发模块 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios -S 执行语句 npm install element-ui -S （用于...
简简单单的SPA项目开发之登录注册（使用axios完成数据交互）
m0_67094505的博客
09-12 2114
②$.ajax先在也有两种：相当于①axios相当于②（jQuery中的ajax）axios作用：使用获取后台数据，做局部刷新今天呢就给大家分享一下如何使用以及axios进行数据的交互。需求：1、在登录界面点击用户注册时，跳转到注册页面2、在注册界面点击用户登录，跳到登录界面添加用户注册组件【Reg.vue】用户注册
SPA项目开发（首页导航&左侧菜单）
weixin_66202611的博客
09-12 497
process.env.moc在生产环境为false，开发环境为turn。以上两个文件还是有区别的 一个是开发环境（dev.env）表示需要这门技术mock作为数据的接口。2.导入AppMain.vue/LeftNav.vue/TopNav.vue。3.在需要用到总线中变量时，通过this.$root.Bus.$on获取中心中的变量值。2. 在子组件中通过this.$root.Bus.$emti注册事件进行传参。4.router.index.js中添加路由与组件的映射。2.引入到main.js中使用。
SPA项目开发登录
weixin_30511039的博客
08-10 207
1. vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一个vue项目 vue init webpack pro01 1.2 npm安装elementUI cd pro01 #进入新建项目的根目录 npm install element-ui ...
SPA项目开发(登录)及常见问题
m0_47252566的博客
08-26 1241
@TOC SPA项目登录功能的实现 安装开发模块 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios -S 三级目录 三级目录 三级目录 二级目录 三级目录
使用vue-cli搭建SPA项目
最新发布
kissship的博客
09-21 407
SPA项目是一种Web应用程序的架构，其主要特点是整个应用程序在加载后，只会加载一次页面（通常是一个HTML文件），之后的用户交互都在这个页面上进行，通过JavaScript动态地更新内容，而不需要每次用户操作都重新加载整个页面。SPA通常使用前端框架（如React、Angular、Vue.js等）来实现，这些框架允许开发人员创建交互性强、用户体验良好的Web应用程序。Vue CLI（Vue Command Line Interface）是一个用于创建、配置和管理Vue.js项目的官方命令行工具。
webpack与SPA开发环境搭建指南
"详解webpack与SPA实践之开发环境搭建" 在现代前端开发中，Webpack 和单页应用程序（SPA）已经成为主流的开发模式。本篇文章主要关注的是如何使用Webpack来搭建一个适用于SPA开发的环境。让我们逐步深入这个话题。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值