前言
电商管理之项目实战是当代前端新手开发网站必备的一套练习题,也是帮助自己飞速提升的一个过渡
提示:以下是本篇文章正文内容,下面案例可供参考
一、运用到的技术
1.使用vue-cli2.x搭建的开发环境;
2.使用vue-router做路由转换;
3.使用element-ui做界面美化;
4.使用axios做跨域请求接口数据;
5.使用webpack打包管理;
等等
二、系统使用
1.前提是要有node.js、npm、vue-cli环境(最好有Git,会方便很多);
2.下载项目(git clone最好);
3.打开终端切换到该项目名称下,执行以下命令行:
#install dependencies 安装开发环境的依赖,因为不是直接打包上传的项目
npm install
#serve with hot reload at localhost:8080 运行项目基本没问题
npm run dev
代码如下(示例):
将代码推送到码云
A.将代码推送到暂存区 git add .
B.将代码提交到仓库 git commit -m ‘完成了权限功能开发’
C.将rights分支代码推送到码云 git push
D.将代码合并到master
git checkout master
git merge rights
E.将master代码推送到码云
git push
三、引入及配置
代码如下(示例):
在main中引入必要的一些组件就可以玩耍了
// 引入vuex
import Vuex from 'vuex';
// 引入vant组件
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
// 引入ElementUI组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//Echarts图表引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//引入axios和配置请求根路径
import axios from 'axios'
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1'
// 添加请求拦截器
axios.interceptors.request.use(config => {
console.log(config)
// 从sessionStorage获取token值,然后设置给请求头
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须 return config
return config
})
Vue.prototype.$http = axios
四、重点来了————登录(login)
1.请求接口
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.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中
window.sessionStorage.setItem('token', res.data.token)
// 2. 通过编程式导航跳转到后台主页,路由地址是 /index
this.$router.push('/index')
})
2.登录鉴权(设置路由守卫后,在登录页通过路由无法跳转到首页)
这里我用的是路由守卫,当然页可以用全局守卫达到相同的效果
// 挂载路由导航
beforeEnter(to, from, next) {
if (to.path === '/login') return next()
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/')
next()
},
baby们,今天就到这里了,下期再见❤