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

忘是亡心i 2022-12-24 04:56 220阅读 0赞

# 前言 #

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

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

--------------------

# 一、运用到的技术 #

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