vue.js从入门到深入再到随心而用————vue电商项目002(项目初始化、登录退出功能)

我安装的是vue/cli是4.x的版本，本项目都利用vue ui进行初始化以及相关开发，如果你的
在3.x版本以下至少要更新到3.x才能在cmd中使用vue ui进行初始化

1.项目初始化

1.1打开cmd运行vue ui

==注意：==要先安装好脚手架，可以看我的另外一篇博客
点击这里会跳转哦

1.2选择工作目录

会自动弹出一个网页，点击创建项目选择工作目录

1.3创建项目文件夹

1.4选择手动配置

选择手动，下一步（如果有预设好的设置可以选择预设的，这里演示手动）

选择我下图中的所有选项，点击下一步

如下图所示,然后点击创建项目

1.5选择是否创建为预设

1.6安装element-ui插件

创建项目后，找到插件点击安装插件，找到如图所示的插件点击安装

选择按需添加(如果添加全部会导致文件的体积过大)，在需要某个ui组件时再添加

1.7安装axios依赖

安装axios依赖用于发起ajax请求

1.8初始化git仓库

初始化git仓库，把项目上传到码云，依然可以看我的另外一篇博客
点击这里跳转哦！！

2.后台配置

2.1把数据库的文件导入mysql的数据库中

2.2找到以已经写好的后后端api接口

2.3 启动后台的api接口

按住shift单机鼠标右键单开PowerShell，在PowerShell中执行node ./app.js,出现如下的界面应该就成功的打开了api接口

下面罗列出了所有的api接口，也可以用Postman这个软件进行测试

3.登录以及退出功能

3.1登录

3.1.1登录的业务流程

• 在登录页面输入用户名和密码
• 调用后台接口进行验证
• 通过验证后，根据后台的响应状态跳转到项目主页

3.1.2登录业务的相关技术点

• http是无状态的
• 通过cookie在客户端记录状态
• 通过session在服务器端记录状态
• 通过token方式维持状态（支持跨域请求这里我们用token）

3.1.3token原理分析

3.1.4登录页面的布局

在登录的页面中用到了以下的element-ui组件

• el-form
• el-form-item
• el-input
• el-button
• 字体图标

3.1.5创建login分支并查看状态

在当前的工作目录下打开终端执行git checkout -b login
执行完成之后再执行git branch查看当前的分支，如果创建分支成功会看到如下的结果

会看到当前所在的分支是login分支

3.1.6删除不需要的组件

在新建了项目之后会有默认的一些组件在我们的实际开发中是不需要的，所以我们将这些不要的东西进行清除
打开项目的src目录，点击main.js文件

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

Vue.config.productionTip = false


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

再打开App.vue(根组件)，将根组件的内容进行操作梳理(template中留下根节点，script中留下默认导出，去掉组件，style中去掉所有样式)

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

<style>
</style>

再打开router.js(路由)，将routes数组中的路由规则清除，然后将views删除，将components中的helloworld.vue删除

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    
  ]
})

3.1.7创建登录组件

在components文件夹中新建Login.vue组件,添加template，script，style标签,style标签中的scoped可以防止组件之间的样式冲突，没有scoped则样式是全局的

<template>
    <div class="login_container">
        
    </div>
</template>

<script>
export default {
  
}
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b5b6b;
  height: 100%;
}

</style>

在router.js中导入组件并设置规则
在App.vue中添加路由占位符
注意： 在cli3.x和cli4.x中有一点不一样，在3.x中会直接生成一个router.js文件所有的路由规则全部卸载里面，在cli4.x中是生成了一个router的文件夹里面有个index.js文件。大家根据自己的版本找到对应的位置就可以了

import Login from '../components/Login.vue'


const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }
  ]
})

path: ‘/’, redirect: ‘/login’ ：是路由的重定向规则

3.1.8配置less和less-loader依赖

3.1.9添加全局样式

在assets文件夹下面添加css文件夹，创建global.css文件,添加全局样式

在main.js中导入全局样式
import ‘./assets/css/global.css’

3.1.10自定义eslintrc规则

自定义eslintrc规则规则的目的是为了能够在开发过程中更好的用热加载，因为在eslintrc规则中不允许出现tab和空格混用的情况，但是在实际的开发中这种情况并不会对结果有任何的影响，我们来修改这些规则，同时eslintrc规则也规定了定义了某个元素就必须使用不然也会有警告或者报错，在开发过程中不用的元素就不要写同时也保证了代码的质量,下面是在.eslintrc.js中添加的东西，大家添加进去即可

"rules": {			
		"arrow-parens":0,
		"genertor-star-spacing":0,
		 // 'space-before-function-paren':0,
		"no-mixed-spaces-and-tabs":0,
		"no-debugger":process.env.NODE_ENV==='prodection'?2:0,
		"no-unused-vars":"off"		
	}

3.1.11Login.Vue中的代码

element-ui的官网

在官网中有我们需要的各种组件基本上整个项目都是基于element-ui完成的，在登录页面中还用到了阿里的图标库，大家感兴趣的可以去看一下，我使用的阿里的图标库是下载好的，在main.js中导入就可以使用了import ‘./assets/fonts/iconfont.css’

使用阿里图标库的原因是在element-ui提供的图标库中没有我们想要的图标，阿里的提标库中就提供了一些图标可以供我们使用，在登录页面的输入框的用户和密码的小图标就是来自于阿里的图标库。

关于一些数据绑定的知识和利用axios发起网络请求，如果返回的类型是promise就可以利用async和await进行简化然后{data:res}进行结构我就不再这里一一的介绍了，如果大家想要复习可以去看看我的几篇博客，在代码中也有详细的注释，大家也可以看看，有助于理解。当然有问题也欢迎大家留言

• this.$message.success(’’) 也是element-ui组件所以也需要在element.js文件中进行注册和挂载注册和其他的没有区别
• 导入弹框提示组件 import { Message } from ‘element-ui’
• 但是和其他组件不一样的是他的使用是挂载到vue的原型上
• 将Message挂载到vue原型上
  Vue.prototype. $message= Message 然后就可以直接通过this.$message调用

<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 头像区域 -->
			<div class="avator_box">
				<img src="../assets/logo.png" />
			</div>
			<!-- 登录表单区域 -->
			<!-- ref引用对象用来绑定重置的对象 -->
			<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item  prop="password">
					<el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
				</el-form-item>
				<!-- 按钮区 -->
				<el-form-item class="btns">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="info" @click="loginFormRef">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				// 这是登录表单的数据绑定对象
				loginForm:{
					username:'admin',
					password:'123456'
				},
				// 表单的验证规则对象
				loginFormRules:{
					// 验证用户名是否合法
					username:[
						{ required: true, message: '请输入登录名称', trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					],
					
					// 验证密码是否合法
					password:[
						{ required: true, message: '请输入登录密码', trigger: 'blur' },
						{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
					]
				}
			}			
		},
		methods:{
			//点击重置按钮，重置登录表单
			loginFormRef(){
				this.$refs.loginFormRef.resetFields();
			},
			login(){
			//validate表单的预验证，如果没有通过所有的验证规则就不能进行下面的操作
				this.$refs.loginFormRef.validate(async valid=>{
					if(!valid){
						return;
					}
					const {data:res}=await this.$http.post("login",this.loginForm);
					if(res.meta.status!=200) return this.$message.error('登陆失败');
					this.$message.success('登陆成功');
					//1.将登陆后的token，保存到客户端的sessionStorage中
					//1.1项目中除了登录之外的其他API接口，必须在登录之后才能访问
					//1.2token只应在当前网站打开期间生效。，所以将token保存在sessionStorage中
					//2.通过编程式当行跳转到后台主页，路由地址是/home
					window.sessionStorage.setItem('token',res.data.token);
					this.$router.push("/home");
				})
			}
			
		}
		
		
	}
</script>

<style lang="less" scoped>
	.login_container {
		background-color: #2b4b6b;
		height: 100%;
	}

	.login_box {
		width: 450px;
		height: 300px;
		background-color: #fff;
		border-radius: 3px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.avator_box {

			height: 130px;
			width: 130px;
			border: 2px solid #eee;
			border-radius: 50%;
			padding: 10px;
			box-shadow: 0 0 10px #ddd;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #FFF;

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-color: #eee;
			}
		}

	}
	.login_form{
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.btns {
		display: flex;
		justify-content: flex-end;
	}
</style>

3.1.12路由导航守卫控制访问权限

如果不加以权限的限制，不登录都可以进入home页面，很显然是不符合用户需要的，在登录的界面中我们添加了token指令到sessionStorage中，下面我给大家看看登录后在sessionStorage的token指令

很显然只要登录了都会有token令牌
我们需要的效果是如果不登录就不能访问除了login页面以外的任何页面
此时我们就要用到路由守卫，在路由的文件中添加路由守卫

大家不要在图片中的其他文件，按照自己的来，因为我已经完成了项目涉及到后面的东西

3.2退出功能

3.2.1退出功能的实现原理

退出有两步
1.清空token
2.跳转到登录页

3.2.2具体功能的实现

首先当然新建一个Home.vue页面然后设置路由
然后用
<el-button type=“info” @click=“logout”>退出
实现退出功能
退出的button按钮上绑定了一个logout退出事件

实现退出功能
在Home组件中添加一个退出功能按钮,给退出按钮添加点击事件，添加事件处理代码如下：

export default {
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push('/login');
        }
    }
}

3.23补充:element-ui的按需导入形式

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
// 进行全局挂载：
Vue.prototype.$message = Message

整个项目已经全部完成，将持续进行总结和分享，欢迎大佬提出建议，有任何的问题请留言，需要项目数据库和api接口的也可以留言

4提交登录功能的代码

在当前的工作目录下打开终端,依次执行(关于这些命令的作用在我的另外一篇博客中有)
下列git操作的含义
git status
git add .
git status
git commit -m “完成了登录功能”
git branch
git checkout master
git branch
git merge login
git push
git checkout login
git branch
git push -u origin login