项目概述
1 电商项目基本业务概述
根据不同的应用场景,电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式,我们主要是做关于PC后台管理方面
2 电商后台管理系统的功能
电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能
3 电商后台管理系统的开发模式(前后端分离)
电商后台管理系统整体采用前后端分离的开发模式,其中前端项目是基于Vue技术栈的SPA项目。
4 电商后台管理系统的技术选型
① 前端项目技术栈:
Vue
Vue-router
Element-UI
Axios
Echarts
② 后端项目
Node.js
Express
Jwt
Mysql
Sequelize
项目初始化篇
cmd输入
vue ui
项目初始化篇
① 安装 Vue 脚手架
② 通过 Vue 脚手架创建项目
③ 配置 Vue 路由
④ 配置 Element-UI 组件库
⑤ 配置 axios 库
⑥ 初始化 git 远程仓库
⑦ 将本地项目托管到Github或码云中
使用码云托管项目篇
安装mysql
安装phpStudy,导入数据库
导入
其他选项菜单–>mysql工具–>打开数据库目录,有下边这些文件说明数据库还原完成。
配置api接口
vue_api_server文件夹下 shift右键 打开powershell终端,
npm install, node app.js(把api接口项目跑起来)下边这样就是成功了
postman(测接口)
接口http://119.23.53.78:8888/api/private/v1/login?
username=admin&password=123456
登录退出功能实现
登录业务的相关技术点
http 是无状态的
通过 cookie 在客户端记录状态(前端后台无跨域时)
通过 session 在服务器端记录状态(前端后台无跨域时)
通过 token 方式维持状态(前端后台有跨域时)
打开项目,先去终端
梳理项目结构
app.vue
router index.js(删掉)
渲染Login组件并实现路由重定向
//components下建Login.vue
//index.js(router)
import Login from '../components/Login'
const routes = [
{ path: '/', redirect:'/login'},
{ path: '/login' , component: Login}
]
//App.vue
// 路由占位符
<router-view></router-view>
新建
main.js里
//导入全局样式表
import "./assets/css/global.css"
登陆界面
登录页面代码编写
用到element ui
//(element.js)plugins里
import Vue from 'vue'
import { Button } from 'element-ui'
import {Form ,FormItem} from 'element-ui'
import {Input} from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
<el-form
:rules="loginFormRules"
ref="loginFormRef"
:model="loginForm"
label-width="0px"
class="login_form"
>
自己的字体图标使用
复制fonts文件夹到assets目录下,
//main.js导入
import "./assets/fonts/iconfont.css"
//组件页面使用
<el-input prefix-icon="iconfont icon-users">
表单数据绑定
<el-form :model="loginForm" label-width="0px" class="login_form" >
<el-input v-model="loginForm.username">
data() { return {loginForm: { username: "admin", password: "123456", },
表单数据验证
<el-form :rules="loginFormRules"
<el-form-item prop="username">
<el-form-item prop="password">
loginFormRules: { username: [{..}],password: [{..}]
表单重置(resetFields)
<el-form ref="loginFormRef">
<el-button type="info" @click="resetLoginForm">重置</el-button>
methods: {
resetLoginForm() {
this.$refs.loginFormRef.resetFields();
},
表单数据预验证(validate)
<el-button type="primary" @click="login">登录</el-button>
login() {
this.$refs.loginFormRef.validate(async (valid) => {
console.log(valid);
配置axios发起登录请求
//main.js
import axios from 'axios'
axios.defaults.baseURL = 'http://119.23.53.78:8888/api/private/v1' //配置请求的根路径
Vue.prototype.$http = axios
//Login.vue
login() { this.$http.post("login", this.loginForm); //接口文档里,请求方式,路径,参数
phpStudy 启动mysql
vue_api_server 文件夹里 powershell输 node app
login() {
this.$refs.loginFormRef.validate(async valid => {
//console.log(valid); // true/false
if (!valid) return
const { data: res } = await this.$http.post('login', this.loginForm)
//console.log(res);
if (res.meta.status != 200) return console.log("登录失败");
console.log("登陆成功");
});
},
弹框提示
//element.js
//导入弹框提示组件
import { Message } from 'element-ui'
Vue.prototype.$message = Message
//Login.vue 的login()方法中
if (res.meta.status != 200) return this.$message.error('登陆失败!');
this.$message.success("登陆成功")
登录跳转到home
//Login.vue 的login()方法中
// 1. 将登录成功之后的 token,保存到客户端的 sessionStorage 中
// 1.1 项目中出了登录之外的其他API接口,必须在登录之后才能访问
// 1.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中
window.sessionStorage.setItem("token", res.data.token);
// 2. 通过编程式导航跳转到后台主页,路由地址是 /home
this.$router.push("/home");
建Home.vue
//index.js (router)
import Home from '../components/Home'
{ path:'/home', component:Home }
最终login()
login() {
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("登陆成功");
window.sessionStorage.setItem("token", res.data.token);
this.$router.push("/home");
});
}
路由导航守卫控制访问权限
如果用户没有登录,但是直接通过 URL 访问特定页面,需要重新导航到登录页面
//index.js (router)
//挂载路由导航守卫
// 为路由对象,添加 beforeEach 导航守卫
router.beforeEach((to, from, next) => {
// next是一个函数,表示放行 next()放行,next('/login')强制跳转
// 如果用户访问的登录页,直接放行
if (to.path === '/login') return next()
const tokenStr = window.sessionStorage.getItem('token')
// 没有token,强制跳转到登录页
if (!tokenStr) return next('/login')
next()
})
退出功能
<el-button type="info" @click="logout">退出</el-button>
methods: {
logout() {
window.sessionStorage.clear(); // 清空token
this.$router.push("/login"); // 跳转到登录页
},
}
处理ESLint语法报错
//项目根路径新建 .prettierrc
{
"semi": false, //不额外加分号
"singleQuote": true //启用单引号
}