基于vue+element-ui的手机交易网站的设计与实现

   该项目是我的大学毕业设计，它是一项前端基于vue+element-ui，后台基于springboot+mybaitis的前后端分离项目。因为本人着重于前端，因此后端的代码比较简单，不在赘述。因为是第一次独立完成一个项目，因此有很多地方需要改进，还需看客海涵。

   首先，手机交易网站主要分为前台客户浏览功能模块以及后台管理员管理两大部分：前台客户浏览界面包含手机分类、手机详情浏览、添加购物车、官方配件、地址管理、地址管理、订单支付等功能；后台管理员管理功能模块中的功能包含查看数据以及添加数据等功能；手机交易网站使用的客户分为游客、用户和管理员三类。

  其次，因为该项目是前后端分离，所以存在跨域请求数据，因此我使用了axios以及webpack中的proxyTable进行跨域请求数据。

  具体代码如下：

created(){
        var url = this.HOME + '/admin/findalladmin';
        this.$axios.get(url)
          .then(res => {
          console.log(res.data.list);
        this.adminList = res.data.list;
        this.loading = false;
      }).catch(error => {
          console.log(error);
      });
      },

  vue在项目中config文件下的index文件中配置如下（9003是后台服务器端口号）：

dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: { //axios跨域处理
      '/api': {
        target: 'http://localhost:9003',
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    },

   因为在项目开发过程中css样式是比较头疼的一件事，因此，我的项目样式是基于坚果网站的样式。

   最后，在本项目中，需要一些权限的处理，因为该项目中的一些操作只能是在用户登录之后方可进行，比如将商品加入购物车、地址管理等。因此，我使用了cookie标记。cookie.js代码如下：

  

/*用export把方法暴露出来*/
/*设置cookie*/
export function setCookie(c_name,value,expire) {
  var date=new Date()
  date.setSeconds(date.getSeconds()+expire)
  document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()
  console.log(document.cookie)
}

/*获取cookie*/
export function getCookie(c_name){
  if (document.cookie.length>0){
    let c_start=document.cookie.indexOf(c_name + "=")
    if (c_start!=-1){
      c_start=c_start + c_name.length+1
      let c_end=document.cookie.indexOf(";",c_start)
      if (c_end==-1) c_end=document.cookie.length
      return unescape(document.cookie.substring(c_start,c_end))
    }
  }
  return ""
}

/*删除cookie*/
export function delCookie(c_name){
  setCookie(c_name, "", -1)
}

  调用方法：

 mounted(){
      /*页面挂载获取cookie，如果存在username的cookie，则跳转到主页，不需登录*/
      if(getCookie('userName')){
        this.$router.push('/')
      }
    },

项目最终效果图如下：

 项目前端完整代码地址：https://gitee.com/yangnan12345/vue-bishe