DSSHOP 前端开发指南

首先你必须掌握css、html、js，然后你得了解vue 该指南不做过多的技术层面介绍，只对一些项目中已经封装的方法/类进行介绍，以方便在需要时快速应用，减少自己写代码的时间

命名规范

class的命名

• 用​-​拼接每个单词
• 最外层以​-box​命名
• 列表以​-item​命名

例如：

.main-box{
    .main-item{
        .main-right{

        }
        .main-right{

        }
    }
}

js方法名/变量命名

• 首字母小写驼峰命名法
• 能用​get``set​的就用​get``set​

Vue项目结构

以下为常规目录结构
项目作者把js、css写到单独的目录下，这样看起来干净，写css和js更快，你也可以直接写vue文件中
components的vue文件首字母大写，用于区分它是组件

.
└── product
    ├── components
    │   ├── js
    │   │   ├── detail.js
    │   ├── scss
    │   │   ├── detail.scss
    │   ├── Detail.vue
    ├── js
    │   ├── list.js
    ├── scss
    │   ├── list.scss
    └── list.vue

后台

时间格式：timestamp | parseTime('{y}-{m}-{d} {h}:{i}')

• 时间格式，可选。默认为{y}-{m}-{d}，年为"y"，月为"m"，日为"d"，时为"h"，分为"i"，秒为"s"，格式可以自由搭配

<template>
	<view>
		<view>
			时间为：{{time}}
		</view>
	</view>
</template>

<script>
    export { parseTime } from '@/utils'
	export default{
		data() {
			return {
				time: null,
				timestamp: '1581170184'
			}
		},
		onLoad() {
			this.time = parseTime(this.timestamp, 'yyyy-mm-dd');
		}
	}
</script>

获取不同尺寸的图片：img | smallImage(150)

• 默认支持的尺寸：80, 150, 200, 250, 300, 350， 可通过上传时的​specification ​控制生成的图片尺寸

<template>
	<view>
		<view>
			<img :src="img | smallImage(150)">
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				img: '1581170184.jpg'
			}
		},
		onLoad() {
			this.img = smallImage(this.img, 150);
		}
	}
</script>

排序

• 排序为前端动态控制，使用方法请先了解​element​组件，以下只对如何使用说明，不进行组件基础说明
• 请先确认API已经实现排序功能
• 首先在需要排序的​el-table-column​添加​sortable="custom" prop="id"​

<el-table-column label="编号" sortable="custom" prop="id">
<template slot-scope="scope">
	<span>{{ scope.row.id }}</span>
</template>
</el-table-column>

• 方法中添加

// 重新获取API数据
handleFilter() {
	this.listQuery.page = 1
	this.getList()
},
// 排序
sortChange(data) {
	const { prop, order } = data
	if (order === 'ascending') {
	this.listQuery.sort = '+' + prop
	} else {
	this.listQuery.sort = '-' + prop
	}
	this.handleFilter()
},

上传参数说明

imgMasterData: {
	type: 1,
	size: 1024 * 1024 * 2,
	specification: [80, 150, 200, 250, 300, 350]
},

根据角色定制不同的后台首页

• 默认后台为统一首页模式，如需要根据不同角色开发不同的后台首页，请修改​admin\src\views\Dashboard\index.vue​

created() {
	if (!this.roles.includes('admin')) {
		this.currentRole = 'editorDashboard'
	}
}

uni-app

登录验证：loginCheck

<script>
	export default{
		onLoad() {
			this.loginCheck()
		},
		methods:{
			...mapMutations(['loginCheck']),
		}
	}
</script>

登录状态获取：hasLogin

<script>
	export default{
		onLoad() {
			if (this.hasLogin){
			}
		},
		computed:{
			...mapState(['hasLogin'])
		},
	}
</script>

获取字符串中url的参数

<script>
	import { urlToObj } from 'utils'
	export default{
		onLoad(options) {
			const q = decodeURIComponent(options.q)
			const url = urlToObj(q)
		}
	}
</script>

PC端（nuxt）

时间格式：timestamp | moment('YYYY-MM-DD HH:mm:ss')

• 时间格式:YYYY.MM.DD HH:mm:ss，年为"YYYY"，月为"MM"，日为"DD"，时为"HH"，分为"mm"，秒为"ss"，格式可以自由搭配
• 参考：vue-moment
• 参考：moment.js

<template>
	<view>
		<view>
			时间为：{{time}}
		</view>
	</view>
</template>
<style lang='scss'>
  .avatar-uploader .el-upload{
    width: 250px;
    height: 250px;
  }
</style>
<script>
    export { parseTime } from '@/utils'
	export default{
		data() {
			return {
				time: null,
				timestamp: '1581170184'
			}
		},
		onLoad() {
			this.time = parseTime(this.timestamp, 'yyyy-mm-dd');
		}
	}
</script>

多图/文件上传控件

示例：

<template>
	<insert-image :fileList="fileList" @getFile="getFile"/>
</template>
<script>
import InsertImage from '@/components/Upload/InsertImage'
export default {
  components: {
    InsertImage
  },
  data() {
    return {
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
	}
  },
  methods: {
    getFile(res){
      	console.log('res', res)
    }
  }
}
</script>

单图/文件上传控件

示例：

<template>
	<avatar-image :file="file" @getFile="getFile"/>
</template>
<script>
import AvatarImage from '@/components/Upload/AvatarImage'
export default {
  components: {
    AvatarImage
  },
  data() {
    return {
      file: '',
	}
  },
  methods: {
    getFile(res){
		this.file = res.response
      	console.log('res', res)
    }
  }
}
</script>

配置文件

NODE_ENV=prod	//当前环境
APP_DEBUG=true	//调试模式
APP_NAME=DSSHOP商城-跨终端商城解决方案	//项目名称
APP_SHORT_NAME= DSSHOP	//项目简称
APP_DESCRIPTION=免费开源可商用，快速搭建属于自己的独立商城网店系统，一次搭建适配多终端	//项目全局描述
APP_KEYWORD=商城网店系统|商城|网店|免费商城|免费网店	// 项目全局关键字
APP_ICP=浙ICP备110120119	// 项目备案号
API_URL_BROWSER=http://dsshop.test/api/v1/app/	//项目访问地址，暂时没有使用
API_URL=http://dsshop.test/api/v1/app/	//项目api地址
PROJECT_KEY=base64:szoJ3mSx/5U7zOsJfU7s4pSahiwdh01x6badmz5FtCM=	//前端密钥
CACHE_PR=DSSHOP-PC-	//项目缓存前缀
IBS_KEY=	//腾讯地图地图密钥，可通过https://lbs.qq.com注册创建应用

$nuxt

nuxt使用​store​或​route​推荐使用$nuxt

#vue中使用：
this.$store.state.hasLogin
#nuxt中使用：
$nuxt.$store.state.hasLogin

某个链接需要权限验证时

if(!$nuxt.$store.state.hasLogin){
	$nuxt.$store.commit('loginCheck')
	return false
}

修改路由为user/id模式

在​uesr​目录下新建一个​_id.vue​文件，然后在​_id.vue​中用​params​接收参数

修改项目主色调

• 修改​web\assets\css\main.scss​的​$font-color-main​
• 修改​web\nuxt.config.js​的​loading​的​color​

export default {
  loading: {
    color: '#fa524c',
    height: '2px'
  },
  ....
}

根据element-ui设置主题，然后替换掉​web\assets\theme​目录下的所有文件

缓存

使用了store.js

// 设置缓存
this.store.set('user', { name:'Marcus' })

// 读取缓存
this.store.get('user')

// 删除缓存
this.store.remove('user')

// 清空缓存
this.store.clearAll()

// 循环遍历所有存储的值
this.store.each(function(value, key) {
	console.log(key, '==', value)
})