vue+element-ui电商管理之项目实战（1）

 

前言

电商管理之项目实战是当代前端新手开发网站必备的一套练习题，也是帮助自己飞速提升的一个过渡

提示：以下是本篇文章正文内容，下面案例可供参考

---

一、运用到的技术

 

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们，今天就到这里了，下期再见❤