DSSHOP 前端開發(fā)指南

首先你必須掌握css、html、js，然后你得了解vue 該指南不做過多的技術(shù)層面介紹，只對一些項目中已經(jīng)封裝的方法/類進行介紹，以方便在需要時快速應(yīng)用，減少自己寫代碼的時間

命名規(guī)范

class的命名

• 用?-?拼接每個單詞
• 最外層以?-box?命名
• 列表以?-item?命名

例如：

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

        }
        .main-right{

        }
    }
}

js方法名/變量命名

• 首字母小寫駝峰命名法
• 能用?get``set?的就用?get``set?

Vue項目結(jié)構(gòu)

以下為常規(guī)目錄結(jié)構(gòu)
項目作者把js、css寫到單獨的目錄下，這樣看起來干凈，寫css和js更快，你也可以直接寫vue文件中
components的vue文件首字母大寫，用于區(qū)分它是組件

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

后臺

時間格式：timestamp | parseTime('{y}-{m}-zh044qz {h}:{i}')

• 時間格式，可選。默認(rèn)為{y}-{m}-k4avbfy，年為"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)

• 默認(rèn)支持的尺寸：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>

排序

• 排序為前端動態(tài)控制，使用方法請先了解?element?組件，以下只對如何使用說明，不進行組件基礎(chǔ)說明
• 請先確認(rèn)API已經(jīng)實現(xiàn)排序功能
• 首先在需要排序的?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數(shù)據(jù)
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()
},

上傳參數(shù)說明

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

根據(jù)角色定制不同的后臺首頁

• 默認(rèn)后臺為統(tǒng)一首頁模式，如需要根據(jù)不同角色開發(fā)不同的后臺首頁，請修改?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>

登錄狀態(tài)獲?。篽asLogin

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

獲取字符串中url的參數(shù)

<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	//當(dāng)前環(huán)境
APP_DEBUG=true	//調(diào)試模式
APP_NAME=DSSHOP商城-跨終端商城解決方案	//項目名稱
APP_SHORT_NAME= DSSHOP	//項目簡稱
APP_DESCRIPTION=免費開源可商用，快速搭建屬于自己的獨立商城網(wǎng)店系統(tǒng)，一次搭建適配多終端	//項目全局描述
APP_KEYWORD=商城網(wǎng)店系統(tǒng)|商城|網(wǎng)店|免費商城|免費網(wǎng)店	// 項目全局關(guān)鍵字
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注冊創(chuàng)建應(yīng)用

$nuxt

nuxt使用?store?或?route?推薦使用$nuxt

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

某個鏈接需要權(quán)限驗證時

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

修改路由為user/id模式

在?uesr?目錄下新建一個?_id.vue?文件，然后在?_id.vue?中用?params?接收參數(shù)

修改項目主色調(diào)

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

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

根據(jù)element-ui設(shè)置主題，然后替換掉?web\assets\theme?目錄下的所有文件

緩存

使用了store.js

// 設(shè)置緩存
this.store.set('user', { name:'Marcus' })

// 讀取緩存
this.store.get('user')

// 刪除緩存
this.store.remove('user')

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

// 循環(huán)遍歷所有存儲的值
this.store.each(function(value, key) {
	console.log(key, '==', value)
})