web前端商城项目总结(上)

发布时间:2024-08-19 09:01

项目架构(确定使用框架)

首先是用的Vue框架进行组件化开发,Element框架支撑,js,css,html的代码逻辑通过ajax进行接口的请求调用,达到获取服务器数据的目的。再完美的渲染的页面。

项目前(定制开发规范)

   团队协作/开发

           规范/统一

           开发规范

           命名规范 (方法名,变量名 。。)

           封装规范 (功能,参数,返回值,如何使用 。。。)

           项目规范(主要模块,功能模块 ,组件,路劲,位置。。。)

   开发项目

           每日进度例会 / 检查

           进度汇报

           项目拆分

           领取任务

           时间预估

           团队内代码拼比/审核

技术栈

web前端商城项目总结(上)_第1张图片

项目中

一 首先要解决跨域的问题,要不什么数据都拿不到(Proxy处理跨域),创建一个vue.config.js文件,配置一下proxy开发环境。

代码如下:

//处理跨域
module.exports = {
    publicPath: "./",
    devServer: {
        open: true,
        proxy: {
            '': {
                target: "http://39.100.7.70:81/",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ""
                }
            }
        }
    }
};

API 的封装

       要把常用的API拆分出去最后导入main.js中就可以了

web前端商城项目总结(上)_第2张图片

鉴权(页面权限)

     本项目使用的本地 + vuex + 全局路由鉴权,怎么存,怎么看在这里就不展示了一下是路由鉴权的技术代码展示!

//全局路由拦截
router.beforeEach(function (to, from, next) {
  if (/(collect|addOrder|shoppingCart|order)/.test(to.path)) {
    if (!store.state.userName) {
      next(false)
    } else {
      next()
    }
  } else {
    next()
  }
})

四 路由懒加载

	{
		path: '/user',
		name: 'User',
		component: () => import( /* webpackChunkName: "user" */ '../components/user/user.vue'),
		meta: {
			bread: ['用户管理管理']
		}
	},

 

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号