黑马vue实战项目-（一）项目初始化登录功能开发

本文链接：https://blog.csdn.net/weixin_42349568/article/details/108714043

一，项目初始化

在这里插入图片描述
手动配置：
选择babel,router,linter,使用配置文件：

创建完成后预览下：

二，配置element-ui组件库

在这里插入图片描述
做一下相关配置：
按需导入和中文。

安装less-loader：

安装less:

三，配置axios

在这里插入图片描述

四，在码云上初始化项目

第一步：新建仓库：
在这里插入图片描述

第二步：将初始化的项目提交到远程仓库

git remote add origin https://gitee.com/ling-xu/my_shop2.git
git push -u origin master

第一行是告诉git远程仓库的地址，第二行是把这个初始化的项目提交到远程仓库中去。

五，安装mysql数据库

第一步：运行数据库
在这里插入图片描述
第二步：导入数据库（这个项目的后端程序员处理好的数据）

第三步：安装后台依赖包之后，运行这个后台程序：

运行的是api接口，它提供了各种各样的接口地址供我们去访问，这个就是接口文档，后端程序员给我们的！
第四步：利用postman验证接口程序是否正常工作。
在这里插入图片描述
有返回值，则说明接口程序运行正常。

六，登陆界面实现

在这里插入图片描述
也就是说，当登陆成功后，客户端就存储了这个token值，后续这个客户端发送请求，都会携带这个token值，以此来让服务器知道，这个客户端是已经登陆了的。从而开放登陆了才能访问的页面给它，如果发现没有token,就返回登陆页面，迫使它登陆。
第一步：先创建新分支：
在这里插入图片描述
第二步：删除不必要的组件

默认的首页是这个样子的，但是我们现在想把它重置为一个空白的界面：
则先看main.js这个入口文件：

//main.js是入口文件
import Vue from 'vue'
//导入根组件APP.vue
import App from './App.vue'
import router from './router'
import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  router,
	//把路由挂载到vue实例上
  render: h => h(App)
	//通过render函数，把APP根组件渲染到了页面上
}).$mount('#app')

也就是说，首页的内容是APP.vue根组件定义好的。
在这里插入图片描述

<template>
  <div id="app">
   
  </div>
</template>

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

<style>

</style>

这样一来主页就变成空白了。
接下来看router文件
在这里插入图片描述
这些路由是不需要的，那么就也把它删除掉吧！
于是代码的文件变成：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  routes
})

export default router

于是，home组件和about组件就没用到了，删除掉吧！
在这里插入图片描述
这个也不用了删除掉。
这样一来，项目就干净了！
第三步：创建登陆组件
在components文件夹下创建Login.vue组件

<template>
	<div>
		登陆组件
	</div>
</template>

<script>
</script>

<style lang="less" scoped>
</style>

然后再在路由文件中，导入整个组件：
在这里插入图片描述
接着在根组件下设置路由占位符即可：

接下来，就是在login.vue组件中，完成页面的html和css布局便可。
另外，值得注意的是，布局使用的是element-ui组件，需要按需导入，还用到了iconfont,阿里矢量图标库的使用：

<template>
	<div class="login_conntainer">
		<div class="login_box">
			<!-- 头像区域 -->
			<div class="avatar_box">
				<img src="../assets/logo.png" alt="">
			</div>
			<!-- 登陆表单区域 -->
			<el-form label-width="0px" class="login_form">
				<!-- 用户名 -->
			  <el-form-item >
			    <el-input prefix-icon="iconfont icon-bussiness-man-fill" placeholder="请输入用户名"></el-input>
			  </el-form-item>
			  <!-- 密码 -->
			  <el-form-item >
			    <el-input prefix-icon="iconfont icon-unlock-fill" placeholder="请输入密码"></el-input>
			  </el-form-item>
			  <!-- 按钮区域 -->
			  <el-form-item class="btns">
			    <el-button type="primary">登陆</el-button>
			    <el-button type="info">重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
</script>

<style lang="less" scoped>
	.login_conntainer{
		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%);
			.login_form{
				position: absolute;
				bottom: 0;
				width: 100%;
				padding:0 20px;
				box-sizing: border-box;
				.btns{
					display: flex;
					justify-content: flex-end;
				}
			}
			.avatar_box{
				height: 130px;
				width: 130px;
				border: 1px 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{
					height: 100%;
					width: 100%;
					border-radius: 50%;
					background-color: #eee;
				}
			}
		}
	}
</style>