电商后台项目概述
管理员使用的业务服务：PC后台管理端
PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计
前端项目是基于Vue的SPA（单页应用程序）项目，前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts
项目及数据库准备
恢复依赖包安装
进入 vue-api-server 目录，运行如下命令，进行恢复安装
npm install
数据库创建及导入
新建数据库 shop_admin，找到 db 目录下的 shop_admin.sql ,将数据导入
启动项目后端程序
运行如下命令，启动后台项目
node app.js
测试
浏览器访问如下链接进行测试
http://127.0.0.1:8888/api/private/v1/goods
项目初始化
码云创建仓库
创建仓库 shop-vue
本地创建项目
执行如下命令，在本地创建项目
vue create vue-shop
将本地项目推送到远程仓库
在vue-shop目录打开git命令行程序
Git 全局设置
git config --global user.name "pengbo"
git config --global user.email "24612582@qq.com"
创建git仓库
mkdir shop-vue
cd shop-vue
git init
本地 vue-shop 目录下新建 README.md
touch README.md
添加 README.md 到暂存区 git add README.md
git add README.md
提交更改 git commit -m 'first commit
git commit -m "first commit"
添加对应的远程仓库 git remote add origin … ，注意要使用自己的地址
git remote add origin https://gitee.com/mcweb/shop-vue.git
推送本地仓库到远程仓库 git push -u origin master
git push -u origin master
配置Element-UI
安装 element ui
npm i element-ui -S
项目中引入element ui
配置Axios
删除组件和视图
删除 src 目录下的 views 目录 中的 Home.vue 和 About.vue
删除 components 目录中的 HelloWorld.vue
实现登录功能
登录逻辑
在登录页面输入账号和密码进行登录，将数据发送给服务器，服务器返回登录的结果
数据中带有token，客户端得到token并进行保存，后续的请求都需要将此token送给服务器，服务
器会验证token以保证用户身份
添加新分支login
- 在login分支中开发当前项目
- 在vs code 中打开终端，使用git status确定当前项目状态,
- 确定当前工作目录是干净的之后，创建一个分支进行开发，开发完毕之后将其合并到master
git checkout -b login
- 然后查看新创建的分支：
git branch
- 确定我们正在使用login分支进行开发
修改根组件
修改App.vue(根组件)，只留下路由出口
<template>
<div id="app"><router-view /></div>
</template> <style>
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
height: 100%;
}
</style>
创建登录组件
在 views 文件夹中新建Login 文件夹，Login 文件夹中新建 index.vue 和 imgs 文件夹
index.vue模板
<template>
<div class="login-container">
<div class="login-box">
<!-- 网站logo -->
<div class="logo-box"><img src="./imgs/login.jpg" alt /></div>
<!-- 表单 -->
<el-form ref="form" :model="loginForm" class="loginForm">
<el-form-item>
<el-input
v-model="loginForm.username"
placeholder="输入用户名"
prefix-
icon="el-icon-user-solid"
></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="loginForm.password"
placeholder="输入密码"
prefix-
icon="el-icon-view"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">登录</el-button>
<el-button type="info">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<style lang="less" scoped>
.login-container {
background-color: #303133;
height: 100%;
.login-box {
width: 450px;
height: 310px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
.logo-box {
position: absolute;
width: 150px;
height: 150px;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #fff;
padding: 5px;
box-shadow: 0 0 10px #eee;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.loginForm {
position: absolute;
top: 120px;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
text-align: center;
}
}
}
</style>
上面用到了 less 的语法，所以需要安装 less 和 less-loader
npm install less less-loader -D
全局样式
全局样式，就是所有或者大部分组件都需要用到的样式
assets 中新建 css 目录，在 css 目录下新建 common.css 在其中编写全局样式
* {
margin: 0;
padding: 0;
}
html,
body,
#app {
height: 100%;
}
然后在 main.js 中导入
import './assets/css/common.css'
添加路由规则
router/index.js 中添加路由规则
import Login from '../views/Login'
const routes = [
{
path: '/login',
name: 'Login',
component: Login
}
]
添加表单验证
给form添加属性:rules=“formLoginRules”，formLoginRules是一堆验证规则，定义在script中
在data中定义formLoginRules规则的具体内容
loginFormRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
]
}
通过的prop属性设置验证规则
<el-form-item label="活动名称" prop="username">
安装配置zxios
安装 axios
npm i axios
main.js 中加入如下代码
// 引入 axios
import axios from 'axios'
// 设置请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 挂载到 Vue 原型上
Vue.prototype.$http = axios
请求登录接口
查看 API 文档，根据登录接口的要求，进行登录请求
存储token
登录成功后，应该将返回的 token 存储起来，建议放到本地存储，而不是 session 中
async submitForm (form) {
try {
// 进行表达校验
await this.$refs.form.validate()
const res = await this.$http.post('login', this.loginForm)
const { status, msg } = res.data.meta
if (status === 200) {
const { data: { token } } = res.data
localStorage.setItem('token', token)
} else if (status === 400) {
console.log(msg)
}
} catch (err) {
console.log('验证未通过')
}
}
成功跳转
登录成功后跳转到后台首页 views 目录下创建 Home 目录，此目录下新建 index.vue
<template>
<div>
this is home
<el-button type="info" @click="logout"> 退出 </el-button>
</div>
</template>
<script>
export default {
methods: {
logout () {
window.localStorage.clear()
this.$router.push('/login')
}
}
}
</script>
<style lang='less' scoped>
</style>
修改登录方法 submitForm，登录成功后，添加如下代码
this.$router.push('home')
添加路由
如果用户没有登录，不能访问/home,如果用户通过url地址直接访问，则强制跳转到登录页面 打开router.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
Vue.use(Router)
const router = new Router({
routes: [
{ path:'/', redirect:'/login'},
{ path:'/login' , component:Login },
{ path:'/home' , component:Home}
]
})
//挂载路由导航守卫,to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作
router.beforeEach((to,from,next)=>{
if(to.path === '/login')
return next();
//获取token
const tokenStr = window.sessionStorage.getItem('token');
if(!tokenStr)
return next('/login');
next();
})
export default router
实现退出功能
在Home组件中添加一个退出功能按钮,给退出按钮添加点击事件，添加事件处理代码如下：
export default {
methods:{
logout(){
window.sessionStorage.clear();
this.$router.push('/login');
}
}
}
扫一扫
1537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
