# second-kill-ui

**Repository Path**: jeavenwong/second-kill-ui

## Basic Information

- **Project Name**: second-kill-ui
- **Description**: 用Vue写一个简单的商场前端界面，实现秒杀系统的前后端分离
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-06-20
- **Last Updated**: 2025-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# second-kill-ui

这是秒杀系统的前端。

对应的后端项目是 https://gitee.com/jeavenwong/second-kill-end

## 技术栈

- Vue 2.9.6
- Vue Router
- Element UI
- axios

## UI

![image-20200706153505392](https://gitee.com/jeavenwong/second-kill-ui/raw/master/pic/image-20200706153505392.png)

![image-20200706153548175](https://gitee.com/jeavenwong/second-kill-ui/raw/master/pic/image-20200706153548175.png)

![image-20200706153609699](https://gitee.com/jeavenwong/second-kill-ui/raw/master/pic/image-20200706153609699.png)

![image-20200706153650002](https://gitee.com/jeavenwong/second-kill-ui/raw/master/pic/image-20200706153650002.png)

![image-20200706154136148](https://gitee.com/jeavenwong/second-kill-ui/raw/master/pic/image-20200706154136148.png)

![image-20200706154258815](https://gitee.com/jeavenwong/second-kill-ui/raw/master/pic/image-20200706154258815.png)

![image-20200706154309837](https://gitee.com/jeavenwong/second-kill-ui/raw/master/pic/image-20200706154309837.png)

## 页面的跳转

页面的跳转采用 Vue Router 的方式，配置 router/index.js  前端路由信息。

```javascript
/**
 * 路由设置
 */
export default new Router({
  routes: [
    {
      path: '/BookList',
      name: 'BookList',
      component: BookList
    },
    {
      path: '/HotBooks',
      name: 'HotBooks',
      component: HotBooks
    },
    {
      path: '/About',
      name: 'About',
      component: About
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Register',
      name: 'Register',
      component: Register
    },
    {
      path: '/ShoppingCart',
      name: 'ShoppingCart',
      component: ShoppingCart
    },
    {
      path: '/DetailPage',
      name: 'DetailPage',
      component: DetailPage
    }
  ]
})

```

页面间的跳转使用如下方式

```javascript
this.$router.push({path: "/XXXXX"}); 
```

## 跨域

本地前端项目使用端口是 8080 ，但是后端项目使用端口是 8902，所以前端发送请求需要跨域。下面是允许跨域的措施。

#### 前端设置

在 config/index.js 中进行配置

```js
module.exports = {
  dev: {

    // Paths  //设置你调用的接口域名和端口号 别忘了加http
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8092',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      }
    },
```

#### 后端

Spring Boot 后端写一个跨域配置类

```java
/**
 * 跨域配置
 * @author Jeaven Wong (Jianwei Wang)
 * @date 2020/7/8 8:43
 */

@Configuration
public class CustomCORSConfiguration {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*"); // 允许任何的head头部
        corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
        corsConfiguration.addAllowedMethod("*"); // 允许任何的请求方法
        corsConfiguration.setAllowCredentials(true);
        return corsConfiguration;
    }

    // 添加CorsFilter拦截器，对任意的请求使用
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }

}
```

## 前端数据存储

浏览器提供了很多存储方式，localStorage，sessionStorage，cookie 以及 indexedDB 等。

关于各个存储的区别，请自行查阅资料。为了安全起见，采用 Session + cookie 的形式来存储用户信息。

由于sessionStorage在每次关闭标签页后都会清空，所以用户需要重新登录。

```javascript
 this.$axios.post('/user/login', {
                   username: user_account,
                   password: user_pass
                  })
                  .then((res)=>{
                   if(res.status == 200) {
                      var response = res.data;
                      console.log(response);
                      var isSuccess = response.code;
                      if(isSuccess == 3) {  // 登录成功
                        const info = { name: user_account, pass: user_pass }
                        // 使用 cookie 来存储用户登录的状态
                        // todo 后面还可以添加用户的状态，参考: https://segmentfault.com/a/1190000018856394
                        setCookie('user_id', response.data);
                        console.log('cookie user_id is: ' + getCookie('user_id'));
                        sessionStorage.setItem('user_name', user_account);
                        sessionStorage.setItem('user_id', getCookie('user_id'));
                        console.log('session user name is: ' + sessionStorage.getItem('user_name'));
                        console.log('session user id is: ' + sessionStorage.getItem('user_id'));
                        this.openOff2 = true;
                        // 延迟10s返回首页
                        //setTimeout(this.$router.push({name: 'BookList', params: {}}), 10000);
                        //调用elementUI的加载层
                        const loading = this.$loading({
                               lock: true,
                               text: '10s后跳转到商品页面~',
                               spinner: 'el-icon-loading',
                               background: 'rgba(0, 0, 0, 0.7)'
                        });
                         setTimeout(() => {
                              this.$router.push({path: "/BookList"}); // 强制切换到商品页面
                              loading.close();
                         }, 5000);  // 5秒跳转
                      } else if(isSuccess == 4){  // 登录失败
                        this.openOff3 = true;
                      } else {  // 登录失败
                        this.openOff3 = true;
                      }
                   } else {

                   }
             });
```

## 编译

下载 node.js ，然后下载 npm ，之后正常编译即可运行

``` bash
npm install
npm run dev
```

## 不足

虽然前端配置了可以跨域，但是前后端分离，后端只负责返回 json 格式数据，不负责页面跳转。前端暂时没有实现带有权限的页面跳转。稍后会补上权限管理的部分。