前言:
最近发现养成记录的习惯真的太好了,本人习惯于用笔记记录,但是关于项目流程这些,其实没有一个特别系统化的认知,最近刷b站黑马的vue电商视频,再看到有很多小伙伴都记录了自己的开发流程,于是我决定把他摸出来记录一下! 这里参考了以下2个链接,都写的太棒拉!
参考1.
参考2.
参考3.
一、项目技术栈
1、1 前端
创建项目以后我直接用包管理器安装的,饿了么也是使用的全局(我懒)
大致需要安装:
- Element-UI
- Axios
- Editor
- Nprogress
- Echarts
2、1 后端
后端是已经写好了的,采用 express 搭建的 API 服务,返回的数据是 JSON 格式的数据,只需要导入数据库,并配置一下数据库信息,就可以跑起来了。(跟着视频走)
二、开发流程
2、1 登陆和退出
-
分析登陆业务流程
1、在登陆页面输入用户名和密码。
2、调用后台接口进行验证。
3、通过验证后,根据后台响应状态跳转首页。 -
登陆和退出的技术点
1、了解用户信息存储方式。
2、通过session在服务器记录状态。
3、通过token来维持用户状态。应该掌握(自行了解~等我把整个文章都写完了再回来补充答案):
1、什么时候用session或者cookie呢?
2、两者有什么区别呢?
3、跨域是什么?
token原理分析图
2-1-1 登陆页面
需要用到的饿了么组件:
- el-form (表单)
- el-form-item (表单的内容项)
- el-input (输入框)
- el-button (登陆重置按钮)
- icon (输入框前面的图标)
- Message (登陆成功失败以后的提示)
需要掌握:
每个表单都要绑定数据对象。:model
每个input绑定对应表单数据对象的属性。v-model
vue获取dom元素的方式为在标签上写ref。ref=xxx
表单重置的方法是resetFields。 this.$refs.xxx.resetFields()验证表单的方法是validate。
this.$refs.xxx.validate( (valid) => { if (!valid) return)}
表单重置和验证,input必须要有prop属性去绑定对应的表单属性。
保存信息到session里面
window.sessionStorage.setItem("保存的名字",要保存的数据)
跳转页面:this.$router.push("/login");
<!-- 登陆 -->
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像 -->
<div class="avatar_box">
<img src="../assets/headerImg.jpg" />
</div>
<!-- 登陆 -->
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
<!-- 用户名 -->
<el-form-item prop="username">
<el-input
prefix-icon="iconfont icon-user"
v-model="loginForm.username"
placeholder="请输入用户名"
></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input
prefix-icon="iconfont icon-3702mima"
v-model="loginForm.password"
show-password
placeholder="请输入登陆密码"
></el-input>
</el-form-item>
<!-- 按钮 -->
<el-form-item class="btn">
<el-button type="primary" @click="login">登陆</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
//登陆表单
loginForm: {
username: "草莓SAMA",
password: "xwq997",
},
// 表单验证规则
loginFormRules: {
username: ....此处省略
password: ....此处省略
],
},
};
},
components: {
},
methods: {
//重置按钮
resetLoginForm() {
this.$refs.loginFormRef.resetFields();
},
// 登陆按钮
login() {
this.$refs.loginFormRef.validate(async (valid) => {
if (!valid) return;
const {
data: res } = await this.$axios.post("login", this.loginForm);
console.log(res);
if (res.meta.status !== 200) return this.$message.error("登陆失败");
this.$message.success("登陆成功");
//保存token到session里面
window.sessionStorage.setItem("token", res.data.token);
this.$router.push("/home");
});
},
},
};
</script>
</style>
2、2 首页
需要用到的组件:
- el-container 布局容器
- NavMenu 左侧菜单栏
补充:beforeEach (是一个回调函数)如果是有权限的页面,要用路由导航守卫来进行判断。(不用的话,直接复制地址也可以进入页面。用了的话就会判断是否有token)
to:要去的页面
from:当前所在的页面(从哪个页面跳到to的页面)
next:能否进入成功 最重要的参数!只要有这个参数,就必须调用才能执行。,
next()放行,next(‘/login’)强制跳转
在data中定义一个数组menulist来接收左侧菜单数据
data数据为:
iconList: [
"iconfont icon-user",
"iconfont icon-tiji